antissoft / lvqianmeiye_ERP

Commit 62f1d695310d773cc62b6a6a6b3f7a996418bf76

Authored by 李宇
1 parent f218a54a

最新

Inline Side-by-side
Showing 7 changed files with 372 additions and 277 deletions
绿纤uni-app/pages/dashboard/dashboard.vue
  View file @62f1d69
... ... @@ -321,19 +321,12 @@
321 321 <view class="warpboxs-small-title">
322 322 <view><text class="warpboxs-small-title-line"></text>客户获取转化链</view>
323 323 </view>
324   - <view class="funnel-box">
325   - <view class="funnel-step" v-for="(item, index) in funnelData" :key="index">
326   - <view class="step-shape" :style="{ width: (100 - index * 15) + '%', opacity: 1 - index * 0.1 }">
327   - <view class="step-content">
328   - <text class="step-label">{{ item.label }}</text>
329   - <text class="step-value">{{ formatNumber(item.value) }}</text>
330   - </view>
331   - </view>
332   - <view class="step-arrow" v-if="index < funnelData.length - 1">
333   - <u-icon name="arrow-down" size="16" color="#999"></u-icon>
334   - <text class="rate-text" v-if="item.rate">转化率 {{ item.rate }}%</text>
335   - </view>
336   - </view>
  324 + <view class="chart-wrapper">
  325 + <canvas canvas-id="funnelChart" class="funnel-chart-canvas" :style="{ width: chartWidth + 'px', height: chartHeight + 'px' }"></canvas>
  326 + </view>
  327 + <view class="funnel-stats">
  328 + <view class="stat-mini">邀约率: <text class="stat-value">{{ formatPercent(getTkInviteRate()) }}%</text></view>
  329 + <view class="stat-mini">到店率: <text class="stat-value">{{ formatPercent(getInviteStoreRate()) }}%</text></view>
337 330 </view>
338 331 </view>
339 332  
... ... @@ -504,33 +497,6 @@ export default {
504 497 GoldTriangleName: item.F_GoldTriangleName || item.GoldTriangleName || '未知',
505 498 TotalPerformance: item.F_TotalPerformance || item.TotalPerformance || 0
506 499 }))
507   - },
508   - // 转化漏斗数据
509   - funnelData() {
510   - if (!this.tkStatisticsData) return []
511   - const tk = this.tkStatisticsData
512   - return [
513   - {
514   - label: '拓客人数',
515   - value: tk.TkCount || 0,
516   - rate: null
517   - },
518   - {
519   - label: '邀约人数',
520   - value: tk.InviteCount || 0,
521   - rate: tk.TkCount > 0 ? this.formatPercent((tk.InviteCount || 0) / tk.TkCount * 100) : 0
522   - },
523   - {
524   - label: '到店人数',
525   - value: tk.StoreCount || 0,
526   - rate: tk.InviteCount > 0 ? this.formatPercent((tk.StoreCount || 0) / tk.InviteCount * 100) : 0
527   - },
528   - {
529   - label: '成交人数',
530   - value: tk.DealCount || 0,
531   - rate: tk.StoreCount > 0 ? this.formatPercent((tk.DealCount || 0) / tk.StoreCount * 100) : 0
532   - }
533   - ]
534 500 }
535 501 },
536 502 onLoad() {
... ... @@ -713,6 +679,10 @@ export default {
713 679  
714 680 if (res.code === 200 && res.data) {
715 681 this.tkStatisticsData = res.data
  682 + // 绘制漏斗图
  683 + this.$nextTick(() => {
  684 + this.drawFunnelChart()
  685 + })
716 686 }
717 687 } catch (error) {
718 688 console.error('加载拓客漏斗数据失败:', error)
... ... @@ -1003,6 +973,16 @@ export default {
1003 973 formatPercent(percent) {
1004 974 return Math.round(percent * 100) / 100
1005 975 },
  976 + // 获取邀约率
  977 + getTkInviteRate() {
  978 + if (!this.tkStatisticsData || !this.tkStatisticsData.TkCount) return 0
  979 + return (this.tkStatisticsData.YaoyCount || 0) / this.tkStatisticsData.TkCount * 100
  980 + },
  981 + // 获取到店率
  982 + getInviteStoreRate() {
  983 + if (!this.tkStatisticsData || !this.tkStatisticsData.YaoyCount) return 0
  984 + return (this.tkStatisticsData.DdCount || 0) / this.tkStatisticsData.YaoyCount * 100
  985 + },
1006 986 // 格式化日期时间
1007 987 formatDateTime(date) {
1008 988 const year = date.getFullYear()
... ... @@ -1434,6 +1414,82 @@ export default {
1434 1414 getMemberTypeColor(index) {
1435 1415 const colors = ['#F56C6C', '#67C23A', '#409EFF', '#E6A23C']
1436 1416 return colors[index % colors.length]
  1417 + },
  1418 + // 绘制漏斗图
  1419 + drawFunnelChart() {
  1420 + if (!this.tkStatisticsData) return
  1421 +
  1422 + const ctx = uni.createCanvasContext('funnelChart', this)
  1423 + const systemInfo = uni.getSystemInfoSync()
  1424 + const width = systemInfo.windowWidth - 60
  1425 + const height = this.chartHeight
  1426 +
  1427 + // 清空画布
  1428 + ctx.clearRect(0, 0, width, height)
  1429 +
  1430 + const d = this.tkStatisticsData
  1431 + const funnelData = [
  1432 + { value: d.TkCount || 0, name: '获客', color: '#409EFF' },
  1433 + { value: d.YaoyCount || 0, name: '邀约', color: '#67C23A' },
  1434 + { value: d.DdCount || 0, name: '到店', color: '#E6A23C' },
  1435 + { value: d.XfCount || 0, name: '成交', color: '#F56C6C' }
  1436 + ]
  1437 +
  1438 + // 计算最大值（用于归一化）
  1439 + const maxValue = Math.max(...funnelData.map(item => item.value), 1)
  1440 +
  1441 + // 漏斗图参数
  1442 + const topWidth = width * 0.8 // 顶部宽度
  1443 + const bottomWidth = width * 0.2 // 底部宽度
  1444 + const stepHeight = (height - 40) / funnelData.length // 每层高度（留出上下边距）
  1445 + const padding = { top: 20, bottom: 20, left: width * 0.1, right: width * 0.1 }
  1446 +
  1447 + // 绘制每一层
  1448 + funnelData.forEach((item, index) => {
  1449 + // 计算当前层的宽度（从上到下逐渐变窄）
  1450 + const currentTopWidth = topWidth - (topWidth - bottomWidth) * (index / (funnelData.length - 1))
  1451 + const currentBottomWidth = topWidth - (topWidth - bottomWidth) * ((index + 1) / (funnelData.length - 1))
  1452 +
  1453 + // 计算当前层的Y位置
  1454 + const y = padding.top + index * stepHeight
  1455 + const nextY = padding.top + (index + 1) * stepHeight
  1456 +
  1457 + // 计算中心X位置
  1458 + const centerX = width / 2
  1459 + const topLeftX = centerX - currentTopWidth / 2
  1460 + const topRightX = centerX + currentTopWidth / 2
  1461 + const bottomLeftX = centerX - currentBottomWidth / 2
  1462 + const bottomRightX = centerX + currentBottomWidth / 2
  1463 +
  1464 + // 绘制梯形（漏斗的一层）
  1465 + ctx.beginPath()
  1466 + ctx.moveTo(topLeftX, y)
  1467 + ctx.lineTo(topRightX, y)
  1468 + ctx.lineTo(bottomRightX, nextY)
  1469 + ctx.lineTo(bottomLeftX, nextY)
  1470 + ctx.closePath()
  1471 +
  1472 + // 填充颜色
  1473 + ctx.setFillStyle(item.color)
  1474 + ctx.fill()
  1475 +
  1476 + // 绘制边框
  1477 + ctx.setStrokeStyle('rgba(255, 255, 255, 0.3)')
  1478 + ctx.setLineWidth(2)
  1479 + ctx.stroke()
  1480 +
  1481 + // 绘制文字标签
  1482 + ctx.setFillStyle('#fff')
  1483 + ctx.setFontSize(24)
  1484 + ctx.setTextAlign('center')
  1485 + const labelY = y + stepHeight / 2 + 8
  1486 + ctx.fillText(item.name, centerX, labelY - 8)
  1487 + ctx.setFontSize(28)
  1488 + ctx.setFillStyle('#fff')
  1489 + ctx.fillText((item.value || 0) + '人', centerX, labelY + 16)
  1490 + })
  1491 +
  1492 + ctx.draw()
1437 1493 }
1438 1494 }
1439 1495 }
... ... @@ -1834,44 +1890,34 @@ export default {
1834 1890 }
1835 1891  
1836 1892 /* 转化漏斗 */
1837   -.funnel-box {
1838   - padding: 20rpx 0;
1839   -}
1840   -
1841   -.funnel-step {
1842   - display: flex;
1843   - flex-direction: column;
1844   - align-items: center;
1845   - margin-bottom: 10rpx;
  1893 +.funnel-section {
  1894 + .chart-wrapper {
  1895 + width: 100%;
  1896 + height: 280px;
  1897 + margin-bottom: 20rpx;
  1898 + }
1846 1899  
1847   - .step-shape {
1848   - background: linear-gradient(90deg, #66bb6a 0%, #43a047 100%);
1849   - border-radius: 8rpx;
1850   - padding: 16rpx;
1851   - box-shadow: 0 4rpx 12rpx rgba(67, 160, 71, 0.2);
1852   - display: flex;
1853   - justify-content: center;
1854   -
1855   - .step-content {
1856   - display: flex;
1857   - align-items: center;
1858   - justify-content: space-between;
1859   - width: 100%;
1860   - padding: 0 20rpx;
1861   -
1862   - .step-label { color: #fff; font-size: 26rpx; font-weight: 500; }
1863   - .step-value { color: #fff; font-size: 32rpx; font-weight: bold; }
1864   - }
  1900 + .funnel-chart-canvas {
  1901 + width: 100%;
  1902 + height: 100%;
1865 1903 }
1866 1904  
1867   - .step-arrow {
  1905 + .funnel-stats {
1868 1906 display: flex;
1869   - flex-direction: column;
1870   - align-items: center;
1871   - padding: 8rpx 0;
1872   - height: 60rpx;
  1907 + justify-content: space-around;
  1908 + padding: 20rpx 0;
  1909 + border-top: 1px solid rgba(0, 0, 0, 0.05);
1873 1910  
1874   - .rate-text { font-size: 20rpx; color: #666; margin-top: 4rpx; }
  1911 + .stat-mini {
  1912 + font-size: 24rpx;
  1913 + color: #666;
  1914 +
  1915 + .stat-value {
  1916 + color: #43a047;
  1917 + font-weight: 600;
  1918 + margin-left: 8rpx;
  1919 + }
  1920 + }
1875 1921 }
1876 1922 }
1877 1923  
... ...
绿纤uni-app/pages/home/home.vue
  View file @62f1d69
... ... @@ -913,7 +913,7 @@ export default {
913 913  
914 914 /* 主题色背景 - 渐变立体效果 */
915 915 &.icon-circle-bg-1 {
916   - background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%);
  916 + background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%);
917 917 box-shadow:
918 918 0 6rpx 20rpx rgba(30, 136, 229, 0.35),
919 919 0 2rpx 8rpx rgba(30, 136, 229, 0.25),
... ... @@ -922,7 +922,7 @@ export default {
922 922 }
923 923  
924 924 &.icon-circle-bg-2 {
925   - background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%);
  925 + background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%);
926 926 box-shadow:
927 927 0 6rpx 20rpx rgba(67, 160, 71, 0.35),
928 928 0 2rpx 8rpx rgba(67, 160, 71, 0.25),
... ... @@ -931,7 +931,7 @@ export default {
931 931 }
932 932  
933 933 &.icon-circle-bg-3 {
934   - background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%);
  934 + background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%);
935 935 box-shadow:
936 936 0 6rpx 20rpx rgba(211, 47, 47, 0.35),
937 937 0 2rpx 8rpx rgba(211, 47, 47, 0.25),
... ... @@ -940,7 +940,7 @@ export default {
940 940 }
941 941  
942 942 &.icon-circle-bg-4 {
943   - background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%);
  943 + background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%);
944 944 box-shadow:
945 945 0 6rpx 20rpx rgba(0, 131, 143, 0.35),
946 946 0 2rpx 8rpx rgba(0, 131, 143, 0.25),
... ... @@ -949,7 +949,7 @@ export default {
949 949 }
950 950  
951 951 &.icon-circle-bg-5 {
952   - background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%);
  952 + background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%);
953 953 box-shadow:
954 954 0 6rpx 20rpx rgba(245, 124, 0, 0.35),
955 955 0 2rpx 8rpx rgba(245, 124, 0, 0.25),
... ... @@ -958,7 +958,7 @@ export default {
958 958 }
959 959  
960 960 &.icon-circle-bg-6 {
961   - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%);
  961 + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
962 962 box-shadow:
963 963 0 6rpx 20rpx rgba(123, 31, 162, 0.35),
964 964 0 2rpx 8rpx rgba(123, 31, 162, 0.25),
... ... @@ -967,7 +967,7 @@ export default {
967 967 }
968 968  
969 969 &.icon-circle-bg-7 {
970   - background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%);
  970 + background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
971 971 box-shadow:
972 972 0 6rpx 20rpx rgba(194, 24, 91, 0.35),
973 973 0 2rpx 8rpx rgba(194, 24, 91, 0.25),
... ... @@ -976,7 +976,7 @@ export default {
976 976 }
977 977  
978 978 &.icon-circle-bg-8 {
979   - background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%);
  979 + background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%);
980 980 box-shadow:
981 981 0 6rpx 20rpx rgba(249, 168, 37, 0.35),
982 982 0 2rpx 8rpx rgba(249, 168, 37, 0.25),
... ... @@ -985,7 +985,7 @@ export default {
985 985 }
986 986  
987 987 &.icon-circle-bg-9 {
988   - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%);
  988 + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
989 989 box-shadow:
990 990 0 6rpx 20rpx rgba(25, 118, 210, 0.35),
991 991 0 2rpx 8rpx rgba(25, 118, 210, 0.25),
... ... @@ -994,7 +994,7 @@ export default {
994 994 }
995 995  
996 996 &.icon-circle-bg-10 {
997   - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%);
  997 + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
998 998 box-shadow:
999 999 0 6rpx 20rpx rgba(56, 142, 60, 0.35),
1000 1000 0 2rpx 8rpx rgba(56, 142, 60, 0.25),
... ... @@ -1003,7 +1003,7 @@ export default {
1003 1003 }
1004 1004  
1005 1005 &.icon-circle-bg-11 {
1006   - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%);
  1006 + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
1007 1007 box-shadow:
1008 1008 0 6rpx 20rpx rgba(183, 28, 28, 0.35),
1009 1009 0 2rpx 8rpx rgba(183, 28, 28, 0.25),
... ... @@ -1012,7 +1012,7 @@ export default {
1012 1012 }
1013 1013  
1014 1014 &.icon-circle-bg-12 {
1015   - background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%);
  1015 + background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%);
1016 1016 box-shadow:
1017 1017 0 6rpx 20rpx rgba(0, 151, 167, 0.35),
1018 1018 0 2rpx 8rpx rgba(0, 151, 167, 0.25),
... ... @@ -1021,7 +1021,7 @@ export default {
1021 1021 }
1022 1022  
1023 1023 &.icon-circle-bg-13 {
1024   - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%);
  1024 + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
1025 1025 box-shadow:
1026 1026 0 6rpx 20rpx rgba(230, 81, 0, 0.35),
1027 1027 0 2rpx 8rpx rgba(230, 81, 0, 0.25),
... ... @@ -1030,7 +1030,7 @@ export default {
1030 1030 }
1031 1031  
1032 1032 &.icon-circle-bg-14 {
1033   - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%);
  1033 + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
1034 1034 box-shadow:
1035 1035 0 6rpx 20rpx rgba(106, 27, 154, 0.35),
1036 1036 0 2rpx 8rpx rgba(106, 27, 154, 0.25),
... ... @@ -1039,7 +1039,7 @@ export default {
1039 1039 }
1040 1040  
1041 1041 &.icon-circle-bg-15 {
1042   - background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%);
  1042 + background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%);
1043 1043 box-shadow:
1044 1044 0 6rpx 20rpx rgba(173, 20, 87, 0.35),
1045 1045 0 2rpx 8rpx rgba(173, 20, 87, 0.25),
... ... @@ -1048,7 +1048,7 @@ export default {
1048 1048 }
1049 1049  
1050 1050 &.icon-circle-bg-16 {
1051   - background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%);
  1051 + background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%);
1052 1052 box-shadow:
1053 1053 0 6rpx 20rpx rgba(251, 192, 45, 0.35),
1054 1054 0 2rpx 8rpx rgba(251, 192, 45, 0.25),
... ... @@ -1057,7 +1057,7 @@ export default {
1057 1057 }
1058 1058  
1059 1059 &.icon-circle-bg-17 {
1060   - background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%);
  1060 + background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%);
1061 1061 box-shadow:
1062 1062 0 6rpx 20rpx rgba(93, 64, 55, 0.35),
1063 1063 0 2rpx 8rpx rgba(93, 64, 55, 0.25),
... ... @@ -1066,7 +1066,7 @@ export default {
1066 1066 }
1067 1067  
1068 1068 &.icon-circle-bg-18 {
1069   - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%);
  1069 + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #5a67d8 100%);
1070 1070 box-shadow:
1071 1071 0 6rpx 20rpx rgba(102, 126, 234, 0.35),
1072 1072 0 2rpx 8rpx rgba(102, 126, 234, 0.25),
... ... @@ -1259,7 +1259,7 @@ export default {
1259 1259  
1260 1260 /* 主题色 - 渐变立体效果 */
1261 1261 &.icon-circle-bg-1 {
1262   - background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%);
  1262 + background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%);
1263 1263 box-shadow:
1264 1264 0 6rpx 20rpx rgba(30, 136, 229, 0.35),
1265 1265 0 2rpx 8rpx rgba(30, 136, 229, 0.25),
... ... @@ -1268,7 +1268,7 @@ export default {
1268 1268 }
1269 1269  
1270 1270 &.icon-circle-bg-2 {
1271   - background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%);
  1271 + background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%);
