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

<template>
  <div v-if="props.item" class="logic-intro-item">
    <div v-if="props.item?.texts?.length" class="logic-intro-description">
      <p v-for="(item, index) in props.item?.texts" :key="index">{{ item }}</p>
    </div>
    <div class="logic-intro-sign flex-center-v">
      <div class="logic-intro-sign-text">{{ props.item.notes }}</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, PropType } from 'vue'
interface itemInterface {
  tplType: string
  texts: string[]
  notes: string
}
const props = defineProps({
  item: {
    type: Object as PropType<itemInterface>
  }
})
</script>
<style lang="scss" scoped>
  .logic-intro-item {
    position: relative;
    overflow: hidden;
    background: #fff;
    padding: 10px;
    color: #fff;
    background: linear-gradient(93deg, #367cf6 0%, #2c5ef6 100%);
    margin-bottom: 10px;
    border-radius: 10px;
    font-size: 15px;
    padding: 10px;
    .logic-intro-sign {
      padding: 10px;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    }
    .logic-intro-sign-text {
      font-size: 10px;
      color: #ffeaa9;
      border-radius: 100px;
      padding: 0 15px;
      width: 100%;
      text-align: center;
    }
    .logic-intro-description {
      margin-bottom: 27px;
      line-height: 1.6;
      font-size: 15px;
    }
  }
</style>