From b63e336c084bb5a0547edca90ba6b9e59b0595f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Tue, 27 May 2025 15:49:35 +0800
Subject: [PATCH] =?UTF-8?q?style(css):=20=E4=BC=98=E5=8C=96=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E9=A2=9C=E8=89=B2=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 primary-color调整为小写
- 添加 el-color-primary 变量- 优化导航栏背景样式- 更新表格组件，增加排序功能
- 改进首页推荐组件，优化数据展示
---
 src/assets/css/base.scss                      |  3 +-
 src/components/YlTable/Index.vue              |  1 +
 .../Home/components/HomeRecommend/Index.vue   | 59 ++++++++++++++++---
 3 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/src/assets/css/base.scss b/src/assets/css/base.scss
index 1d38619..6618fc3 100644
--- a/src/assets/css/base.scss
+++ b/src/assets/css/base.scss
@@ -1,6 +1,6 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
-  --primary-color: #70B937;
+  --primary-color: #70b937;
   --van-primary-color: #71b73c;
   --vt-c-white: #fff;
   --vt-c-white-soft: #f8f8f8;
@@ -45,6 +45,7 @@
   --color-text: var(--vt-c-text-light-1);
   --section-gap: 160px;
   --el-select-input-focus-border-color: var(--primary-color);
+  --el-color-primary: var(--primary-color);
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/src/components/YlTable/Index.vue b/src/components/YlTable/Index.vue
index f8083d6..e206388 100644
--- a/src/components/YlTable/Index.vue
+++ b/src/components/YlTable/Index.vue
@@ -152,6 +152,7 @@ const RenderSlot = {
         :prop="item.prop"
         :label="item.label"
         :show-overflow-tooltip="item.tooltip ? item.tooltip : true"
+        :sortable="item.sortable"
       >
         <template #default="scope">
           <slot name="column-default" :scope="scope">
diff --git a/src/views/Home/components/HomeRecommend/Index.vue b/src/views/Home/components/HomeRecommend/Index.vue
index 0ac7d0d..d2fb4c2 100644
--- a/src/views/Home/components/HomeRecommend/Index.vue
+++ b/src/views/Home/components/HomeRecommend/Index.vue
@@ -10,7 +10,18 @@ const props = ref<TablePropsType[]>([
   {
     prop: 'rank',
     label: '排名',
-    width: 58
+    width: 58,
+    render: (h, p) => {
+      return h(
+        'div',
+        {
+          style: {
+            color: 'rgb(131, 204, 91)'
+          }
+        },
+        p.row.rank
+      );
+    }
   },
   {
     prop: 'trend_name',
@@ -20,21 +31,51 @@ const props = ref<TablePropsType[]>([
   {
     prop: 'growth_ring_ratio',
     label: '声量增长环比',
-    width: 120
-  },
-  {
-    prop: 'sales_growth_ring_ratio',
-    label: '销量增长环比',
-    width: 120,
+    width: 150,
+    sortable: true,
     render: (h, p) => {
       return h(
         'div',
         {
           style: {
-            color: p.row.sales_growth_ring_ratio < 0 ? 'red' : 'green'
+            color: p.row.growth_ring_ratio > 0 ? 'rgb(255,133,105)' : 'rgb(131, 204, 91)'
           }
         },
-        p.row.sales_growth_ring_ratio
+        [
+          h('span', p.row.growth_ring_ratio + '%'),
+          h('i', {
+            class: 'van-icon van-icon-play ml5',
+            style: {
+              transform: p.row.growth_ring_ratio > 0 ? 'rotate(-90deg)' : 'rotate(90deg)'
+            }
+          })
+        ]
+      );
+    }
+  },
+  {
+    prop: 'sales_growth_ring_ratio',
+    label: '销量增长环比',
+    width: 150,
+    sortable: true,
+    render: (h, p) => {
+      return h(
+        'div',
+        {
+          style: {
+            color: p.row.sales_growth_ring_ratio > 0 ? 'rgb(255,133,105)' : 'rgb(131, 204, 91)'
+          }
+        },
+
+        [
+          h('span', p.row.sales_growth_ring_ratio + '%'),
+          h('i', {
+            class: 'van-icon van-icon-play ml5',
+            style: {
+              transform: p.row.sales_growth_ring_ratio > 0 ? 'rotate(-90deg)' : 'rotate(90deg)'
+            }
+          })
+        ]
       );
     }
   }