1272 1272 box-shadow:
1273 1273 0 6rpx 20rpx rgba(67, 160, 71, 0.35),
1274 1274 0 2rpx 8rpx rgba(67, 160, 71, 0.25),
... ... @@ -1277,7 +1277,7 @@ export default {
1277 1277 }
1278 1278  
1279 1279 &.icon-circle-bg-3 {
1280   - background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%);
  1280 + background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%);
1281 1281 box-shadow:
1282 1282 0 6rpx 20rpx rgba(211, 47, 47, 0.35),
1283 1283 0 2rpx 8rpx rgba(211, 47, 47, 0.25),
... ... @@ -1286,7 +1286,7 @@ export default {
1286 1286 }
1287 1287  
1288 1288 &.icon-circle-bg-4 {
1289   - background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%);
  1289 + background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%);
1290 1290 box-shadow:
1291 1291 0 6rpx 20rpx rgba(0, 131, 143, 0.35),
1292 1292 0 2rpx 8rpx rgba(0, 131, 143, 0.25),
... ... @@ -1295,7 +1295,7 @@ export default {
1295 1295 }
1296 1296  
1297 1297 &.icon-circle-bg-5 {
1298   - background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%);
  1298 + background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%);
1299 1299 box-shadow:
1300 1300 0 6rpx 20rpx rgba(245, 124, 0, 0.35),
1301 1301 0 2rpx 8rpx rgba(245, 124, 0, 0.25),
... ... @@ -1304,7 +1304,7 @@ export default {
1304 1304 }
1305 1305  
1306 1306 &.icon-circle-bg-6 {
1307   - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%);
  1307 + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
1308 1308 box-shadow:
1309 1309 0 6rpx 20rpx rgba(123, 31, 162, 0.35),
1310 1310 0 2rpx 8rpx rgba(123, 31, 162, 0.25),
... ... @@ -1313,7 +1313,7 @@ export default {
1313 1313 }
1314 1314  
1315 1315 &.icon-circle-bg-7 {
1316   - background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%);
  1316 + background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
1317 1317 box-shadow:
1318 1318 0 6rpx 20rpx rgba(194, 24, 91, 0.35),
1319 1319 0 2rpx 8rpx rgba(194, 24, 91, 0.25),
... ... @@ -1322,7 +1322,7 @@ export default {
1322 1322 }
1323 1323  
1324 1324 &.icon-circle-bg-8 {
1325   - background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%);
  1325 + background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%);
1326 1326 box-shadow:
1327 1327 0 6rpx 20rpx rgba(249, 168, 37, 0.35),
1328 1328 0 2rpx 8rpx rgba(249, 168, 37, 0.25),
... ... @@ -1331,7 +1331,7 @@ export default {
1331 1331 }
1332 1332  
1333 1333 &.icon-circle-bg-9 {
1334   - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%);
  1334 + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
1335 1335 box-shadow:
1336 1336 0 6rpx 20rpx rgba(25, 118, 210, 0.35),
1337 1337 0 2rpx 8rpx rgba(25, 118, 210, 0.25),
... ... @@ -1340,7 +1340,7 @@ export default {
1340 1340 }
1341 1341  
1342 1342 &.icon-circle-bg-10 {
1343   - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%);
  1343 + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
1344 1344 box-shadow:
1345 1345 0 6rpx 20rpx rgba(56, 142, 60, 0.35),
1346 1346 0 2rpx 8rpx rgba(56, 142, 60, 0.25),
... ... @@ -1349,7 +1349,7 @@ export default {
1349 1349 }
1350 1350  
1351 1351 &.icon-circle-bg-11 {
1352   - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%);
  1352 + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
1353 1353 box-shadow:
1354 1354 0 6rpx 20rpx rgba(183, 28, 28, 0.35),
1355 1355 0 2rpx 8rpx rgba(183, 28, 28, 0.25),
... ... @@ -1358,7 +1358,7 @@ export default {
1358 1358 }
1359 1359  
1360 1360 &.icon-circle-bg-12 {
1361   - background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%);
  1361 + background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%);
1362 1362 box-shadow:
1363 1363 0 6rpx 20rpx rgba(0, 151, 167, 0.35),
1364 1364 0 2rpx 8rpx rgba(0, 151, 167, 0.25),
... ... @@ -1367,7 +1367,7 @@ export default {
1367 1367 }
1368 1368  
1369 1369 &.icon-circle-bg-13 {
1370   - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%);
  1370 + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
1371 1371 box-shadow:
1372 1372 0 6rpx 20rpx rgba(230, 81, 0, 0.35),
1373 1373 0 2rpx 8rpx rgba(230, 81, 0, 0.25),
... ... @@ -1376,7 +1376,7 @@ export default {
1376 1376 }
1377 1377  
1378 1378 &.icon-circle-bg-14 {
1379   - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%);
  1379 + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
1380 1380 box-shadow:
1381 1381 0 6rpx 20rpx rgba(106, 27, 154, 0.35),
1382 1382 0 2rpx 8rpx rgba(106, 27, 154, 0.25),
... ... @@ -1385,7 +1385,7 @@ export default {
1385 1385 }
1386 1386  
1387 1387 &.icon-circle-bg-15 {
1388   - background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%);
  1388 + background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%);
1389 1389 box-shadow:
1390 1390 0 6rpx 20rpx rgba(173, 20, 87, 0.35),
1391 1391 0 2rpx 8rpx rgba(173, 20, 87, 0.25),
... ... @@ -1394,7 +1394,7 @@ export default {
1394 1394 }
1395 1395  
1396 1396 &.icon-circle-bg-16 {
1397   - background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%);
  1397 + background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%);
1398 1398 box-shadow:
1399 1399 0 6rpx 20rpx rgba(251, 192, 45, 0.35),
1400 1400 0 2rpx 8rpx rgba(251, 192, 45, 0.25),
... ... @@ -1403,7 +1403,7 @@ export default {
1403 1403 }
1404 1404  
1405 1405 &.icon-circle-bg-17 {
1406   - background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%);
  1406 + background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%);
