distributor-h5/src/components/logic/Suggestions.vue

<template>
  <div v-if="props.item" class="advise-item logic-suggestions-item">

    <div class="advise-name">
      <div v-html="props.item.mainTitle"></div>
      <!-- <span>{{ props.item.title }}</span> -->
    </div>
    <div class="tips__subtitle">{{ props.item.subheading }}</div>
    <div class="tips__list">
      <div class="tip" v-for="(child, idx) in props.item.content" :key="idx">
        <div class="tip__title">
          <span class="underline">{{ child.contentTitle }}</span>
        </div>
        <div class="tip__item" v-for="(desc, idx2) in child.contentTexts" :key="idx2">{{ desc }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, PropType } from 'vue'
interface itemInterface {
  tplType: string
  mainTitle: string
  subheading: string
  content: ContentItem[]
}
interface ContentItem {
  contentTitle: string
  contentTexts: string[]
}
const props = defineProps({
  item: {
    type: Object as PropType<itemInterface>
  }
})
</script>
<style lang="scss" scoped>
.logic-suggestions-item {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 10px;
  padding-top: 0;

  margin-bottom: 10px;
  border-radius: 10px;
  font-size: 15px;
  
  .tip__title {
    font-size: 17px;
    font-weight: bold;
    color: #F3B345;
    line-height: 1;
    text-align: center;
    .underline {
      background: linear-gradient(to bottom, transparent 65%, #f9ca7880 65% 90%, transparent 90%);
    }
  }
  .tips__title {
    display: inline-block;
    width: calc(100% - 125px);
  }
  .tips__subtitle {
    margin: 0 auto;
    color: #F1B546;
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    background: linear-gradient(to right,transparent 10%, rgba(255, 239, 208, 0.549), transparent 90%);
  }
  .tips__title--large {
    font-size: 24px;
    display: inline-block;
    width: calc(100% - 125px);
    background: linear-gradient(to bottom, transparent 80%, rgba(253, 193, 165, 0.77) 80% 100%);
  }
  .tips__list {
    // margin-top: 80px;
    padding-bottom: 20px;
  }
  .tip__item {
    margin: 10px 15px;
    font-size: 12px;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 23px;
    
  }
  .underline {
    background: linear-gradient(to bottom, transparent 65%, #ffedd1c3 65% 90%, transparent 90%);
  }
}
</style>