修改ui

src/views/page/Dispatch/detail.vue

@@ -1,18 +1,92 @@
 <template>
-  <div>
+  <div style="overflow-y: scroll;padding-bottom: 9rem;box-sizing: border-box;">
+    <div style="background-image: url('../../../assets/images/bc.png');background-size: 100% 100%;">
+      <div class="home_header">发货</div>
+      <div class="home_header_line"></div>
+      <div class="home_con_body">
+        <div class="home_con_s">
+          <div v-if="is_show" class="pack_up">
+            <img @click="handleShow" src="../../../assets/home/collect.png" alt="">
+          </div>
+          <div v-if="!is_show" :class="!is_show ? 'pack_up_d' : ''" class="pack_up" style="display: flex;gap: .3125rem;">
+            <div style="font-size: 0.88rem;
+color: #ABDFFF;">展开</div>
+            <img @click="handleShow" style="width: 0.41rem;height: 0.69rem;" src="../../../assets/home/zk.png" alt="">
+          </div>
+          <div v-if="is_show" class="pack_up_con">
+            <p class="pack_up_name">王晓伟</p>
+            <div class="pack_up_grid">
+              <div>
+                <p>产品总数</p>
+                <div><span>{{ total_num }}</span><span>件</span></div>
+              </div>
+              <div>
+                <p>已扫总数</p>
+                <div><span>{{ scan_num }}</span><span>件</span></div>
+              </div>
+              <div>
+                <p>未扫总数</p>
+                <div><span>{{ total_num - scan_num }}</span><span>件</span></div>
+              </div>
+              <!-- <div>
+                <p>包装件数</p>
+                <div><span>1245</span><span>件</span></div>
+              </div> -->
+            </div>
+          </div>
+        </div>
+
+        <div class="send_work" v-if="tableData.length > 0" v-for="(item, index) in tableData" :key="index">
+          <div class="check_box">
+            <div @click="handleChoose(item, index)" :class="item.is_choose ? 'check_box_c_active' : 'check_box_c'">
+            </div>
+          </div>
+          <div class="secd_flex">
+            <div class="secd_title">
+              <span>销售单号：</span><span> {{ item.bus_no }}</span>
+            </div>
+            <span class="secd_title_d">{{ item.product_title }}</span>
+            <div class="secd_g"><span>规格型号：</span><span>{{ item.product_size }}</span></div>
+            <div class="secd_flex_w">
+              <div class="secd_flex_s">
+                <span>已扫到数量：</span>
+                <span>{{ item.out_qty }}件</span>
+              </div>
+              <div class="secd_flex_s">
+                <span>未发货数量：</span>
+                <span>{{ item.this_delivery_qty - item.out_qty }}件</span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div v-if="tableData.length == 0"
+          style="display: flex;width: 100%;height: 10rem;justify-content: center;align-items: center;">
+
+          <Spin size="small" />
+          <Spin />
+          <Spin size="small" />
+
+        </div>
+        <div class="footer">
+
+          <div class="return_btn" @click="handleReturn">返回</div>
+          <div class="confirm_btn" @click="handelGoSure">确认</div>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+  <!-- <div>
     <div class="header">
       <div class="header_top">
-        <Button
-                type="primary"
-                class="header_btn"
-                ghost
-                @click="handleShow"
-                :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'"
-        >
+        <Button type="primary" class="header_btn" ghost @click="handleShow"
+          :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'">
           <div style="margin-right: 0.6rem">
             {{ is_show ? "收起" : "展开" }}
-          </div></Button
-        >
+          </div>
+        </Button>
         <div style="margin-right: 1rem; color: #66a9f0">王小伟</div>
       </div>
       <div class="header_middle">
@@ -33,13 +107,13 @@
         </b-dropdown>
       </div>
       <div class="header_middle1 ot">
-        <div class="ft">{{total_num}} &nbsp;</div>
-        <div class="ft">{{scan_num}} &nbsp;</div>
-        <div class="ft">{{total_num-scan_num}} &nbsp;</div>
+        <div class="ft">{{ total_num }} &nbsp;</div>
+        <div class="ft">{{ scan_num }} &nbsp;</div>
+        <div class="ft">{{ total_num - scan_num }} &nbsp;</div>
       </div>
       <div class="header_footer">
-        <div style="margin-left: 1rem">已发货{{transport_total}}</div>
-        <!--<div style="margin-right: 1.4rem">已完成10%</div>-->
+        <div style="margin-left: 1rem">已发货{{ transport_total }}</div>
+
       </div>
     </div>
     <div class="bdy">