1407 1407 box-shadow:
1408 1408 0 6rpx 20rpx rgba(93, 64, 55, 0.35),
1409 1409 0 2rpx 8rpx rgba(93, 64, 55, 0.25),
... ... @@ -1502,7 +1502,7 @@ export default {
1502 1502  
1503 1503 /* 主题色背景 - 渐变立体效果 */
1504 1504 &.icon-circle-bg-6 {
1505   - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%);
  1505 + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
1506 1506 box-shadow:
1507 1507 0 6rpx 20rpx rgba(123, 31, 162, 0.35),
1508 1508 0 2rpx 8rpx rgba(123, 31, 162, 0.25),
... ... @@ -1511,7 +1511,7 @@ export default {
1511 1511 }
1512 1512  
1513 1513 &.icon-circle-bg-9 {
1514   - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%);
  1514 + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
1515 1515 box-shadow:
1516 1516 0 6rpx 20rpx rgba(25, 118, 210, 0.35),
1517 1517 0 2rpx 8rpx rgba(25, 118, 210, 0.25),
... ... @@ -1520,7 +1520,7 @@ export default {
1520 1520 }
1521 1521  
1522 1522 &.icon-circle-bg-10 {
1523   - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%);
  1523 + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
1524 1524 box-shadow:
1525 1525 0 6rpx 20rpx rgba(56, 142, 60, 0.35),
1526 1526 0 2rpx 8rpx rgba(56, 142, 60, 0.25),
... ... @@ -1618,7 +1618,7 @@ export default {
1618 1618  
1619 1619 /* 主题色背景 - 渐变立体效果 */
1620 1620 &.icon-circle-bg-11 {
1621   - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%);
  1621 + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
1622 1622 box-shadow:
1623 1623 0 6rpx 20rpx rgba(183, 28, 28, 0.35),
1624 1624 0 2rpx 8rpx rgba(183, 28, 28, 0.25),
... ... @@ -1627,7 +1627,7 @@ export default {
1627 1627 }
1628 1628  
1629 1629 &.icon-circle-bg-13 {
1630   - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%);
  1630 + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
1631 1631 box-shadow:
1632 1632 0 6rpx 20rpx rgba(230, 81, 0, 0.35),
1633 1633 0 2rpx 8rpx rgba(230, 81, 0, 0.25),
... ... @@ -1636,7 +1636,7 @@ export default {
1636 1636 }
1637 1637  
1638 1638 &.icon-circle-bg-14 {
1639   - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%);
  1639 + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
1640 1640 box-shadow:
1641 1641 0 6rpx 20rpx rgba(106, 27, 154, 0.35),
1642 1642 0 2rpx 8rpx rgba(106, 27, 154, 0.25),
... ...
绿纤uni-app/pages/home/home1.vue renamed to 绿纤uni-app/pages/home/home2.vue
  View file @62f1d69
... ... @@ -913,7 +913,7 @@ export default {
913 913  
914 914 /* 主题色背景 - 渐变立体效果 */
915 915 &.icon-circle-bg-1 {
916   - background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%);
  916 + background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%);
917 917 box-shadow:
918 918 0 6rpx 20rpx rgba(30, 136, 229, 0.35),
919 919 0 2rpx 8rpx rgba(30, 136, 229, 0.25),
... ... @@ -922,7 +922,7 @@ export default {
922 922 }
923 923  
924 924 &.icon-circle-bg-2 {
925   - background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%);
  925 + background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%);
926 926 box-shadow:
927 927 0 6rpx 20rpx rgba(67, 160, 71, 0.35),
928 928 0 2rpx 8rpx rgba(67, 160, 71, 0.25),
... ... @@ -931,7 +931,7 @@ export default {
931 931 }
932 932  
933 933 &.icon-circle-bg-3 {
934   - background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%);
  934 + background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%);
935 935 box-shadow:
936 936 0 6rpx 20rpx rgba(211, 47, 47, 0.35),
937 937 0 2rpx 8rpx rgba(211, 47, 47, 0.25),
... ... @@ -940,7 +940,7 @@ export default {
940 940 }
941 941  
942 942 &.icon-circle-bg-4 {
943   - background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%);
  943 + background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%);
944 944 box-shadow:
945 945 0 6rpx 20rpx rgba(0, 131, 143, 0.35),
946 946 0 2rpx 8rpx rgba(0, 131, 143, 0.25),
... ... @@ -949,7 +949,7 @@ export default {
949 949 }
950 950  
951 951 &.icon-circle-bg-5 {
952   - background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%);
  952 + background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%);
953 953 box-shadow:
954 954 0 6rpx 20rpx rgba(245, 124, 0, 0.35),
955 955 0 2rpx 8rpx rgba(245, 124, 0, 0.25),
... ... @@ -958,7 +958,7 @@ export default {
958 958 }
959 959  
960 960 &.icon-circle-bg-6 {
961   - background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
  961 + background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%);
962 962 box-shadow:
963 963 0 6rpx 20rpx rgba(123, 31, 162, 0.35),
964 964 0 2rpx 8rpx rgba(123, 31, 162, 0.25),
... ... @@ -967,7 +967,7 @@ export default {
967 967 }
968 968  
969 969 &.icon-circle-bg-7 {
970   - background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
  970 + background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%);
971 971 box-shadow:
972 972 0 6rpx 20rpx rgba(194, 24, 91, 0.35),
973 973 0 2rpx 8rpx rgba(194, 24, 91, 0.25),
... ... @@ -976,7 +976,7 @@ export default {
976 976 }
977 977  
978 978 &.icon-circle-bg-8 {
979   - background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%);
  979 + background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%);
980 980 box-shadow:
981 981 0 6rpx 20rpx rgba(249, 168, 37, 0.35),
982 982 0 2rpx 8rpx rgba(249, 168, 37, 0.25),
... ... @@ -985,7 +985,7 @@ export default {
985 985 }
986 986  
987 987 &.icon-circle-bg-9 {
988   - background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
  988 + background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%);
989 989 box-shadow:
990 990 0 6rpx 20rpx rgba(25, 118, 210, 0.35),
991 991 0 2rpx 8rpx rgba(25, 118, 210, 0.25),
... ... @@ -994,7 +994,7 @@ export default {
994 994 }
995 995  
996 996 &.icon-circle-bg-10 {
997   - background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
  997 + background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%);
998 998 box-shadow:
999 999 0 6rpx 20rpx rgba(56, 142, 60, 0.35),
1000 1000 0 2rpx 8rpx rgba(56, 142, 60, 0.25),
... ... @@ -1003,7 +1003,7 @@ export default {
1003 1003 }
1004 1004  
1005 1005 &.icon-circle-bg-11 {
1006   - background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
  1006 + background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%);
1007 1007 box-shadow:
1008 1008 0 6rpx 20rpx rgba(183, 28, 28, 0.35),
1009 1009 0 2rpx 8rpx rgba(183, 28, 28, 0.25),
... ... @@ -1012,7 +1012,7 @@ export default {
1012 1012 }
1013 1013  
1014 1014 &.icon-circle-bg-12 {
1015   - background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%);
  1015 + background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%);
1016 1016 box-shadow:
1017 1017 0 6rpx 20rpx rgba(0, 151, 167, 0.35),
1018 1018 0 2rpx 8rpx rgba(0, 151, 167, 0.25),
... ... @@ -1021,7 +1021,7 @@ export default {
1021 1021 }
1022 1022  
1023 1023 &.icon-circle-bg-13 {
1024   - background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
  1024 + background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%);
1025 1025 box-shadow:
1026 1026 0 6rpx 20rpx rgba(230, 81, 0, 0.35),
1027 1027 0 2rpx 8rpx rgba(230, 81, 0, 0.25),
... ... @@ -1030,7 +1030,7 @@ export default {
1030 1030 }
1031 1031  
1032 1032 &.icon-circle-bg-14 {
1033   - background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
  1033 + background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%);
1034 1034 box-shadow:
1035 1035 0 6rpx 20rpx rgba(106, 27, 154, 0.35),
1036 1036 0 2rpx 8rpx rgba(106, 27, 154, 0.25),
... ... @@ -1039,7 +1039,7 @@ export default {
1039 1039 }
1040 1040  
1041 1041 &.icon-circle-bg-15 {
1042   - background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%);
  1042 + background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%);
1043 1043 box-shadow:
1044 1044 0 6rpx 20rpx rgba(173, 20, 87, 0.35),
1045 1045 0 2rpx 8rpx rgba(173, 20, 87, 0.25),
... ... @@ -1048,7 +1048,7 @@ export default {
1048 1048 }
1049 1049  
1050 1050 &.icon-circle-bg-16 {
1051   - background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%);
  1051 + background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%);
1052 1052 box-shadow:
1053 1053 0 6rpx 20rpx rgba(251, 192, 45, 0.35),
1054 1054 0 2rpx 8rpx rgba(251, 192, 45, 0.25),
... ... @@ -1057,7 +1057,7 @@ export default {
1057 1057 }
1058 1058  
1059 1059 &.icon-circle-bg-17 {
1060   - background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%);
  1060 + background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%);
1061 1061 box-shadow:
1062 1062 0 6rpx 20rpx rgba(93, 64, 55, 0.35),
1063 1063 0 2rpx 8rpx rgba(93, 64, 55, 0.25),
... ... @@ -1066,7 +1066,7 @@ export default {
1066 1066 }
1067 1067  
1068 1068 &.icon-circle-bg-18 {
1069   - background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #5a67d8 100%);
  1069 + background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%);
1070 1070 box-shadow:
1071 1071 0 6rpx 20rpx rgba(102, 126, 234, 0.35),
1072 1072 0 2rpx 8rpx rgba(102, 126, 234, 0.25),
... ... @@ -1259,7 +1259,7 @@ export default {
1259 1259  
1260 1260 /* 主题色 - 渐变立体效果 */
1261 1261 &.icon-circle-bg-1 {
1262   - background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%);
  1262 + background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%);
1263 1263 box-shadow:
1264 1264 0 6rpx 20rpx rgba(30, 136, 229, 0.35),
1265 1265 0 2rpx 8rpx rgba(30, 136, 229, 0.25),
... ... @@ -1268,7 +1268,7 @@ export default {
1268 1268 }
1269 1269  
1270 1270 &.icon-circle-bg-2 {
1271   - background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%);
  1271 + background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%);
1272 1272 box-shadow:
1273 1273 0 6rpx 20rpx rgba(67, 160, 71, 0.35),
1274 1274 0 2rpx 8rpx rgba(67, 160, 71, 0.25),
... ... @@ -1277,7 +1277,7 @@ export default {
1277 1277 }
1278 1278  
1279 1279 &.icon-circle-bg-3 {
1280   - background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%);
  1280 + background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%);
1281 1281 box-shadow:
1282 1282 0 6rpx 20rpx rgba(211, 47, 47, 0.35),
1283 1283 0 2rpx 8rpx rgba(211, 47, 47, 0.25),
... ... @@ -1286,7 +1286,7 @@ export default {
1286 1286 }
1287 1287  
1288 1288 &.icon-circle-bg-4 {
1289   - background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%);
  1289 + background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%);
1290 1290 box-shadow:
1291 1291 0 6rpx 20rpx rgba(0, 131, 143, 0.35),
1292 1292 0 2rpx 8rpx rgba(0, 131, 143, 0.25),
... ... @@ -1295,7 +1295,7 @@ export default {
1295 1295 }
1296 1296  
1297 1297 &.icon-circle-bg-5 {
1298   - background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%);
  1298 + background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%);
1299 1299 box-shadow:
1300 1300 0 6rpx 20rpx rgba(245, 124, 0, 0.35),
1301 1301 0 2rpx 8rpx rgba(245, 124, 0, 0.25),
... ... @@ -1304,7 +1304,7 @@ export default {
1304 1304 }
1305 1305  
1306 1306 &.icon-circle-bg-6 {
1307   - background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
  1307 + background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%);
1308 1308 box-shadow:
1309 1309 0 6rpx 20rpx rgba(123, 31, 162, 0.35),
1310 1310 0 2rpx 8rpx rgba(123, 31, 162, 0.25),
... ... @@ -1313,7 +1313,7 @@ export default {
1313 1313 }
1314 1314  
1315 1315 &.icon-circle-bg-7 {
1316   - background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
  1316 + background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%);
1317 1317 box-shadow:
1318 1318 0 6rpx 20rpx rgba(194, 24, 91, 0.35),
1319 1319 0 2rpx 8rpx rgba(194, 24, 91, 0.25),
... ... @@ -1322,7 +1322,7 @@ export default {
1322 1322 }
1323 1323  
1324 1324 &.icon-circle-bg-8 {
1325   - background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%);
  1325 + background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%);
1326 1326 box-shadow:
1327 1327 0 6rpx 20rpx rgba(249, 168, 37, 0.35),
1328 1328 0 2rpx 8rpx rgba(249, 168, 37, 0.25),
... ... @@ -1331,7 +1331,7 @@ export default {
1331 1331 }
1332 1332  
1333 1333 &.icon-circle-bg-9 {
1334   - background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
  1334 + background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%);
1335 1335 box-shadow:
1336 1336 0 6rpx 20rpx rgba(25, 118, 210, 0.35),
1337 1337 0 2rpx 8rpx rgba(25, 118, 210, 0.25),
... ... @@ -1340,7 +1340,7 @@ export default {
1340 1340 }
1341 1341  
1342 1342 &.icon-circle-bg-10 {
1343   - background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
  1343 + background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%);
1344 1344 box-shadow:
1345 1345 0 6rpx 20rpx rgba(56, 142, 60, 0.35),
1346 1346 0 2rpx 8rpx rgba(56, 142, 60, 0.25),
... ... @@ -1349,7 +1349,7 @@ export default {
1349 1349 }
1350 1350  
1351 1351 &.icon-circle-bg-11 {
1352   - background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
  1352 + background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%);
1353 1353 box-shadow:
1354 1354 0 6rpx 20rpx rgba(183, 28, 28, 0.35),
1355 1355 0 2rpx 8rpx rgba(183, 28, 28, 0.25),
... ... @@ -1358,7 +1358,7 @@ export default {
1358 1358 }
1359 1359  
1360 1360 &.icon-circle-bg-12 {
1361   - background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%);
  1361 + background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%);
