页面重构

src/router/views/index.js

@@ -1048,14 +1048,14 @@ export default [
     ],
   },
   {
-    path: '/distribution/signfor//devtmp',
+    path: '/distribution/signfor/devtmp',
     component: Layout,
-    redirect: '/distribution/signfor//devtmp',
+    redirect: '/distribution/signfor/devtmp',
     children: [
       {
-        path: '/distribution/signfor//devtmp',
+        path: '/distribution/signfor/devtmp',
         name: '签收明细重构',
-        component: () => import('@/views/distribution/signfor//devtmp.vue'),
+        component: () => import('@/views/distribution/signfor/devtmp.vue'),
       },
     ],
   },

src/views/distribution/signfor/devtmp.vue

@@ -1,7 +1,143 @@
 <template>
+  <el-card class="box-card">
+    <template #header>
+      <div class="card-header">
+        <span>当前签收单状态</span>
+      </div>
+      <el-steps :active="1" finish-status="success">
+        <el-step title="待签收" />
+        <el-step title="已经签收" />
+        <el-step title="完成" />
+      </el-steps>
+    </template>
 
+    <!-- 基础信息 -->
+    <el-divider content-position="left">基本信息</el-divider>
+    <div class="Basic-information">
+      <div class="el-txt">
+        <el-icon><List /></el-icon>
+        <span class="title-name">预约单号:</span>
+        <span class="el-cont">YYJM2023110200009</span>
+      </div>
+      <div class="el-txt">
+        <el-icon><School /></el-icon>
+        <span class="title-name">商场名称:</span>
+        <span class="el-cont">荆门欧派衣橱</span>
+      </div>
+      <div class="el-txt">
+        <el-icon><Calendar /></el-icon>
+        <span class="title-name"> 预约时间:</span>
+        <span class="el-cont">2023-11-02 00:00:00</span>
+      </div>
+    </div>
+
+    <!-- 配送信息 -->
+    <el-divider content-position="left">配送信息</el-divider>
+    <div class="Basic-information">
+      <div class="el-txt">
+        <el-icon><Van /></el-icon>
+        <span class="title-name">配送车次:</span>
+        <span class="el-cont">PSCCJM2023110200005</span>
+      </div>
+      <div class="el-txt">
+        <el-icon><Avatar /></el-icon>
+        <span class="title-name">配送司机姓名:</span>
+        <span class="el-cont">郑少峰</span>
+      </div>
+      <div class="el-txt">
+        <el-icon><Postcard /></el-icon>
+        <span class="title-name"> 配送车辆牌照:</span>
+        <span class="el-cont">鄂HG40Q9</span>
+      </div>
+      <div class="el-txt">
+        <el-icon><Van /></el-icon>
+        <span class="title-name"> 装车班组:</span>
+        <span class="el-cont">周海强班组</span>
+      </div>
+      <div class="el-txt">
+        <el-icon><Van /></el-icon>
+        <span class="title-name"> 卸车班组:</span>
+        <span class="el-cont">周海强班组</span>
+      </div>
+    </div>
+
+    <!-- 收货人信息 -->
+    <el-divider content-position="left">收货人信息</el-divider>
+    <div class="Basic-information">
+      <div class="el-txt">
+        <el-icon><Van /></el-icon>
+        <span class="title-name">收货人姓名:</span>
+        <span class="el-cont">张三丰</span>
+      </div>
+      <div class="el-txt">
+        <el-icon><Avatar /></el-icon>
+        <span class="title-name">收货人号码:</span>
+        <span class="el-cont">13206596513</span>
+      </div>
+      <div class="el-txt">
+        <el-icon><Postcard /></el-icon>
+        <span class="title-name"> 收货人地址:</span>
+        <span class="el-cont">中国湖北省荆门市掇刀区,万达</span>
+      </div>
+      <div class="el-txt">
+        <el-icon><Van /></el-icon>
+        <span class="title-name"> 是否加急:</span>
+        <span class="el-cont">否</span>
+      </div>
+      <div class="el-txt">
+        <el-icon><Van /></el-icon>
+        <span class="title-name"> 客户备注:</span>
+        <span class="el-cont">周海强班组</span>
+        <el-input v-model="input" disabled placeholder="Please input" />
+      </div>
+    </div>
+  </el-card>
 </template>
 
-<script setup></script>
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.el-card {
+  height: 100vh;
+
+  .el-card__header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    .el-steps {
+      width: 100%;
+      margin-top: 25px;
+    }
+  }
 
-<style lang="scss" scoped></style>
+  .card-header {
+    font-size: 18px;
+    font-weight: 500;
+  }
+  :deep(.el-divider__text) {
+    font-size: 16px;
+  }
+  .Basic-information {
+    display: flex;
+    justify-content: flex-start;
+    margin-bottom: 50px;
+    flex-wrap: wrap;
+  }
+  .el-txt {
+    min-width: 280px;
+    margin-right: 3%;
+    display: flex;
+    align-items: center;
+    i {
+      margin-right: 5px;
+    }
+    .title-name {
+      font-weight: 500;
+    }
+    .el-cont {
+      font-weight: 400;
+      padding: 0 10px;
+    }
+  }
+}
+</style>