数据下载界面 进度背景色，下载详情页面进度 背景色，状态字体颜色和显示（uni-table 目前存在真机兼容问题）

pages/work/download/DownloadDetail.uvue

@@ -1,10 +1,7 @@
 <template>
-	<scroll-view scroll-y class="container">
-		<!-- 标题Banner -->
-		<!-- <view class="banner">
-			<text class="banner-title">数据下载详情</text>
-		</view> -->
-
+	<!-- #ifdef APP -->
+	<scroll-view style="flex:1">
+	<!-- #endif -->
 		<!-- 报告基础信息 -->
 		<view class="section">
 			<view class="info-item">
@@ -24,15 +21,27 @@
 					<uni-td class="grid-text">{{item.title2}}</uni-td>
 					<uni-td class="grid-text">{{item.title3}}</uni-td>
 				</uni-tr>
-				<uni-tr class="section-title" v-for="(taskProcess : TaskProcess,index2 : number) in taskProcessList" :key="index2"
-					@click="enterProcess(taskProcess.id)">
+				<uni-tr class="section-title" v-for="(taskProcess : TaskProcess,index2 : number) in taskProcessList"
+					:key="index2" @click="enterProcess(taskProcess.id)">
 					<uni-td class="grid-text">{{taskProcess.name}}</uni-td>
-					<uni-td class="grid-text my-radius" :class="{ 'complete': taskProcess.state === 'complete', 'error': taskProcess.state === 'error' }">{{taskProcess.step}}/{{taskProcess.num}}</uni-td>
-					<uni-td class="grid-text"></uni-td>
+					<uni-td class="grid-text my-radius"
+						:class="{
+							'bg-green': taskProcess.state === 'done',
+							'bg-yellow': taskProcess.state === 'doing',
+							'bg-black': taskProcess.state === 'waiting',
+							'bg-red': taskProcess.state === 'error'
+						  }">{{taskProcess.step}}/{{taskProcess.num}}</uni-td>
+					<uni-td class="grid-text">
+						<text :class="{
+							'ft-red': taskProcess.state === 'error'
+						  }">{{ taskProcess.state === 'error' ? "检验失败" : "" }}</text>
+					</uni-td>
 				</uni-tr>
 			</uni-table>
 		</view>
+	<!-- #ifdef APP -->
 	</scroll-view>
+	<!-- #endif -->
 </template>
 
 <script setup>
@@ -59,17 +68,17 @@
 	}
 
 	type TaskProcess = {
-		id: number
-		name: string
-		num: number
-		step: number
-		state: string
+		id : number
+		name : string
+		num : number
+		step : number
+		state : string
 	}
 
-	const taskProcessList: Array<TaskProcess> = [
-		{ id: 1, name: "前底-外侧", num: 5, step: 5, state: "complete"}, 
-		{ id: 2, name: "后底-外侧", num: 3, step: 3, state: "error" }, 
-		{ id: 3, name: "简段-外侧", num: 5, step: 2, state: "non-done" }
+	const taskProcessList : Array<TaskProcess> = [
+		{ id: 1, name: "前底-外侧", num: 5, step: 5, state: "done" },
+		{ id: 2, name: "后底-外侧", num: 3, step: 3, state: "error" },
+		{ id: 3, name: "简段-外侧", num: 5, step: 2, state: "doing" }
 	];
 
 	onLoad((options) => {
@@ -189,17 +198,28 @@
 		overflow: hidden;
 		margin-left: 30rpx;
 	}
-	
+
 	.my-radius {
 		border-radius: 10rpx;
 	}
-	
-	.complete {
+
+	.bg-green {
 		background-color: seagreen;
 	}
 	
-	.error {
-		background-color: orangered;
+	.bg-yellow {
+		background-color: yellow;
 	}
 	
+	.bg-black {
+		background-color: #102a43;
+	}
+	
+	.bg-red {
+		background-color: red;
+	}
+	
+	.ft-red {
+		color: red;
+	}
 </style>