1362 1362 box-shadow:
1363 1363 0 6rpx 20rpx rgba(0, 151, 167, 0.35),
1364 1364 0 2rpx 8rpx rgba(0, 151, 167, 0.25),
... ... @@ -1367,7 +1367,7 @@ export default {
1367 1367 }
1368 1368  
1369 1369 &.icon-circle-bg-13 {
1370   - background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
  1370 + background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%);
1371 1371 box-shadow:
1372 1372 0 6rpx 20rpx rgba(230, 81, 0, 0.35),
1373 1373 0 2rpx 8rpx rgba(230, 81, 0, 0.25),
... ... @@ -1376,7 +1376,7 @@ export default {
1376 1376 }
1377 1377  
1378 1378 &.icon-circle-bg-14 {
1379   - background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
  1379 + background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%);
1380 1380 box-shadow:
1381 1381 0 6rpx 20rpx rgba(106, 27, 154, 0.35),
1382 1382 0 2rpx 8rpx rgba(106, 27, 154, 0.25),
... ... @@ -1385,7 +1385,7 @@ export default {
1385 1385 }
1386 1386  
1387 1387 &.icon-circle-bg-15 {
1388   - background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%);
  1388 + background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%);
1389 1389 box-shadow:
1390 1390 0 6rpx 20rpx rgba(173, 20, 87, 0.35),
1391 1391 0 2rpx 8rpx rgba(173, 20, 87, 0.25),
... ... @@ -1394,7 +1394,7 @@ export default {
1394 1394 }
1395 1395  
1396 1396 &.icon-circle-bg-16 {
1397   - background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%);
  1397 + background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%);
1398 1398 box-shadow:
1399 1399 0 6rpx 20rpx rgba(251, 192, 45, 0.35),
1400 1400 0 2rpx 8rpx rgba(251, 192, 45, 0.25),
... ... @@ -1403,7 +1403,7 @@ export default {
1403 1403 }
1404 1404  
1405 1405 &.icon-circle-bg-17 {
1406   - background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%);
  1406 + background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%);
1407 1407 box-shadow:
1408 1408 0 6rpx 20rpx rgba(93, 64, 55, 0.35),
1409 1409 0 2rpx 8rpx rgba(93, 64, 55, 0.25),
... ... @@ -1502,7 +1502,7 @@ export default {
1502 1502  
1503 1503 /* 主题色背景 - 渐变立体效果 */
1504 1504 &.icon-circle-bg-6 {
1505   - background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
  1505 + background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%);
1506 1506 box-shadow:
1507 1507 0 6rpx 20rpx rgba(123, 31, 162, 0.35),
1508 1508 0 2rpx 8rpx rgba(123, 31, 162, 0.25),
... ... @@ -1511,7 +1511,7 @@ export default {
1511 1511 }
1512 1512  
1513 1513 &.icon-circle-bg-9 {
1514   - background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
  1514 + background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%);
1515 1515 box-shadow:
1516 1516 0 6rpx 20rpx rgba(25, 118, 210, 0.35),
1517 1517 0 2rpx 8rpx rgba(25, 118, 210, 0.25),
... ... @@ -1520,7 +1520,7 @@ export default {
1520 1520 }
1521 1521  
1522 1522 &.icon-circle-bg-10 {
1523   - background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
  1523 + background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%);
1524 1524 box-shadow:
1525 1525 0 6rpx 20rpx rgba(56, 142, 60, 0.35),
1526 1526 0 2rpx 8rpx rgba(56, 142, 60, 0.25),
... ... @@ -1618,7 +1618,7 @@ export default {
1618 1618  
1619 1619 /* 主题色背景 - 渐变立体效果 */
1620 1620 &.icon-circle-bg-11 {
1621   - background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
  1621 + background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%);
1622 1622 box-shadow:
1623 1623 0 6rpx 20rpx rgba(183, 28, 28, 0.35),
1624 1624 0 2rpx 8rpx rgba(183, 28, 28, 0.25),
... ... @@ -1627,7 +1627,7 @@ export default {
1627 1627 }
1628 1628  
1629 1629 &.icon-circle-bg-13 {
1630   - background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
  1630 + background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%);
1631 1631 box-shadow:
1632 1632 0 6rpx 20rpx rgba(230, 81, 0, 0.35),
1633 1633 0 2rpx 8rpx rgba(230, 81, 0, 0.25),
... ... @@ -1636,7 +1636,7 @@ export default {
1636 1636 }
1637 1637  
1638 1638 &.icon-circle-bg-14 {
1639   - background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
  1639 + background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%);
1640 1640 box-shadow:
1641 1641 0 6rpx 20rpx rgba(106, 27, 154, 0.35),
1642 1642 0 2rpx 8rpx rgba(106, 27, 154, 0.25),
... ...
绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.js
  View file @62f1d69
... ... @@ -303,17 +303,11 @@ var render = function () {
303 303 }
304 304 })
305 305 : null
306   - var l7 = _vm.tkStatisticsData
307   - ? _vm.__map(_vm.funnelData, function (item, index) {
308   - var $orig = _vm.__get_orig(item)
309   - var m27 = _vm.formatNumber(item.value)
310   - var g11 = _vm.funnelData.length
311   - return {
312   - $orig: $orig,
313   - m27: m27,
314   - g11: g11,
315   - }
316   - })
  306 + var m27 = _vm.tkStatisticsData
  307 + ? _vm.formatPercent(_vm.getTkInviteRate())
  308 + : null
  309 + var m28 = _vm.tkStatisticsData
  310 + ? _vm.formatPercent(_vm.getInviteStoreRate())
