From cc7394172fdb88ab698492a3347625eac451c5df Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Sat, 20 Dec 2025 17:17:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=99=BA=E8=83=BD=E6=9F=9C=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87):=20=E4=BC=98=E5=8C=96=E5=8D=A0=E7=94=A8=E5=92=8C?=
 =?UTF-8?q?=E7=A9=BA=E9=97=B2=E7=8A=B6=E6=80=81=E7=9A=84SVG=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为占用和空闲状态添加渐变色背景和阴影效果
- 增加锁图标和更精致的文字样式
- 改进格口类型标签的显示方式
- 移除不必要的底部边距
---
 .../cabinet/smart-cabinet-card/detail.vue     | 102 +++++++++++++++---
 1 file changed, 87 insertions(+), 15 deletions(-)

diff --git a/src/views/cabinet/smart-cabinet-card/detail.vue b/src/views/cabinet/smart-cabinet-card/detail.vue
index cd3c35c..4a8e568 100644
--- a/src/views/cabinet/smart-cabinet-card/detail.vue
+++ b/src/views/cabinet/smart-cabinet-card/detail.vue
@@ -423,24 +423,98 @@ onMounted(() => {
                   <svg v-if="!item.coverImg && !item.faceImg && item.usageStatus === 2" width="80" height="80"
                     viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
                     :class="['cell-image', shopInfo?.mode === 5 ? 'cell-image-full' : '']">
-                    <rect x="5" y="5" width="90" height="90" rx="10" fill="#FFF9C4" stroke="#FBC02D" stroke-width="2" />
-                    <!-- 添加在矩形和文本之间的虚线 -->
-                    <line x1="20" y1="70" x2="80" y2="70" stroke="#F57F17" stroke-width="1" stroke-dasharray="4,2" />
-                    <text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#F57F17"
+                    <defs>
+                      <linearGradient id="occupiedGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" style="stop-color:#FFF3E0;stop-opacity:1" />
+                        <stop offset="100%" style="stop-color:#FFE0B2;stop-opacity:1" />
+                      </linearGradient>
+                      <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+                        <feDropShadow dx="1" dy="1" stdDeviation="1.5" flood-color="#000000" flood-opacity="0.1" />
+                      </filter>
+                      <filter id="innerShadow" x="-50%" y="-50%" width="200%" height="200%">
+                        <feOffset dx="0" dy="0.5" />
+                        <feGaussianBlur stdDeviation="0.8" result="blur" />
+                        <feComposite in="SourceGraphic" in2="blur" operator="arithmetic" k2="-1" k3="1" />
+                      </filter>
+                    </defs>
+                    <!-- 主卡片背景 -->
+                    <rect x="5" y="5" width="90" height="90" rx="12" fill="url(#occupiedGradient)" stroke="#FF9800"
+                      stroke-width="2.5" filter="url(#shadow)" />
+                    <!-- 内阴影效果 -->
+                    <rect x="5" y="5" width="90" height="90" rx="12" fill="none" stroke="rgba(255,152,0,0.3)"
+                      stroke-width="1" filter="url(#innerShadow)" />
+
+                    <!-- 锁定图标 -->
+                    <g transform="translate(35, 12)">
+                      <rect x="8" y="12" width="16" height="12" rx="2" fill="#FF6F00" stroke="#E65100"
+                        stroke-width="1" />
+                      <path d="M 12 12 L 12 8 C 12 5.79 13.79 4 16 4 L 16 4 C 18.21 4 20 5.79 20 8 L 20 12" fill="none"
+                        stroke="#FF6F00" stroke-width="2" stroke-linecap="round" />
+                    </g>
+
+                    <!-- 状态文字 -->
+                    <text x="50" y="54" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#E65100"
                       text-anchor="middle">占用</text>
-                    <text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#F57F17"
-                      text-anchor="middle">{{ switchCellType(item.cellType) }}</text>
+
+                    <!-- 装饰性分割线 -->
+                    <line x1="20" y1="62" x2="80" y2="62" stroke="#FF9800" stroke-width="1.5" stroke-dasharray="3,2"
+                      opacity="0.7" />
+
+                    <!-- 格口类型标签 -->
+                    <g transform="translate(50, 78)">
+                      <rect x="-18" y="-8" width="36" height="16" rx="8" fill="#FF9800" opacity="0.9" />
+                      <text x="0" y="3" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="white"
+                        text-anchor="middle">{{ switchCellType(item.cellType) }}</text>
+                    </g>
                   </svg>
                   <svg v-if="!item.coverImg && !item.faceImg && item.usageStatus !== 2" width="80" height="80"
                     viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
                     :class="['cell-image', shopInfo?.mode === 5 ? 'cell-image-full' : '']">
-                    <rect x="5" y="5" width="90" height="90" rx="10" fill="#E8F5E9" stroke="#81C784" stroke-width="2" />
-                    <!-- 添加在矩形和文本之间的虚线 -->
-                    <line x1="20" y1="70" x2="80" y2="70" stroke="#2E7D32" stroke-width="1" stroke-dasharray="4,2" />
-                    <text x="50" y="45" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2E7D32"
+                    <defs>
+                      <linearGradient id="freeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                        <stop offset="0%" style="stop-color:#E8F5E9;stop-opacity:1" />
+                        <stop offset="100%" style="stop-color:#C8E6C9;stop-opacity:1" />
+                      </linearGradient>
+                      <filter id="shadow2" x="-50%" y="-50%" width="200%" height="200%">
+                        <feDropShadow dx="1" dy="1" stdDeviation="1.5" flood-color="#000000" flood-opacity="0.1" />
+                      </filter>
+                      <filter id="innerShadow2" x="-50%" y="-50%" width="200%" height="200%">
+                        <feOffset dx="0" dy="0.5" />
+                        <feGaussianBlur stdDeviation="0.8" result="blur" />
+                        <feComposite in="SourceGraphic" in2="blur" operator="arithmetic" k2="-1" k3="1" />
+                      </filter>
+                    </defs>
+                    <!-- 主卡片背景 -->
+                    <rect x="5" y="5" width="90" height="90" rx="12" fill="url(#freeGradient)" stroke="#4CAF50"
+                      stroke-width="2.5" filter="url(#shadow2)" />
+                    <!-- 内阴影效果 -->
+                    <rect x="5" y="5" width="90" height="90" rx="12" fill="none" stroke="rgba(76,175,80,0.3)"
+                      stroke-width="1" filter="url(#innerShadow2)" />
+
+                    <!-- 开锁图标 -->
+                    <g transform="translate(35, 12)">
+                      <rect x="8" y="12" width="16" height="12" rx="2" fill="#4CAF50" stroke="#388E3C"
+                        stroke-width="1" />
+                      <path d="M 12 12 L 12 8 C 12 5.79 13.79 4 16 4 L 16 4 C 18.21 4 20 5.79 20 8 L 20 12" fill="none"
+                        stroke="#4CAF50" stroke-width="2" stroke-linecap="round" />
+                      <!-- 打开的锁舌 -->
+                      <circle cx="16" cy="18" r="2" fill="#4CAF50" stroke="#388E3C" stroke-width="1" />
+                    </g>
+
+                    <!-- 状态文字 -->
+                    <text x="50" y="54" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#2E7D32"
                       text-anchor="middle">空闲</text>
-                    <text x="50" y="85" font-family="Arial, sans-serif" font-size="12" fill="#2E7D32"
-                      text-anchor="middle">{{ switchCellType(item.cellType) }}</text>
+
+                    <!-- 装饰性分割线 -->
+                    <line x1="20" y1="62" x2="80" y2="62" stroke="#4CAF50" stroke-width="1.5" stroke-dasharray="3,2"
+                      opacity="0.7" />
+
+                    <!-- 格口类型标签 -->
+                    <g transform="translate(50, 78)">
+                      <rect x="-18" y="-8" width="36" height="16" rx="8" fill="#4CAF50" opacity="0.9" />
+                      <text x="0" y="3" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="white"
+                        text-anchor="middle">{{ switchCellType(item.cellType) }}</text>
+                    </g>
                   </svg>
                   <div v-if="shopInfo?.mode !== 5" class="cell-info">
                     <!-- <div class="cell-no">格口号: {{ item.cellNo }}</div> -->
@@ -568,7 +642,6 @@ onMounted(() => {
       height: 130px;
       object-fit: contain;
       border-radius: 4px;
-      margin-bottom: 12px;
     }
 
     .cell-image-full {
@@ -576,7 +649,6 @@ onMounted(() => {
       height: 130px;
       object-fit: contain;
       border-radius: 4px;
-      margin-bottom: 12px;
     }
 
     .cell-info {
@@ -620,7 +692,7 @@ onMounted(() => {
     display: flex;
     justify-content: center;
     margin-top: auto;
-    padding: 8px 0 0 0;
+    padding: 0;
     /* border-top: 1px solid var(--el-border-color-light); */
 
     .cell-btn {