feat: 优化

src/components/ShelfDisplay/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="shelf-container">
     <div class="shelf">
       <el-divider>取货架编号:{{ freightCode }}</el-divider>
       <div style="margin-top: 20px">
@@ -16,10 +17,18 @@
             @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
-              <div :class="['top-border-box', {'blue-box': slot.colors.includes('blue')} ? {'blue-box': slot.colors.includes('blue')} : 'white-box' ]"></div>
+                :class="['top-border-box', {'red-box': slot.colors.includes('red')} ? {'red-box': slot.colors.includes('red')} : 'white-box' ]"
-              <div :class="['top-border-box', {'green-box': slot.colors.includes('green')} ? {'green-box': slot.colors.includes('green')} : 'white-box' ]"></div>
+              ></div>
-              <div :class="['top-border-box', {'yellow-box': slot.colors.includes('yellow')} ? {'yellow-box': slot.colors.includes('yellow')} : '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>
@@ -28,6 +37,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -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;
 }