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

<template>
  <div v-if="props.item" class="logic-assess-item padding-bottom-40">
    <div class="flex-center padding-top-20 padding-bottom-20">
      <img v-if="props.item?.image" :src="props.item?.image" alt="" class="w-50">
      <img v-else src="@/assets/healthy/icon-end-answer-default.png" alt="" class="w-50">
    </div>
    <div class="logic-assess-end-answer-tips">
      {{ props.item?.tips }}
    </div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, PropType } from 'vue'
interface itemInterface {
  tplType: string
  image: string
  tips: string
}
const props = defineProps({
  item: {
    type: Object as PropType<itemInterface>
  }
})
</script>
<style lang="scss" scoped>
  .logic-assess-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    padding: 10px;
    .logic-assess-end-answer-tips {
      color: #5a72f7;
      font-weight: bold;
      text-align: center;
      font-size: 16px;
    }
  }
</style>