更改样式

src/utils/api.js

@@ -175,6 +175,7 @@ const api = {
 
     // 代理数据统计
     dashboard: {
+        // 代理数据统计
         getStats: () => request.get('/agent/stats'),
         getChartData: (type) => request.get(`/agents/dashboard/charts/${type}`),
         getUserChart: (params) => request.get("/agent/user-growth-trend", {params}),
@@ -183,7 +184,7 @@ const api = {
         getRecentUsers: () => request.get("/agent/recent-users"),
         getRecentCommissions: () => request.get("/agent/recent-commissions"),
 
-
+        // 直营代理数据统计
         getStatsAgentDirectly: () => request.get('/agent/stats_agent_directly'),
     },
 

src/views/DashboardDirectly.vue

@@ -238,7 +238,10 @@ import {
   UserFilled,
   Money,
   Clock,
-  Coin
+  Coin,
+  Avatar,
+  Watermelon,
+  Sell
 } from '@element-plus/icons-vue'
 import VChart from 'vue-echarts'
 import {use} from 'echarts/core'
@@ -307,8 +310,8 @@ const stats = computed(() => [
     key: 'users',
     label: '直销商户人数',
     value: statsData.value.users.total_directly_agents,
-    icon: User,
-    class: 'stat-users',
+    icon: Avatar,
+    class: 'stat-users1',
     change: `直销商户利润${statsData.value.commissions.directly_agents_income}`,
     changeClass: statsData.value.commissions.directly_agents_income >= 0 ? 'positive' : 'negative',
     changeIcon: statsData.value.commissions.directly_agents_income >= 0 ? 'ArrowUp' : 'ArrowDown'
@@ -318,7 +321,7 @@ const stats = computed(() => [
     label: '直销商户分享人数',
     value: statsData.value.users.agent_share_users,
     icon: User,
-    class: 'stat-users',
+    class: 'stat-users2',
     change: `直销商户分享利润${statsData.value.commissions.active_users_income}`,
     changeClass: statsData.value.commissions.active_users_income >= 0 ? 'positive' : 'negative',
     changeIcon: statsData.value.commissions.active_users_income >= 0 ? 'ArrowUp' : 'ArrowDown'
@@ -328,7 +331,7 @@ const stats = computed(() => [
     label: '直营人数',
     value: `${statsData.value.users.total_operated}`,
     icon: Money,
-    class: 'stat-commission',
+    class: 'stat-users3',
     change: `直营佣金${statsData.value.commissions.operated_commission}`,
     changeClass: statsData.value.commissions.operated_commission >= 0 ? 'positive' : 'negative',
     changeIcon: statsData.value.commissions.operated_commission >= 0 ? 'ArrowUp' : 'ArrowDown'
@@ -337,8 +340,8 @@ const stats = computed(() => [
     key: 'users',
     label: '直营商户人数',
     value: `${statsData.value.users.active_users}`,
-    icon: Coin,
-    class: 'stat-today',
+    icon: Watermelon,
+    class: 'stat-users4',
     change: `已提现佣金${statsData.value.commissions.get_commission}`,
     changeClass: statsData.value.commissions.get_commission >= 0 ? 'positive' : 'negative',
     changeIcon: statsData.value.commissions.get_commission >= 0 ? 'ArrowUp' : 'ArrowDown'
@@ -347,8 +350,8 @@ const stats = computed(() => [
     key: 'users',
     label: '直营商户分享人数',
     value: `${statsData.value.users.operated_share_users}`,
-    icon: Coin,
-    class: 'stat-today',
+    icon: Sell,
+    class: 'stat-users5',
     change: `待提现佣金${statsData.value.commissions.loading_commission}`,
     changeClass: statsData.value.commissions.loading_commission >= 0 ? 'positive' : 'negative',
     changeIcon: statsData.value.commissions.loading_commission >= 0 ? 'ArrowUp' : 'ArrowDown'
@@ -820,19 +823,23 @@ onMounted(() => {
   margin-right: 16px;
 }
 
-.stat-users .stat-icon {
+.stat-users1 .stat-icon {
   color: #409EFF;
 }
 
-.stat-commission .stat-icon {
-  color: #67C23A;
+.stat-users2 .stat-icon {
+  color: #89ce49;
 }
 
-.stat-today .stat-icon {
+.stat-users3 .stat-icon {
+  color: #3ac2b0;
+}
+
+.stat-users4 .stat-icon {
   color: #E6A23C;
 }
 
-.stat-pending .stat-icon {
+.stat-users5 .stat-icon {
   color: #F56C6C;
 }