feature_20250722_门店建议订单

src/views/deviceOutside/productItem.vue

@@ -14,14 +14,28 @@
     <div class="lineGrey"></div>
     <div class="container" style="width: 100%; margin: 0 auto">
       <van-tabs class="myTab" type="card" v-model="tabVal" color="#0057ba" @change="tabChange">
-        <van-tab :title="timeData + '下单SKU'" name="0"></van-tab>
+        <van-tab :title="timeData + '下单SKU数'" name="0"></van-tab>
         <van-tab title="建议订单" name="1"></van-tab>
       </van-tabs>
-      <div v-for="item in list" v-if="list.length">
-        <p style="font-weight: bold; font-size: 14px">&nbsp;&nbsp;&nbsp;{{ item.m01Name }}</p>
+      <div
+        v-for="item in list"
+        v-if="list.length"
+        style="display: flex; flex-direction: column; align-items: center">
+        <p
+          style="
+            font-weight: bold;
+            font-size: 16px;
+            text-align: center;
+            background: #d6eaff;
+            margin: 0;
+            padding: 10px 0;
+            width: 94%;
+          ">
+          &nbsp;&nbsp;&nbsp;{{ item.m01Name }}
+        </p>
         <el-table class="table-headermd" :data="item.productDetailList" border>
-          <el-table-column label="物料名称" prop="productName" />
-          <el-table-column label="规格" prop="productSku" />
+          <el-table-column label="物料名称" prop="productName" align="center" />
+          <el-table-column label="规格" prop="productSku" align="center" />
         </el-table>
       </div>
       <van-empty v-if="list.length == 0" />
@@ -153,70 +167,80 @@ export default {
 
 <style lang="scss">
 .productItem {
-  .myTab {
-    .van-tabs__nav--card {
-      margin: 0 !important;
-      border-left: 0;
-      border-right: 0;
-    }
-    .van-tabs__wrap,
-    .van-tabs__nav--card {
-      height: 39px;
-    }
-    .van-tab {
-      line-height: 40px;
+  .container {
+    background-color: #fff;
+    .myTab {
+      margin-bottom: 10px;
+      .van-tabs__nav--card {
+        margin: 0 !important;
+        border-left: 0;
+        border-right: 0;
+      }
+      .van-tabs__wrap,
+      .van-tabs__nav--card {
+        height: 39px;
+      }
+      .van-tab {
+        line-height: 40px;
+      }
     }
-  }
-  .myList {
-    .van-cell {
-      padding: 0;
-      &:after {
-        border-bottom: none;
+    .myList {
+      .van-cell {
+        padding: 0;
+        &:after {
+          border-bottom: none;
+        }
       }
     }
   }
 }
 </style>
 <style lang="scss">
-.table-headermd {
-  font-size: 1.2rem;
-  text-align: center;
-  position: initial;
-  width: 94% !important;
-  margin: 0 auto;
-  border-right: 0;
-}
+.productItem {
+  .table-headermd {
+    font-size: 16px;
+    text-align: center;
+    position: initial;
+    width: 94% !important;
+    margin: 0 auto;
+  }
 
-.table-headermd .el-table__header,
-.table-headermd .el-table__body {
-  width: 100% !important;
-}
+  .table-headermd .el-table__header,
+  .table-headermd .el-table__body {
+    width: 100% !important;
+  }
 
-.table-headermd col {
-  width: 5.8rem;
-}
+  .table-headermd col {
+    width: 5.8rem;
+  }
 
-.table-headermd col:nth-child(2),
-.table-headermd col:nth-child(4),
-.table-headermd col:nth-child(3) {
-  width: 5rem;
-}
+  .table-headermd col:nth-child(2),
+  .table-headermd col:nth-child(4),
+  .table-headermd col:nth-child(3) {
+    width: 5rem;
+  }
 
-.table-headermd .van-cell {
-  padding: 0 4px;
-  height: 100%;
-}
+  .table-headermd .van-cell {
+    padding: 0 4px;
+    height: 100%;
+  }
 
-.table-headermd th.el-table__cell > .cell {
-  padding: 0 4px;
-}
+  .table-headermd th.el-table__cell > .cell {
+    padding: 0 4px;
+  }
 
-.table-headermd th.el-table__cell {
-  background-color: #1989fa;
-  color: #fff;
-}
+  .table-headermd th.el-table__cell {
+    background-color: #f3f9ff;
+    color: #000;
+  }
 
-.table-headermd .el-table__cell {
-  padding: 4px 0;
+  .table-headermd .el-table__cell {
+    padding: 4px 0;
+  }
+  .el-table__body {
+    .cell {
+      font-size: 14px;
+    }
+  }
 }
 </style>