修改界面的样式

pages/pda/components/workCard.vue

@@ -1,105 +1,106 @@
 <template>
   <view class="card_box" @click="handleDetail">
-    <view class="item_box rx-sc" v-if="item.workOrderType != 2">
-      <view class="round" v-if="item.index">{{ item.index }}</view>
-      <view class="orderId">{{ item.code }} </view>
-    </view>
-
-    <view class="item_box rx-sc" v-if="item.workOrderType == 2">
-      <view class="round" v-if="item.index">{{ item.index }}</view>
-      <view class="orderId">{{ item.outsourceCode }} </view>
-    </view>
-
-    <view class="item_box rx-bc" v-if="item.workOrderType == 2">
-      <view class="item_one rx-sc">
-        <view class="lable">委外名称：</view>
-        <view>{{ item.outsourceName }}</view>
+    <!-- 卡片头部：单号 + 状态标签 -->
+    <view class="card-header">
+      <view class="header-left">
+        <view class="round" v-if="item.index">{{ item.index }}</view>
+        <view class="orderId" v-if="item.workOrderType != 2">{{ item.code }}</view>
+        <view class="orderId" v-if="item.workOrderType == 2">{{ item.outsourceCode }}</view>
       </view>
-    </view>
-
-    <view class="item_box rx-bc" v-if="item.workOrderType == 2">
-      <view class="item_one rx-sc">
-        <view>工单来源：</view>
-        <view>{{ item.code }}</view>
+      <view class="status-tag" :class="'status-' + item.status">
+        {{ statusList[item.status] }}
       </view>
     </view>
 
-    <view class="item_box rx-bc">
-      <view class="item_one perce50 rx-sc">
-        <view class="lable">产品编码：</view>
-        <view>{{ item.productCode }}</view>
+    <!-- 委外信息（仅委外工单显示） -->
+    <view class="outsource-section" v-if="item.workOrderType == 2">
+      <view class="info-row">
+        <text class="info-label">委外名称</text>
+        <text class="info-value">{{ item.outsourceName }}</text>
       </view>
-      <view class="item_one perce50 rx-sc">
-        <view>名称：</view>
-        <view>{{ item.productName }}</view>
+      <view class="info-row">
+        <text class="info-label">工单来源</text>
+        <text class="info-value">{{ item.code }}</text>
       </view>
     </view>
 
-    <view class="item_box rx-bc">
-      <view class="item_one perce50 rx-sc">
-        <view class="lable">牌号：</view>
-        <view>{{ item.brandNo }}</view>
+    <!-- 卡片内容区域 -->
+    <view class="card-body">
+      <view class="info-grid">
+        <view class="info-row half">
+          <text class="info-label">产品编码</text>
+          <text class="info-value text-ellipsis">{{ item.productCode }}</text>
+        </view>
+        <view class="info-row half">
+          <text class="info-label">产品名称</text>
+          <text class="info-value text-ellipsis">{{ item.productName }}</text>
+        </view>
       </view>
-      <view class="item_one perce50 rx-sc">
-        <view class="lable">批次号：</view>
-        <view class="gylx">{{ item.batchNo }}</view>
-      </view>
-    </view>
 
-    <view class="item_box rx-sc">
-      <view class="item_one perce50 rx-sc">
-        <view>型号：</view>
-        <view>{{ item.model }}</view>
+      <view class="info-grid">
+        <view class="info-row half">
+          <text class="info-label">牌号</text>
+          <text class="info-value text-ellipsis">{{ item.brandNo }}</text>
+        </view>
+        <view class="info-row half">
+          <text class="info-label">批次号</text>
+          <text class="info-value highlight text-ellipsis">{{ item.batchNo }}</text>
+        </view>
       </view>
-      <view class="item_one perce50 rx-sc">
-        <view class="lable">规格：</view>
-        <view class="gylx">{{ item.specification }}</view>
-      </view>
-    </view>
-    
-    <view class="item_box rx-bc">
-      <view class="item_one perce50 rx-sc">
-        <view class="lable">生产数量：</view>
-        <view>{{ item.formingNum }} {{ item.unit }}</view>
-      </view>
-      <view class="item_one perce50 rx-sc">
-        <view>生产重量：</view>
-        <view>{{ item.formingWeight }} {{ item.weightUnit }}</view>
-      </view>
-    </view>
 
