feat(智能柜卡片): 优化占用和空闲状态的SVG卡片样式
- 为占用和空闲状态添加渐变色背景和阴影效果 - 增加锁图标和更精致的文字样式 - 改进格口类型标签的显示方式 - 移除不必要的底部边距
This commit is contained in:
dzq
parent
6f73bb7101
commit
cc7394172f
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue