diff --git a/src/views/model/list/ModelCard.vue b/src/views/model/list/ModelCard.vue
index 93d0b3d..610079b 100644
--- a/src/views/model/list/ModelCard.vue
+++ b/src/views/model/list/ModelCard.vue
@@ -39,16 +39,6 @@ const colors = ['#8dc63f', '#dbb09e']
const statusStr = ['未下装', '已下装']
const statusIcons = ['material-symbols:lock-open', 'material-symbols:lock']
-function colorToBg(hex: string, alpha = 0.5) {
- const raw = (hex || '').replace('#', '')
- if (raw.length !== 6)
- return 'rgba(0,0,0,0.5)'
- const r = Number.parseInt(raw.slice(0, 2), 16)
- const g = Number.parseInt(raw.slice(2, 4), 16)
- const b = Number.parseInt(raw.slice(4, 6), 16)
- return `rgba(${r}, ${g}, ${b}, ${alpha})`
-}
-
function buildQuery(value: any): ModelQueryParams {
return {
unitId: value?.unit,
@@ -84,7 +74,7 @@ async function loadModelList(value: any) {
headStyle: {},
bodyStyle: {},
statusColor: colors[statusIndex],
- cardBg: colorToBg(colors[statusIndex]),
+ algorithm: modelCard.algorithm,
}
cardList.push(card)
}
@@ -116,7 +106,7 @@ async function confirmDelete(id: number | string) {
:loading="loading"
:hoverable="true"
class="model-card"
- :style="{ backgroundColor: item.cardBg }"
+ :style="{ borderLeft: `6px solid ${item.statusColor}` }"
@click="changeModel(item.id, item.version)"
>
@@ -140,8 +130,12 @@ async function confirmDelete(id: number | string) {
@@ -173,18 +167,20 @@ async function confirmDelete(id: number | string) {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
+ padding: 8px 0;
}
.model-card {
- padding: 12px;
- border: 1px solid rgb(0 0 0 / 2%);
- border-radius: 12px;
- box-shadow: 0 6px 18px rgb(0 0 0 / 6%);
- transition: transform 0.2s ease, box-shadow 0.2s ease;
+ padding: 14px 14px 12px;
+ background: linear-gradient(180deg, #fdfdfd 0%, #f7f8fa 100%);
+ border: 1px solid #d0d7de;
+ border-radius: 8px;
+ box-shadow: 0 6px 16px rgb(15 23 42 / 8%);
+ transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.model-card:hover {
- box-shadow: 0 12px 28px rgb(0 0 0 / 10%);
+ box-shadow: 0 12px 32px rgb(15 23 42 / 12%);
transform: translateY(-2px);
}
@@ -213,13 +209,26 @@ async function confirmDelete(id: number | string) {
align-items: center;
}
+.tag.version {
+ display: inline-flex;
+ align-items: center;
+ padding: 4px 10px;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1;
+ text-transform: uppercase;
+ letter-spacing: 0.3px;
+ border-radius: 999px;
+}
+
.status-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
- background-color: rgb(0 0 0 / 3%);
+ background-color: rgb(0 0 0 / 6%);
+ border: 1px solid rgb(0 0 0 / 8%);
border-radius: 8px;
}
@@ -246,12 +255,12 @@ async function confirmDelete(id: number | string) {
.card-footer {
display: flex;
- gap: 8px;
+ gap: 12px;
align-items: center;
+ justify-content: space-between;
padding-top: 10px;
font-size: 13px;
color: #4b5563;
- border-top: 1px dashed #e5e7eb;
}
.footer-text.strong {
@@ -264,6 +273,18 @@ async function confirmDelete(id: number | string) {
border-top: 1px dashed #e5e7eb;
}
+.algo-pill {
+ display: inline-flex;
+ align-items: center;
+ padding: 4px 10px;
+ font-weight: 700;
+ color: #1d4ed8;
+ letter-spacing: 0.3px;
+ background: #e0e7ff;
+ border: 1px solid #c7d2fe;
+ border-radius: 10px;
+}
+
.icon-card {
display: flex;
align-items: center;