From 4e96b79acbe35da0a77f25f7e572a7e7b0baf787 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9F=B3=E6=B8=85=E7=88=BD?= <eison.icu@gmail.com>
Date: Mon, 24 Mar 2025 16:28:04 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=A7=81=E5=9F=9F=E6=93=8D=E7=9B=98?=
 =?UTF-8?q?=E6=89=8B=E3=80=91=20=E6=93=8D=E7=9B=98=E6=89=8B=E7=AB=AFUI=20-?=
 =?UTF-8?q?=20=E5=9C=BA=E6=99=AF=E8=8E=B7=E5=AE=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Cunkebao/pages/scenarios/index.vue          | 151 +++++++++++++-------
 Cunkebao/static/images/icons/ai-convert.svg |  33 +++++
 Cunkebao/static/images/icons/ai-friend.svg  |  27 ++++
 Cunkebao/static/images/icons/ai-group.svg   |  51 +++++++
 Cunkebao/static/images/icons/aipa.svg       |   1 +
 Cunkebao/static/images/icons/data-label.svg |   5 +
 Cunkebao/static/images/icons/trend-up.svg   |   5 +
 Cunkebao/static/images/icons/user-label.svg |   8 ++
 8 files changed, 233 insertions(+), 48 deletions(-)
 create mode 100644 Cunkebao/static/images/icons/ai-convert.svg
 create mode 100644 Cunkebao/static/images/icons/ai-friend.svg
 create mode 100644 Cunkebao/static/images/icons/ai-group.svg
 create mode 100644 Cunkebao/static/images/icons/aipa.svg
 create mode 100644 Cunkebao/static/images/icons/data-label.svg
 create mode 100644 Cunkebao/static/images/icons/trend-up.svg
 create mode 100644 Cunkebao/static/images/icons/user-label.svg

diff --git a/Cunkebao/pages/scenarios/index.vue b/Cunkebao/pages/scenarios/index.vue
index d8864fef..cbc317e0 100644
--- a/Cunkebao/pages/scenarios/index.vue
+++ b/Cunkebao/pages/scenarios/index.vue
@@ -3,11 +3,12 @@
     <!-- 顶部导航栏 -->
     <view class="header">
       <view class="back-icon" @click="goBack">
-        <u-icon name="arrow-left" size="26"></u-icon>
+        <u-icon name="arrow-left" size="42" color="black"></u-icon>
       </view>
       <view class="title">场景获客</view>
       <view class="header-icons">
-        <u-icon name="plus" size="26" class="icon-add" @click="createNewPlan"></u-icon>
+        <u-icon name="plus" size="30" color="#fff" class="icon-add" @click="createNewPlan"></u-icon>
+        <text>新建计划</text>
       </view>
     </view>
     
@@ -25,7 +26,7 @@
             <view class="data-value">156</view>
           </view>
           <view class="data-trend up">
-            <u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
+            <image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
             <text>+12.5%</text>
           </view>
         </view>
@@ -43,7 +44,7 @@
             <view class="data-value">89</view>
           </view>
           <view class="data-trend up">
-            <u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
+            <image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
             <text>+8.3%</text>
           </view>
         </view>
@@ -61,7 +62,7 @@
             <view class="data-value">42</view>
           </view>
           <view class="data-trend up">
-            <u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
+            <image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
             <text>+15.8%</text>
           </view>
         </view>
@@ -79,7 +80,7 @@
             <view class="data-value">234</view>
           </view>
           <view class="data-trend up">
-            <u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
+            <image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
             <text>+15.7%</text>
           </view>
         </view>
@@ -97,7 +98,7 @@
             <view class="data-value">167</view>
           </view>
           <view class="data-trend up">
-            <u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
+            <image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
             <text>+10.2%</text>
           </view>
         </view>
@@ -115,7 +116,7 @@
             <view class="data-value">145</view>
           </view>
           <view class="data-trend up">
-            <u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
+            <image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
             <text>+11.2%</text>
           </view>
         </view>
@@ -129,9 +130,9 @@
       </view>
       
       <!-- AI智能加友 -->
