feat: 优化

src/components/ShelfDisplay/index.vue

@@ -1,28 +1,38 @@
 <template>
-  <div class="shelf">
-    <el-divider>取货架编号:{{ freightCode }}</el-divider>
-    <div style="margin-top: 20px">
-      <div
-        v-for="(row, rowIndex) in shelfData"
-        :key="rowIndex"
-        class="shelf-row"
-        :style="{ display: 'flex', flexWrap: 'nowrap', height: `${ row.height}px` }"
-      >
+  <div class="shelf-container">
+    <div class="shelf">
+      <el-divider>取货架编号:{{ freightCode }}</el-divider>
+      <div style="margin-top: 20px">
         <div
-          v-for="(slot, slotIndex) in row.sysWorkplaceQueues"
-          :key="slot.id"
-          class="shelf-slot"
-          :style="{ width: `${100 / row.sysWorkplaceQueues.length}%` , height: `${ row.height}px`}"
-          @click="handleSlotClick(slot)"
+          v-for="(row, rowIndex) in shelfData"
+          :key="rowIndex"
+          class="shelf-row"
+          :style="{ display: 'flex', flexWrap: 'nowrap', height: `${ row.height}px` }"
         >
-          <div class="top-border-boxes">
-              <div :class="['top-border-box', {'red-box': slot.colors.includes('red')} ? {'red-box': slot.colors.includes('red')} : 'white-box' ]"></div>
-              <div :class="['top-border-box', {'blue-box': slot.colors.includes('blue')} ? {'blue-box': slot.colors.includes('blue')} : 'white-box' ]"></div>
-              <div :class="['top-border-box', {'green-box': slot.colors.includes('green')} ? {'green-box': slot.colors.includes('green')} : 'white-box' ]"></div>
-              <div :class="['top-border-box', {'yellow-box': slot.colors.includes('yellow')} ? {'yellow-box': slot.colors.includes('yellow')} : 'white-box' ]"></div>
+          <div
+            v-for="(slot, slotIndex) in row.sysWorkplaceQueues"
+            :key="slot.id"
+            class="shelf-slot"
+            :style="{ width: `${100 / row.sysWorkplaceQueues.length}%` , height: `${ row.height}px`}"
+            @click="handleSlotClick(slot)"
+          >
+            <div class="top-border-boxes">
+              <div
+                :class="['top-border-box', {'red-box': slot.colors.includes('red')} ? {'red-box': slot.colors.includes('red')} : 'white-box' ]"
+              ></div>
+              <div
+                :class="['top-border-box', {'blue-box': slot.colors.includes('blue')} ? {'blue-box': slot.colors.includes('blue')} : 'white-box' ]"
+              ></div>
+              <div
+                :class="['top-border-box', {'green-box': slot.colors.includes('green')} ? {'green-box': slot.colors.includes('green')} : 'white-box' ]"
+              ></div>
+              <div
+                :class="['top-border-box', {'yellow-box': slot.colors.includes('yellow')} ? {'yellow-box': slot.colors.includes('yellow')} : 'white-box' ]"
+              ></div>
+            </div>
+            <div class="centered-container">
+              <span style="text-align: center;">{{ slot.code }}</span>
             </div>
-          <div class="centered-container">
-            <span style="text-align: center;">{{ slot.code }}</span>
           </div>
         </div>
       </div>
@@ -36,37 +46,45 @@ export default {
   props: {
     shelfData: {
       type: Array,
-      required: true,
+      required: true
     },
     freightCode: {
       type: Object,
-      required: true,
+      required: true
     },
     colorCount: {
       type: Number,
-      default: 4, // 默认颜色数量为 4
-    },
+      default: 4 // 默认颜色数量为 4
+    }
   },
   methods: {
     handleSlotClick(slot) {
       // 发射一个名为 'slot-click' 的自定义事件，携带被点击的货位信息
-      this.$emit('slot-click', slot);
-    },
+      this.$emit('slot-click', slot)
+    }
   },
   created() {
-    this.shelfData = this.shelfData.sort((a, b) => a.id - b.id);
-  },
-};
+    this.shelfData = this.shelfData.sort((a, b) => a.id - b.id)
+  }
+}
 </script>
 
 <style scoped>
+.shelf-container {
+  border: 2px solid #ccc; /* 新添加的外层边框 */
+  border-radius: 10px; /* 外层边框的圆角效果 */
+  padding: 10px; /* 外层边框的内边距 */
+  background-color: #f8f8f8; /* 外层边框的背景颜色 */
+}
+
 .shelf {
   width: 100%;
   margin: auto;
+  perspective: 1000px; /* 添加透视效果 */
 }
 
 .shelf-row {
-  margin: 0;
+  margin: 10px;
   padding: 0;
   display: flex;
   align-items: center; /* 确保行内容垂直居中 */
@@ -80,10 +98,25 @@ export default {
   text-align: center;
   transition: transform 0.3s ease; /* 添加过渡效果 */
   transform-style: preserve-3d; /* 保持3D子元素的变换 */
+  border-top: 5px solid #ddd; /* 新添加的上边框，宽度为 5px，颜色为 #ddd */
+  margin-left: 5px; /* 增加左边距 */
+  margin-right: 5px; /* 增加右边距 */
+  transform: perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(20px); /* 细化 3D 效果 */
+  background: linear-gradient(to bottom, #e6f7ff, #d1e8fd); /* 线性渐变的浅蓝背景 */
 }
 
 .shelf-slot:hover {
-  transform: rotateY(10deg); /* 添加旋转效果 */
+  transform: perspective(800px) rotateX(10deg) rotateY(10deg) translateZ(40px); /* 鼠标悬停时增强 3D 效果 */
+}
+
+/* 使用伪元素创建颜色框 */
+.shelf-slot::before,
+.shelf-slot::after {
+  content: '';
+  position: absolute;
+  width: 20px; /* 调整颜色框宽度 */
+  height: 20px; /* 调整颜色框高度 */
+  border-radius: 50%; /* 圆形颜色框 */
 }
 
 .centered-container {
@@ -122,6 +155,7 @@ export default {
 .yellow-box {
   background-color: yellow;
 }
+
 .white-box {
   background-color: white;
 }