317 311 : null
318 312 if (!_vm._isMounted) {
319 313 _vm.e0 = function ($event, item) {
... ... @@ -362,7 +356,8 @@ var render = function () {
362 356 l5: l5,
363 357 g10: g10,
364 358 l6: l6,
365   - l7: l7,
  359 + m27: m27,
  360 + m28: m28,
366 361 },
367 362 }
368 363 )
... ... @@ -750,13 +745,6 @@ function _objectSpread(target) { for (var i = 1; i &lt; arguments.length; i++) { va
750 745 //
751 746 //
752 747 //
753   -//
754   -//
755   -//
756   -//
757   -//
758   -//
759   -//
760 748 var _default = {
761 749 data: function data() {
762 750 return {
... ... @@ -914,28 +902,6 @@ var _default = {
914 902 TotalPerformance: item.F_TotalPerformance || item.TotalPerformance || 0
915 903 };
916 904 });
917   - },
918   - // 转化漏斗数据
919   - funnelData: function funnelData() {
920   - if (!this.tkStatisticsData) return [];
921   - var tk = this.tkStatisticsData;
922   - return [{
923   - label: '拓客人数',
924   - value: tk.TkCount || 0,
925   - rate: null
926   - }, {
927   - label: '邀约人数',
928   - value: tk.InviteCount || 0,
929   - rate: tk.TkCount > 0 ? this.formatPercent((tk.InviteCount || 0) / tk.TkCount * 100) : 0
930   - }, {
931   - label: '到店人数',
932   - value: tk.StoreCount || 0,
933   - rate: tk.InviteCount > 0 ? this.formatPercent((tk.StoreCount || 0) / tk.InviteCount * 100) : 0
934   - }, {
935   - label: '成交人数',
936   - value: tk.DealCount || 0,
937   - rate: tk.StoreCount > 0 ? this.formatPercent((tk.DealCount || 0) / tk.StoreCount * 100) : 0
938   - }];
939 905 }
940 906 },
941 907 onLoad: function onLoad() {
... ... @@ -1197,6 +1163,10 @@ var _default = {
1197 1163 res = _context4.sent;
1198 1164 if (res.code === 200 && res.data) {
1199 1165 _this4.tkStatisticsData = res.data;
  1166 + // 绘制漏斗图
  1167 + _this4.$nextTick(function () {
  1168 + _this4.drawFunnelChart();
  1169 + });
1200 1170 }
1201 1171 _context4.next = 10;
1202 1172 break;
... ... @@ -1566,6 +1536,16 @@ var _default = {
1566 1536 formatPercent: function formatPercent(percent) {
1567 1537 return Math.round(percent * 100) / 100;
1568 1538 },
  1539 + // 获取邀约率
  1540 + getTkInviteRate: function getTkInviteRate() {
  1541 + if (!this.tkStatisticsData || !this.tkStatisticsData.TkCount) return 0;
  1542 + return (this.tkStatisticsData.YaoyCount || 0) / this.tkStatisticsData.TkCount * 100;
  1543 + },
  1544 + // 获取到店率
  1545 + getInviteStoreRate: function getInviteStoreRate() {
  1546 + if (!this.tkStatisticsData || !this.tkStatisticsData.YaoyCount) return 0;
  1547 + return (this.tkStatisticsData.DdCount || 0) / this.tkStatisticsData.YaoyCount * 100;
  1548 + },
1569 1549 // 格式化日期时间
1570 1550 formatDateTime: function formatDateTime(date) {
1571 1551 var year = date.getFullYear();
... ... @@ -2013,6 +1993,97 @@ var _default = {
2013 1993 getMemberTypeColor: function getMemberTypeColor(index) {
2014 1994 var colors = ['#F56C6C', '#67C23A', '#409EFF', '#E6A23C'];
2015 1995 return colors[index % colors.length];
  1996 + },
  1997 + // 绘制漏斗图
  1998 + drawFunnelChart: function drawFunnelChart() {
  1999 + if (!this.tkStatisticsData) return;
  2000 + var ctx = uni.createCanvasContext('funnelChart', this);
  2001 + var systemInfo = uni.getSystemInfoSync();
  2002 + var width = systemInfo.windowWidth - 60;
  2003 + var height = this.chartHeight;
  2004 +
  2005 + // 清空画布
  2006 + ctx.clearRect(0, 0, width, height);
  2007 + var d = this.tkStatisticsData;
  2008 + var funnelData = [{
  2009 + value: d.TkCount || 0,
  2010 + name: '获客',
  2011 + color: '#409EFF'
  2012 + }, {
  2013 + value: d.YaoyCount || 0,
  2014 + name: '邀约',
  2015 + color: '#67C23A'
  2016 + }, {
  2017 + value: d.DdCount || 0,
  2018 + name: '到店',
  2019 + color: '#E6A23C'
  2020 + }, {
  2021 + value: d.XfCount || 0,
  2022 + name: '成交',
  2023 + color: '#F56C6C'
  2024 + }];
  2025 +
  2026 + // 计算最大值（用于归一化）
  2027 + var maxValue = Math.max.apply(Math, (0, _toConsumableArray2.default)(funnelData.map(function (item) {
  2028 + return item.value;
  2029 + })).concat([1]));
  2030 +
  2031 + // 漏斗图参数
  2032 + var topWidth = width * 0.8; // 顶部宽度
  2033 + var bottomWidth = width * 0.2; // 底部宽度
  2034 + var stepHeight = (height - 40) / funnelData.length; // 每层高度（留出上下边距）
  2035 + var padding = {
  2036 + top: 20,
  2037 + bottom: 20,
  2038 + left: width * 0.1,
  2039 + right: width * 0.1
  2040 + };
  2041 +
  2042 + // 绘制每一层
  2043 + funnelData.forEach(function (item, index) {
  2044 + // 计算当前层的宽度（从上到下逐渐变窄）
  2045 + var currentTopWidth = topWidth - (topWidth - bottomWidth) * (index / (funnelData.length - 1));
  2046 + var currentBottomWidth = topWidth - (topWidth - bottomWidth) * ((index + 1) / (funnelData.length - 1));
  2047 +
  2048 + // 计算当前层的Y位置
  2049 + var y = padding.top + index * stepHeight;
  2050 + var nextY = padding.top + (index + 1) * stepHeight;
  2051 +
  2052 + // 计算中心X位置
  2053 + var centerX = width / 2;
  2054 + var topLeftX = centerX - currentTopWidth / 2;
  2055 + var topRightX = centerX + currentTopWidth / 2;
  2056 + var bottomLeftX = centerX - currentBottomWidth / 2;
  2057 + var bottomRightX = centerX + currentBottomWidth / 2;
  2058 +
  2059 + // 绘制梯形（漏斗的一层）
  2060 + ctx.beginPath();
  2061 + ctx.moveTo(topLeftX, y);
  2062 + ctx.lineTo(topRightX, y);
  2063 + ctx.lineTo(bottomRightX, nextY);
  2064 + ctx.lineTo(bottomLeftX, nextY);
  2065 + ctx.closePath();
  2066 +
  2067 + // 填充颜色
  2068 + ctx.setFillStyle(item.color);
  2069 + ctx.fill();
  2070 +
  2071 + // 绘制边框
  2072 + ctx.setStrokeStyle('rgba(255, 255, 255, 0.3)');
  2073 + ctx.setLineWidth(2);
  2074 + ctx.stroke();
  2075 +
  2076 + // 绘制文字标签
  2077 + ctx.setFillStyle('#fff');
  2078 + ctx.setFontSize(24);
  2079 + ctx.setTextAlign('center');
  2080 + var labelY = y + stepHeight / 2 + 8;
  2081 + ctx.fillText(item.name, centerX, labelY - 8);
  2082 + ctx.setFontSize(28);
  2083 + ctx.setFillStyle('#fff');
  2084 + ctx.fillText((item.value || 0) + '人', centerX, labelY + 16);
  2085 + });
  2086 + ctx.draw();
2016 2087 }
2017 2088 }
2018 2089 };
... ...
绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.wxml
  View file @62f1d69
1   -<view class="page data-v-a09b2520"><view class="warpbox data-v-a09b2520"><view class="header-section data-v-a09b2520"><view class="page-title data-v-a09b2520">经营看板</view><view class="filter-box data-v-a09b2520"><picker mode="date" fields="month" value="{{selectedMonth}}" data-event-opts="{{[['change',[['onMonthChange',['$event']]]]]}}" bindchange="__e" class="data-v-a09b2520"><view class="date-picker-trigger data-v-a09b2520"><text class="date-text data-v-a09b2520">{{selectedMonthText}}</text><u-icon vue-id="469bc196-1" name="arrow-down" size="14" color="#666" class="data-v-a09b2520" bind:__l="__l"></u-icon></view></picker><view data-event-opts="{{[['tap',[['search',['$event']]]]]}}" class="{{['refresh-btn','data-v-a09b2520',loading?'loading':'']}}" bindtap="__e"><u-icon vue-id="469bc196-2" name="reload" size="16" color="#43a047" class="data-v-a09b2520" bind:__l="__l"></u-icon></view></view></view><view class="warpboxss kpi-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>核心业务指标</view></view><view class="kpi-grid data-v-a09b2520"><block wx:for="{{$root.l0}}" wx:for-item="kpi" wx:for-index="index" wx:key="index"><view data-event-opts="{{[['tap',[['handleKpiClick',['$0'],[[['kpiList','',index]]]]]]]}}" class="{{['kpi-card','data-v-a09b2520','kpi-'+kpi.$orig.type]}}" bindtap="__e"><view class="kpi-header data-v-a09b2520"><text class="kpi-label data-v-a09b2520">{{kpi.$orig.label}}</text><view class="{{['kpi-icon-badge','data-v-a09b2520',kpi.$orig.type]}}"><text class="kpi-icon-text data-v-a09b2520">{{kpi.m0}}</text></view></view><view class="kpi-content data-v-a09b2520"><view class="kpi-value-group data-v-a09b2520"><block wx:if="{{kpi.$orig.isMoney}}"><text class="currency data-v-a09b2520">￥</text></block><text class="value data-v-a09b2520">{{kpi.g0}}</text><block wx:if="{{kpi.$orig.isPercent}}"><text class="unit data-v-a09b2520">%</text></block></view><block wx:if="{{kpi.$orig.target}}"><view class="kpi-footer data-v-a09b2520"><view class="target-progress data-v-a09b2520"><view class="progress-bg data-v-a09b2520"><view class="progress-bar data-v-a09b2520" style="{{'width:'+(kpi.g1+'%')+';'+('background-color:'+(kpi.$orig.status==='up'?'#4caf50':'#ff9800')+';')}}"></view></view></view><view class="target-text data-v-a09b2520">{{'目标: '+kpi.$orig.target+''}}<text class="{{['status-arrow','data-v-a09b2520',kpi.$orig.status]}}">{{kpi.$orig.status==='up'?'↑':'↓'}}</text></view></view></block></view></view></block></view></view><block wx:if="{{memberStatistics.totalMembers>0}}"><view class="warpboxss member-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>会员资产全景</view></view><view class="member-grid data-v-a09b2520"><view class="member-stat-card blue-theme data-v-a09b2520"><view class="icon-circle data-v-a09b2520"><u-icon vue-id="469bc196-3" name="account" size="24" color="#409EFF" class="data-v-a09b2520" bind:__l="__l"></u-icon></view><view class="stat-info data-v-a09b2520"><view class="stat-label data-v-a09b2520">总会员数</view><view class="stat-value data-v-a09b2520">{{$root.m1}}</view><view class="stat-sub data-v-a09b2520">{{"本月新增: "+$root.m2}}</view><block wx:if="{{memberStatistics.newMembersLastMonth>0}}"><view class="stat-sub data-v-a09b2520">{{"上月新增: "+$root.m3}}</view></block></view></view><view class="member-stat-card green-theme data-v-a09b2520"><view class="icon-circle data-v-a09b2520"><u-icon vue-id="469bc196-4" name="checkmark-circle" size="24" color="#67C23A" class="data-v-a09b2520" bind:__l="__l"></u-icon></view><view class="stat-info data-v-a09b2520"><view class="stat-label data-v-a09b2520">活跃会员</view><view class="stat-value data-v-a09b2520">{{$root.m4}}</view><view class="stat-sub data-v-a09b2520">{{"活跃(≤3天): "+$root.m5}}</view><view class="stat-sub data-v-a09b2520">{{"常到店(4-59天): "+$root.m6}}</view><view class="stat-sub data-v-a09b2520">{{"60天活跃率: "+memberStatistics.activeRate+"%"}}</view><view class="stat-sub data-v-a09b2520">{{"30天活跃率: "+memberStatistics.activeRate30+"%"}}</view></view></view><view class="member-stat-card orange-theme data-v-a09b2520"><view class="icon-circle data-v-a09b2520"><u-icon vue-id="469bc196-5" name="wallet" size="24" color="#E6A23C" class="data-v-a09b2520" bind:__l="__l"></u-icon></view><view class="stat-info data-v-a09b2520"><view class="stat-label data-v-a09b2520">剩余权益</view><view class="stat-value mini data-v-a09b2520">{{"￥"+$root.m7}}</view><view class="stat-sub data-v-a09b2520">{{"人均: "+$root.m8+"元"}}</view><block wx:if="{{memberStatistics.topRemainingAmount>0}}"><view class="stat-sub data-v-a09b2520">{{"最高: "+(memberStatistics.topRemainingMemberName||'无')+" ￥"+$root.m9}}</view></block><block wx:if="{{memberStatistics.topBillingAmount>0}}"><view class="stat-sub data-v-a09b2520">{{"本月开单最高: "+(memberStatistics.topBillingMemberName||'无')+" ￥"+$root.m10}}</view></block><block wx:if="{{memberStatistics.topConsumeAmount>0}}"><view class="stat-sub data-v-a09b2520">{{"本月消耗最高: "+(memberStatistics.topConsumeMemberName||'无')+" ￥"+$root.m11}}</view></block></view></view><view class="member-stat-card red-theme data-v-a09b2520"><view class="icon-circle data-v-a09b2520"><u-icon vue-id="469bc196-6" name="info-circle" size="24" color="#F56C6C" class="data-v-a09b2520" bind:__l="__l"></u-icon></view><view class="stat-info data-v-a09b2520"><view class="stat-label data-v-a09b2520">沉睡会员</view><view class="stat-value data-v-a09b2520">{{$root.m12}}</view><view class="stat-sub data-v-a09b2520">{{"60-89天: "+$root.m13}}</view><view class="stat-sub data-v-a09b2520">{{"90-179天: "+$root.m14}}</view><view class="stat-sub data-v-a09b2520">{{"180-359天: "+$root.m15}}</view><view class="stat-sub data-v-a09b2520">{{"360天+: "+$root.m16}}</view></view></view></view></view></block><block wx:if="{{$root.g2>0}}"><view class="warpboxss member-chart-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>会员结构洞察</view></view><view class="member-chart-container data-v-a09b2520"><view class="member-type-chart-wrapper data-v-a09b2520"><canvas class="member-type-chart-canvas data-v-a09b2520" canvas-id="memberTypeChart"></canvas></view><view class="member-type-legend data-v-a09b2520"><block wx:for="{{$root.l1}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="legend-item data-v-a09b2520"><view class="legend-dot data-v-a09b2520" style="{{'background-color:'+(item.m17)+';'}}"></view><text class="legend-name data-v-a09b2520">{{item.$orig.MemberType||'未知'}}</text><text class="legend-value data-v-a09b2520">{{item.m18+"人"}}</text></view></block></view></view></view></block><block wx:if="{{memberStatistics.beautyMembers>0||memberStatistics.medicalMembers>0||memberStatistics.techMembers>0}}"><view class="warpboxss member-category-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>会员价值分层</view></view><view class="member-category-container data-v-a09b2520"><view class="member-category-chart-wrapper data-v-a09b2520"><canvas class="member-category-chart-canvas data-v-a09b2520" canvas-id="memberCategoryChart"></canvas></view><view class="member-category-legend data-v-a09b2520"><view class="legend-item data-v-a09b2520"><view class="legend-color data-v-a09b2520" style="background:#409EFF;"></view><view class="legend-text data-v-a09b2520"><view class="legend-name data-v-a09b2520">生美会员</view><view class="legend-value data-v-a09b2520">{{$root.m19+"人"}}</view></view></view><view class="legend-item data-v-a09b2520"><view class="legend-color data-v-a09b2520" style="background:#F56C6C;"></view><view class="legend-text data-v-a09b2520"><view class="legend-name data-v-a09b2520">医美会员</view><view class="legend-value data-v-a09b2520">{{$root.m20+"人"}}</view></view></view><view class="legend-item data-v-a09b2520"><view class="legend-color data-v-a09b2520" style="background:#67C23A;"></view><view class="legend-text data-v-a09b2520"><view class="legend-name data-v-a09b2520">科技部会员</view><view class="legend-value data-v-a09b2520">{{$root.m21+"人"}}</view></view></view></view></view></view></block><block wx:if="{{$root.g3>0}}"><view class="warpboxss trend-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>经营效能趋势</view><view class="trend-controls data-v-a09b2520"><view class="pill-switch data-v-a09b2520"><view data-event-opts="{{[['tap',[['switchTrendType',['month']]]]]}}" class="{{['pill-item','data-v-a09b2520',trendType==='month'?'active':'']}}" bindtap="__e">月</view><view data-event-opts="{{[['tap',[['switchTrendType',['day']]]]]}}" class="{{['pill-item','data-v-a09b2520',trendType==='day'?'active':'']}}" bindtap="__e">日</view><view data-event-opts="{{[['tap',[['switchTrendType',['week']]]]]}}" class="{{['pill-item','data-v-a09b2520',trendType==='week'?'active':'']}}" bindtap="__e">周</view></view></view></view><view class="chart-wrapper data-v-a09b2520"><canvas class="trend-chart-canvas data-v-a09b2520" style="{{'width:'+(chartWidth+'px')+';'+('height:'+(chartHeight+'px')+';')}}" canvas-id="trendChart"></canvas></view><view class="trend-legend-modern data-v-a09b2520"><view class="legend-item data-v-a09b2520"><view class="dot revenue data-v-a09b2520"></view><text class="data-v-a09b2520">营收(成交额)</text></view><view class="legend-item data-v-a09b2520"><view class="dot consume data-v-a09b2520"></view><text class="data-v-a09b2520">消耗(服务产出)</text></view></view></view></block><block wx:if="{{$root.g4>0}}"><view class="warpboxss ranking-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>门店卓越榜</view></view><view class="rank-list-modern data-v-a09b2520"><block wx:for="{{$root.l2}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view data-event-opts="{{[['tap',[['e0',['$event']]]]]}}" data-event-params="{{({item:item.$orig})}}" class="rank-item data-v-a09b2520" bindtap="__e"><view class="{{['rank-idx','data-v-a09b2520',index<3?'top-3':'']}}"><block wx:if="{{index===0}}"><image class="medal-icon data-v-a09b2520" src="/static/rank/no1.png"></image></block><block wx:else><block wx:if="{{index===1}}"><image class="medal-icon data-v-a09b2520" src="/static/rank/no2.png"></image></block><block wx:else><block wx:if="{{index===2}}"><image class="medal-icon data-v-a09b2520" src="/static/rank/no3.png"></image></block><block wx:else><text class="data-v-a09b2520">{{index+1}}</text></block></block></block></view><view class="rank-info data-v-a09b2520"><view class="info-main data-v-a09b2520"><text class="name data-v-a09b2520">{{item.$orig.StoreName||'未知门店'}}</text><text class="value data-v-a09b2520">{{"￥"+item.m22}}</text></view><view class="progress-bg data-v-a09b2520"><view class="progress-bar data-v-a09b2520" style="{{'width:'+(item.$orig.TotalPerformance/(storeRanking[0].TotalPerformance||1)*100+'%')+';'}}"></view></view></view></view></block></view></view></block><block wx:if="{{$root.g5>0}}"><view class="warpboxss coach-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>核心员效贡献矩阵</view><view class="type-tags data-v-a09b2520"><view data-event-opts="{{[['tap',[['switchCoachRankType',['billing']]]]]}}" class="{{['tag-item','data-v-a09b2520',coachRankType==='billing'?'active':'']}}" bindtap="__e">开单</view><view data-event-opts="{{[['tap',[['switchCoachRankType',['consume']]]]]}}" class="{{['tag-item','data-v-a09b2520',coachRankType==='consume'?'active':'']}}" bindtap="__e">消耗</view><view data-event-opts="{{[['tap',[['switchCoachRankType',['refund']]]]]}}" class="{{['tag-item','data-v-a09b2520',coachRankType==='refund'?'active':'']}}" bindtap="__e">退卡</view></view></view><view class="rank-list-modern data-v-a09b2520"><block wx:for="{{$root.l3}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="rank-item data-v-a09b2520"><view class="{{['rank-idx','data-v-a09b2520',index<3?'top-3':'']}}"><text class="data-v-a09b2520">{{index+1}}</text></view><view class="rank-avatar data-v-a09b2520"><text class="data-v-a09b2520">{{item.$orig.HealthCoachName?item.g6:'无'}}</text></view><view class="rank-info data-v-a09b2520"><view class="info-main data-v-a09b2520"><text class="name data-v-a09b2520">{{item.$orig.HealthCoachName||'未知'}}</text><text class="value data-v-a09b2520">{{"￥"+item.m23}}</text></view><view class="progress-bg data-v-a09b2520"><view class="progress-bar green data-v-a09b2520" style="{{'width:'+(item.$orig.Percent+'%')+';'}}"></view></view></view></view></block></view></view></block><block wx:if="{{$root.g7>0}}"><view class="warpboxss gold-triangle-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>协同作战榜</view></view><view class="rank-list-modern data-v-a09b2520"><block wx:for="{{$root.l4}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="rank-item data-v-a09b2520"><view class="{{['rank-idx','data-v-a09b2520',index<3?'top-3':'']}}"><text class="data-v-a09b2520">{{index+1}}</text></view><view class="rank-info data-v-a09b2520"><view class="info-main data-v-a09b2520"><text class="name data-v-a09b2520">{{item.$orig.GoldTriangleName||'未知'}}</text><text class="value data-v-a09b2520">{{"￥"+item.m24}}</text></view><view class="progress-bg data-v-a09b2520"><view class="progress-bar orange data-v-a09b2520" style="{{'width:'+(item.$orig.TotalPerformance/(goldTriangleRankingTop10[0].TotalPerformance||1)*100+'%')+';'}}"></view></view></view></view></block></view></view></block><block wx:if="{{$root.g8>0}}"><view class="warpboxss visit-frequency-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>客户活跃度分析</view></view><view class="chart-wrapper data-v-a09b2520"><canvas class="visit-frequency-chart-canvas data-v-a09b2520" style="{{'width:'+(chartWidth+'px')+';'+('height:'+(chartHeight+'px')+';')}}" canvas-id="visitFrequencyChart"></canvas></view></view></block><block wx:if="{{$root.g9>0}}"><view class="warpboxss item-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>热门服务品项</view></view><view class="item-grid data-v-a09b2520"><block wx:for="{{$root.l5}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="item-card data-v-a09b2520"><view class="{{['item-rank-badge','data-v-a09b2520','rank-'+(index+1)]}}">{{index+1}}</view><view class="item-name data-v-a09b2520">{{item.$orig.ItemName||'未知品项'}}</view><view class="item-val data-v-a09b2520">{{"￥"+item.m25}}</view><view class="item-process data-v-a09b2520"><view class="bar data-v-a09b2520" style="{{'width:'+(item.$orig.Percent+'%')+';'}}"></view></view></view></block></view></view></block><block wx:if="{{$root.g10>0}}"><view class="warpboxss item-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>热销产品品项</view></view><view class="item-grid data-v-a09b2520"><block wx:for="{{$root.l6}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="item-card data-v-a09b2520"><view class="{{['item-rank-badge','data-v-a09b2520','rank-'+(index+1)]}}">{{index+1}}</view><view class="item-name data-v-a09b2520">{{item.$orig.ItemName||'未知品项'}}</view><view class="item-val data-v-a09b2520">{{"￥"+item.m26}}</view><view class="item-process data-v-a09b2520"><view class="bar blue data-v-a09b2520" style="{{'width:'+(item.$orig.Percent+'%')+';'}}"></view></view></view></block></view></view></block><block wx:if="{{tkStatisticsData}}"><view class="warpboxss funnel-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>客户获取转化链</view></view><view class="funnel-box data-v-a09b2520"><block wx:for="{{$root.l7}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="funnel-step data-v-a09b2520"><view class="step-shape data-v-a09b2520" style="{{'width:'+(100-index*15+'%')+';'+('opacity:'+(1-index*0.1)+';')}}"><view class="step-content data-v-a09b2520"><text class="step-label data-v-a09b2520">{{item.$orig.label}}</text><text class="step-value data-v-a09b2520">{{item.m27}}</text></view></view><block wx:if="{{index<item.g11-1}}"><view class="step-arrow data-v-a09b2520"><u-icon vue-id="{{'469bc196-7-'+index}}" name="arrow-down" size="16" color="#999" class="data-v-a09b2520" bind:__l="__l"></u-icon><block wx:if="{{item.$orig.rate}}"><text class="rate-text data-v-a09b2520">{{"转化率 "+item.$orig.rate+"%"}}</text></block></view></block></view></block></view></view></block><view style="height:40rpx;" class="data-v-a09b2520"></view></view></view>
2 1 \ No newline at end of file
  2 +<view class="page data-v-a09b2520"><view class="warpbox data-v-a09b2520"><view class="header-section data-v-a09b2520"><view class="page-title data-v-a09b2520">经营看板</view><view class="filter-box data-v-a09b2520"><picker mode="date" fields="month" value="{{selectedMonth}}" data-event-opts="{{[['change',[['onMonthChange',['$event']]]]]}}" bindchange="__e" class="data-v-a09b2520"><view class="date-picker-trigger data-v-a09b2520"><text class="date-text data-v-a09b2520">{{selectedMonthText}}</text><u-icon vue-id="469bc196-1" name="arrow-down" size="14" color="#666" class="data-v-a09b2520" bind:__l="__l"></u-icon></view></picker><view data-event-opts="{{[['tap',[['search',['$event']]]]]}}" class="{{['refresh-btn','data-v-a09b2520',loading?'loading':'']}}" bindtap="__e"><u-icon vue-id="469bc196-2" name="reload" size="16" color="#43a047" class="data-v-a09b2520" bind:__l="__l"></u-icon></view></view></view><view class="warpboxss kpi-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>核心业务指标</view></view><view class="kpi-grid data-v-a09b2520"><block wx:for="{{$root.l0}}" wx:for-item="kpi" wx:for-index="index" wx:key="index"><view data-event-opts="{{[['tap',[['handleKpiClick',['$0'],[[['kpiList','',index]]]]]]]}}" class="{{['kpi-card','data-v-a09b2520','kpi-'+kpi.$orig.type]}}" bindtap="__e"><view class="kpi-header data-v-a09b2520"><text class="kpi-label data-v-a09b2520">{{kpi.$orig.label}}</text><view class="{{['kpi-icon-badge','data-v-a09b2520',kpi.$orig.type]}}"><text class="kpi-icon-text data-v-a09b2520">{{kpi.m0}}</text></view></view><view class="kpi-content data-v-a09b2520"><view class="kpi-value-group data-v-a09b2520"><block wx:if="{{kpi.$orig.isMoney}}"><text class="currency data-v-a09b2520">￥</text></block><text class="value data-v-a09b2520">{{kpi.g0}}</text><block wx:if="{{kpi.$orig.isPercent}}"><text class="unit data-v-a09b2520">%</text></block></view><block wx:if="{{kpi.$orig.target}}"><view class="kpi-footer data-v-a09b2520"><view class="target-progress data-v-a09b2520"><view class="progress-bg data-v-a09b2520"><view class="progress-bar data-v-a09b2520" style="{{'width:'+(kpi.g1+'%')+';'+('background-color:'+(kpi.$orig.status==='up'?'#4caf50':'#ff9800')+';')}}"></view></view></view><view class="target-text data-v-a09b2520">{{'目标: '+kpi.$orig.target+''}}<text class="{{['status-arrow','data-v-a09b2520',kpi.$orig.status]}}">{{kpi.$orig.status==='up'?'↑':'↓'}}</text></view></view></block></view></view></block></view></view><block wx:if="{{memberStatistics.totalMembers>0}}"><view class="warpboxss member-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>会员资产全景</view></view><view class="member-grid data-v-a09b2520"><view class="member-stat-card blue-theme data-v-a09b2520"><view class="icon-circle data-v-a09b2520"><u-icon vue-id="469bc196-3" name="account" size="24" color="#409EFF" class="data-v-a09b2520" bind:__l="__l"></u-icon></view><view class="stat-info data-v-a09b2520"><view class="stat-label data-v-a09b2520">总会员数</view><view class="stat-value data-v-a09b2520">{{$root.m1}}</view><view class="stat-sub data-v-a09b2520">{{"本月新增: "+$root.m2}}</view><block wx:if="{{memberStatistics.newMembersLastMonth>0}}"><view class="stat-sub data-v-a09b2520">{{"上月新增: "+$root.m3}}</view></block></view></view><view class="member-stat-card green-theme data-v-a09b2520"><view class="icon-circle data-v-a09b2520"><u-icon vue-id="469bc196-4" name="checkmark-circle" size="24" color="#67C23A" class="data-v-a09b2520" bind:__l="__l"></u-icon></view><view class="stat-info data-v-a09b2520"><view class="stat-label data-v-a09b2520">活跃会员</view><view class="stat-value data-v-a09b2520">{{$root.m4}}</view><view class="stat-sub data-v-a09b2520">{{"活跃(≤3天): "+$root.m5}}</view><view class="stat-sub data-v-a09b2520">{{"常到店(4-59天): "+$root.m6}}</view><view class="stat-sub data-v-a09b2520">{{"60天活跃率: "+memberStatistics.activeRate+"%"}}</view><view class="stat-sub data-v-a09b2520">{{"30天活跃率: "+memberStatistics.activeRate30+"%"}}</view></view></view><view class="member-stat-card orange-theme data-v-a09b2520"><view class="icon-circle data-v-a09b2520"><u-icon vue-id="469bc196-5" name="wallet" size="24" color="#E6A23C" class="data-v-a09b2520" bind:__l="__l"></u-icon></view><view class="stat-info data-v-a09b2520"><view class="stat-label data-v-a09b2520">剩余权益</view><view class="stat-value mini data-v-a09b2520">{{"￥"+$root.m7}}</view><view class="stat-sub data-v-a09b2520">{{"人均: "+$root.m8+"元"}}</view><block wx:if="{{memberStatistics.topRemainingAmount>0}}"><view class="stat-sub data-v-a09b2520">{{"最高: "+(memberStatistics.topRemainingMemberName||'无')+" ￥"+$root.m9}}</view></block><block wx:if="{{memberStatistics.topBillingAmount>0}}"><view class="stat-sub data-v-a09b2520">{{"本月开单最高: "+(memberStatistics.topBillingMemberName||'无')+" ￥"+$root.m10}}</view></block><block wx:if="{{memberStatistics.topConsumeAmount>0}}"><view class="stat-sub data-v-a09b2520">{{"本月消耗最高: "+(memberStatistics.topConsumeMemberName||'无')+" ￥"+$root.m11}}</view></block></view></view><view class="member-stat-card red-theme data-v-a09b2520"><view class="icon-circle data-v-a09b2520"><u-icon vue-id="469bc196-6" name="info-circle" size="24" color="#F56C6C" class="data-v-a09b2520" bind:__l="__l"></u-icon></view><view class="stat-info data-v-a09b2520"><view class="stat-label data-v-a09b2520">沉睡会员</view><view class="stat-value data-v-a09b2520">{{$root.m12}}</view><view class="stat-sub data-v-a09b2520">{{"60-89天: "+$root.m13}}</view><view class="stat-sub data-v-a09b2520">{{"90-179天: "+$root.m14}}</view><view class="stat-sub data-v-a09b2520">{{"180-359天: "+$root.m15}}</view><view class="stat-sub data-v-a09b2520">{{"360天+: "+$root.m16}}</view></view></view></view></view></block><block wx:if="{{$root.g2>0}}"><view class="warpboxss member-chart-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>会员结构洞察</view></view><view class="member-chart-container data-v-a09b2520"><view class="member-type-chart-wrapper data-v-a09b2520"><canvas class="member-type-chart-canvas data-v-a09b2520" canvas-id="memberTypeChart"></canvas></view><view class="member-type-legend data-v-a09b2520"><block wx:for="{{$root.l1}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="legend-item data-v-a09b2520"><view class="legend-dot data-v-a09b2520" style="{{'background-color:'+(item.m17)+';'}}"></view><text class="legend-name data-v-a09b2520">{{item.$orig.MemberType||'未知'}}</text><text class="legend-value data-v-a09b2520">{{item.m18+"人"}}</text></view></block></view></view></view></block><block wx:if="{{memberStatistics.beautyMembers>0||memberStatistics.medicalMembers>0||memberStatistics.techMembers>0}}"><view class="warpboxss member-category-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>会员价值分层</view></view><view class="member-category-container data-v-a09b2520"><view class="member-category-chart-wrapper data-v-a09b2520"><canvas class="member-category-chart-canvas data-v-a09b2520" canvas-id="memberCategoryChart"></canvas></view><view class="member-category-legend data-v-a09b2520"><view class="legend-item data-v-a09b2520"><view class="legend-color data-v-a09b2520" style="background:#409EFF;"></view><view class="legend-text data-v-a09b2520"><view class="legend-name data-v-a09b2520">生美会员</view><view class="legend-value data-v-a09b2520">{{$root.m19+"人"}}</view></view></view><view class="legend-item data-v-a09b2520"><view class="legend-color data-v-a09b2520" style="background:#F56C6C;"></view><view class="legend-text data-v-a09b2520"><view class="legend-name data-v-a09b2520">医美会员</view><view class="legend-value data-v-a09b2520">{{$root.m20+"人"}}</view></view></view><view class="legend-item data-v-a09b2520"><view class="legend-color data-v-a09b2520" style="background:#67C23A;"></view><view class="legend-text data-v-a09b2520"><view class="legend-name data-v-a09b2520">科技部会员</view><view class="legend-value data-v-a09b2520">{{$root.m21+"人"}}</view></view></view></view></view></view></block><block wx:if="{{$root.g3>0}}"><view class="warpboxss trend-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>经营效能趋势</view><view class="trend-controls data-v-a09b2520"><view class="pill-switch data-v-a09b2520"><view data-event-opts="{{[['tap',[['switchTrendType',['month']]]]]}}" class="{{['pill-item','data-v-a09b2520',trendType==='month'?'active':'']}}" bindtap="__e">月</view><view data-event-opts="{{[['tap',[['switchTrendType',['day']]]]]}}" class="{{['pill-item','data-v-a09b2520',trendType==='day'?'active':'']}}" bindtap="__e">日</view><view data-event-opts="{{[['tap',[['switchTrendType',['week']]]]]}}" class="{{['pill-item','data-v-a09b2520',trendType==='week'?'active':'']}}" bindtap="__e">周</view></view></view></view><view class="chart-wrapper data-v-a09b2520"><canvas class="trend-chart-canvas data-v-a09b2520" style="{{'width:'+(chartWidth+'px')+';'+('height:'+(chartHeight+'px')+';')}}" canvas-id="trendChart"></canvas></view><view class="trend-legend-modern data-v-a09b2520"><view class="legend-item data-v-a09b2520"><view class="dot revenue data-v-a09b2520"></view><text class="data-v-a09b2520">营收(成交额)</text></view><view class="legend-item data-v-a09b2520"><view class="dot consume data-v-a09b2520"></view><text class="data-v-a09b2520">消耗(服务产出)</text></view></view></view></block><block wx:if="{{$root.g4>0}}"><view class="warpboxss ranking-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>门店卓越榜</view></view><view class="rank-list-modern data-v-a09b2520"><block wx:for="{{$root.l2}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view data-event-opts="{{[['tap',[['e0',['$event']]]]]}}" data-event-params="{{({item:item.$orig})}}" class="rank-item data-v-a09b2520" bindtap="__e"><view class="{{['rank-idx','data-v-a09b2520',index<3?'top-3':'']}}"><block wx:if="{{index===0}}"><image class="medal-icon data-v-a09b2520" src="/static/rank/no1.png"></image></block><block wx:else><block wx:if="{{index===1}}"><image class="medal-icon data-v-a09b2520" src="/static/rank/no2.png"></image></block><block wx:else><block wx:if="{{index===2}}"><image class="medal-icon data-v-a09b2520" src="/static/rank/no3.png"></image></block><block wx:else><text class="data-v-a09b2520">{{index+1}}</text></block></block></block></view><view class="rank-info data-v-a09b2520"><view class="info-main data-v-a09b2520"><text class="name data-v-a09b2520">{{item.$orig.StoreName||'未知门店'}}</text><text class="value data-v-a09b2520">{{"￥"+item.m22}}</text></view><view class="progress-bg data-v-a09b2520"><view class="progress-bar data-v-a09b2520" style="{{'width:'+(item.$orig.TotalPerformance/(storeRanking[0].TotalPerformance||1)*100+'%')+';'}}"></view></view></view></view></block></view></view></block><block wx:if="{{$root.g5>0}}"><view class="warpboxss coach-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>核心员效贡献矩阵</view><view class="type-tags data-v-a09b2520"><view data-event-opts="{{[['tap',[['switchCoachRankType',['billing']]]]]}}" class="{{['tag-item','data-v-a09b2520',coachRankType==='billing'?'active':'']}}" bindtap="__e">开单</view><view data-event-opts="{{[['tap',[['switchCoachRankType',['consume']]]]]}}" class="{{['tag-item','data-v-a09b2520',coachRankType==='consume'?'active':'']}}" bindtap="__e">消耗</view><view data-event-opts="{{[['tap',[['switchCoachRankType',['refund']]]]]}}" class="{{['tag-item','data-v-a09b2520',coachRankType==='refund'?'active':'']}}" bindtap="__e">退卡</view></view></view><view class="rank-list-modern data-v-a09b2520"><block wx:for="{{$root.l3}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="rank-item data-v-a09b2520"><view class="{{['rank-idx','data-v-a09b2520',index<3?'top-3':'']}}"><text class="data-v-a09b2520">{{index+1}}</text></view><view class="rank-avatar data-v-a09b2520"><text class="data-v-a09b2520">{{item.$orig.HealthCoachName?item.g6:'无'}}</text></view><view class="rank-info data-v-a09b2520"><view class="info-main data-v-a09b2520"><text class="name data-v-a09b2520">{{item.$orig.HealthCoachName||'未知'}}</text><text class="value data-v-a09b2520">{{"￥"+item.m23}}</text></view><view class="progress-bg data-v-a09b2520"><view class="progress-bar green data-v-a09b2520" style="{{'width:'+(item.$orig.Percent+'%')+';'}}"></view></view></view></view></block></view></view></block><block wx:if="{{$root.g7>0}}"><view class="warpboxss gold-triangle-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>协同作战榜</view></view><view class="rank-list-modern data-v-a09b2520"><block wx:for="{{$root.l4}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="rank-item data-v-a09b2520"><view class="{{['rank-idx','data-v-a09b2520',index<3?'top-3':'']}}"><text class="data-v-a09b2520">{{index+1}}</text></view><view class="rank-info data-v-a09b2520"><view class="info-main data-v-a09b2520"><text class="name data-v-a09b2520">{{item.$orig.GoldTriangleName||'未知'}}</text><text class="value data-v-a09b2520">{{"￥"+item.m24}}</text></view><view class="progress-bg data-v-a09b2520"><view class="progress-bar orange data-v-a09b2520" style="{{'width:'+(item.$orig.TotalPerformance/(goldTriangleRankingTop10[0].TotalPerformance||1)*100+'%')+';'}}"></view></view></view></view></block></view></view></block><block wx:if="{{$root.g8>0}}"><view class="warpboxss visit-frequency-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>客户活跃度分析</view></view><view class="chart-wrapper data-v-a09b2520"><canvas class="visit-frequency-chart-canvas data-v-a09b2520" style="{{'width:'+(chartWidth+'px')+';'+('height:'+(chartHeight+'px')+';')}}" canvas-id="visitFrequencyChart"></canvas></view></view></block><block wx:if="{{$root.g9>0}}"><view class="warpboxss item-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>热门服务品项</view></view><view class="item-grid data-v-a09b2520"><block wx:for="{{$root.l5}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="item-card data-v-a09b2520"><view class="{{['item-rank-badge','data-v-a09b2520','rank-'+(index+1)]}}">{{index+1}}</view><view class="item-name data-v-a09b2520">{{item.$orig.ItemName||'未知品项'}}</view><view class="item-val data-v-a09b2520">{{"￥"+item.m25}}</view><view class="item-process data-v-a09b2520"><view class="bar data-v-a09b2520" style="{{'width:'+(item.$orig.Percent+'%')+';'}}"></view></view></view></block></view></view></block><block wx:if="{{$root.g10>0}}"><view class="warpboxss item-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>热销产品品项</view></view><view class="item-grid data-v-a09b2520"><block wx:for="{{$root.l6}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="item-card data-v-a09b2520"><view class="{{['item-rank-badge','data-v-a09b2520','rank-'+(index+1)]}}">{{index+1}}</view><view class="item-name data-v-a09b2520">{{item.$orig.ItemName||'未知品项'}}</view><view class="item-val data-v-a09b2520">{{"￥"+item.m26}}</view><view class="item-process data-v-a09b2520"><view class="bar blue data-v-a09b2520" style="{{'width:'+(item.$orig.Percent+'%')+';'}}"></view></view></view></block></view></view></block><block wx:if="{{tkStatisticsData}}"><view class="warpboxss funnel-section data-v-a09b2520"><view class="warpboxs-small-title data-v-a09b2520"><view class="data-v-a09b2520"><text class="warpboxs-small-title-line data-v-a09b2520"></text>客户获取转化链</view></view><view class="chart-wrapper data-v-a09b2520"><canvas class="funnel-chart-canvas data-v-a09b2520" style="{{'width:'+(chartWidth+'px')+';'+('height:'+(chartHeight+'px')+';')}}" canvas-id="funnelChart"></canvas></view><view class="funnel-stats data-v-a09b2520"><view class="stat-mini data-v-a09b2520">邀约率: <text class="stat-value data-v-a09b2520">{{$root.m27+"%"}}</text></view><view class="stat-mini data-v-a09b2520">到店率: <text class="stat-value data-v-a09b2520">{{$root.m28+"%"}}</text></view></view></view></block><view style="height:40rpx;" class="data-v-a09b2520"></view></view></view>
3 3 \ No newline at end of file
... ...
绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.wxss
  View file @62f1d69
... ... @@ -471,51 +471,29 @@
471 471 border-radius: 2rpx;
472 472 }
473 473 /* 转化漏斗 */
474   -.funnel-box.data-v-a09b2520 {
475   - padding: 20rpx 0;
476   -}
477   -.funnel-step.data-v-a09b2520 {
478   - display: flex;
479   - flex-direction: column;
480   - align-items: center;
481   - margin-bottom: 10rpx;
482   -}
483   -.funnel-step .step-shape.data-v-a09b2520 {
484   - background: linear-gradient(90deg, #66bb6a 0%, #43a047 100%);
485   - border-radius: 8rpx;
486   - padding: 16rpx;
487   - box-shadow: 0 4rpx 12rpx rgba(67, 160, 71, 0.2);
488   - display: flex;
489   - justify-content: center;
490   -}
491   -.funnel-step .step-shape .step-content.data-v-a09b2520 {
492   - display: flex;
493   - align-items: center;
494   - justify-content: space-between;
  474 +.funnel-section .chart-wrapper.data-v-a09b2520 {
495 475 width: 100%;
496   - padding: 0 20rpx;
497   -}
498   -.funnel-step .step-shape .step-content .step-label.data-v-a09b2520 {
499   - color: #fff;
500   - font-size: 26rpx;
501   - font-weight: 500;
  476 + height: 280px;
  477 + margin-bottom: 20rpx;
502 478 }
503   -.funnel-step .step-shape .step-content .step-value.data-v-a09b2520 {
504   - color: #fff;
505   - font-size: 32rpx;
506   - font-weight: bold;
  479 +.funnel-section .funnel-chart-canvas.data-v-a09b2520 {
  480 + width: 100%;
  481 + height: 100%;
507 482 }
508   -.funnel-step .step-arrow.data-v-a09b2520 {
  483 +.funnel-section .funnel-stats.data-v-a09b2520 {
509 484 display: flex;
510   - flex-direction: column;
511   - align-items: center;
512   - padding: 8rpx 0;
513   - height: 60rpx;
  485 + justify-content: space-around;
  486 + padding: 20rpx 0;
  487 + border-top: 1px solid rgba(0, 0, 0, 0.05);
514 488 }
515   -.funnel-step .step-arrow .rate-text.data-v-a09b2520 {
516   - font-size: 20rpx;
  489 +.funnel-section .funnel-stats .stat-mini.data-v-a09b2520 {
  490 + font-size: 24rpx;
517 491 color: #666;
518   - margin-top: 4rpx;
  492 +}
  493 +.funnel-section .funnel-stats .stat-mini .stat-value.data-v-a09b2520 {
  494 + color: #43a047;
  495 + font-weight: 600;
  496 + margin-left: 8rpx;
519 497 }
520 498 @-webkit-keyframes rotate-data-v-a09b2520 {
521 499 from {
... ...
绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/home/home.wxss
  View file @62f1d69
... ... @@ -199,75 +199,75 @@
199 199 filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
200 200 }
201 201 .warpboxss .common-func-icon.icon-circle-bg-1.data-v-92bb8f34 {
202   - background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%);
  202 + background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%);
203 203 box-shadow: 0 6rpx 20rpx rgba(30, 136, 229, 0.35), 0 2rpx 8rpx rgba(30, 136, 229, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
204 204 }
205 205 .warpboxss .common-func-icon.icon-circle-bg-2.data-v-92bb8f34 {
206   - background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%);
  206 + background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%);
207 207 box-shadow: 0 6rpx 20rpx rgba(67, 160, 71, 0.35), 0 2rpx 8rpx rgba(67, 160, 71, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
208 208 }
209 209 .warpboxss .common-func-icon.icon-circle-bg-3.data-v-92bb8f34 {
210   - background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%);
  210 + background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%);
211 211 box-shadow: 0 6rpx 20rpx rgba(211, 47, 47, 0.35), 0 2rpx 8rpx rgba(211, 47, 47, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
212 212 }
213 213 .warpboxss .common-func-icon.icon-circle-bg-4.data-v-92bb8f34 {
214   - background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%);
  214 + background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%);
215 215 box-shadow: 0 6rpx 20rpx rgba(0, 131, 143, 0.35), 0 2rpx 8rpx rgba(0, 131, 143, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
216 216 }
217 217 .warpboxss .common-func-icon.icon-circle-bg-5.data-v-92bb8f34 {
218   - background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%);
  218 + background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%);
219 219 box-shadow: 0 6rpx 20rpx rgba(245, 124, 0, 0.35), 0 2rpx 8rpx rgba(245, 124, 0, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
220 220 }
221 221 .warpboxss .common-func-icon.icon-circle-bg-6.data-v-92bb8f34 {
222   - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%);
  222 + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
223 223 box-shadow: 0 6rpx 20rpx rgba(123, 31, 162, 0.35), 0 2rpx 8rpx rgba(123, 31, 162, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
224 224 }
225 225 .warpboxss .common-func-icon.icon-circle-bg-7.data-v-92bb8f34 {
226   - background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%);
  226 + background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
227 227 box-shadow: 0 6rpx 20rpx rgba(194, 24, 91, 0.35), 0 2rpx 8rpx rgba(194, 24, 91, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
228 228 }
229 229 .warpboxss .common-func-icon.icon-circle-bg-8.data-v-92bb8f34 {
230   - background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%);
  230 + background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%);
231 231 box-shadow: 0 6rpx 20rpx rgba(249, 168, 37, 0.35), 0 2rpx 8rpx rgba(249, 168, 37, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
232 232 }
233 233 .warpboxss .common-func-icon.icon-circle-bg-9.data-v-92bb8f34 {
234   - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%);
  234 + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
235 235 box-shadow: 0 6rpx 20rpx rgba(25, 118, 210, 0.35), 0 2rpx 8rpx rgba(25, 118, 210, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
236 236 }
237 237 .warpboxss .common-func-icon.icon-circle-bg-10.data-v-92bb8f34 {
238   - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%);
  238 + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
239 239 box-shadow: 0 6rpx 20rpx rgba(56, 142, 60, 0.35), 0 2rpx 8rpx rgba(56, 142, 60, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
240 240 }
241 241 .warpboxss .common-func-icon.icon-circle-bg-11.data-v-92bb8f34 {
242   - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%);
  242 + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
243 243 box-shadow: 0 6rpx 20rpx rgba(183, 28, 28, 0.35), 0 2rpx 8rpx rgba(183, 28, 28, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
244 244 }
245 245 .warpboxss .common-func-icon.icon-circle-bg-12.data-v-92bb8f34 {
246   - background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%);
  246 + background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%);
247 247 box-shadow: 0 6rpx 20rpx rgba(0, 151, 167, 0.35), 0 2rpx 8rpx rgba(0, 151, 167, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
248 248 }
249 249 .warpboxss .common-func-icon.icon-circle-bg-13.data-v-92bb8f34 {
250   - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%);
  250 + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
251 251 box-shadow: 0 6rpx 20rpx rgba(230, 81, 0, 0.35), 0 2rpx 8rpx rgba(230, 81, 0, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
252 252 }
253 253 .warpboxss .common-func-icon.icon-circle-bg-14.data-v-92bb8f34 {
254   - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%);
  254 + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
255 255 box-shadow: 0 6rpx 20rpx rgba(106, 27, 154, 0.35), 0 2rpx 8rpx rgba(106, 27, 154, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
256 256 }
257 257 .warpboxss .common-func-icon.icon-circle-bg-15.data-v-92bb8f34 {
258   - background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%);
  258 + background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%);
259 259 box-shadow: 0 6rpx 20rpx rgba(173, 20, 87, 0.35), 0 2rpx 8rpx rgba(173, 20, 87, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
260 260 }
261 261 .warpboxss .common-func-icon.icon-circle-bg-16.data-v-92bb8f34 {
262   - background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%);
  262 + background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%);
263 263 box-shadow: 0 6rpx 20rpx rgba(251, 192, 45, 0.35), 0 2rpx 8rpx rgba(251, 192, 45, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
264 264 }
265 265 .warpboxss .common-func-icon.icon-circle-bg-17.data-v-92bb8f34 {
266   - background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%);
  266 + background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%);
267 267 box-shadow: 0 6rpx 20rpx rgba(93, 64, 55, 0.35), 0 2rpx 8rpx rgba(93, 64, 55, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
268 268 }
269 269 .warpboxss .common-func-icon.icon-circle-bg-18.data-v-92bb8f34 {
270   - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%);
  270 + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #5a67d8 100%);
271 271 box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.35), 0 2rpx 8rpx rgba(102, 126, 234, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
272 272 }
273 273 .warpboxss .common-func-text.data-v-92bb8f34 {
... ... @@ -437,71 +437,71 @@
437 437 transition: transform 300ms ease, opacity 300ms ease, -webkit-transform 300ms ease;
438 438 }
439 439 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-1.data-v-92bb8f34 {
440   - background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%);
  440 + background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%);