-      <view class="channel-card" @click="navigateToDetail('ai-friend')">
-        <view class="channel-icon bg-blue">
-          <u-icon name="star" size="28" color="#ffffff"></u-icon>
+      <view class="channel-card channel-card-xw" @click="navigateToDetail('ai-friend')">
+        <view class="channel-icon">
+          <image src="/static/images/icons/aipa.svg" mode="aspectFit" class="ai-icon"></image>
         </view>
         <view class="channel-name">AI智能加友</view>
         <view class="channel-desc">智能分析目标用户画像，自动筛选优质客户</view>
@@ -141,35 +142,35 @@
             <view class="data-value">245</view>
           </view>
           <view class="data-trend up">
-            <u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
+            <image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
             <text>+18.5%</text>
           </view>
         </view>
       </view>
       
-      <!-- AI群引流 -->
-      <view class="channel-card" @click="navigateToDetail('ai-group')">
-        <view class="channel-icon bg-blue">
-          <u-icon name="star" size="28" color="#ffffff"></u-icon>
+      <!-- AI智能群控 -->
+      <view class="channel-card channel-card-xw" @click="navigateToDetail('ai-group')">
+        <view class="channel-icon">
+          <image src="/static/images/icons/aipa.svg" mode="aspectFit" class="ai-icon"></image>
         </view>
-        <view class="channel-name">AI群引流</view>
-        <view class="channel-desc">智能推聊互动，提高群活跃度和转化率</view>
+        <view class="channel-name">AI智能群控</view>
+        <view class="channel-desc">一键管理多个群聊，自动回复，数据分析</view>
         <view class="channel-data">
           <view class="data-item">
             <view class="data-label">今日：</view>
-            <view class="data-value">178</view>
+            <view class="data-value">128</view>
           </view>
           <view class="data-trend up">
-            <u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
-            <text>+15.2%</text>
+            <image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
+            <text>+9.7%</text>
           </view>
         </view>
       </view>
       
       <!-- AI场景转化 -->
-      <view class="channel-card" @click="navigateToDetail('ai-convert')">
-        <view class="channel-icon bg-blue">
-          <u-icon name="star" size="28" color="#ffffff"></u-icon>
+      <view class="channel-card channel-card-xw" @click="navigateToDetail('ai-convert')">
+        <view class="channel-icon">
+          <image src="/static/images/icons/aipa.svg" mode="aspectFit" class="ai-icon"></image>
         </view>
         <view class="channel-name">AI场景转化</view>
         <view class="channel-desc">多场景智能营销，提升获客转化效果</view>
@@ -179,7 +180,7 @@
             <view class="data-value">134</view>
           </view>
           <view class="data-trend up">
-            <u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
+            <image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
             <text>+14.3%</text>
           </view>
         </view>
