修改样式

pages/pda/by_product_recovery/index/index.vue

@@ -40,11 +40,11 @@
         :preLoadScreen="page * 10"
       >
         <u-list-item v-for="(item, index) in list" :key="index">
-          <view class="card_box" @click="handleDetail">
+          <!-- <view class="card_box" @click="handleDetail">
             <view class="item_box rx-bc">
               <view class="round">{{ index + 1 }}</view>
               <view class="item_one perce100 rx-sc">
-                <view class="lable">回收单号：</view>
+                <view class="lable"></view>
                 <view class="text">{{ item.code }}</view>
               </view>
             </view>
@@ -103,6 +103,62 @@
                 <view> {{ item.createTime }}</view>
               </view>
             </view>
+          </view> -->
+
+          <view class="card_box" @click="handleDetail(item)">
+            <view class="header rx-sc">
+              <view class="round">{{ index + 1 }}</view>
+              <view class="orderId">{{ item.code }}</view>
+            </view>
+
+            <view class="row">
+              <view class="label">回收单号</view>
+              <view class="value">{{ item.code }}</view>
+            </view>
+
+            <view class="row">
+              <view class="label">工单编码</view>
+              <view class="value">{{ item.workOrderCode }}</view>
+            </view>
+
+            <view class="row">
+              <view class="label">物品名称</view>
+              <view class="value"> {{ item.categoryName }}</view>
+            </view>
+
+            <view class="row">
+              <view class="label">物品编码</view>
+              <view class="value">{{ item.categoryCode }} </view>
+            </view>
+
+            <view class="row">
+              <view class="label">工序</view>
+              <view class="value">{{ item.taskName }}</view>
+            </view>
+
+            <view class="row">
+              <view class="label">回收人</view>
+              <view class="value">{{ item.executorName }}</view>
+            </view>
+
+            <view class="row">
+              <view class="label">不合格/合格数量</view>
+              <view class="value"
+                >{{ item.notFormedNum || 0 }} / {{ item.formedNum || 0 }}
+              </view>
+            </view>
+
+            <view class="row">
+              <view class="label">重量</view>
+              <view class="value"
+                >{{ item.weight || 0 }} / {{ item.weightUnit }}</view
+              >
+            </view>
+
+            <view class="row">
+              <view class="label">创建时间</view>
+              <view class="value">{{ item.createTime }}</view>
+            </view>
           </view>
         </u-list-item>
         <!-- 
