1

src/views/group/data-board/distribution-of-goods/index.vue

@@ -5,14 +5,11 @@
     </div>
     <vue-draggable-next v-model="columns" tag="transition-group" @end="dragEnd">
       <transition-group>
-        <div
-          v-for="(item, index) in columns"
-          :key="index"
-          style="margin-right: 20px; margin-bottom: 20px; width: 30vw; border: 1px solid #999; cursor: pointer">
+        <div v-for="(item, index) in columns" :key="index" class="columns-items">
           <el-row type="flex">
             <el-col :span="18">
-              <div style="padding: 8px; height: 37px; font-weight: 700; background-color: #c280ff">{{ item.code }}</div>
-              <div style="padding: 8px; height: 37px; background-color: #00ffff">
+              <div class="div-top">{{ item.code }}</div>
+              <div class="div-bottom">
                 <el-tooltip class="box-item" effect="dark" placement="bottom">
                   <template #content>
                     <div style="max-width: 600px; word-break: break-all">{{ item.name }}</div>
@@ -23,8 +20,8 @@
             </el-col>
             <el-col :span="6" style="border-left: 1px solid #999">
               <div style="position: relative; height: 100%">
-                <div style="padding: 8px; height: 37px; background-color: #c280ff"></div>
-                <div style="padding: 8px; height: 37px; background-color: #00ffff"></div>
+                <div class="div-top"></div>
+                <div class="div-bottom"></div>
                 <span style="font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">{{ item.inventoryQuantity }}</span>
               </div>
             </el-col>
@@ -93,4 +90,23 @@ const dragEnd = () => {
     flex-wrap: wrap;
   }
 }
+.columns-items {
+  margin-right: 3px;
+  margin-bottom: 30px;
+  width: 30vw;
+  border: 1px solid #999;
+  cursor: pointer;
+  .div-top {
+    padding: 8px;
+    height: 37px;
+    background-color: #c280ff;
+    font-weight: 700;
+  }
+  .div-bottom {
+    padding: 8px;
+    height: 37px;
+    background-color: #00ffff;
+    font-weight: 700;
+  }
+}
 </style>