uniProject/components/scroll-list-card/scroll-list-card.vue

<template>
  <view class="scroll-list-card mobile-card-box">
    <!--   title     -->
    <text class="mobile-card-title">{{
      data.ksName === null ? "" : data.ksName
    }}</text>
    <!--   content   -->
    <view class="mobile-card-row" style="font-size: 28rpx">
      时间：{{ data.ksStartTime === null ? "" : data.ksStartTime }}-{{
        data.ksEndTime === null ? "" : data.ksEndTime
      }}
    </view>
    <view class="mobile-card-row">
      <text>总分：{{ data.ksScore === null ? "" : data.ksScore }}</text>
      <text class="card-score-box"
        >学分：{{ data.credit === null ? "" : data.credit }}</text
      >
    </view>
    <view class="mobile-card-row">
      <text>及格分：{{ data.okScore === null ? "" : data.okScore }}</text>
      <text class="card-score-box"
        >考试时长：{{ data.totalTm === null ? "" : data.totalTm }}分钟</text
      >
    </view>
    <!--    button    -->
    <template v-for="item in btns" :key="item.status">
      <button
        class="lli-btn"
        @click="btnClick(item)"
        v-if="item.show"
        :key="item.status"
        :disabled="data.disabled"
      >
        {{ item.text }}
      </button>
    </template>
  </view>
</template>

<script setup>
import { toRefs, ref, computed } from "vue";

const props = defineProps({
  data: {
    type: Object,
  },
});
const { data } = toRefs(props);

const btns = computed(() => [
  {
    status: 0,
    btnType: "kaoshi",
    text: "未开始",
    show: data.value.status === 0,
  },
  {
    status: 1,
    btnType: "kaoshi",
    text: "开始考试",
    show: data.value.status === 1,
  },
  {
    status: 3,
    btnType: "kaoshi",
    text: "考试中",
    show: data.value.status === 3,
  },
  {
    status: 2,
    btnType: "kaoshi",
    text: "再次考试",
    show: data.value.status === 2,
  },
  {
    status: 4,
    btnType: "kaoshi",
    text: "已结束",
    show: data.value.status === 4,
  },
  {
    status: 5,
    btnType: "kaoshi",
    text: "报名",
    show: data.value.status === 5,
  },
  {
    status: 6,
    btnType: "kaoshi",
    text: "报名审核中",
    show: data.value.status === 6,
  },
  {
    status: 7,
    btnType: "kaoshi",
    text: "审核未通过",
    show: data.value.status === 7,
  },
  {
    status: 8,
    btnType: "kaoshi",
    text: "等待人工评分",
    show: data.value.status === 8,
  },
]);
</script>

<style lang="scss" scoped>
.mobile-card-box {
  box-sizing: border-box;
  margin: 0 30rpx 10rpx;
  border-bottom: 2rpx solid #f2f1f2;
  padding-bottom: 30rpx;
}

.mobile-card-title {
  color: #333;
  font-size: 32rpx;
  font-weight: 500;
  margin: 24rpx 0 24rpx 0;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  text-align: justify;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 48rpx;
}

// 行
.mobile-card-row {
  margin-bottom: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  text {
    font-size: 28rpx;
    line-height: 40rpx;
  }

  // 得分
  .mobile-card-score {
    font-size: 40rpx;
    color: #f10a0a;
  }

  // 分数（有最小宽度）
  .card-score-box {
    min-width: 240rpx;
    text-align: left;
  }
}

// 按钮
.mobile-card-btn {
  width: 60%;
  height: 80rpx;
  line-height: 80rpx;
  margin: 50rpx auto;
  background: linear-gradient(0deg, #436aff 0%, #234ff7 100%);
  border-radius: 80rpx;
  display: block;
}
</style>