QTApp_800/pages/work/download/DownloadList.uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1" scroll-y class="container">
	<!-- #endif -->
	    <view class="info-row" >
			<button class="btn" @click="download()">
				下载数据
			</button>
			<button class="btn" @click="upload()">
				上传数据
			</button>
		</view>	 
	
		<view class="download-card" v-for="item in downloads" :key="item.pdid">
		    <view class="info-row">
		    	<text class="label">工作令：</text>
		    	<text class="value">{{ item.workorder }}</text>
		    </view>
			<view class="info-row">
				<text class="label">产品名称：</text>
				<text class="value">{{ item.productNo }}</text>
			</view>
			<view class="info-row">
				<text class="label">图号：</text>
				<text class="value">{{ item.graphid }}</text>
			</view>
			<view class="info-row">
				<text class="label">路卡号：</text>
				<text class="value">{{ item.cardno }}</text>
			</view>
			<view class="info-row">
				<text class="label">工艺编号：</text>
				<text class="value">{{ item.processno }}</text>
			</view>
			<view class="info-row">
				<text class="label">版本号：</text>
				<text class="value">{{ item.ver }}</text>
			</view>
			<view class="info-row">
				<text class="label">最近更新时间：</text>
				<text class="value">{{ item.updatetime }}</text>
			</view>
			<view class="info-row">
				<text class="label">进度：</text>
				<text class="value">{{ item.progress }}</text>
			</view>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	import {
		ref
	} from 'vue'
	
	const downloads = ref([{
		pdid:1,
		workorder:"632-P-01",
		graphid:"HBJ0100-00",
		cardno: "LK20230707070012",
		processno: "Pb/XXX-E11",
		ver: "A.1",
		updatetime: "2025-06-23",
		progress: "1/3"
		
	},{
		pdid:2,
		workorder:"712-SY-10-6",
		graphid:"1XC002-00",
		cardno: "LK20250215003",
		processno: "Pb/XXX-E11",
		ver: "B.1",
		updatetime: "2025-08-25",
		progress: "0/4"		
	}]);
	const download = () => {
		
	}  
	const upload = () => {
		
	} 
	
</script>

<style>
  .container {
  	padding: 40rpx;
  	background-color: #f5f7fa;
  	min-height: 100vh;
  	box-sizing: border-box;
  }
  .download-card {
  	background: #ffffff;
  	border-radius: 20rpx;
  	padding: 24rpx 32rpx;
  	box-shadow: 0 8rpx 15rpx rgba(0, 43, 92, 0.1);
  	display: flex;
  	flex-direction: column;
  	gap: 16rpx;
  	margin-bottom: 20rpx;
  	margin-top: 40rpx;
  }
  /* 信息行 */
  .info-row {
  	display: flex;
  	flex-direction: row;
  	gap: 10rpx;
  	font-size: 28rpx;
  	color: #33475b;
  	align-items: center;
  }
  
  .label {
  	font-weight: 600;
  	color: #102a43;
  	min-width: 100rpx;
  }
  
  .value {
  	flex: 1;
  	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
  }
  .btn {
  	align-self: flex-end;
  	background-color: #0000ff;
  	color: #fff;
  	border: none;
  	border-radius: 32rpx;
  	padding: 5rpx 30rpx;
  	font-size: 24rpx;
  	font-weight: 700;
  	cursor: pointer;
  	transition: background-color 0.3s ease;
	margin-top:30rpx;
  }
</style>