diff --git a/src/components/ShelfDisplay/index.vue b/src/components/ShelfDisplay/index.vue index 9a7f430c..23236b1c 100644 --- a/src/components/ShelfDisplay/index.vue +++ b/src/components/ShelfDisplay/index.vue @@ -31,7 +31,47 @@ >
- {{ slot.code }} + + {{ slot.cpmctymc ? slot.cpmctymc: "暂未绑定"}} + + + 当前库存: {{ slot.reCount }} + + + 最大库存:{{ slot.maxDrugCount }} + + + 预警信息:{{ slot.reCount <= slot.remindCount?'不足':'正常' }} + +
@@ -60,7 +100,7 @@ export default { } }, created() { - this.shelfData = this.shelfData.sort((a, b) => a.id - b.id) + } } @@ -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; /* 文本左对齐 */ } /* 上边框的颜色框容器 */