education-front/pages_order/thesis/thesisInfoView.vue

<template>
  <view class="info">
    <view class="title" v-if="data.title">{{ data.title }}</view>
    <view class="flex process" v-if="difficulty">
      <view>难度</view>
      <view class="flex star">
        <uv-icon v-for="(item, index) in new Array(difficulty).fill(1)" :key="index" name="star-fill" color="#FFFFFF" size="14rpx"></uv-icon>
      </view>
    </view>
    <view class="content" v-if="data.shortTitle">
      {{ data.shortTitle || '' }}
    </view>
    <view class="flex tag" v-if="tags.length">
      <view class="tag-item" v-for="(item, index) in tags" :key="index">
        {{ item }}
      </view>
    </view>
    <view class="btn">
      <image class="btn-img" src="@/static/image/icon-detail.png" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      difficulty() {
        const num = parseInt(this.data?.process)

        return isNaN(num) ? 0 : num
      },
      tags() {
        return this.data?.tag?.split?.('、') || []
      }
    },
  }
</script>

<style scoped lang="scss">
  .info {
    padding: 30rpx 24rpx 24rpx 24rpx;
    font-size: 0;

    .title {
      font-size: 32rpx;
      font-weight: 700;
      color: #6851A7;
    }

    .process {
      margin-top: 7rpx;
      column-gap: 8rpx;
      display: inline-flex;
      padding: 3rpx 16rpx;
      font-size: 16rpx;
      font-weight: 600;
      color: #FFFFFF;
      background: #6851A7;
      border-radius: 13rpx;

      .star {
        column-gap: 6rpx;
      }
    }

    .content {
      margin-top: 24rpx;
      font-size: 20rpx;
      font-weight: 500;
      color: #3E3A39;
    }

    .tag {
      margin-top: 16rpx;
      justify-content: flex-start;
      flex-wrap: wrap;
      column-gap: 12rpx;
      row-gap: 8rpx;

      &-item {
        padding: 4rpx 10rpx;
        font-size: 16rpx;
        font-weight: 700;
        color: #FFFFFF;
        background: rgba($color: #6851A7, $alpha: 0.59);
        border-radius: 4rpx;
      }
    }

    .btn {
      margin-top: 16rpx;
      width: 190rpx;
      height: auto;
      &-img {
        width: 100%;
        height: auto;
      }
    }
  }
</style>