From 5d5e1606a4c714c2b8eb80fc644b23425f49e547 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Mon, 27 Oct 2025 14:43:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E8=90=A5=E5=85=BB=E5=88=86=E6=9E=90-?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/nutrition-top.vue | 146 ++++++++++++++++---------------
 src/views/nutrition.vue          |   6 +-
 2 files changed, 80 insertions(+), 72 deletions(-)

diff --git a/src/components/nutrition-top.vue b/src/components/nutrition-top.vue
index e3a5a88..76411a6 100644
--- a/src/components/nutrition-top.vue
+++ b/src/components/nutrition-top.vue
@@ -4,14 +4,24 @@
             <el-segmented v-model="activeSegment" :options="props.segments" :props="{ label: 'label', value: 'value' }"
                 size="small" @change="dateTypeChange" />
         </div>
-        <div class="list scrollbar-hide">
-            <div v-for="(row, idx) in curList" :key="idx" class="item" @click="doCar(row)">
-                <div class="type" :class="props.type == 'canteen' ? 'type-1' : 'type-2'">
-                    <span class="type-text">{{ idx + 1 }}</span>
-                </div>
-                <div class="end">
-                    <span>{{ row.title || "未知" }}</span>
-                    <span>{{ row.total }}</span>
+        <div class="table">
+            <div class="thead">
+                <div class="th">排行</div>
+                <div class="th" style="width: 6vw">菜品名称</div>
+                <div class="th">分类</div>
+                <div class="th" style="color: rgba(255, 255, 255, 0.7); width: 8vw">购买数量</div>
+            </div>
+            <div class="tbody scrollbar-hide">
+                <div v-for="(row, idx) in curList" :key="idx" class="tr" @click="doCar(row)">
+                    <div class="td">
+                        <span class="index-badge">{{ idx + 1 }}</span>
+                    </div>
+                    <div class="td" style="width: 6vw">
+                        <span class="device-dot"></span>
+                        <span class="text-overflow">{{ row.title }}</span>
+                    </div>
+                    <div class="td text-overflow" style="width: 5vw">{{ row.classifyName || "未知" }}</div>
+                    <div class="td" style="width: 8vw">{{ row.total }}</div>
                 </div>
             </div>
         </div>
@@ -92,85 +102,81 @@ const dateTypeChange = (e) => {
         }
     }
 
-    .list {
-        flex: 1;
-        min-height: 0;
+    .table {
         overflow-y: auto;
         display: flex;
         flex-direction: column;
-        gap: 1.2vh;
-        padding-bottom: 4vh;
+        gap: 1vh;
+        padding-top: 1vh;
+        min-height: 0;
 
-        .item {
-            display: flex;
-            align-items: center;
-            justify-content: space-evenly;
-            padding: 0.8vh 0.5vw;
-            cursor: pointer;
-            background-image: url("@/assets/images/car-alarm-list-item-bg.png");
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
+        .thead {
+            display: grid;
+            grid-template-columns: 0.6fr 1fr 1fr 1.6fr;
+            gap: 1vh;
+            padding: 1vh;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: 6px;
 
-            .type {
-                width: 7vw;
-                height: 3.6vh;
-                line-height: 3.6vh;
+            .th {
+                color: rgba(255, 255, 255, 0.7);
+                font-size: 0.8vw;
+                padding: 6px 0;
                 text-align: center;
-                background-repeat: no-repeat;
-                background-size: 100% 100%;
-                background-position: center;
-
-                .type-text {
-                    display: inline-block;
-                    font-size: 0.65vw;
-                    color: #c9e9ff;
-
-                    width: 80%;
-                    margin: 0 0.5vw;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
             }
+        }
 
-            .type-1 {
-                background-image: url("@/assets/images/car-alarm-type-blue.png");
-            }
+        .tbody {
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 1vh;
+            min-height: 0;
 
-            .type-2 {
-                background-image: url("@/assets/images/car-alarm-type-green.png");
-            }
-
-            .end {
-                flex: 1;
-                display: flex;
+            .tr {
+                display: grid;
+                grid-template-columns: 0.6fr 1fr 1fr 1.6fr;
+                gap: 1vh;
                 align-items: center;
-                justify-content: space-between;
+                border: 1px solid rgba(255, 255, 255, 0.08);
+                background: #0c1d31;
+                border-radius: 8px;
+                padding: 1vh 1vh 1vh 1vh;
+                cursor: pointer;
 
-                span {
-                    display: inline-block;
-                    width: 5vw;
-                    font-size: 0.6vw;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
+                .td {
+                    width: 100%;
+                    color: rgba(255, 255, 255, 0.9);
+                    font-size: 0.7vw;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
 
-                span:nth-child(1) {
-                    text-align: center;
-                    color: #d6e3ee;
+                    .index-badge {
+                        width: 1.6vw;
+                        height: 1vw;
+                        line-height: 1vw;
+                        text-align: center;
+                        color: #cfe8ff;
+                        font-weight: 600;
+                        background-repeat: no-repeat;
+                        background-image: url("@/assets/images/device-alarm-list-index-bg.png");
+                        background-size: 100% 100%;
+                        display: inline-block;
+                    }
 
-                    flex: 1;
-                    margin-right: 1vw;
-                }
-
-                span:nth-child(2) {
-                    color: #d6e3ee;
-                    width: 6.5vw;
+                    .device-dot {
+                        width: 0.6vw;
+                        height: 0.6vw;
+                        border-radius: 50%;
+                        background: #3bd2a6;
+                        margin-right: 8px;
+                    }
                 }
             }
         }
     }
+
 }
 
 /* 隐藏滚动条 */
diff --git a/src/views/nutrition.vue b/src/views/nutrition.vue
index 8a078c1..d2ca1b9 100644
--- a/src/views/nutrition.vue
+++ b/src/views/nutrition.vue
@@ -15,7 +15,7 @@
             </AsideBlock>
             <AsideBlock>
                 <template #header>
-                    <span>今日复购排行榜(top5)</span>
+                    <span>今日菜品喜好排行(top5)</span>
                 </template>
                 <PersonThroughRank :data="timerObj.repurchase.data" />
             </AsideBlock>
@@ -130,7 +130,8 @@ const timerObj = reactive({
         interval: 10 * 1000,
         data: null,
         queryParams: {
-            dateRangeType: "YESTERDAY"
+            // dateRangeType: "YESTERDAY"
+            dateRangeType: "HALF_YEAR"
         },
     }
 })
@@ -329,6 +330,7 @@ const getCuisineTop = () => {
                     return {
                         title: v.productName,
                         type: v.productId,
+                        classifyName: v.classifyName,
                         total: v.buyProductCount,
                     };
                 }) ?? [];