@@ -51,44 +125,28 @@
           <th style="width: 3rem">已扫到数量</th>
           <th style="width: 3rem">未发货数量</th>
         </tr>
-        <tr
-                v-for="(item, index) in tableData"
-                :key="index"
-                @click="handleChoose(item, index)"
-        >
+        <tr v-for="(item, index) in tableData" :key="index" @click="handleChoose(item, index)">
           <td>
             {{ item.bus_no }}
           </td>
           <td>{{ item.product_title }}</td>
-          <td>{{item.product_size}}</td>
+          <td>{{ item.product_size }}</td>
           <td>{{ item.out_qty }}</td>
           <td>{{ item.this_delivery_qty - item.out_qty }}</td>
         </tr>
       </table>
     </div>
     <div class="footer">
-      <Button
-              type="primary"
-              class="header_btn"
-              style="margin-right: 3rem; height: 2.6rem"
-              @click="handleReturn"
-      >
-        返回</Button
-      >
-      <Button
-              type="primary"
-              class="header_btn"
-              style="margin-left: 3rem; height: 2.6rem"
-              @click="handelGoSure"
-      >
-        确认</Button
-      >
+      <Button type="primary" class="header_btn" style="margin-right: 3rem; height: 2.6rem" @click="handleReturn">
+        返回</Button>
+      <Button type="primary" class="header_btn" style="margin-left: 3rem; height: 2.6rem" @click="handelGoSure">
+        确认</Button>
     </div>