@@ -277,7 +278,7 @@ export default {
 <style lang="scss" scoped>
 .scenarios-container {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background-color: #f9fafb;
   position: relative;
   padding-bottom: 150rpx; /* 为底部导航栏预留空间 */
 }
@@ -286,26 +287,43 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 40rpx;
+  padding: 25rpx 30rpx;
   background-color: #fff;
-  position: relative;
+  border-bottom: 1px solid #e5e5e5;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
   
   .back-icon {
-    width: 48rpx;
+    width: 60rpx;
+    color: #000;
+    padding: 10rpx;
+    border-radius: 50%;
+    
+    &:active {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
   }
   
   .title {
     position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
     font-size: 40rpx;
     font-weight: bold;
-    color: #333;
+    color: #2563EB;
+    float: left;
+    margin-left: 70rpx;
   }
   
   .header-icons {
     display: flex;
     align-items: center;
+    background-color: #2563EB;
+    border-radius: 20rpx;
+    padding: 15rpx 30rpx;
+    color: #fff;
+    text-indent: 15rpx;
   }
 }
 
@@ -313,19 +331,25 @@ export default {
   display: flex;
   flex-wrap: wrap;
   padding: 15rpx;
+  margin-top: 130rpx;  // 添加顶部边距，为固定header留出空间
   
   .channel-card {
-    width: calc(50% - 15rpx);
-    margin: 7.5rpx;
+    width: calc(50% - 30rpx);
+    margin: 15rpx;
     background-color: #fff;
-    border-radius: 16rpx;
-    padding: 20rpx 15rpx;
+    border-radius: 35rpx;
+    padding: 35rpx 20rpx;
     box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
     box-sizing: border-box;
     
+    // AI智能获客栏目下的卡片特殊背景色
+    .section-title + & {
+      background-color: #F8FBFF;
+    }
+    
     .channel-icon {
       width: 80rpx;
       height: 80rpx;
@@ -358,13 +382,16 @@ export default {
       &.bg-wechat {
         background-color: #07c160;
       }
+      
+      &.bg-purple {
+        background-color: #8a2be2;
+      }
     }
     
     .channel-name {
-      font-size: 28rpx;
-      font-weight: bold;
-      color: #333;
-      margin-bottom: 15rpx;
+      font-size: 30rpx;
+      color: #2563EB;
+      margin: 15rpx;
     }
     
     .channel-desc {
@@ -372,7 +399,7 @@ export default {
       color: #666;
       text-align: center;
       margin-bottom: 15rpx;
-      height: 68rpx;
+      height: 80rpx;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
@@ -381,21 +408,34 @@ export default {
     
     .channel-data {
       width: 100%;
+      padding: 0 10rpx;
       display: flex;
-      justify-content: space-between;
+      flex-direction: column;
       align-items: center;
       
       .data-item {
         display: flex;
         align-items: center;
+        margin-bottom: 10rpx;
         
         .data-label {
+          display: flex;
+          align-items: center;
           font-size: 24rpx;
           color: #999;
+          
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 36rpx;
+            height: 36rpx;
+            margin-right: 6rpx;
+            background: url('/static/images/icons/user-label.svg') no-repeat center/contain;
+          }
         }
         
         .data-value {
-          font-size: 32rpx;
+          font-size: 38rpx;
           font-weight: bold;
           color: #333;
         }
@@ -404,7 +444,8 @@ export default {
       .data-trend {
         display: flex;
         align-items: center;
-        font-size: 22rpx;
+        font-size: 28rpx;
+        text-indent: 15rpx;
         
         &.up {
           color: #2fc25b;
@@ -416,6 +457,20 @@ export default {
       }
     }
   }
+
+  .channel-card-xw {
+    background-color: #F8FBFF !important;
+    border: 6rpx solid #DBEAFE !important;
+
+    .channel-icon {
+      background: none !important;
+      
+      .ai-icon {
+        width: 90rpx;
+        height: 90rpx;
+      }
+    }
+  }
 }
 
 .section-title {
@@ -436,12 +491,12 @@ export default {
   }
   
   .beta-tag {
-    font-size: 22rpx;
+    font-size: 25rpx;
     color: #4080ff;
     background-color: #ecf5ff;
-    padding: 2rpx 10rpx;
-    border-radius: 10rpx;
-    margin-left: 10rpx;
+    padding: 5rpx 20rpx;
+    border-radius: 20rpx;
+    margin-left: 20rpx;
   }
 }
 </style> 
\ No newline at end of file
diff --git a/Cunkebao/static/images/icons/ai-convert.svg b/Cunkebao/static/images/icons/ai-convert.svg
new file mode 100644
index 00000000..9ce04a51
--- /dev/null
+++ b/Cunkebao/static/images/icons/ai-convert.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 转化漏斗 -->
+  <path d="M24 24H56L44 44V56L36 60V44L24 24Z" 
+        stroke="#4080ff" 
+        stroke-width="3"
+        fill="none"/>
+  
+  <!-- 数据流动线 -->
+  <path d="M28 28L32 32M36 28L40 32M44 28L48 32" 
+        stroke="#4080ff" 
+        stroke-width="2"
+        stroke-linecap="round"/>
+  
+  <!-- 转化指示箭头 -->
+  <path d="M34 48L40 52L46 48" 
+        stroke="#4080ff" 
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"/>
+  
+  <!-- 外圈效果 -->
+  <circle cx="40" cy="40" r="28" 
+          stroke="#4080ff" 
+          stroke-width="2"
+          stroke-dasharray="4 4"
+          fill="none"/>
+  
+  <!-- 装饰点 -->
+  <circle cx="32" cy="32" r="2" fill="#4080ff"/>
+  <circle cx="40" cy="32" r="2" fill="#4080ff"/>
+  <circle cx="48" cy="32" r="2" fill="#4080ff"/>
+</svg> 
\ No newline at end of file
diff --git a/Cunkebao/static/images/icons/ai-friend.svg b/Cunkebao/static/images/icons/ai-friend.svg
new file mode 100644
index 00000000..7a81ab77
--- /dev/null
+++ b/Cunkebao/static/images/icons/ai-friend.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 大脑图形 -->
+  <path d="M40 20C48.8366 20 56 27.1634 56 36C56 44.8366 48.8366 52 40 52C31.1634 52 24 44.8366 24 36C24 27.1634 31.1634 20 40 20Z" 
+        stroke="#4080ff" 
+        stroke-width="3"
+        fill="none"/>
+  
+  <!-- 连接线路 -->
+  <path d="M32 32C36 36 44 36 48 32M36 40C40 44 44 40 48 44" 
+        stroke="#4080ff" 
+        stroke-width="3"
+        stroke-linecap="round"/>
+  
+  <!-- 圆点装饰 -->
+  <circle cx="32" cy="32" r="2" fill="#4080ff"/>
+  <circle cx="48" cy="32" r="2" fill="#4080ff"/>
+  <circle cx="36" cy="44" r="2" fill="#4080ff"/>
+  <circle cx="48" cy="44" r="2" fill="#4080ff"/>
+  
+  <!-- 外圈光环效果 -->
+  <circle cx="40" cy="36" r="24" 
+          stroke="#4080ff" 
+          stroke-width="2"
+          stroke-dasharray="4 4"
+          fill="none"/>
+</svg> 
\ No newline at end of file
diff --git a/Cunkebao/static/images/icons/ai-group.svg b/Cunkebao/static/images/icons/ai-group.svg
new file mode 100644
index 00000000..f2d88c53
--- /dev/null
+++ b/Cunkebao/static/images/icons/ai-group.svg
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 中心控制器 -->
+  <rect x="32" y="32" width="16" height="16" rx="4"
+        stroke="#4080ff" 
+        stroke-width="3"
+        fill="none"/>
+  
+  <!-- 连接的设备 -->
+  <circle cx="24" cy="24" r="6" 
+          stroke="#4080ff" 
+          stroke-width="2.5"
+          fill="none"/>
+  <circle cx="56" cy="24" r="6" 
+          stroke="#4080ff" 
+          stroke-width="2.5"
+          fill="none"/>
+  <circle cx="24" cy="56" r="6" 
+          stroke="#4080ff" 
+          stroke-width="2.5"
+          fill="none"/>
+  <circle cx="56" cy="56" r="6" 
+          stroke="#4080ff" 
+          stroke-width="2.5"
+          fill="none"/>
+  
+  <!-- 连接线 -->
+  <line x1="28" y1="28" x2="32" y2="32" 
+        stroke="#4080ff" 
+        stroke-width="2"
+        stroke-linecap="round"/>
+  <line x1="52" y1="28" x2="48" y2="32" 
+        stroke="#4080ff" 
+        stroke-width="2"
+        stroke-linecap="round"/>
+  <line x1="28" y1="52" x2="32" y2="48" 
+        stroke="#4080ff" 
+        stroke-width="2"
+        stroke-linecap="round"/>
+  <line x1="52" y1="52" x2="48" y2="48" 
+        stroke="#4080ff" 
+        stroke-width="2"
+        stroke-linecap="round"/>
+  
+  <!-- 脉冲圆环 -->
+  <circle cx="40" cy="40" r="28" 
+          stroke="#4080ff" 
+          stroke-width="2"
+          stroke-dasharray="4 4"
+          fill="none"/>
+</svg> 
\ No newline at end of file
diff --git a/Cunkebao/static/images/icons/aipa.svg b/Cunkebao/static/images/icons/aipa.svg
new file mode 100644
index 00000000..be371a6b
--- /dev/null
+++ b/Cunkebao/static/images/icons/aipa.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 45 41" width="45" height="41"><g stroke-width="2" fill="none" stroke-linecap="butt" stroke="#95bcfb" data-c-stroke="95bcfb"><path d="M 26.80 15.12 A 1.41 1.41 0.0 0 1 25.89 14.20 L 23.36 6.16 A 1.41 1.41 0.0 0 0 20.67 6.16 L 18.11 14.19 A 1.41 1.41 0.0 0 1 17.19 15.10 L 9.15 17.63 A 1.41 1.41 0.0 0 0 9.15 20.32 L 17.18 22.88 A 1.41 1.41 0.0 0 1 18.09 23.80 L 20.62 31.84 A 1.41 1.41 0.0 0 0 23.31 31.84 L 25.87 23.81 A 1.41 1.41 0.0 0 1 26.79 22.90 L 34.83 20.37 A 1.41 1.41 0.0 0 0 34.83 17.68 L 26.80 15.12"/><path d="M28.11 10.25Q28.11 11.47 30.14 11.46A.56.56 0 0 1 30.7 12.03Q30.69 13.98 31.99 13.98 33.29 13.98 33.28 12.04A.56.56 0 0 1 33.85 11.47Q35.88 11.49 35.88 10.26 35.88 9.04 33.85 9.05A.56.56 0 0 1 33.29 8.48Q33.31 6.54 32 6.53 30.7 6.53 30.71 8.48A.56.56 0 0 1 30.14 9.04Q28.11 9.03 28.11 10.25M14.4003 27.0011A.76.76 0 0 0 14.3853 25.9265L12.507 24.0999A.76.76 0 0 0 11.4323 24.1149L9.6197 25.9789A.76.76 0 0 0 9.6347 27.0535L11.513 28.8801A.76.76 0 0 0 12.5877 28.8651L14.4003 27.0011M12.63 19.45Q15.63 19.39 18.39 20.52A3.79 3.77-86.1 0 1 20.62 23.09L21.72 27.43A.3.3 0 0 0 22.31 27.41Q22.75 25.03 23.51 22.75C24.4 20.07 27.56 19.89 30.66 19.23A.27.27 0 0 0 30.63 18.69Q28.17 18.46 25.31 17.32C23.17 16.47 22.95 12.98 22.35 10.8A.31.31 0 0 0 21.75 10.8C21.19 12.95 20.54 17.14 18.1 17.65Q13.95 18.52 12.56 19.17A.15.15 0 0 0 12.63 19.45"/></g><path fill="#eff6ff" d="M 45.00 0.00 L 45.00 41.00 L 0.00 41.00 L 0.00 0.00 L 45.00 0.00 Z M 26.80 15.12 A 1.41 1.41 0.0 0 1 25.89 14.20 L 23.36 6.16 A 1.41 1.41 0.0 0 0 20.67 6.16 L 18.11 14.19 A 1.41 1.41 0.0 0 1 17.19 15.10 L 9.15 17.63 A 1.41 1.41 0.0 0 0 9.15 20.32 L 17.18 22.88 A 1.41 1.41 0.0 0 1 18.09 23.80 L 20.62 31.84 A 1.41 1.41 0.0 0 0 23.31 31.84 L 25.87 23.81 A 1.41 1.41 0.0 0 1 26.79 22.90 L 34.83 20.37 A 1.41 1.41 0.0 0 0 34.83 17.68 L 26.80 15.12 Z M 28.11 10.25 Q 28.11 11.47 30.14 11.46 A 0.56 0.56 0.0 0 1 30.70 12.03 Q 30.69 13.98 31.99 13.98 Q 33.29 13.98 33.28 12.04 A 0.56 0.56 0.0 0 1 33.85 11.47 Q 35.88 11.49 35.88 10.26 Q 35.88 9.04 33.85 9.05 A 0.56 0.56 0.0 0 1 33.29 8.48 Q 33.31 6.54 32.00 6.53 Q 30.70 6.53 30.71 8.48 A 0.56 0.56 0.0 0 1 30.14 9.04 Q 28.11 9.03 28.11 10.25 Z M 14.4003 27.0011 A 0.76 0.76 0.0 0 0 14.3853 25.9265 L 12.5070 24.0999 A 0.76 0.76 0.0 0 0 11.4323 24.1149 L 9.6197 25.9789 A 0.76 0.76 0.0 0 0 9.6347 27.0535 L 11.5130 28.8801 A 0.76 0.76 0.0 0 0 12.5877 28.8651 L 14.4003 27.0011 Z" data-c-fill="eff6ff" fill-opacity="0"/><path fill="#3b82f6" d="M 26.80 15.12 L 34.83 17.68 A 1.41 1.41 0.0 0 1 34.83 20.37 L 26.79 22.90 A 1.41 1.41 0.0 0 0 25.87 23.81 L 23.31 31.84 A 1.41 1.41 0.0 0 1 20.62 31.84 L 18.09 23.80 A 1.41 1.41 0.0 0 0 17.18 22.88 L 9.15 20.32 A 1.41 1.41 0.0 0 1 9.15 17.63 L 17.19 15.10 A 1.41 1.41 0.0 0 0 18.11 14.19 L 20.67 6.16 A 1.41 1.41 0.0 0 1 23.36 6.16 L 25.89 14.20 A 1.41 1.41 0.0 0 0 26.80 15.12 Z M 12.63 19.45 Q 15.63 19.39 18.39 20.52 A 3.79 3.77 -86.1 0 1 20.62 23.09 L 21.72 27.43 A 0.30 0.30 0.0 0 0 22.31 27.41 Q 22.75 25.03 23.51 22.75 C 24.40 20.07 27.56 19.89 30.66 19.23 A 0.27 0.27 0.0 0 0 30.63 18.69 Q 28.17 18.46 25.31 17.32 C 23.17 16.47 22.95 12.98 22.35 10.80 A 0.31 0.31 0.0 0 0 21.75 10.80 C 21.19 12.95 20.54 17.14 18.10 17.65 Q 13.95 18.52 12.56 19.17 A 0.15 0.15 0.0 0 0 12.63 19.45 Z" data-c-fill="3b82f6"/><path fill="#3b82f6" d="M 32.00 6.53 Q 33.31 6.54 33.29 8.48 A 0.56 0.56 0.0 0 0 33.85 9.05 Q 35.88 9.04 35.88 10.26 Q 35.88 11.49 33.85 11.47 A 0.56 0.56 0.0 0 0 33.28 12.04 Q 33.29 13.98 31.99 13.98 Q 30.69 13.98 30.70 12.03 A 0.56 0.56 0.0 0 0 30.14 11.46 Q 28.11 11.47 28.11 10.25 Q 28.11 9.03 30.14 9.04 A 0.56 0.56 0.0 0 0 30.71 8.48 Q 30.70 6.53 32.00 6.53 Z" data-c-fill="3b82f6"/><path fill="#eff6ff" d="M 12.56 19.17 Q 13.95 18.52 18.10 17.65 C 20.54 17.14 21.19 12.95 21.75 10.80 A 0.31 0.31 0.0 0 1 22.35 10.80 C 22.95 12.98 23.17 16.47 25.31 17.32 Q 28.17 18.46 30.63 18.69 A 0.27 0.27 0.0 0 1 30.66 19.23 C 27.56 19.89 24.40 20.07 23.51 22.75 Q 22.75 25.03 22.31 27.41 A 0.30 0.30 0.0 0 1 21.72 27.43 L 20.62 23.09 A 3.79 3.77 -86.1 0 0 18.39 20.52 Q 15.63 19.39 12.63 19.45 A 0.15 0.15 0.0 0 1 12.56 19.17 Z" data-c-fill="eff6ff" fill-opacity="0"/><rect fill="#3b82f6" x="-2.07" y="-2.06" transform="rotate(44.2 -26.614 28.034)" width="4.14" height="4.12" rx=".76" data-c-fill="3b82f6"/></svg>
\ No newline at end of file
diff --git a/Cunkebao/static/images/icons/data-label.svg b/Cunkebao/static/images/icons/data-label.svg
new file mode 100644
index 00000000..7d068539
--- /dev/null
+++ b/Cunkebao/static/images/icons/data-label.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="8" cy="8" r="6.5" stroke="#999999" stroke-width="1.5" stroke-dasharray="1 2"/>
+  <circle cx="8" cy="8" r="2" fill="#999999"/>
+</svg> 
\ No newline at end of file
diff --git a/Cunkebao/static/images/icons/trend-up.svg b/Cunkebao/static/images/icons/trend-up.svg
new file mode 100644
index 00000000..fe8077b6
--- /dev/null
+++ b/Cunkebao/static/images/icons/trend-up.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 17L9 11L13 15L21 7" stroke="#2fc25b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14 7H21V14" stroke="#2fc25b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg> 
\ No newline at end of file
diff --git a/Cunkebao/static/images/icons/user-label.svg b/Cunkebao/static/images/icons/user-label.svg
new file mode 100644
index 00000000..c38775f6
--- /dev/null
+++ b/Cunkebao/static/images/icons/user-label.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="8" r="4" stroke="#999999" stroke-width="1.5" fill="none"/>
+  <path d="M6 20C6 16.6863 8.68629 14 12 14C15.3137 14 18 16.6863 18 20" 
+        stroke="#999999" 
+        stroke-width="1.5" 
+        stroke-linecap="round"/>
+</svg> 
\ No newline at end of file