1.物料流转页面。

src/components/NumberInput/index.vue

@@ -1,15 +1,27 @@
 <template>
-  <!-- <div class="operate">
-    <div class="describeText operateText">{{ title }}</div>
-    
-  </div> -->
   <div class="operateBox">
     <div class="leftBox">
-      <svg-icon :icon-class="jiaDisabled ? 'bujian' : 'jian'" class="svgStyle" size="25" @click="value = value - step" />
+      <svg-icon
+        :icon-class="jiaDisabled ? 'bujian' : 'jian'"
+        class="svgStyle"
+        size="25"
+        @click="value = value - step"
+      />
     </div>
-    <el-input v-model="value" :disabled="jiaDisabled" :max="max" :min="min" class="showSum" />
+    <el-input
+      v-model="value"
+      :disabled="jiaDisabled"
+      :max="max"
+      :min="min"
+      class="showSum"
+    />
     <div class="rightBox">
-      <svg-icon :icon-class="jiaDisabled ? 'bujia' : 'jia'" class="svgStyle" size="25" @click="value = value + step" />
+      <svg-icon
+        :icon-class="jiaDisabled ? 'bujia' : 'jia'"
+        class="svgStyle"
+        size="25"
+        @click="value = value + step"
+      />
     </div>
   </div>
 </template>

src/views/material-flow/creatTask.vue

@@ -30,7 +30,14 @@
                 :key="index"
                 class="list-box"
               >
-                ddd
+                <div>
+                  <div class="name">{{ item.name }}name</div>
+                  <div class="spec">{{ item.spec }}spec</div>
+                </div>
+                <div class="bottom">
+                  <NumberInput v-model="item.number" />
+                  <span class="unit">{{ item.unit }}个</span>
+                </div>
               </div>
             </div>
           </el-scrollbar>
@@ -49,6 +56,7 @@
             ddd
           </div>
         </div>
+        <el-button class="sureBtn" type="primary">创建任务</el-button>
       </el-col>
     </el-row>
   </div>
@@ -125,13 +133,44 @@ const onEndBoxClick = (index: number) => {
     height: 210px;
     background: #fff;
     border-radius: 16px 16px 16px 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: start;
+    padding: 30px 30px;
+
+    .name {
+      font-weight: 500;
+      font-size: 24px;
+      color: rgba(0, 0, 0, 0.9);
+      text-align: left;
+    }
+
+    .spec {
+      font-size: 20px;
+      color: rgba(0, 0, 0, 0.6);
+      text-align: left;
+    }
+
+    .bottom {
+      display: flex;
+      justify-content: start;
+      align-items: end;
+    }
+
+    .unit {
+      font-weight: 500;
+      font-size: 24px;
+      color: rgba(0, 0, 0, 0.6);
+      text-align: left;
+      margin-left: 5px;
+    }
   }
 }
 
 .destination {
-  height: calc(100vh - 250px);
+  height: calc(100vh - 350px);
   margin-top: 15px;
-  border: 2px solid rgba(0, 0, 0, 0.1);
 
   .end-box {
     height: 80px;
@@ -150,8 +189,16 @@ const onEndBoxClick = (index: number) => {
   }
 
   .selected {
-    order-radius: 40px;
+    border-radius: 40px;
     border: 2px solid rgba(10, 89, 247, 1);
   }
 }
+
+.sureBtn {
+  height: 80px;
+  background: #0a59f7;
+  border-radius: 76px 76px 76px 76px;
+  width: 100%;
+  margin-top: 10px;
+}
 </style>