格式化

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

@@ -1,160 +1,169 @@
 <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>
+  <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";
+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,
-		},
-	])
+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-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-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;
+// 行
+.mobile-card-row {
+  margin-bottom: 32rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
 
-		text {
-			font-size: 28rpx;
-			line-height: 40rpx
-		}
+  text {
+    font-size: 28rpx;
+    line-height: 40rpx;
+  }
 
-		// 得分
-		.mobile-card-score {
-			font-size: 40rpx;
-			color: #F10A0A;
-		}
+  // 得分
+  .mobile-card-score {
+    font-size: 40rpx;
+    color: #f10a0a;
+  }
 
-		// 分数（有最小宽度）
-		.card-score-box {
-			min-width: 240rpx;
-			text-align: left;
-		}
-	}
+  // 分数（有最小宽度）
+  .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>
+// 按钮
+.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>