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 {