-    <view class="item_box rx-bc">
-      <view class="item_one perce50 rx-sc">
-        <view>状态：</view>
-        <view>{{ statusList[item.status] }}</view>
+      <view class="info-grid">
+        <view class="info-row half">
+          <text class="info-label">型号</text>
+          <text class="info-value text-ellipsis">{{ item.model }}</text>
+        </view>
+        <view class="info-row half">
+          <text class="info-label">规格</text>
+          <text class="info-value highlight text-ellipsis">{{ item.specification }}</text>
+        </view>
       </view>
 
-      <view class="item_one perce50 rx-sc">
-        <view>报工类型：</view>
-        <view class="gylx">{{
-          item.singleReport == 1 ? "单个报工" : "批量报工"
-        }}</view>
+      <view class="info-grid">
+        <view class="info-row half">
+          <text class="info-label">生产数量</text>
+          <text class="info-value text-ellipsis">{{ item.formingNum }} {{ item.unit }}</text>
+        </view>
+        <view class="info-row half">
+          <text class="info-label">生产重量</text>
+          <text class="info-value text-ellipsis">{{ item.formingWeight }} {{ item.weightUnit }}</text>
+        </view>
       </view>
-    </view>
 
-    <view class="item_box rx-sc">
-      <view class="item_one rx-sc">
-        <view class="lable">工艺路线：</view>
-        <view class="gylx">{{ item.produceRoutingName }}</view>
+      <view class="info-grid">
+        <view class="info-row half">
+          <text class="info-label">报工类型</text>
+          <text class="info-value highlight text-ellipsis">{{ item.singleReport == 1 ? "单个报工" : "批量报工" }}</text>
+        </view>
+        <view class="info-row half">
+          <text class="info-label">当前工序</text>
+          <text class="info-value highlight text-ellipsis">{{ item.taskName }}</text>
+        </view>
       </view>
-    </view>
 
-    <view class="item_box rx-sc">
-      <view class="item_one perce50 rx-sc">
-        <view class="lable">生产编号：</view>
-        <view class="gylx">{{ item.productionCodes }}</view>
+      <view class="info-grid">
+        <view class="info-row full">
+          <text class="info-label">工艺路线</text>
+          <text class="info-value highlight text-ellipsis">{{ item.produceRoutingName }}</text>
+        </view>
       </view>
 
-      <view class="item_one perce50 rx-sc">
-        <view class="lable">当前工序：</view>
-        <view class="gylx">{{ item.taskName }}</view>
+      <view class="info-grid">
+        <view class="info-row full">
+          <text class="info-label">生产编号</text>
+          <text class="info-value highlight text-ellipsis">{{ item.productionCodes }}</text>
+        </view>
       </view>
     </view>
+
+    <!-- 底部箭头提示 -->
+    <view class="card-footer">
+      <text class="footer-tip">查看详情</text>
+      <image class="arrow-icon" src="/static/pda/arrow_right2.svg" mode="aspectFit"></image>
+    </view>
   </view>
 </template>
 