441 441 box-shadow: 0 6rpx 20rpx rgba(30, 136, 229, 0.35), 0 2rpx 8rpx rgba(30, 136, 229, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
442 442 }
443 443 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-2.data-v-92bb8f34 {
444   - background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%);
  444 + background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%);
445 445 box-shadow: 0 6rpx 20rpx rgba(67, 160, 71, 0.35), 0 2rpx 8rpx rgba(67, 160, 71, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
446 446 }
447 447 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-3.data-v-92bb8f34 {
448   - background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%);
  448 + background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%);
449 449 box-shadow: 0 6rpx 20rpx rgba(211, 47, 47, 0.35), 0 2rpx 8rpx rgba(211, 47, 47, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
450 450 }
451 451 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-4.data-v-92bb8f34 {
452   - background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%);
  452 + background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%);
453 453 box-shadow: 0 6rpx 20rpx rgba(0, 131, 143, 0.35), 0 2rpx 8rpx rgba(0, 131, 143, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
454 454 }
455 455 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-5.data-v-92bb8f34 {
456   - background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%);
  456 + background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%);
457 457 box-shadow: 0 6rpx 20rpx rgba(245, 124, 0, 0.35), 0 2rpx 8rpx rgba(245, 124, 0, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
458 458 }
459 459 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-6.data-v-92bb8f34 {
460   - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%);
  460 + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
