admin123
/
shop-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(智能柜卡片): 优化占用和空闲状态的SVG卡片样式 

- 为占用和空闲状态添加渐变色背景和阴影效果
- 增加锁图标和更精致的文字样式
- 改进格口类型标签的显示方式
- 移除不必要的底部边距
This commit is contained in:
dzq 2025-12-20 17:17:45 +08:00
parent 6f73bb7101
commit cc7394172f
1 changed files with 87 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/views/cabinet/smart-cabinet-card/detail.vue
View File

@ -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"
<!-- 装饰性分割线 -->
<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"
<!-- 装饰性分割线 -->
<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 {