@@ -134,53 +135,197 @@ export default {
 
 <style lang="scss" scoped>
 .card_box {
-  width: 750rpx;
-  padding: 16rpx 32rpx;
+  width: calc(100% - 48rpx);
+  margin: 20rpx 24rpx 0;
+  padding: 0;
   box-sizing: border-box;
-  border-bottom: 2rpx solid #e1e1e1;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24rpx 28rpx;
+    background: linear-gradient(135deg, rgba(21, 122, 44, 0.06) 0%, rgba(21, 122, 44, 0.02) 100%);
+    border-bottom: 1rpx solid #f0f0f0;
 
-  .item_box {
-    margin-top: 10rpx;
+    .header-left {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
 
     .round {
-      width: 40rpx;
-      height: 40rpx;
-      line-height: 40rpx;
+      width: 48rpx;
+      height: 48rpx;
+      line-height: 48rpx;
       border-radius: 50%;
       background: $theme-color;
       color: #fff;
       text-align: center;
-      font-size: 20rpx;
+      font-size: 24rpx;
+      flex-shrink: 0;
     }
 
     .orderId {
-      color: #000;
-      font-family: PingFang HK;
-      font-size: 28rpx;
-      font-style: normal;
+      color: $uni-text-color;
+      font-size: 34rpx;
       font-weight: 600;
       margin-left: 16rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    .item_one {
-      width: 100%;
+    .status-tag {
+      flex-shrink: 0;
+      margin-left: 16rpx;
+      padding: 6rpx 20rpx;
+      border-radius: 20rpx;
       font-size: 26rpx;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 38rpx;
-      word-wrap: break-word;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+
+    .status-4 {
+      color: $uni-color-warning;
+      background: $uni-color-warning-opacity;
+    }
+    .status-5 {
+      color: $uni-color-primary;
+      background: $uni-color-primary-opacity;
+    }
+    .status-6 {
+      color: $uni-color-success;
+      background: $uni-color-success-opacity;
+    }
+    .status-7 {
+      color: $uni-color-error;
+      background: $uni-color-error-opacity;
+    }
+    .status-8 {
+      color: $uni-color-info;
+      background: rgba(144, 144, 144, 0.15);
+    }
+  }
+
+  .outsource-section {
+    padding: 16rpx 28rpx;
+    background: rgba(64, 158, 255, 0.04);
+    border-bottom: 1rpx solid #f0f0f0;
+
+    .info-row {
+      display: flex;
+      align-items: center;
+      padding: 8rpx 0;
+      overflow: hidden;
+    }
+
+    .info-label {
+      color: $uni-text-color-grey;
+      font-size: 28rpx;
+      flex-shrink: 0;
+      white-space: nowrap;
+
+      &::after {
+        content: '：';
+      }
     }
 
-    .item-right {
+    .info-value {
+      color: $uni-text-color;
+      font-size: 28rpx;
       flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .card-body {
+    padding: 16rpx 28rpx 8rpx;
+
+    .info-grid {
+      display: flex;
+      flex-wrap: nowrap;
+      margin-bottom: 4rpx;
+    }
+
+    .info-row {
+      display: flex;
+      align-items: center;
+      padding: 12rpx 0;
+      box-sizing: border-box;
+      overflow: hidden;
+
+      &.half {
+        width: 50%;
+
+        &:nth-child(odd) {
+          padding-right: 16rpx;
+        }
+        &:nth-child(even) {
+          padding-left: 16rpx;
+        }
+      }
+
+      &.full {
+        width: 100%;
+      }
     }
 
-    .gylx {
-      color: $theme-color;
+    .info-label {
+      color: $uni-text-color-grey;
+      font-size: 28rpx;
+      flex-shrink: 0;
+      margin-right: 8rpx;
+      line-height: 40rpx;
+      white-space: nowrap;
+
+      &::after {
+        content: '：';
+      }
+    }
+
+    .info-value {
+      color: $uni-text-color;
+      font-size: 28rpx;
+      flex: 1;
+      line-height: 40rpx;
+      min-width: 0;
+
+      &.highlight {
+        color: $theme-color;
+      }
+    }
+
+    .text-ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 18rpx 28rpx;
+    border-top: 1rpx solid #f5f5f5;
+
+    .footer-tip {
+      color: $uni-text-color-grey;
+      font-size: 24rpx;
     }
 
-    .perce50 {
-      width: 50%;
+    .arrow-icon {
+      width: 28rpx;
+      height: 28rpx;
+      margin-left: 8rpx;
     }
   }
 }

pages/pda/feeding/index/index.vue

@@ -10,49 +10,46 @@
 				<view class="tab_item" :class="{active: tabType == 2}" @click="handTab(2)">领料工单列表</view>
 			</view> -->
 
-			<view class="nav_box rx-sc">
-				<view class="nav_item " :class="{active: feedStatus == 0}" @click="handNav(0)">
-					未投料({{navObj.unclaimedQuantity}})</view>
-				<view class="nav_item" :class="{active: feedStatus == 1}" @click="handNav(1)">
-					已投料({{navObj.claimedQuantity}})</view>
-
+			<view class="nav_box">
+				<view class="nav_inner">
+					<view class="nav_item" :class="{active: feedStatus == 0}" @click="handNav(0)">
+						未投料({{navObj.unclaimedQuantity}})
+					</view>
+					<view class="nav_item" :class="{active: feedStatus == 1}" @click="handNav(1)">
+						已投料({{navObj.claimedQuantity}})
+					</view>
+				</view>
 
 				<view class="menu_box" @click="handleSearch">
 					<image class="menu_icon" src="~@/static/pda/menu.svg"></image>
 				</view>
-
-
-
 			</view>
 		</view>
 
 		<view class="list_box">
-
 			<u-list @scrolltolower="scrolltolower">
 				<feedCard v-if='dataList.length' :list="dataList"> </feedCard>
 
-
-				<view v-else style='margin-top: 20vh;'>
+				<view v-else class="empty-wrapper">
 					<u-empty iconSize='150' textSize='32' text='暂无工单'>
 					</u-empty>
 				</view>
-
 			</u-list>
-
-
-
 		</view>
 
-		<view class="bottom-wrapper rx-bc" v-if='feedStatus == 0'>
-			<view>
-				<checkbox v-if="!seletedAll" color="#fff" :checked="seletedAll" @tap="_seletedAll">全选</checkbox>
-				<checkbox class="select-all" color="#fff" v-else :checked="seletedAll" @tap="_seletedAll">取消全选
-				</checkbox>
-			</view>
-			<view>
-				<u-button type="success" size="small" class="u-reset-button" :disabled="!checkListLen" @click="jumpAdd">
-					<view> 选择( {{ checkListLen }} ) </view>
-				</u-button>
+		<view class="bottom-wrapper" v-if='feedStatus == 0'>
+			<view class="bottom-inner">
+				<view class="check-area">
+					<checkbox v-if="!seletedAll" color="#fff" :checked="seletedAll" @tap="_seletedAll">全选</checkbox>
+					<checkbox class="select-all" color="#fff" v-else :checked="seletedAll" @tap="_seletedAll">取消全选
+					</checkbox>
+				</view>
+				<view class="btn-area">
+					<u-button type="success" size="small" class="u-reset-button submit-btn" :disabled="!checkListLen"
+						@click="jumpAdd">
+						<view> 选择( {{ checkListLen }} ) </view>
+					</u-button>
+				</view>
 			</view>
 		</view>
 
@@ -60,39 +57,26 @@
 		<SearchPopup mode="top" v-if='searchShow'>
 			<template v-slot:list>
 				<view class="search_list">
-
-
 					<u-form labelPosition="left" :model="formData" labelWidth="180" labelAlign="left" class="baseForm">
-
 						<u-form-item label="工艺路线:" class="required-form" borderBottom prop="assetType">
-
 							<zxz-uni-data-select :localdata="produceList" v-model="formData.produceRoutingId"
-								dataValue='id'    dataKey="name" filterable format='{name}'></zxz-uni-data-select>
-
+								dataValue='id' dataKey="name" filterable format='{name}'></zxz-uni-data-select>
 						</u-form-item>
-
 					</u-form>
-
 				</view>
 			</template>
 
 			<template v-slot:operate>
-				<view class="operate_box rx-bc">
-					<u-button size="small" class="u-reset-button" @click="searchCancel">
+				<view class="operate_box">
+					<u-button size="small" class="u-reset-button reset-btn" @click="searchCancel">
 						重置
 					</u-button>
-
-
-					<u-button type="success" size="small" class="u-reset-button" @click="search">
+					<u-button type="success" size="small" class="u-reset-button confirm-btn" @click="search">
 						确定
 					</u-button>
-
 				</view>
 			</template>
-
 		</SearchPopup>
-
-
 	</view>
 </template>
 
@@ -325,82 +309,148 @@
 		background-color: $page-bg;
 	}
 
+	.top-wrapper {
+		background-color: #fff;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+	}
 
 	.tab_box {
 		width: 100%;
-		height: 68rpx;
+		height: 80rpx;
 		background: #fff;
+		display: flex;
+		align-items: center;
 
 		.tab_item {
-			height: 68rpx;
-			line-height: 68rpx;
-			padding: 0 20rpx;
-			font-size: 32rpx;
-			color: #979C9E;
-
+			height: 80rpx;
+			line-height: 80rpx;
+			padding: 0 30rpx;
+			font-size: $uni-font-size-base;
+			color: $uni-text-color-grey;
+			position: relative;
+			transition: color 0.3s;
 		}
 
 		.active {
-			box-sizing: border-box;
-			border-bottom: 6rpx solid $theme-color;
 			color: $theme-color;
+			font-weight: 500;
+
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 50%;
+				transform: translateX(-50%);
+				width: 60%;
+				height: 6rpx;
+				background-color: $theme-color;
+				border-radius: 6rpx;
+			}
 		}
-
-
 	}
 
 	.nav_box {
-		padding: 6rpx 32rpx;
-		position: relative;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		padding: 16rpx 24rpx;
+		background-color: #fff;
+
+		.nav_inner {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			flex: 1;
+			flex-wrap: wrap;
+			gap: 16rpx;
+		}
 
 		.nav_item {
-			font-size: 28rpx;
+			font-size: $uni-font-size-sm;
 			font-weight: 400;
 			color: $theme-color;
-			background: #F0F8F2;
-			margin-right: 16rpx;
-			padding: 4rpx 16rpx;
-			border-radius: 8rpx;
-			border: 2rpx solid #ACD4B5;
+			background: rgba(21, 122, 44, 0.06);
+			padding: 10rpx 28rpx;
+			border-radius: 32rpx;
+			border: 2rpx solid rgba(21, 122, 44, 0.2);
+			transition: all 0.25s ease;
+			white-space: nowrap;
+		}
 
+		.active {
+			background: $theme-color;
+			border-color: $theme-color;
+			color: #fff;
+			font-weight: 500;
+			box-shadow: 0 4rpx 12rpx rgba(21, 122, 44, 0.3);
 		}
 
 		.menu_box {
-			position: absolute;
-			right: 20rpx;
-			top: 10rpx;
+			flex-shrink: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 64rpx;
+			height: 64rpx;
+			border-radius: 50%;
+			background-color: $page-bg;
+			margin-left: 16rpx;
 
 			.menu_icon {
-				width: 44rpx;
-				height: 44rpx;
+				width: 36rpx;
+				height: 36rpx;
 			}
-
-		}
-
-
-
-		.active {
-			background: $theme-color;
-			border: 2rpx solid $theme-color;
-			color: #FFF;
 		}
 	}
 
 	.list_box {
 		flex: 1;
 		overflow: hidden;
-		padding: 4rpx 0;
+		padding: 12rpx 0;
 
 		.u-list {
 			height: 100% !important;
 		}
 	}
 
+	.empty-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-top: 20vh;
+	}
 
 	.bottom-wrapper {
-		height: 80rpx;
 		background: #fff;
-		padding: 0 32rpx;
+		padding: 0;
+		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
+		/* 适配底部安全区域（iPhone X 等机型） */
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+
+		.bottom-inner {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+			height: 100rpx;
+			padding: 0 32rpx;
+		}
+
+		.check-area {
+			display: flex;
+			align-items: center;
+			font-size: $uni-font-size-sm;
+			color: $uni-text-color;
+		}
+
+		.btn-area {
+			.submit-btn {
+				min-width: 180rpx;
+				border-radius: 40rpx;
+			}
+		}
 
 		/deep/ .uni-checkbox-input-checked {
 			background-color: $theme-color !important;
@@ -408,20 +458,31 @@
 		}
 	}
 
-
 	.search_list {
 		min-height: 100rpx;
+		padding: 20rpx 0;
 
 		/deep/ .baseForm {
-			padding: 0 20rpx;
+			padding: 0 30rpx;
 		}
 	}
 
 	.operate_box {
-		padding: 10rpx 32rpx;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		padding: 20rpx 32rpx 30rpx;
+		gap: 24rpx;
+
+		.reset-btn {
+			flex: 1;
+			border-radius: 40rpx;
+		}
 
-		/deep/ .u-button {
-			width: 40%;
+		.confirm-btn {
+			flex: 1;
+			border-radius: 40rpx;
 		}
 	}
-</style>
+</style>

pages/pda/workOrder/extrusionMolding/index.vue

@@ -42,100 +42,134 @@
 
     <view class="list_box">
       <u-list @scrolltolower="scrolltolower" key="info" v-if="tabType == 1">
-        <view class="item_list rx-bc">
-          <text class="lable">生产工单号</text>
-          <text>{{ info.code }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">计划编号</text>
-          <text>{{ info.productionPlanCode }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">工艺路线</text>
-          <text>{{ info.produceRoutingName }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">批次号</text>
-          <text> {{ info.batchNo }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">编码</text>
-          <text> {{ info.productCode }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">委外状态</text>
-          <text> {{ info.outsourceStatus | outsourceStatusText }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">名称</text>
-          <text>{{ info.productName }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">牌号</text>
-          <text>{{ info.brandNo }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">规格</text>
-          <text>{{ info.specification }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">型号</text>
-          <text>{{ info.model }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">要求生产数量</text>
-          <text>{{ info.formingNum }} {{ info.unit }} </text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">要求生产重量</text>
-          <text>{{ info.formingWeight }} {{ info.weightUnit }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">报工类型</text>
-          <text>{{ info.singleReport == 1 ? "单个报工" : "批量报工" }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">领料状态</text>
-          <text>{{ isPickingStatus }}</text>
-        </view>
-
-        <view class="item_list rx-bc">
-          <text class="lable">投料状态</text>
-          <text>{{ isFeedStatus }}</text>
+        <!-- 工单信息卡片 -->
+        <view class="info-card">
+          <view class="info-card__header">
+            <view class="info-card__header-bar"></view>
+            <text class="info-card__header-title">工单信息</text>
+          </view>
+          <view class="info-card__body">
+            <view class="info-row full">
+              <text class="info-label">生产工单号</text>
+              <text class="info-value highlight">{{ info.code }}</text>
+            </view>
+            <view class="info-row full">
+              <text class="info-label">计划编号</text>
+              <text class="info-value">{{ info.productionPlanCode }}</text>
+            </view>
+            <view class="info-row full">
+              <text class="info-label">工艺路线</text>
+              <text class="info-value highlight">{{ info.produceRoutingName }}</text>
+            </view>
+            <view class="info-grid">
+              <view class="info-row half">
+                <text class="info-label">批次号</text>
+                <text class="info-value highlight">{{ info.batchNo }}</text>
+              </view>
+              <view class="info-row half">
+                <text class="info-label">委外状态</text>
+                <text class="info-value">{{ info.outsourceStatus | outsourceStatusText }}</text>
+              </view>
+            </view>
+          </view>
         </view>
 
-        <view class="item_list rx-bc">
-          <text class="lable">已完成生产数量</text>
-          <text>{{ info.formedNum }}</text>
+        <!-- 产品信息卡片 -->
+        <view class="info-card">
+          <view class="info-card__header">
+            <view class="info-card__header-bar"></view>
+            <text class="info-card__header-title">产品信息</text>
+          </view>
+          <view class="info-card__body">
+            <view class="info-row full">
+              <text class="info-label">编码</text>
+              <text class="info-value">{{ info.productCode }}</text>
+            </view>
+            <view class="info-row full">
+              <text class="info-label">名称</text>
+              <text class="info-value">{{ info.productName }}</text>
+            </view>
+            <view class="info-grid">
+              <view class="info-row half">
+                <text class="info-label">牌号</text>
+                <text class="info-value">{{ info.brandNo }}</text>
+              </view>
+              <view class="info-row half">
+                <text class="info-label">规格</text>
+                <text class="info-value">{{ info.specification }}</text>
+              </view>
+            </view>
+            <view class="info-row full">
+              <text class="info-label">型号</text>
+              <text class="info-value">{{ info.model }}</text>
+            </view>
+          </view>
         </view>
 
-        <view class="item_list rx-bc">
-          <text class="lable">已完成生产重量</text>
-          <text>{{ info.formedWeight }}</text>
+        <!-- 生产信息卡片 -->
+        <view class="info-card">
+          <view class="info-card__header">
+            <view class="info-card__header-bar"></view>
+            <text class="info-card__header-title">生产信息</text>
+          </view>
+          <view class="info-card__body">
+            <view class="info-grid">
+              <view class="info-row half">
+                <text class="info-label">要求数量</text>
+                <text class="info-value">{{ info.formingNum }} {{ info.unit }}</text>
+              </view>
+              <view class="info-row half">
+                <text class="info-label">要求重量</text>
+                <text class="info-value">{{ info.formingWeight }} {{ info.weightUnit }}</text>
+              </view>
+            </view>
+            <view class="info-grid">
+              <view class="info-row half">
+                <text class="info-label">已完成数量</text>
+                <text class="info-value highlight">{{ info.formedNum }}</text>
+              </view>
+              <view class="info-row half">
+                <text class="info-label">已完成重量</text>
+                <text class="info-value highlight">{{ info.formedWeight }}</text>
+              </view>
+            </view>
+            <view class="info-grid">
+              <view class="info-row half">
+                <text class="info-label">报工类型</text>
+                <text class="info-value">{{ info.singleReport == 1 ? "单个报工" : "批量报工" }}</text>
+              </view>
+              <view class="info-row half">
+                <text class="info-label">领料状态</text>
+                <text class="info-value">{{ isPickingStatus }}</text>
+              </view>
+            </view>
+            <view class="info-row full">
+              <text class="info-label">投料状态</text>
+              <text class="info-value">{{ isFeedStatus }}</text>
+            </view>
+          </view>
         </view>
 
-        <view class="item_list rx-bc">
-          <text class="lable">计划开始时间</text>
-          <text>{{ info.planStartTime }}</text>
+        <!-- 计划时间卡片 -->
+        <view class="info-card">
+          <view class="info-card__header">
+            <view class="info-card__header-bar"></view>
+            <text class="info-card__header-title">计划时间</text>
+          </view>
+          <view class="info-card__body">
+            <view class="info-row full">
+              <text class="info-label">开始时间</text>
+              <text class="info-value">{{ info.planStartTime }}</text>
+            </view>
+            <view class="info-row full">
+              <text class="info-label">结束时间</text>
+              <text class="info-value">{{ info.planCompleteTime }}</text>
+            </view>
+          </view>
         </view>
 
-        <view class="item_list rx-bc">
-          <text class="lable">计划结束时间</text>
-          <text>{{ info.planCompleteTime }}</text>
-        </view>
+        <!-- 底部留白 -->
+        <view style="height: 20rpx;"></view>
       </u-list>
 
       <u-list @scrolltolower="scrolltolower" key="detail" v-if="tabType == 2">
@@ -706,19 +740,96 @@ export default {
     height: 100% !important;
   }
 
-  .item_list {
-    width: 100%;
-    height: 80rpx;
+  /* 基本信息 - 卡片样式 */
+  .info-card {
+    width: calc(100% - 48rpx);
+    margin: 20rpx 24rpx 0;
+    background: #ffffff;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+    overflow: hidden;
+
+    .info-card__header {
+      display: flex;
+      align-items: center;
+      padding: 24rpx 28rpx;
+      background: linear-gradient(135deg, rgba(21, 122, 44, 0.06) 0%, rgba(21, 122, 44, 0.02) 100%);
+      border-bottom: 1rpx solid #f0f0f0;
+
+      .info-card__header-bar {
+        width: 6rpx;
+        height: 32rpx;
+        background: $theme-color;
+        border-radius: 3rpx;
+        margin-right: 16rpx;
+        flex-shrink: 0;
+      }
+
+      .info-card__header-title {
+        font-size: 30rpx;
+        font-weight: 600;
+        color: $uni-text-color;
+      }
+    }
+
+    .info-card__body {
+      padding: 16rpx 28rpx 8rpx;
+    }
+  }
+
+  .info-grid {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  .info-row {
+    display: flex;
+    align-items: center;
+    padding: 14rpx 0;
     box-sizing: border-box;
-    padding: 0 32rpx;
-    font-size: 32rpx;
-    color: #979c9e;
-    font-weight: 400;
-    border-bottom: 1rpx solid #e3e5e5;
+    overflow: hidden;
 
-    .lable {
-      color: #090a0a;
-      font-weight: 500;
+    &.half {
+      width: 50%;
+
+      &:nth-child(odd) {
+        padding-right: 16rpx;
+      }
+      &:nth-child(even) {
+        padding-left: 16rpx;
+      }
+    }
+
+    &.full {
+      width: 100%;
+    }
+  }
+
+  .info-label {
+    color: $uni-text-color-grey;
+    font-size: 28rpx;
+    flex-shrink: 0;
+    margin-right: 8rpx;
+    line-height: 40rpx;
+    white-space: nowrap;
+
+    &::after {
+      content: '：';
+    }
+  }
+
+  .info-value {
+    color: $uni-text-color;
+    font-size: 28rpx;
+    flex: 1;
+    line-height: 40rpx;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.highlight {
+      color: $theme-color;
     }
   }