super/crawler-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

task-281(验收反馈): 重复检测P1视觉对齐(KPI圆点/在售店铺蓝/warn格浅红底/矩阵空态副文案/分布副标题)

Browse Source
This commit is contained in:
黄自达
2026-09-06 02:42:56 +08:00
parent ab787ceff7
commit b7029835d8
1 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-frontend-vue/src/pages/tasks/DuplicateCheckPage.vue
+22 -6
View File
@@ -375,8 +375,8 @@ onMounted(() => {
<template v-if="consoleData && !loading">
<!-- KPI -->
<div class="kpi-row">
<div v-for="kpi in kpis" :key="kpi.label" class="kpi-card" :class="{ danger: kpi.danger }">
<div class="k-label">{{ kpi.label }}</div>
<div v-for="kpi in kpis" :key="kpi.label" class="kpi-card" :class="{ danger: kpi.danger, primary: kpi.label === '在售店铺' }">
<div class="k-label"><span class="k-dot" :class="{ danger: kpi.danger, primary: kpi.label === '在售店铺' }"></span>{{ kpi.label }}</div>
<div class="k-value">{{ kpi.value }}</div>
<div class="k-sub">{{ kpi.sub }}</div>
</div>
@@ -384,7 +384,7 @@ onMounted(() => {
<!-- 店铺上架分布 -->
<el-card shadow="never" style="margin-bottom: 14px">
<div class="card-title">店铺上架分布 <span class="hint">各店铺在本批站点中的上架记录量</span></div>
<div class="card-title">店铺上架分布 <span class="hint">各店铺在本批站点中的上架记录量（含重复扫描）</span></div>
<div class="store-bars">
<div v-for="bar in storeDistribution.list" :key="bar.name" class="s-bar">
<div class="s-name">
@@ -453,7 +453,12 @@ onMounted(() => {
</tr>
</tbody>
</table>
<el-empty v-else description="当前范围下没有撞款ASIN" />
<el-empty v-else description="当前范围下没有撞款ASIN">
<template #description>
<p>当前范围下没有撞款ASIN</p>
<p class="dim">调整筛选条件或切换到其他分组查看</p>
</template>
</el-empty>
</div>
<div class="section-title" style="margin-top: 22px">撞款详情 <span class="hint">同一 ASIN 在多家店铺的上架时间明细</span></div>
@@ -481,7 +486,12 @@ onMounted(() => {
</div>
</div>
</div>
<el-empty v-else description="当前范围下没有撞款ASIN" />
<el-empty v-else description="当前范围下没有撞款ASIN">
<template #description>
<p>当前范围下没有撞款ASIN</p>
<p class="dim">调整筛选条件或切换到其他分组查看</p>
</template>
</el-empty>
</template>
<!-- ============ 全部ASIN台账 ============ -->
@@ -607,7 +617,12 @@ onMounted(() => {
.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi-card { background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); border-radius: 10px; padding: 12px 16px; box-shadow: var(--el-box-shadow-lighter); }
.k-label { color: var(--el-text-color-secondary); font-size: 12px; margin-bottom: 6px; }
.k-label { color: var(--el-text-color-secondary); font-size: 12px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
/* KPI 彩色指示圆点（对齐 reference k-dot：撞款红/在售店铺蓝/其余灰）。 */
.k-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--el-border-color); display: inline-block; flex: none; }
.k-dot.danger { background: var(--el-color-danger); }
.k-dot.primary { background: var(--el-color-primary); }
.kpi-card.primary .k-value { color: var(--el-color-primary); }
.k-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-card.danger .k-value { color: var(--el-color-danger); }
.k-sub { color: var(--el-text-color-secondary); font-size: 11px; margin-top: 3px; }
@@ -644,6 +659,7 @@ onMounted(() => {
.gs-item:last-child { border-right: none; }
.gs-v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gs-item.warn .gs-v { color: var(--el-color-danger); }
.gs-item.warn { background: var(--el-color-danger-light-9); }
.gs-l { font-size: 12px; color: var(--el-text-color-secondary); margin-top: 4px; }
.section-title { font-size: 14px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.matrix-wrap { overflow-x: auto; border-radius: 10px; background: var(--el-bg-color); border: 1px solid var(--el-border-color-lighter); }