style(css): 优化主题颜色和样式

- 将 primary-color调整为小写
- 添加 el-color-primary 变量- 优化导航栏背景样式- 更新表格组件，增加排序功能
- 改进首页推荐组件，优化数据展示

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) {

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">

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
+    width: 150,
-  },
+    sortable: true,
-  {
-    prop: 'sales_growth_ring_ratio',
-    label: '销量增长环比',
-    width: 120,
     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)'
+            }
+          })
+        ]
       );
     }
   }