feat: 优化

src/components/ShelfDisplay/index.vue

@@ -31,7 +31,47 @@
               ></div>
             </div>
             <div class="centered-container">
-              <span style="text-align: center;">{{ slot.code }}</span>
+                <span :style="{
+                            color: slot.cpmctymc ? 'green' : 'black',
+                            fontSize:`${14 + 30/row.sysWorkplaceQueues.length}px` ,
+                            fontWeight: 'bold'
+                          }">
+                  {{ slot.cpmctymc ? slot.cpmctymc: "暂未绑定"}}
+                </span>
+
+              <span  v-if="slot.cpmctymc" :style="{
+                            color: 'orange',
+                            fontSize:`${10 + 20/row.sysWorkplaceQueues.length}px` ,
+                            fontWeight: 'bold'
+                          }">当前库存： <span :style="{
+                            color: 'green',
+                            fontSize:`${10 + 20/row.sysWorkplaceQueues.length}px` ,
+                            fontWeight: 'bold'
+                          }">{{ slot.reCount }}
+                </span> </span>
+
+              <span v-if="slot.cpmctymc":style="{
+                            color: 'orange',
+                            fontSize:`${10 + 20/row.sysWorkplaceQueues.length}px` ,
+                            fontWeight: 'bold'
+                          }">最大库存：<span  :style="{
+                            color: 'green',
+                            fontSize:`${10 + 20/row.sysWorkplaceQueues.length}px` ,
+                            fontWeight: 'bold'
+                          }">{{ slot.maxDrugCount }}
+                </span></span>
+
+              <span v-if="slot.cpmctymc"  :style="{
+                            color: 'orange',
+                            fontSize:`${10 + 20/row.sysWorkplaceQueues.length}px` ,
+                            fontWeight: 'bold'
+                          }">预警信息：<span :style="{
+                            color: slot.reCount <= slot.remindCount ? 'red' : 'green',
+                            fontSize:`${10 + 20/row.sysWorkplaceQueues.length}px` ,
+                            fontWeight: 'bold'
+                          }">{{ slot.reCount <= slot.remindCount?'不足':'正常' }}
+                </span></span>
+
             </div>
           </div>
         </div>
@@ -60,7 +100,7 @@ export default {
     }
   },
   created() {
-    this.shelfData = this.shelfData.sort((a, b) => a.id - b.id)
+
   }
 }
 </script>
@@ -97,12 +137,16 @@ export default {
   border-top: 5px solid #ddd; /* 新添加的上边框，宽度为 5px，颜色为 #ddd */
   margin-left: 5px; /* 增加左边距 */
   margin-right: 5px; /* 增加右边距 */
-  transform: perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(0px); /* 细化 3D 效果 */
+  transition: transform 0.3s ease; /* 平滑的过渡效果 */
+  transform-style: preserve-3d; /* 保持3D变换的子元素在3D空间中 */
+  perspective: 800px; /* 设置透视效果，模拟3D深度 */
+  z-index: 10;
   background: linear-gradient(to bottom, #e6f7ff, #d1e8fd); /* 线性渐变的浅蓝背景 */
 }
 
 .shelf-slot:hover {
-  transform: perspective(800px) rotateX(10deg) rotateY(10deg) translateZ(40px); /* 鼠标悬停时增强 3D 效果 */
+  z-index: 25;
+  transform: perspective(800px) rotateX(0deg) rotateY(0deg) scale(1.1); /* 悬停时应用3D变换和放大效果 */
 }
 
 /* 使用伪元素创建颜色框 */
@@ -116,10 +160,20 @@ export default {
 }
 
 .centered-container {
+  margin-top: 10px;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%; /* 确保子元素垂直居中 */
+  flex-direction: column; /* 使得子元素垂直排列 */
+  align-items: flex-start; /* 让子元素在水平方向上靠左对齐 */
+}
+
+.left-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column; /* 使得子元素垂直排列 */
+}
+.left-content span {
+  display: block; /* 使每个span元素成为块级元素，从而单独占一行 */
+  text-align: left; /* 文本左对齐 */
 }
 
 /* 上边框的颜色框容器 */