461 461 box-shadow: 0 6rpx 20rpx rgba(123, 31, 162, 0.35), 0 2rpx 8rpx rgba(123, 31, 162, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
462 462 }
463 463 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-7.data-v-92bb8f34 {
464   - background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%);
  464 + background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%);
465 465 box-shadow: 0 6rpx 20rpx rgba(194, 24, 91, 0.35), 0 2rpx 8rpx rgba(194, 24, 91, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
466 466 }
467 467 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-8.data-v-92bb8f34 {
468   - background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%);
  468 + background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%);
469 469 box-shadow: 0 6rpx 20rpx rgba(249, 168, 37, 0.35), 0 2rpx 8rpx rgba(249, 168, 37, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
470 470 }
471 471 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-9.data-v-92bb8f34 {
472   - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%);
  472 + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
473 473 box-shadow: 0 6rpx 20rpx rgba(25, 118, 210, 0.35), 0 2rpx 8rpx rgba(25, 118, 210, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
474 474 }
475 475 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-10.data-v-92bb8f34 {
476   - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%);
  476 + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
477 477 box-shadow: 0 6rpx 20rpx rgba(56, 142, 60, 0.35), 0 2rpx 8rpx rgba(56, 142, 60, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
478 478 }
479 479 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-11.data-v-92bb8f34 {
480   - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%);
  480 + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
