menduner/src/views/enterprise/purchasePackage/components/packagesDetail.vue

<!-- 套餐详情 -->
<template>
  <div v-if="info" class="packagesDetail mt-5">
    <div v-if="info.headers" class="detailItem headers">
      <template
        v-for="item in info.headers"
        :key="item.key"
      >
        <div v-if="item.key == 'VIP套餐'">{{ item.label }}</div>
        <div v-else>{{ item.label }}</div>
      </template>
    </div>
    <template v-if="info.contrastList">
      <div
        v-for="item in info.contrastList"
        :key="item.key"
        class="detailItem"
      >
        <div style="font-size: 14px; font-weight: bold;">{{ item.label }}</div>
        <div style="font-size: 14px; font-weight: normal;">
          <span v-if="info?.returnData?.ordinary[item.key] === true"><v-icon size="24" icon="mdi-check"></v-icon></span>
          <span v-else-if="info?.returnData?.ordinary[item.key] === false">x</span>
          <span v-else>{{ info?.returnData?.ordinary[item.key] }}</span>
        </div>
        <div style="font-size: 14px; font-weight: bold; color: #d8a41a;">
          <span v-if="info?.returnData?.vip[item.key] === true"><v-icon size="24" icon="mdi-check"></v-icon></span>
          <span v-else-if="info?.returnData?.vip[item.key] === false">x</span>
          <span v-else>{{ info?.returnData?.vip[item.key] }}</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
defineOptions({name: 'personal-purchasePackage-packagesDetail'})
defineProps({
  info: {
    type: Object,
    default: () => {}
  }
})
</script>
<style lang="scss" scoped>
.packagesDetail { // 套餐详情
  width: 710px;
  margin: 0 auto;
  border: 1px solid #f3f3f3;
  // border-radius: 12px;
  background-color: var(--default-bgc);
  background-color: #f2f4f742;
  .detailItem {
    display: flex;
    div {
      height: 46px;
      line-height: 46px;
      width: 33%;
      text-align: center;
      font-size: 14px;
    }
  }
  .headers {
    background-color: var(--default-bgc);
    div {
      color: #666 !important;
      font-size: 16px !important;
      font-weight: bold !important;
      text-align: center;
    }
  }
}
</style>