@@ -490,14 +546,17 @@ export default {
   }
 
   .card_box {
-    width: 750rpx;
-    padding: 16rpx 32rpx;
+    width: 686rpx;
+    margin: 0 auto 24rpx;
+    background: #fff;
+    border-radius: 18rpx;
+    padding: 26rpx 30rpx;
+    box-shadow: 0 6rpx 28rpx rgba(0, 0, 0, 0.06);
     box-sizing: border-box;
-    border-bottom: 2rpx solid #e1e1e1;
-
-    .item_box {
-      margin-top: 10rpx;
+    transition: transform 0.15s ease-out;
 
+    .header {
+      margin-bottom: 18rpx;
       .round {
         width: 40rpx;
         height: 40rpx;
@@ -506,47 +565,71 @@ export default {
         background: $theme-color;
         color: #fff;
         text-align: center;
-        font-size: 20rpx;
-        margin-right: 10px;
+        font-size: 22rpx;
       }
-
       .orderId {
-        color: #000;
-        font-family: PingFang HK;
+        margin-left: 14rpx;
         font-size: 28rpx;
-        font-style: normal;
         font-weight: 600;
-        margin-left: 16rpx;
+        color: #333;
       }
+    }
+
+    &:active {
+      transform: scale(0.96);
+    }
 
-      .item_one {
-        width: 100%;
-        font-size: 26rpx;
-        font-style: normal;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 12rpx;
+      font-size: 26rpx;
+      color: #333;
+
+      .label {
+        color: #888;
+        min-width: 160rpx;
         font-weight: 400;
-        line-height: 38rpx;
-        word-wrap: break-word;
-        .text {
-          color: #157a2c;
-        }
       }
 
-      .item-right {
+      .value {
         flex: 1;
+        font-weight: 500;
+        text-align: right;
+        word-break: break-all;
       }
+    }
 
-      .gylx {
-        color: $theme-color;
+    .tag-row {
+      display: flex;
+      gap: 16rpx;
+      margin: 14rpx 0;
+
+      .tag {
+        font-size: 22rpx;
+        padding: 6rpx 18rpx;
+        border-radius: 32rpx;
+        line-height: 1;
+        font-weight: 500;
       }
 
-      .perce50 {
-        width: 50%;
+      .green {
+        background: #e8f6ec;
+        color: #157a2c;
       }
 
-      .perce100 {
-        width: 100%;
+      .blue {
+        background: #eaf3ff;
+        color: #2a68ff;
       }
     }
+
+    .time {
+      font-size: 24rpx;
+      color: #999;
+      margin-top: 8rpx;
+      text-align: right;
+    }
   }
 }
 

pages/pda/material_return/index/index.vue

@@ -194,23 +194,23 @@ export default {
 <style lang="scss" scoped>
 .content-box {
   height: 100vh;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
   background-color: $page-bg;
 }
 
+/* ✅ 顶部搜索区域 */
 .top-wrapper {
   background-color: #fff;
   display: flex;
-  width: 750rpx;
-  height: 88rpx;
-  padding: 16rpx 32rpx;
   align-items: center;
-  gap: 16rpx;
+  width: 100%;
+  padding: 20rpx 26rpx;
+  box-sizing: border-box;
+  gap: 20rpx;
 
   /deep/.uni-section {
-    margin-top: 0px;
+    margin-top: 0;
   }
 
   /deep/.uni-section-header {
@@ -218,24 +218,18 @@ export default {
   }
 
   .search_btn {
-    width: 110rpx;
-    height: 60rpx;
-    line-height: 60rpx;
-    padding: 0 10rpx;
+    padding: 0 26rpx;
+    height: 64rpx;
+    line-height: 64rpx;
     background: $theme-color;
-    font-size: 24rpx;
+    font-size: 26rpx;
+    border-radius: 8rpx;
     color: #fff;
-    margin: 0;
-    margin-left: 16rpx;
-  }
-
-  .menu_icon {
-    width: 44rpx;
-    height: 44rpx;
-    margin-left: 14rpx;
+    white-space: nowrap;
   }
 }
 
+/* ✅ 列表区 */
 .list_box {
   flex: 1;
   overflow: hidden;
@@ -243,57 +237,64 @@ export default {
 
   .u-list {
     height: 100% !important;
+    padding: 20rpx;
   }
 
+  /* ✅ 卡片优化 */
   .card_box {
-    width: 750rpx;
-    padding: 16rpx 32rpx;
+    width: 100%;
+    margin: 0 auto;
+    padding: 24rpx 28rpx;
     box-sizing: border-box;
-    border-bottom: 2rpx solid #e1e1e1;
+    border-bottom: 2rpx solid #f0f0f0;
+    background: #fff;
+    border-radius: 12rpx;
+    margin-bottom: 16rpx;
+
+    /* ✅ 点击态反馈 */
+    &:active {
+      background: #f9f9f9;
+    }
 
+    /* ✅ 信息行通用样式 */
     .item_box {
-      margin-top: 10rpx;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 14rpx;
 
       .round {
-        width: 40rpx;
-        height: 40rpx;
-        line-height: 40rpx;
+        width: 46rpx;
+        height: 46rpx;
+        line-height: 46rpx;
         border-radius: 50%;
         background: $theme-color;
         color: #fff;
+        font-size: 24rpx;
         text-align: center;
-        font-size: 20rpx;
-        margin-right: 10px;
-      }
-
-      .orderId {
-        color: #000;
-        font-family: PingFang HK;
-        font-size: 28rpx;
-        font-style: normal;
-        font-weight: 600;
-        margin-left: 16rpx;
+        margin-right: 16rpx;
+        flex-shrink: 0;
       }
 
       .item_one {
         width: 100%;
+        display: flex;
         font-size: 26rpx;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 38rpx;
+        line-height: 44rpx;
+        color: #333;
         word-wrap: break-word;
-      }
-
-      .item-right {
-        flex: 1;
-      }
 
-      .gylx {
-        color: $theme-color;
+        .lable {
+          color: #666;
+          margin-right: 8rpx;
+          flex-shrink: 0;
+        }
       }
 
+      /* ✅ 双列结构支持自动换行 */
       .perce50 {
-        width: 50%;
+        width: 48%;
+        display: flex;
       }
 
       .perce100 {
@@ -302,4 +303,9 @@ export default {
     }
   }
 }
+
+/* ✅ 空状态提示居中优化 */
+u-empty {
+  margin-top: 20vh;
+}
 </style>

pages/pda/nonconforming/index/index.vue

@@ -33,94 +33,77 @@
         :preLoadScreen="page * 10"
       >
         <u-list-item v-for="(item, index) in dataList" :key="index">
-          <!-- <itemCard :item="item"></itemCard> -->
           <view class="card_box" @click="handleDetail(item)">
-            <view class="item_box rx-bc">
+            <view class="header rx-sc">
               <view class="round">{{ index + 1 }}</view>
-              <view class="item_one perce100 rx-sc">
-                <view class="lable">编码：</view>
-                <view>{{ item.unqualifiedProductsCode }}</view>
-              </view>
+              <view class="orderId">{{ item.unqualifiedProductsCode }}</view>
             </view>
 
-            <view class="item_box rx-bc">
-              <view class="item_one perce100 rx-sc">
-                <view class="lable">工单编号：</view>
-                <view>{{ item.workOrderCode }}</view>
-              </view>
+            <view class="row">
+              <view class="label">编码</view>
+              <view class="value">{{ item.unqualifiedProductsCode }}</view>
             </view>
 
-            <view class="item_box rx-bc">
-              <view class="item_one perce100 rx-sc">
-                <view class="lable">批次号：</view>
-                <view>{{ item.batchNo }}</view>
-              </view>
+            <view class="row">
+              <view class="label">工单编号</view>
+              <view class="value">{{ item.workOrderCode }}</view>
             </view>
 
-            <view class="item_box rx-bc">
-              <view class="item_one perce100 rx-sc">
-                <view class="lable">来源编码：</view>
-                <view>{{ item.sourceCode }}</view>
-              </view>
+            <view class="row">
+              <view class="label">批次号</view>
+              <view class="value">{{ item.batchNo }}</view>
             </view>
 
-            <view class="item_box rx-bc">
-              <view class="item_one perce100 rx-sc">
-                <view class="lable">物品编码：</view>
-                <view>{{ item.categoryCode }}</view>
-              </view>
+            <view class="row">
+              <view class="label">来源编码</view>
+              <view class="value">{{ item.sourceCode }}</view>
             </view>
 
-            <view class="item_box rx-bc">
-              <view class="item_one perce100 rx-sc">
-                <view class="lable">物品名称：</view>
-                <view>{{ item.categoryName }}</view>
-              </view>
+            <view class="row">
+              <view class="label">物品名称</view>
+              <view class="value"> {{ item.categoryName }}</view>
             </view>
 
-            <view class="item_box rx-bc">
-              <view class="item_one perce50 rx-sc">
-                <view class="lable">型号：</view>
-                <view>{{ item.modelType }}</view>
-              </view>
+            <view class="row">
+              <view class="label">物品编码</view>
+              <view class="value">{{ item.categoryCode }} </view>
+            </view>
+
+            <view class="row">
+              <view class="label">型号 </view>
+              <view class="value">{{ item.modelType }} </view>
+            </view>
 
-              <view class="item_one perce50 rx-sc">
-                <view class="lable">规格：</view>
-                <view> {{ item.specification }}</view>
-              </view>
+            <view class="row">
+              <view class="label"> 规格</view>
+              <view class="value"> {{ item.specification }}</view>
             </view>
 
-            <view class="item_box rx-bc">
-              <view class="item_one perce50 rx-sc">
-                <view class="lable">牌号：</view>
-                <view>{{ item.brandNum }}</view>
-              </view>
-
-              <view class="item_one perce50 rx-sc">
-                <view class="lable">数量：</view>
-                <view class="text">
-                  {{ item.quantity }}{{ item.measureUnit }}</view
-                >
-              </view>
+            <view class="row">
+              <view class="label">数量</view>
+              <view class="value"
+                >{{ item.quantity }}{{ item.measureUnit }}</view
+              >
             </view>
 
-            <view class="item_box rx-bc">
-              <view class="item_one perce50 rx-sc">
-                <view class="lable">质检类型：</view>
-                <view class="text">{{ getQuality(item) }}</view>
-              </view>
+            <view class="tag-row row">
+              <view class="label">质检类型</view>
+              <view class="tag green">{{ getQuality(item) }}</view>
+            </view>
 
-              <view class="item_one perce50 rx-sc">
-                <view class="lable">状态：</view>
-                <view> {{ getDispose(item) }}</view>
-              </view>
+            <view class="tag-row row">
+              <view class="label">状态</view>
+              <view class="tag blue">{{ getDispose(item) }}</view>
             </view>
 
-            <view class="item_box rx-bc">
-              <view class="item_one perce100 rx-sc">
-                <view class="lable">处置时间：</view>
-                <view>{{ item.disposeTime }}</view>
-              </view>
+            <!-- <view class="tag-row">
+              <view class="tag green">{{ getQuality(item) }}</view>
+              <view class="tag blue">{{ getDispose(item) }}</view>
+            </view> -->
+
+            <view class="row">
+              <view class="label">处置时间</view>
+              <view class="value">{{ item.disposeTime }}</view>
             </view>
           </view>
         </u-list-item>
@@ -303,14 +286,17 @@ export default {
   }
 
   .card_box {
-    width: 750rpx;
-    padding: 16rpx 32rpx;
+    width: 686rpx;
+    margin: 0 auto 24rpx;
+    background: #fff;
+    border-radius: 18rpx;
+    padding: 26rpx 30rpx;
+    box-shadow: 0 6rpx 28rpx rgba(0, 0, 0, 0.06);
     box-sizing: border-box;
-    border-bottom: 2rpx solid #e1e1e1;
-
-    .item_box {
-      margin-top: 10rpx;
+    transition: transform 0.15s ease-out;
 
+    .header {
+      margin-bottom: 18rpx;
       .round {
         width: 40rpx;
         height: 40rpx;
@@ -319,48 +305,71 @@ export default {
         background: $theme-color;
         color: #fff;
         text-align: center;
-        font-size: 20rpx;
-        margin-right: 10px;
+        font-size: 22rpx;
       }
-
       .orderId {
-        color: #000;
-        font-family: PingFang HK;
+        margin-left: 14rpx;
         font-size: 28rpx;
-        font-style: normal;
         font-weight: 600;
-        margin-left: 16rpx;
+        color: #333;
       }
+    }
 
-      .item_one {
-        width: 100%;
-        font-size: 26rpx;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 38rpx;
-        word-wrap: break-word;
+    &:active {
+      transform: scale(0.96);
+    }
 
-        .text {
-          color: #157a2c;
-        }
+    .row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 12rpx;
+      font-size: 26rpx;
+      color: #333;
+
+      .label {
+        color: #888;
+        min-width: 160rpx;
+        font-weight: 400;
       }
 
-      .item-right {
+      .value {
         flex: 1;
+        font-weight: 500;
+        text-align: right;
+        word-break: break-all;
       }
+    }
 
-      .gylx {
-        color: $theme-color;
+    .tag-row {
+      display: flex;
+      gap: 16rpx;
+      margin: 14rpx 0;
+
+      .tag {
+        font-size: 22rpx;
+        padding: 6rpx 18rpx;
+        border-radius: 32rpx;
+        line-height: 1;
+        font-weight: 500;
       }
 
-      .perce50 {
-        width: 50%;
+      .green {
+        background: #e8f6ec;
+        color: #157a2c;
       }
 
-      .perce100 {
-        width: 100%;
+      .blue {
+        background: #eaf3ff;
+        color: #2a68ff;
       }
     }
+
+    .time {
+      font-size: 24rpx;
+      color: #999;
+      margin-top: 8rpx;
+      text-align: right;
+    }
   }
 }
 </style>

pages/pda/outsourcing/components/outsourcingData.vue

@@ -102,7 +102,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<!-- <style lang="scss" scoped>
 .card_box {
   width: 750rpx;
   padding: 16rpx 32rpx;
@@ -154,4 +154,67 @@ export default {
     }
   }
 }
+</style> -->
+
+<style lang="scss" scoped>
+.card_box {
+  width: 100%;
+  padding: 20rpx 26rpx;
+  box-sizing: border-box;
+  border-bottom: 2rpx solid #f1f1f1;
+  background: #fff;
+
+  .item_box {
+    margin-top: 14rpx;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+    .round {
+      width: 46rpx;
+      height: 46rpx;
+      line-height: 46rpx;
+      border-radius: 50%;
+      background: $theme-color;
+      color: #fff;
+      text-align: center;
+      font-size: 22rpx;
+      flex-shrink: 0;
+    }
+
+    .orderId {
+      color: #111;
+      font-size: 30rpx;
+      font-weight: 600;
+      margin-left: 18rpx;
+      word-break: break-all;
+    }
+
+    .item_one {
+      display: flex;
+      width: 100%;
+      font-size: 28rpx;
+      line-height: 42rpx;
+      color: #333;
+      margin-top: 6rpx;
+      word-wrap: break-word;
+
+      .lable {
+        color: #666;
+        margin-right: 8rpx;
+        flex-shrink: 0;
+      }
+    }
+
+    .gylx {
+      color: $theme-color;
+      font-weight: 500;
+    }
+
+    /* 自适应 2列布局，超出自动换行 */
+    .perce50 {
+      width: 48%;
+    }
+  }
+}
 </style>

pages/pda/outsourcing/components/workCard.vue

@@ -1,131 +1,107 @@
 <template>
   <view class="card_box" @click="handleDetail">
-    <view class="item_box rx-sc">
+    <!-- 头部编号 + 单号 -->
+    <view class="header rx-sc">
       <view class="round">{{ index + 1 }}</view>
-      <view class="orderId">{{ item.code }} </view>
+      <view class="orderId">{{ item.code }}</view>
     </view>
 
-    <view class="item_box rx-bc">
-      <view class="item_one rx-sc">
-        <view class="lable">委外名称：</view>
-        <view>{{ item.name }}</view>
-      </view>
-    </view>
-
-    <view class="item_box rx-bc">
-      <view class="item_one rx-sc">
-        <view>委外单编码：</view>
-        <view>{{ item.code }}</view>
-      </view>
-    </view>
-
-    <view class="item_box rx-bc">
-      <view class="item_one rx-sc">
-        <view>工单编码：</view>
-        <view>{{ item.workOrderCode }}</view>
-      </view>
-    </view>
-
-    <view class="item_box rx-bc">
-      <view class="item_one rx-sc">
-        <view>委外工序：</view>
-        <view class="gylx">{{ item.taskNames }}</view>
-      </view>
-    </view>
-
-    <view class="item_box rx-bc">
-      <view class="item_one perce50 rx-sc">
-        <view class="lable">委外数量：</view>
-        <view class="gylx">{{ item.totalCount }}{{ item.measuringUnit }}</view>
-      </view>
-      <view class="item_one perce50 rx-sc">
-        <view>委外重量：</view>
-
-        <view v-if="item.totalWeight" class="gylx">
-          {{ item.totalWeight }}{{ item.weightUnit }}
-        </view>
-        <view v-else>无</view>
-      </view>
-    </view>
-
-    <view class="item_box rx-bc">
-      <view class="item_one perce50 rx-sc">
-        <view class="lable">委外类型：</view>
-        <view v-if="item.type == 4" class="gylx">带料委外</view>
-        <view v-if="item.type == 5" class="gylx">不带料委外</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 v-if="item.outsourceScene == 2" class="gylx">单工序</view>
-        <view v-if="item.outsourceScene == 3" class="gylx">多工序</view>
-      </view>
-      <view class="item_one perce50 rx-sc">
-        <view class="lable">委外单位：</view>
-        <view class="gylx">{{ item.supplierName }}</view>
-      </view>
-    </view>
-
-    <view class="item_box rx-bc">
-      <view class="item_one perce50 rx-sc">
-        <view class="lable">仓库：</view>
-        <view class="gylx">{{ item.warehouseName }}</view>
-      </view>
-      <view class="item_one perce50 rx-sc">
-        <view>申请人：</view>
-        <view class="gylx">{{ item.createUserName }}</view>
-      </view>
-    </view>
-
-    <view class="item_box rx-bc">
-      <view class="item_one perce50 rx-sc">
-        <view>状态：</view>
-        <view class="gylx">{{
-          item.status == 0 ? "未提交" : item.status == 1 ? "已提交" : "已发布"
-        }}</view>
-      </view>
-
-      <view class="item_one perce50 rx-sc">
-        <view>委外状态：</view>
-        <view v-if="item.purchaseStatus == 0" class="gylx">未入库</view>
-        <view v-if="item.purchaseStatus == 1" class="gylx">原料入库</view>
-        <view v-if="item.purchaseStatus == 3" class="gylx">委外完成</view>
-      </view>
-    </view>
-
-    <view class="item_box rx-bc">
-      <view class="item_one perce50 rx-sc">
-        <view>委外发起工序：</view>
-        <view class="gylx">{{ item.taskName }}</view>
-      </view>
-
-      <view class="item_one perce50 rx-sc">
-        <view class="lable">审核状态：</view>
-        <view v-if="item.approvalStatus == 0" class="gylx">未提交</view>
-        <view v-if="item.approvalStatus == 1" class="gylx">审核中</view>
-        <view v-if="item.approvalStatus == 2" class="gylx">审核通过</view>
-        <view v-if="item.approvalStatus == 3" class="gylx">审核不通过</view>
-      </view>
-    </view>
-
-    <view class="item_box rx-bc">
-      <view class="item_one rx-sc">
-        <view class="lable">创建时间：</view>
-        <view>{{ item.createTime }}</view>
-      </view>
-    </view>
-
-    <view class="item_box rx-bc">
-      <view class="item_one rx-sc">
-        <view class="lable">预计到货日期：</view>
-        <view>{{ item.requireDeliveryTime }}</view>
-      </view>
+    <!-- 主要信息区 -->
+    <view class="info_box">
+      <view class="row"
+        ><text class="label">委外名称：</text
+        ><text class="value">{{ item.name }}</text></view
+      >
+      <view class="row"
+        ><text class="label">委外单编码：</text
+        ><text class="value">{{ item.code }}</text></view
+      >
+      <view class="row"
+        ><text class="label">工单编码：</text
+        ><text class="value">{{ item.workOrderCode }}</text></view
+      >
+      <view class="row"
+        ><text class="label">型号 ：</text
+        ><text class="value">{{ item.modelType }} </text></view
+      >
+
+      <view class="row"
+        ><text class="label"> 规格：</text
+        ><text class="value"> {{ item.specification }}</text></view
+      >
+
+      <view class="row"
+        ><text class="label">委外工序：</text
+        ><text class="value highlight">{{ item.taskNames }}</text></view
+      >
+
+      <view class="row"
+        ><text class="label">数量：</text
+        ><text class="value"
+          >{{ item.totalCount }}{{ item.measuringUnit }}</text
+        ></view
+      >
+      <view class="row"
+        ><text class="label">重量：</text
+        ><text class="value">{{
+          item.totalWeight ? item.totalWeight + item.weightUnit : "无"
+        }}</text></view
+      >
+
+      <view class="row"
+        ><text class="label">类型：</text
+        ><text class="value">{{
+          item.type == 4 ? "带料委外" : "不带料委外"
+        }}</text></view
+      >
+      <view class="row"
+        ><text class="label">批次号：</text
+        ><text class="value">{{ item.batchNo }}</text></view
+      >
+      <view class="row"
+        ><text class="label">委外单位：</text
+        ><text class="value">{{ item.supplierName }}</text></view
+      >
+
+      <view class="row"
+        ><text class="label">状态：</text
+        ><text class="value highlight">
+          {{
+            item.status == 0 ? "未提交" : item.status == 1 ? "已提交" : "已发布"
+          }}
+        </text></view
+      >
+      <view class="row"
+        ><text class="label">委外状态：</text>
+        <text class="value">{{
+          item.purchaseStatus == 0 || !item.purchaseStatus
+            ? "未入库"
+            : item.purchaseStatus == 1
+            ? "原料入库"
+            : item.purchaseStatus == 3
+            ? "委外完成"
+            : ""
+        }}</text>
+      </view>
+      <view class="row"
+        ><text class="label">审核状态：</text>
+        <text class="value">{{
+          ["未提交", "审核中", "审核通过", "审核不通过"][item.approvalStatus]
+        }}</text>
+      </view>
+
+      <view class="row"
+        ><text class="label">申请人：</text
+        ><text class="value">{{ item.createUserName }}</text></view
+      >
+      <view class="row"
+        ><text class="label">创建时间：</text
+        ><text class="value">{{ item.createTime }}</text></view
+      >
+      <view class="row"
+        ><text class="label">预计到货：</text
+        ><text class="value">{{ item.requireDeliveryTime }}</text></view
+      >
     </view>
   </view>
 </template>
@@ -163,7 +139,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<!-- <style lang="scss" scoped>
 .card_box {
   width: 750rpx;
   padding: 16rpx 32rpx;
@@ -215,4 +191,64 @@ export default {
     }
   }
 }
+</style> -->
+
+<style lang="scss" scoped>
+.card_box {
+  width: 710rpx;
+  margin: 20rpx auto;
+  padding: 22rpx 24rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
+  transition: all 0.2s ease-in-out;
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  .header {
+    margin-bottom: 18rpx;
+    .round {
+      width: 40rpx;
+      height: 40rpx;
+      line-height: 40rpx;
+      border-radius: 50%;
+      background: $theme-color;
+      color: #fff;
+      text-align: center;
+      font-size: 22rpx;
+    }
+    .orderId {
+      margin-left: 14rpx;
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #333;
+    }
+  }
+
+  .info_box {
+    .row {
+      display: flex;
+      font-size: 24rpx;
+      padding: 8rpx 0;
+      line-height: 32rpx;
+
+      .label {
+        width: 180rpx;
+        color: #666;
+      }
+      .value {
+        flex: 1;
+        text-align: right;
+        color: #333;
+        word-break: break-all;
+      }
+      .highlight {
+        color: $theme-color;
+        font-weight: 500;
+      }
+    }
+  }
+}
 </style>