481 481 box-shadow: 0 6rpx 20rpx rgba(183, 28, 28, 0.35), 0 2rpx 8rpx rgba(183, 28, 28, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
482 482 }
483 483 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-12.data-v-92bb8f34 {
484   - background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%);
  484 + background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%);
485 485 box-shadow: 0 6rpx 20rpx rgba(0, 151, 167, 0.35), 0 2rpx 8rpx rgba(0, 151, 167, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
486 486 }
487 487 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-13.data-v-92bb8f34 {
488   - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%);
  488 + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
489 489 box-shadow: 0 6rpx 20rpx rgba(230, 81, 0, 0.35), 0 2rpx 8rpx rgba(230, 81, 0, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
490 490 }
491 491 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-14.data-v-92bb8f34 {
492   - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%);
  492 + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
493 493 box-shadow: 0 6rpx 20rpx rgba(106, 27, 154, 0.35), 0 2rpx 8rpx rgba(106, 27, 154, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
494 494 }
495 495 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-15.data-v-92bb8f34 {
496   - background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%);
  496 + background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%);
497 497 box-shadow: 0 6rpx 20rpx rgba(173, 20, 87, 0.35), 0 2rpx 8rpx rgba(173, 20, 87, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
498 498 }
499 499 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-16.data-v-92bb8f34 {
500   - background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%);
  500 + background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%);
501 501 box-shadow: 0 6rpx 20rpx rgba(251, 192, 45, 0.35), 0 2rpx 8rpx rgba(251, 192, 45, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
502 502 }
503 503 .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-17.data-v-92bb8f34 {
504   - background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%);
  504 + background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%);
505 505 box-shadow: 0 6rpx 20rpx rgba(93, 64, 55, 0.35), 0 2rpx 8rpx rgba(93, 64, 55, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
506 506 }
507 507 .fun_box_fir .fun_fir_border.data-v-92bb8f34 {
... ... @@ -582,15 +582,15 @@
582 582 filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
583 583 }
584 584 .mgmt-icon.icon-circle-bg-6.data-v-92bb8f34 {
585   - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%);
  585 + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%);
586 586 box-shadow: 0 6rpx 20rpx rgba(123, 31, 162, 0.35), 0 2rpx 8rpx rgba(123, 31, 162, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
587 587 }
588 588 .mgmt-icon.icon-circle-bg-9.data-v-92bb8f34 {
589   - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%);
  589 + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%);
590 590 box-shadow: 0 6rpx 20rpx rgba(25, 118, 210, 0.35), 0 2rpx 8rpx rgba(25, 118, 210, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
591 591 }
592 592 .mgmt-icon.icon-circle-bg-10.data-v-92bb8f34 {
593   - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%);
  593 + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%);
594 594 box-shadow: 0 6rpx 20rpx rgba(56, 142, 60, 0.35), 0 2rpx 8rpx rgba(56, 142, 60, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
595 595 }
596 596 .mgmt-text.data-v-92bb8f34 {
... ... @@ -673,15 +673,15 @@
673 673 filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
674 674 }
675 675 .bottom-icon.icon-circle-bg-11.data-v-92bb8f34 {
676   - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%);
  676 + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%);
677 677 box-shadow: 0 6rpx 20rpx rgba(183, 28, 28, 0.35), 0 2rpx 8rpx rgba(183, 28, 28, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
678 678 }
679 679 .bottom-icon.icon-circle-bg-13.data-v-92bb8f34 {
680   - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%);
  680 + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%);
681 681 box-shadow: 0 6rpx 20rpx rgba(230, 81, 0, 0.35), 0 2rpx 8rpx rgba(230, 81, 0, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
682 682 }
683 683 .bottom-icon.icon-circle-bg-14.data-v-92bb8f34 {
684   - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%);
  684 + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%);
685 685 box-shadow: 0 6rpx 20rpx rgba(106, 27, 154, 0.35), 0 2rpx 8rpx rgba(106, 27, 154, 0.25), inset 0 2rpx 4rpx rgba(255, 255, 255, 0.3), inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.1);
686 686 }
687 687 .bottom-text.data-v-92bb8f34 {
... ...