-  </div>
+  </div> -->
 </template>
 <script>
 export default {
-  data () {
+  data() {
     return {
       tableData: [],
       key_tableData: {},
@@ -105,7 +163,7 @@ export default {
       is_box_data: [],
     }
   },
-  mounted () {
+  mounted() {
     // if (localStorage.getItem('fyy_target')) {
     //   data.target = JSON.parse(localStorage.getItem('fyy_target'))
     // }
@@ -121,7 +179,7 @@ export default {
   },
   methods: {
     // 原始数据获取
-    initData (row) {
+    initData(row) {
       this.axios.post('/api/testdwyget', { ...row }).then(res => {
         this.tableData.push(...res.data.data.send_goods_out_product);
         res.data.data.send_goods_out_product.forEach((element, index) => {
@@ -135,29 +193,30 @@ export default {
         })
         const dataBox = {
           url: 'http://121.36.142.167:7774/jbl/api/module-data/box_orders/box_orders/diy/defective_order_no_list',
-          post: { "defective_order_no_list":["BZ00025"]}
+          post: { "defective_order_no_list": ["BZ00025"] }
         }
-        this.initDataBox(dataBox)})
+        this.initDataBox(dataBox)
+      })
     },
     // 扫描数据获取
-    initDataBox (row) {
+    initDataBox(row) {
       this.axios.post('/api/testdwy', { ...row }).then(res => {
         res.data.data.forEach((element, index) => {
-          let object = {"order_item_id":element.order_item_id,"order_no":element.order_no,"box_num":element.box_num,"product_no":element.product_no,"box_no":element.box_orders.defective_order_no,"box_id":element.box_orders.id};
+          let object = { "order_item_id": element.order_item_id, "order_no": element.order_no, "box_num": element.box_num, "product_no": element.product_no, "box_no": element.box_orders.defective_order_no, "box_id": element.box_orders.id };
           this.scan_data.push(object)
         })
         this.deelTableData();
       })
     },
-    deelUniqueKey(element){
+    deelUniqueKey(element) {
       let key = element.box_orders_show
       return key;
     },
     // 将原始数据处理拼接成提交的数据
-    deelTableData () {
+    deelTableData() {
       let new_table_data = [];
       this.scan_data.forEach((element, index) => {
-        if (this.is_box_data.indexOf(element.box_no) === -1 && Object.keys(this.key_tableData).indexOf(element.order_item_id) !== -1 && (this.key_tableData[element.order_item_id].this_delivery_qty-element.box_num)>0){
+        if (this.is_box_data.indexOf(element.box_no) === -1 && Object.keys(this.key_tableData).indexOf(element.order_item_id) !== -1 && (this.key_tableData[element.order_item_id].this_delivery_qty - element.box_num) > 0) {
           let table_data_detail = JSON.parse(JSON.stringify(this.key_tableData[element.order_item_id]))
           table_data_detail.box_orders = element.box_id;
           table_data_detail.box_orders_show = element.box_no;
@@ -169,20 +228,20 @@ export default {
         }
       })
       this.tableData.forEach((element, index) => {
-        if (element.this_delivery_qty > 0 ){
+        if (element.this_delivery_qty > 0) {
           new_table_data.push(element)
         }
       })
       this.tableData = new_table_data;
     },
-    handelGoSure () {
+    handelGoSure() {
       console.log(this.tableData)
       this.tableData.forEach((element, index) => {
         element.item_num = (index + 1)
       })
       this.data.data.send_goods_out_product = this.tableData
       let data = {
-        url:'http://121.36.142.167:7774/jbl/api/module-data/send_goods_out/send_goods_out',
+        url: 'http://121.36.142.167:7774/jbl/api/module-data/send_goods_out/send_goods_out',
         post: this.data
       }
       this.axios.post('/api/testdwy', data).then(res => {
@@ -193,15 +252,15 @@ export default {
       })
       // console.log(JSON.stringify(this.data))
     },
-    handleReturn () {
+    handleReturn() {
       localStorage.removeItem('fyy_target')
       this.$router.push('/cms/finish')
     },
-    handleChoose (item, index) {
+    handleChoose(item, index) {
       item.is_choose = !item.is_choose
       this.tableData.splice(index, 1, item)
     },
-    handleShow () {
+    handleShow() {
       this.is_show = !this.is_show
       console.log(document.getElementsByClassName('header'))
       if (this.is_show) {
@@ -219,116 +278,359 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-  .header {
-    width: 94%;
-    height: 7rem;
-    // overflow: hidden;
-    // transition: all 0.4s;
-    position: relative;
-    top: 0.5rem;
-    left: 3%;
-    box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
-    border-radius: 1rem;
-    padding: 0.4rem 0.7rem 0 1rem;
-    background: #fff;
-  }
-  .header_btn {
-    border-radius: 1rem;
-    padding: 0.1rem;
-    width: 5rem;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
+.return_btn {
+  background-image: url('../../../assets/home/return.png');
+  background-size: 100% 100%;
+}
+
+.confirm_btn {
+  background-image: url('../../../assets/home/confirm.png');
+  background-size: 100% 100%;
+}
+
+.return_btn,
+.confirm_btn {
+  width: 10.97rem;
+  height: 3.93rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.06rem;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.secd_flex_s>span:nth-child(1) {
+  font-size: 0.94rem;
+  color: #ABDFFF;
+}
+
+.secd_flex_s>span:nth-child(2) {
+  font-size: 0.94rem;
+  color: #03FCD3;
+}
+
+.secd_g {
+  font-size: 1rem;
+  color: #ABDFFF
+}
+
+.secd_title_d {
+  font-size: 1.13rem;
+  color: #FFFFFF;
+  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.secd_flex_w {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 1.6rem;
+  box-sizing: border-box;
+}
+
+.secd_flex {
+  display: flex;
+  flex-direction: column;
+  gap: .375rem;
+
+  .secd_title {
+    font-size: 0.88rem;
+    color: #ABDFFF;
+    opacity: 0.5;
   }
-  .header_top {
+}
+
+
+.check_box_c {
+  width: 1.19rem;
+  height: 100%;
+  background-image: url('../../../assets/home/check.png');
+  background-size: 100% 100%;
+
+}
+
+.check_box_c_active {
+  width: 1.3rem;
+  height: 100%;
+  background-image: url('../../../assets/home/checked.png');
+  background-size: 100% 100%;
+}
+
+.send_work {
+  height: 9.69rem;
+  background-image: url('../../../assets/home/packUpback.png');
+  background-size: 100% 100%;
+  margin-top: 1.38rem;
+  padding: 0.44rem 0.4rem 1.34rem 1.22rem;
+  box-sizing: border-box;
+
+  .check_box {
+    height: 1.19rem;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    justify-content: right;
   }
-  .ot {
-    position: relative;
-    top: -1.3rem;
-  }
-  .header_middle1 {
+}
+
+.com_top {
+  margin-top: 1.72rem !important;
+}
+
+.completion_con {
+  height: 5.19rem;
+  background-image: url('../../../assets/home/completion.png');
+  background-size: 100% 100%;
+  margin-top: 0.72rem;
+  padding: 1rem 1.28rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.home_con_s {
+  position: relative;
+
+  .pack_up {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 5.56rem;
+    background-image: url('../../../assets/home/packUp.png');
+    background-size: 100% 100%;
+    height: 1.97rem;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    .ft {
-      font-size: 1.5rem;
-      width: 5rem;
-      text-align: center;
+    justify-content: center;
+
+    img {
+      width: 2.59rem;
+      height: 0.88rem;
     }
+
+
+
   }
-  .header_middle {
-    position: relative;
-    top: -0.3rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  /deep/ .btn-group > .btn,
-  .btn-group-vertical > .btn {
-    background: #ffffff;
-    color: #2c3e50;
-    outline: none;
-    border: none;
-    margin: 0;
-    z-index: 3;
+
+  .pack_up_d {
+    top: -1.1rem;
   }
-  .header_footer {
-    position: relative;
-    top: -1.7rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    div {
-      font-size: 0.5rem;
-      color: rgb(244, 136, 42);
+
+  .pack_up_con {
+    height: 14.09rem;
+    background-image: url('../../../assets/home/packUpback.png');
+    background-size: 100% 100%;
+    padding: 1.78rem 2.03rem;
+    box-sizing: border-box;
+
+    .pack_up_name {
+      height: 1.25rem;
+      font-size: 1.25rem;
+      color: #fff;
+      font-weight: 600;
     }
-  }
-  .bdy {
-    width: 94%;
-    height: calc(100% - 18.7rem);
-    overflow: auto;
-    position: relative;
-    top: 1rem;
-    left: 3%;
-  }
 
-  /deep/td {
-    text-align: center;
-    vertical-align: middle;
-  }
-  table {
-    border-collapse: collapse; /* 合并边框 */
-    width: 100%; /* 表格宽度 */
-    background: #fff;
-    table-layout: fixed;
-  }
-  th {
-    font-size: 0.6rem;
-    background: #66b1f4;
-    color: #fff;
-  }
-  td {
-    font-size: 0.6rem;
-    word-break: break-all;
+    .pack_up_grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      row-gap: .625rem;
+
+      &>div {
+        display: flex;
+        flex-direction: column;
+        row-gap: .625rem;
+
+        &>div {
+          display: flex;
+          gap: .125rem;
+
+          span:nth-child(1) {
+            font-size: 1.63rem;
+            font-family: DIN-BoldItalic, DIN;
+            font-weight: 600;
+            color: #04FFD5;
+            line-height: 1.31rem;
+            transform: skewX(-10deg);
+            text-shadow: 0px 0px 0px rgba(4, 255, 213, 0.23);
+
+          }
+
+          span:nth-child(2) {
+            font-size: 1rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ABDFFF;
+          }
+        }
+
+        &>p:nth-child(1) {
+          font-size: 1rem;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #ABDFFF;
+          margin-bottom: 0px;
+        }
+      }
+    }
   }
-  td,
-  th {
-    vertical-align: middle;
+}
+
+.home_con_body {
+  width: 100%;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.home_header {
+  height: 3.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.home_header_line {
+  width: 100%;
+  height: .0625rem;
+  background-color: #fff;
+  opacity: 0.2;
+}
+
+.header {
+  width: 94%;
+  height: 7rem;
+  // overflow: hidden;
+  // transition: all 0.4s;
+  position: relative;
+  top: 0.5rem;
+  left: 3%;
+  box-shadow: 0.16rem 0.1rem 0.1rem 0.1rem #9d9b9b;
+  border-radius: 1rem;
+  padding: 0.4rem 0.7rem 0 1rem;
+  background: #fff;
+}
+
+.header_btn {
+  border-radius: 1rem;
+  padding: 0.1rem;
+  width: 5rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.header_top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ot {
+  position: relative;
+  top: -1.3rem;
+}
+
+.header_middle1 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .ft {
+    font-size: 1.5rem;
+    width: 5rem;
     text-align: center;
-    border: 0.1rem solid #dddddd; /* 单元格边框样式 */
-    padding: 0.02rem; /* 单元格内边距 */
-  }
-  .choose_item {
-    background: #c8c8c8;
   }
-  .footer {
-    display: flex;
-    justify-content: space-around;
-    width: 100%;
-    position: absolute;
-    bottom: 4.8rem;
+}
+
+.header_middle {
+  position: relative;
+  top: -0.3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/deep/ .btn-group>.btn,
+.btn-group-vertical>.btn {
+  background: #ffffff;
+  color: #2c3e50;
+  outline: none;
+  border: none;
+  margin: 0;
+  z-index: 3;
+}
+
+.header_footer {
+  position: relative;
+  top: -1.7rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  div {
+    font-size: 0.5rem;
+    color: rgb(244, 136, 42);
   }
+}
+
+.bdy {
+  width: 94%;
+  height: calc(100% - 18.7rem);
+  overflow: auto;
+  position: relative;
+  top: 1rem;
+  left: 3%;
+}
+
+/deep/td {
+  text-align: center;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+  /* 合并边框 */
+  width: 100%;
+  /* 表格宽度 */
+  background: #fff;
+  table-layout: fixed;
+}
+
+th {
+  font-size: 0.6rem;
+  background: #66b1f4;
+  color: #fff;
+}
+
+td {
+  font-size: 0.6rem;
+  word-break: break-all;
+}
+
+td,
+th {
+  vertical-align: middle;
+  text-align: center;
+  border: 0.1rem solid #dddddd;
+  /* 单元格边框样式 */
+  padding: 0.02rem;
+  /* 单元格内边距 */
+}
+
+.choose_item {
+  background: #c8c8c8;
+}
+
+.footer {
+  display: flex;
+  width: 100%;
+  position: absolute;
+  bottom: 4.8rem;
+}
 </style>

src/views/page/Home.vue

@@ -56,7 +56,7 @@ color: #ABDFFF;">展开</div>
 
             </div>
           </div>
-          <div class="completion_con">
+          <div class="completion_con" @click="handlePackage">
             <div style="display: flex;align-items: center;gap: .84rem;">
               <img style="width: 3.19rem;height: 3.19rem" src="../../assets/home/bzhomebz.png" alt="">
               <p style="margin-bottom: 0;font-size: 1.13rem;color: #FFFFFF;">包装</p>

src/views/page/Package/detail.vue

@@ -1,45 +1,113 @@
 <template>
-  <div>
+  <div style="overflow-y: scroll;padding-bottom: 9rem;box-sizing: border-box;">
+    <div style="background-image: url('../../../assets/images/bc.png');background-size: 100% 100%;">
+      <div class="home_header">包装</div>
+      <div class="home_header_line"></div>
+      <div class="home_con_body">
+        <div class="home_con_s">
+          <div v-if="is_show" class="pack_up">
+            <img @click="handleShow" src="../../../assets/home/collect.png" alt="">
+          </div>
+          <div v-if="!is_show" :class="!is_show ? 'pack_up_d' : ''" class="pack_up" style="display: flex;gap: .3125rem;">
+            <div style="font-size: 0.88rem;
+color: #ABDFFF;">展开</div>
+            <img @click="handleShow" style="width: 0.41rem;height: 0.69rem;" src="../../../assets/home/zk.png" alt="">
+          </div>
+          <div v-if="is_show" class="pack_up_con">
+            <p class="pack_up_name">王晓伟</p>
+            <div class="pack_up_grid">
+              <div>
+                <p>产品数</p>
+                <div><span>{{ this.product_total }}</span><span>件</span></div>
+              </div>
+              <div>
+                <p>已包数</p>
+                <div><span>{{ this.box_num }}</span><span>件</span></div>
+              </div>
+              <div>
+                <p>未包数</p>
+                <div><span>{{ this.product_total - this.box_num }}</span><span>件</span></div>
+              </div>
+              <!-- <div>
+                <p>包装件数</p>
+                <div><span>1245</span><span>件</span></div>
+              </div> -->
+            </div>
+          </div>
+        </div>
+
+        <div class="send_work" v-if="tableData.length > 0" v-for="(item, index) in tableData" :key="index">
+          <div class="check_box">
+            <div @click="handleChoose(item, index)" :class="item.is_choose ? 'check_box_c_active' : 'check_box_c'">
+            </div>
+          </div>
+          <div class="secd_flex">
+            <div class="secd_title">
+              <span>产品名称：</span><span> {{ item.bus_no }}</span>
+            </div>
+            <span class="secd_title_d">{{ item.product_title }}</span>
+            <div class="secd_g"><span>规格型号：</span><span>{{ item.product_size }}</span></div>
+            <div class="secd_flex_w">
+              <div class="secd_flex_s">
+                <span>花色：</span>
+                <span>{{ item.out_qty }}件</span>
+              </div>
+              <div class="secd_flex_s">
+                <span>已包装数量：</span>
+                <span>{{ item.this_delivery_qty - item.out_qty }}件</span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div v-if="tableData.length == 0"
+          style="display: flex;width: 100%;height: 10rem;justify-content: center;align-items: center;">
+
+          <Spin size="small" />
+          <Spin />
+          <Spin size="small" />
+
+        </div>
+        <div class="footer">
+
+          <div class="return_btn" @click="handleReturn">返回</div>
+          <div class="confirm_btn" @click="handelGoSure">确认</div>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+  <!-- /////////////// -->
+  <!-- <div>
     <div class="header">
       <div class="header_top">
-        <Button
-            type="primary"
-            class="header_btn"
-            ghost
-            @click="handleShow"
-            :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'"
-        >
+        <Button type="primary" class="header_btn" ghost @click="handleShow"
+          :icon="is_show ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'">
           <div style="margin-right: 0.6rem">
             {{ is_show ? "收起" : "展开" }}
-          </div></Button
-        >
+          </div>
+        </Button>
         <div style="margin-right: 1rem; color: #66a9f0">王小伟</div>
       </div>
       <div class="header_middle">
         <b-dropdown size="sm" text="产品数" class="m-2" :disabled="is_use">
-          <!--<b-dropdown-item-button>Action</b-dropdown-item-button>-->
-          <!--<b-dropdown-item-button>Another action</b-dropdown-item-button>-->
-          <!--<b-dropdown-item-button>Something else here</b-dropdown-item-button>-->
+         
         </b-dropdown>
         <b-dropdown size="sm" text="已包数" class="m-2" :disabled="is_use">
-          <!--<b-dropdown-item-button>Action</b-dropdown-item-button>-->
-          <!--<b-dropdown-item-button>Another action</b-dropdown-item-button>-->
-          <!--<b-dropdown-item-button>Something else here</b-dropdown-item-button>-->
+         
         </b-dropdown>
         <b-dropdown size="sm" text="未包数" class="m-2" :disabled="is_use">
-          <!--<b-dropdown-item-button>Action</b-dropdown-item-button>-->
-          <!--<b-dropdown-item-button>Another action</b-dropdown-item-button>-->
-          <!--<b-dropdown-item-button>Something else here</b-dropdown-item-button>-->
+         
         </b-dropdown>
       </div>
       <div class="header_middle1 ot">
-        <div class="ft">{{this.product_total}} &nbsp;</div>
-        <div class="ft">{{this.box_num}} &nbsp;</div>
-        <div class="ft">{{this.product_total-this.box_num}} &nbsp;</div>
+        <div class="ft">{{ this.product_total }} &nbsp;</div>
+        <div class="ft">{{ this.box_num }} &nbsp;</div>
+        <div class="ft">{{ this.product_total - this.box_num }} &nbsp;</div>
       </div>
       <div class="header_footer">
-        <!--<div style="margin-left: 1rem">已完成56/10</div>-->
-        <!--<div style="margin-right: 1.4rem">已完成10%</div>-->
+        
       </div>
     </div>
     <div class="bdy">
@@ -51,46 +119,30 @@
           <th style="width: 3rem">已包装数量</th>
           <th style="width: 3rem">未包装数量</th>
         </tr>
-        <tr
-            v-for="(item, index) in tableData"
-            :key="index"
-            @click="handleChoose(item, index)"
-            :class="item.is_choose ? 'choose_item' : ''"
-        >
+        <tr v-for="(item, index) in tableData" :key="index" @click="handleChoose(item, index)"
+          :class="item.is_choose ? 'choose_item' : ''">
 
           <td>{{ item.material_code_show }}</td>
-          <td>{{item.specs }}</td>
+          <td>{{ item.specs }}</td>
           <td>
             {{ item.decor_code_show }}
           </td>
           <td>{{ item.box_num_total }}</td>
-          <td>{{ item.qty-item.box_num_total }}</td>
+          <td>{{ item.qty - item.box_num_total }}</td>
         </tr>
       </table>
     </div>
     <div class="footer">
-      <Button
-          type="primary"
-          class="header_btn"
-          style="margin-right: 3rem; height: 2.6rem"
-          @click="handleReturn"
-      >
-        返回</Button
-      >
-      <Button
-          type="primary"
-          class="header_btn"
-          style="margin-left: 3rem; height: 2.6rem"
-          @click="handelGoSure"
-      >
-        确认</Button
-      >
+      <Button type="primary" class="header_btn" style="margin-right: 3rem; height: 2.6rem" @click="handleReturn">
+        返回</Button>
+      <Button type="primary" class="header_btn" style="margin-left: 3rem; height: 2.6rem" @click="handelGoSure">
+        确认</Button>
     </div>
-  </div>
+  </div> -->
 </template>
 <script>
 export default {
-  data () {
+  data() {
     return {
       tableData: [],
       is_show: true,
@@ -99,7 +151,7 @@ export default {
       box_num: 0,
     }
   },
-  mounted () {
+  mounted() {
     // if (localStorage.getItem('fyy_target')) {
     //   data.target = JSON.parse(localStorage.getItem('fyy_target'))
     // }
@@ -108,24 +160,24 @@ export default {
 
     const data = {
       url: 'http://121.36.142.167:7774/jbl/api/module-data/sale_order/page',
-      post: {"direction":"DESC","property":"id","fromClientType":"pc","number":0,"sorts":[],"rules":[{"field":"exe_sale_order_b.no","option":"LIKE_ANYWHERE","values":["SO202308070001"]}],"size":15,"specialConditions":[],"workflowSearchBean":{},"dynamicFormCode":"sale_order","dynamicFormTable":null,"ignoreField":true,"developmentSystemId":null,"debugFlag":true}
+      post: { "direction": "DESC", "property": "id", "fromClientType": "pc", "number": 0, "sorts": [], "rules": [{ "field": "exe_sale_order_b.no", "option": "LIKE_ANYWHERE", "values": ["SO202308070001"] }], "size": 15, "specialConditions": [], "workflowSearchBean": {}, "dynamicFormCode": "sale_order", "dynamicFormTable": null, "ignoreField": true, "developmentSystemId": null, "debugFlag": true }
     }
     this.initData(data)
   },
   methods: {
-    initData (row) {
+    initData(row) {
       this.axios.post('/api/testdwy', { ...row }).then(res => {
         res.data.content.forEach(v => {
           v.is_choose = false
           v.no = v.exe_sale_order_b.no
-          v.un_box_num = v.qty-v.box_num_total
+          v.un_box_num = v.qty - v.box_num_total
           this.product_total += v.qty
           this.box_num += v.box_num_total
         })
         this.tableData.push(...res.data.content)
       })
     },
-    handelGoSure () {
+    handelGoSure() {
       if (this.tableData.filter(v => v.is_choose).length === 0) {
         return this.$Message.warning('请先选择数据！')
       }
@@ -135,15 +187,15 @@ export default {
       localStorage.setItem(dataId + '', text)
       this.$router.push({ path: '/cms/package/detailed', query: { id: dataId } })
     },
-    handleReturn () {
+    handleReturn() {
       localStorage.removeItem('fyy_target')
       this.$router.push('/cms/home')
     },
-    handleChoose (item, index) {
+    handleChoose(item, index) {
       item.is_choose = !item.is_choose
       this.tableData.splice(index, 1, item)
     },
-    handleShow () {
+    handleShow() {
       this.is_show = !this.is_show
       if (this.is_show) {
         document.getElementsByClassName('header')[0].style = 'height:7rem;overflow:hidden;transition:all .4s;'
@@ -160,6 +212,230 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.return_btn {
+  background-image: url('../../../assets/home/return.png');
+  background-size: 100% 100%;
+}
+
+.confirm_btn {
+  background-image: url('../../../assets/home/confirm.png');
+  background-size: 100% 100%;
+}
+
+.return_btn,
+.confirm_btn {
+  width: 10.97rem;
+  height: 3.93rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.06rem;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.secd_flex_s>span:nth-child(1) {
+  font-size: 0.94rem;
+  color: #ABDFFF;
+}
+
+.secd_flex_s>span:nth-child(2) {
+  font-size: 0.94rem;
+  color: #03FCD3;
+}
+
+.secd_g {
+  font-size: 1rem;
+  color: #ABDFFF
+}
+
+.secd_title_d {
+  font-size: 1.13rem;
+  color: #FFFFFF;
+  text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.secd_flex_w {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 1.6rem;
+  box-sizing: border-box;
+}
+
+.secd_flex {
+  display: flex;
+  flex-direction: column;
+  gap: .375rem;
+
+  .secd_title {
+    font-size: 0.88rem;
+    color: #ABDFFF;
+    opacity: 0.5;
+  }
+}
+
+
+.check_box_c {
+  width: 1.19rem;
+  height: 100%;
+  background-image: url('../../../assets/home/check.png');
+  background-size: 100% 100%;
+
+}
+
+.check_box_c_active {
+  width: 1.3rem;
+  height: 100%;
+  background-image: url('../../../assets/home/checked.png');
+  background-size: 100% 100%;
+}
+
+.send_work {
+  height: 9.69rem;
+  background-image: url('../../../assets/home/packUpback.png');
+  background-size: 100% 100%;
+  margin-top: 1.38rem;
+  padding: 0.44rem 0.4rem 1.34rem 1.22rem;
+  box-sizing: border-box;
+
+  .check_box {
+    height: 1.19rem;
+    display: flex;
+    justify-content: right;
+  }
+}
+
+.com_top {
+  margin-top: 1.72rem !important;
+}
+
+.completion_con {
+  height: 5.19rem;
+  background-image: url('../../../assets/home/completion.png');
+  background-size: 100% 100%;
+  margin-top: 0.72rem;
+  padding: 1rem 1.28rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.home_con_s {
+  position: relative;
+
+  .pack_up {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 5.56rem;
+    background-image: url('../../../assets/home/packUp.png');
+    background-size: 100% 100%;
+    height: 1.97rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 2.59rem;
+      height: 0.88rem;
+    }
+
+
+
+  }
+
+  .pack_up_d {
+    top: -1.1rem;
+  }
+
+  .pack_up_con {
+    height: 14.09rem;
+    background-image: url('../../../assets/home/packUpback.png');
+    background-size: 100% 100%;
+    padding: 1.78rem 2.03rem;
+    box-sizing: border-box;
+
+    .pack_up_name {
+      height: 1.25rem;
+      font-size: 1.25rem;
+      color: #fff;
+      font-weight: 600;
+    }
+
+    .pack_up_grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      row-gap: .625rem;
+
+      &>div {
+        display: flex;
+        flex-direction: column;
+        row-gap: .625rem;
+
+        &>div {
+          display: flex;
+          gap: .125rem;
+
+          span:nth-child(1) {
+            font-size: 1.63rem;
+            font-family: DIN-BoldItalic, DIN;
+            font-weight: 600;
+            color: #04FFD5;
+            line-height: 1.31rem;
+            transform: skewX(-10deg);
+            text-shadow: 0px 0px 0px rgba(4, 255, 213, 0.23);
+
+          }
+
+          span:nth-child(2) {
+            font-size: 1rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ABDFFF;
+          }
+        }
+
+        &>p:nth-child(1) {
+          font-size: 1rem;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #ABDFFF;
+          margin-bottom: 0px;
+        }
+      }
+    }
+  }
+}
+
+.home_con_body {
+  width: 100%;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.home_header {
+  height: 3.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.home_header_line {
+  width: 100%;
+  height: .0625rem;
+  background-color: #fff;
+  opacity: 0.2;
+}
+
 .header {
   width: 94%;
   height: 7rem;
@@ -173,6 +449,7 @@ export default {
   padding: 0.4rem 0.7rem 0 1rem;
   background: #fff;
 }
+
 .header_btn {
   border-radius: 1rem;
   padding: 0.1rem;
@@ -181,25 +458,30 @@ export default {
   justify-content: space-around;
   align-items: center;
 }
+
 .header_top {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
 .ot {
   position: relative;
   top: -1.3rem;
 }
+
 .header_middle1 {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   .ft {
     font-size: 1.5rem;
     width: 5rem;
     text-align: center;
   }
 }
+
 .header_middle {
   position: relative;
   top: -0.3rem;
@@ -207,8 +489,9 @@ export default {
   justify-content: space-between;
   align-items: center;
 }
-/deep/ .btn-group > .btn,
-.btn-group-vertical > .btn {
+
+/deep/ .btn-group>.btn,
+.btn-group-vertical>.btn {
   background: #ffffff;
   color: #2c3e50;
   outline: none;
@@ -216,17 +499,20 @@ export default {
   margin: 0;
   z-index: 3;
 }
+
 .header_footer {
   position: relative;
   top: -1.7rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   div {
     font-size: 0.5rem;
     color: rgb(244, 136, 42);
   }
 }
+
 .bdy {
   width: 94%;
   height: calc(100% - 18.7rem);
@@ -240,34 +526,43 @@ export default {
   text-align: center;
   vertical-align: middle;
 }
+
 table {
-  border-collapse: collapse; /* 合并边框 */
-  width: 100%; /* 表格宽度 */
+  border-collapse: collapse;
+  /* 合并边框 */
+  width: 100%;
+  /* 表格宽度 */
   background: #fff;
   table-layout: fixed;
 }
+
 th {
   font-size: 0.6rem;
   background: #66b1f4;
   color: #fff;
 }
+
 td {
   font-size: 0.6rem;
   word-break: break-all;
 }
+
 td,
 th {
   vertical-align: middle;
   text-align: center;
-  border: 0.1rem solid #dddddd; /* 单元格边框样式 */
-  padding: 0.02rem; /* 单元格内边距 */
+  border: 0.1rem solid #dddddd;
+  /* 单元格边框样式 */
+  padding: 0.02rem;
+  /* 单元格内边距 */
 }
+
 .choose_item {
   background: #c8c8c8;
 }
+
 .footer {
   display: flex;
-  justify-content: space-around;
   width: 100%;
   position: absolute;
   bottom: 4.8rem;