【私域操盘手】 操盘手端UI - 首页

Cunkebao/App.vue

@@ -45,6 +45,9 @@
 	/* 导入全局样式变量 */
 	@import "./uni.scss";
 	
+	/* 导入字体 */
+	@import "./static/fonts/fonts.css";
+	
 	/* 全局样式 */
 	page {
 		background-color: $bg-color;

Cunkebao/components/CustomTabBar.vue

@@ -68,7 +68,6 @@ export default {
   bottom: 0;
   left: 0;
   right: 0;
-  height: 150rpx;
   background-color: #fff;
   display: flex;
   box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
@@ -85,7 +84,6 @@ export default {
     .tab-text {
       font-size: 26rpx;
       color: #999;
-      margin-top: 10rpx;
       
       &.active-text {
         color: #4080ff;

Cunkebao/pages/index/index.vue

@@ -2,9 +2,9 @@
   <view class="index-container">
     <!-- 顶部导航栏 -->
     <view class="header">
-      <view class="title">存客宝</view>
+      <view class="title align-left">存客宝</view>
       <view class="header-icons">
-        <u-icon name="bell" size="56" class="icon-bell" @click="goToNotification"></u-icon>
+        <u-icon name="bell" size="56" color="#000000" class="icon-bell" @click="goToNotification"></u-icon>
       </view>
     </view>
     
@@ -13,24 +13,24 @@
       <view class="data-card">
         <view class="data-title">设备数量</view>
         <view class="data-content">
-          <text class="data-number">42</text>
+          <text class="data-number digital-number">42</text>
-          <u-icon name="phone" size="68" color="#4080ff"></u-icon>
+          <image src="/static/images/icons/smartphone.svg" class="device-icon"></image>
         </view>
       </view>
       
       <view class="data-card">
         <view class="data-title">微信号数量</view>
         <view class="data-content">
-          <text class="data-number">42</text>
+          <text class="data-number digital-number">42</text>
-          <u-icon name="weixin-fill" size="68" color="#4080ff"></u-icon>
+          <image src="/static/images/icons/users.svg" class="team-icon"></image>
         </view>
       </view>
       
       <view class="data-card">
         <view class="data-title">在线微信号</view>
         <view class="data-content">
-          <text class="data-number">35</text>
+          <text class="data-number digital-number">35</text>
-          <u-icon name="checkmark-circle" size="68" color="#4080ff"></u-icon>
+          <image src="/static/images/icons/heartbeat.svg" class="heartbeat-icon"></image>
         </view>
         <view class="progress-container">
           <view class="progress-bar">
@@ -42,11 +42,11 @@
     
     <!-- 场景获客统计卡片 -->
     <view class="stat-card">
-      <view class="card-title">场景获客统计</view>
+      <view class="card-title align-left">场景获客统计</view>
       <view class="stat-grid">
         <view class="stat-item">
           <view class="stat-icon bg-green">
-            <u-icon name="integral-fill" size="32" color="#ffffff"></u-icon>
+            <u-icon name="integral-fill" size="38" color="#07c160"></u-icon>
           </view>
           <view class="stat-number">234</view>
           <view class="stat-label">公众号获客</view>
@@ -54,7 +54,7 @@
         
         <view class="stat-item">
           <view class="stat-icon bg-yellow">
-            <u-icon name="coupon" size="32" color="#ffffff"></u-icon>
+            <u-icon name="coupon" size="38" color="#ff9900"></u-icon>
           </view>
           <view class="stat-number">167</view>
           <view class="stat-label">海报获客</view>
@@ -62,7 +62,7 @@
         
         <view class="stat-item">
           <view class="stat-icon bg-black">
-            <u-icon name="play-right" size="32" color="#ffffff"></u-icon>
+            <u-icon name="play-right" size="38" color="#000000"></u-icon>
           </view>
           <view class="stat-number">156</view>
           <view class="stat-label">抖音获客</view>
@@ -70,7 +70,7 @@
         
         <view class="stat-item">
           <view class="stat-icon bg-red">
-            <u-icon name="heart" size="32" color="#ffffff"></u-icon>
+            <u-icon name="heart" size="38" color="#fa5151"></u-icon>
           </view>
           <view class="stat-number">89</view>
           <view class="stat-label">小红书获客</view>
@@ -80,13 +80,13 @@
     
     <!-- 每日获客趋势卡片 -->
     <view class="trend-card">
-      <view class="card-title">每日获客趋势</view>
+      <view class="card-title align-left">每日获客趋势</view>
       <view class="chart-container">
         <!-- 使用自定义LineChart组件代替uChart -->
         <LineChart
           :points="weekTrendData"
           :xAxisLabels="weekDays"
-          color="#4080ff"
+          color="#2563EB"
           class="custom-chart"
         ></LineChart>
       </view>
@@ -158,12 +158,16 @@ export default {
   align-items: center;
   padding: 25rpx 30rpx;
   background-color: #fff;
-  border-bottom: 1px solid #eeeeee;
+  border-bottom: 1px solid #e5e5e5;
   
   .title {
     font-size: 45rpx;
     font-weight: bold;
     color: #2664ec;
+    
+    &.align-left {
+      text-align: left;
+    }
   }
   
   .header-icons {
@@ -184,12 +188,12 @@ export default {
     border-radius: 30rpx;
     padding: 30rpx 30rpx;
     margin:  15rpx;
-    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2rpx 7rpx rgba(0, 0, 0, 0.15);
     
     .data-title {
       font-size: 28rpx;
       color: black;
-      margin-bottom: 16rpx;
+      text-align: center;
     }
     
     .data-content {
@@ -198,9 +202,30 @@ export default {
       justify-content: space-between;
       
       .data-number {
-        font-size: 55rpx;
+        font-size: 58rpx;
         font-weight: bold;
-        color: #4080ff;
+        color: #2563EB;
+        height: 80rpx;
+        line-height: 80rpx;
+      }
+      
+      .device-icon {
+        width: 76rpx;
+        height: 60rpx;
+        margin-right: 6rpx;
+      }
+      
+      .team-icon {
+        width: 76rpx;
+        height: 60rpx;
+        margin-right: 6rpx;
+      }
+      
+      .heartbeat-icon {
+        width: 76rpx;
+        height: 60rpx;
+        margin-right: 6rpx;
+        animation: pulse 1.5s ease-in-out infinite;
       }
     }
     
@@ -235,15 +260,20 @@ export default {
 .stat-card, .trend-card {
   margin: 35rpx;
   background-color: #fff;
-  border-radius: 16rpx;
+  border-radius: 30rpx;
   padding: 25rpx 40rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2rpx 7rpx rgba(0, 0, 0, 0.15);
   
   .card-title {
     font-size: 36rpx;
     font-weight: bold;
     margin-bottom: 30rpx;
     color: #333;
+    text-align: center;
+    
+    &.align-left {
+      text-align: left;
+    }
   }
 }
 
@@ -259,8 +289,8 @@ export default {
     padding: 20rpx 0;
     
     .stat-icon {
-      width: 80rpx;
+      width: 96rpx;
-      height: 80rpx;
+      height: 96rpx;
       border-radius: 50%;
       display: flex;
       justify-content: center;
@@ -268,25 +298,25 @@ export default {
       margin-bottom: 16rpx;
       
       &.bg-green {
-        background-color: #07c160;
+        background-color: rgba(7, 193, 96, 0.2);
       }
       
       &.bg-yellow {
-        background-color: #ff9900;
+        background-color: rgba(255, 153, 0, 0.2);
       }
       
       &.bg-black {
-        background-color: #000000;
+        background-color: rgba(0, 0, 0, 0.2);
       }
       
       &.bg-red {
-        background-color: #fa5151;
+        background-color: rgba(250, 81, 81, 0.2);
       }
     }
     
     .stat-number {
-      font-size: 32rpx;
+      font-size: 34rpx;
-      font-weight: bold;
+      font-weight: normal;
       color: #333;
       margin-bottom: 8rpx;
     }

Cunkebao/static/fonts/fonts.css

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: 'Digital-Bold';
+  src: url('https://cdn.jsdelivr.net/npm/alibaba-puhuiti@1.0.0/AlibabaPuHuiTi-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Digital-Medium';
+  src: url('https://cdn.jsdelivr.net/npm/alibaba-puhuiti@1.0.0/AlibabaPuHuiTi-Medium.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+.digital-text {
+  font-family: 'Digital-Bold', sans-serif;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+}
+
+.digital-number {
+  font-family: 'Digital-Bold', sans-serif;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+} 

Cunkebao/static/images/icons/heartbeat.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 34 H18 L22 24 L30 44 L38 14 L46 44 L50 34 H60" 
+        stroke="#4080ff" 
+        stroke-width="4" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+        fill="none" />
+  <path d="M5 34 H15 L19 24 L27 44 L35 14 L43 44 L47 34 H63" 
+        stroke="#4080ff" 
+        stroke-width="2" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+        opacity="0.3"
+        fill="none" />
+</svg> 

Cunkebao/static/images/icons/smartphone.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 20C18 17.7909 19.7909 16 22 16H46C48.2091 16 50 17.7909 50 20V48C50 50.2091 48.2091 52 46 52H22C19.7909 52 18 50.2091 18 48V20Z" 
+        stroke="#4080ff" 
+        stroke-width="4" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+        fill="none" />
+  <line x1="18" y1="44" x2="50" y2="44" 
+        stroke="#4080ff" 
+        stroke-width="3" 
+        stroke-linecap="round" />
+  <line x1="18" y1="22" x2="50" y2="22" 
+        stroke="#4080ff" 
+        stroke-width="3" 
+        stroke-linecap="round" />
+  <rect x="30" y="46" width="8" height="3" rx="1.5"
+        stroke="#4080ff" 
+        stroke-width="2"
+        fill="none" />
+</svg> 

Cunkebao/static/images/icons/team.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 中间大人像 -->
+  <circle cx="34" cy="25" r="7.5" 
+          stroke="#4080ff" 
+          stroke-width="3.5"
+          fill="none" />
+  <path d="M22 49c0-6.6 5.4-12 12-12s12 5.4 12 12" 
+        stroke="#4080ff" 
+        stroke-width="3.5" 
+        stroke-linecap="round"
+        fill="none" />
+        
+  <!-- 左侧小人像 -->
+  <circle cx="18" cy="29" r="5" 
+          stroke="#4080ff" 
+          stroke-width="3"
+          fill="none" />
+  <path d="M10 47c0-4.4 3.6-8 8-8s8 3.6 8 8" 
+        stroke="#4080ff" 
+        stroke-width="3" 
+        stroke-linecap="round"
+        fill="none" />
+        
+  <!-- 右侧小人像 -->
+  <circle cx="50" cy="29" r="5" 
+          stroke="#4080ff" 
+          stroke-width="3"
+          fill="none" />
+  <path d="M42 47c0-4.4 3.6-8 8-8s8 3.6 8 8" 
+        stroke="#4080ff" 
+        stroke-width="3" 
+        stroke-linecap="round"
+        fill="none" />
+</svg> 

Cunkebao/static/images/icons/users.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 第一个用户图标 -->
+  <circle cx="24" cy="21" r="7" 
+          stroke="#4080ff" 
+          stroke-width="3.5"
+          fill="none" />
+  <path d="M14 46C14 39.4 19.4 34 26 34H28C34.6 34 40 39.4 40 46" 
+        stroke="#4080ff" 
+        stroke-width="3.5" 
+        stroke-linecap="round"
+        fill="none" />
+        
+  <!-- 第二个用户图标（小一些，叠加效果） -->
+  <circle cx="44" cy="21" r="6" 
+          stroke="#4080ff" 
+          stroke-width="3"
+          fill="none" />
+  <path d="M34 46C34 39.4 39.4 34 46 34H48C54.6 34 60 39.4 60 46" 
+        stroke="#4080ff" 
+        stroke-width="3" 
+        stroke-linecap="round"
+        fill="none" />
+</svg> 

Cunkebao/static/images/icons/wechat.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M46.4 39.2c0-7.8-7.8-14.2-16.9-14.2s-16.9 6.3-16.9 14.2c0 7.8 7.8 14.2 16.9 14.2 2 0 3.9-0.3 5.7-0.8l5.2 2.9c0.1 0.1 0.3 0.1 0.4 0.1 0.2 0 0.3-0.1 0.4-0.2 0.2-0.2 0.2-0.5 0-0.7l-4-4.5c5.8-2.4 9.2-7.1 9.2-11z" 
+        stroke="#4080ff" 
+        stroke-width="3.5" 
+        stroke-linejoin="round"
+        fill="none" />
+  <path d="M28 32.8c-1.1 0-2 0.9-2 2s0.9 2 2 2 2-0.9 2-2-0.9-2-2-2z"
+        fill="#4080ff" />
+  <path d="M35 32.8c-1.1 0-2 0.9-2 2s0.9 2 2 2 2-0.9 2-2-0.9-2-2-2z"
+        fill="#4080ff" />
+  <path d="M55.4 24.2c0-6.2-6.6-11.2-14.6-11.2-8 0-14.6 5-14.6 11.2 0 6.2 6.6 11.2 14.6 11.2 1.6 0 3.2-0.2 4.7-0.6l3.2 2.3c0.1 0.1 0.3 0.1 0.4 0.1 0.1 0 0.3-0.1 0.4-0.2 0.2-0.2 0.2-0.4 0-0.6l-2.5-3.5c4.3-2.1 8.4-5 8.4-8.7z" 
+        stroke="#4080ff" 
+        stroke-width="3.5" 
+        stroke-linejoin="round"
+        fill="none" />
+  <path d="M37 23c-0.8 0-1.5 0.7-1.5 1.5s0.7 1.5 1.5 1.5 1.5-0.7 1.5-1.5-0.7-1.5-1.5-1.5z"
+        fill="#4080ff" />
+  <path d="M44 23c-0.8 0-1.5 0.7-1.5 1.5s0.7 1.5 1.5 1.5 1.5-0.7 1.5-1.5-0.7-1.5-1.5-1.5z"
+        fill="#4080ff" />
+</svg> 

Cunkebao/uni.scss

@@ -19,7 +19,7 @@ $border-color-lighter: #ebeef5;
 $border-color-extra-light: #f2f6fc;
 
 /* 背景颜色 */
-$bg-color: #f7f7f7;
+$bg-color: #f9fafb;
 $bg-color-white: #ffffff;
 $bg-color-primary: rgba(64, 128, 255, 0.1);
 $bg-color-success: rgba(7, 193, 96, 0.1);