diff --git a/绿纤uni-app/pages/dashboard/dashboard.vue b/绿纤uni-app/pages/dashboard/dashboard.vue index e4d020f..e5ee2ea 100644 --- a/绿纤uni-app/pages/dashboard/dashboard.vue +++ b/绿纤uni-app/pages/dashboard/dashboard.vue @@ -321,19 +321,12 @@ 客户获取转化链 - - - - - {{ item.label }} - {{ formatNumber(item.value) }} - - - - - 转化率 {{ item.rate }}% - - + + + + + 邀约率: {{ formatPercent(getTkInviteRate()) }}% + 到店率: {{ formatPercent(getInviteStoreRate()) }}% @@ -504,33 +497,6 @@ export default { GoldTriangleName: item.F_GoldTriangleName || item.GoldTriangleName || '未知', TotalPerformance: item.F_TotalPerformance || item.TotalPerformance || 0 })) - }, - // 转化漏斗数据 - funnelData() { - if (!this.tkStatisticsData) return [] - const tk = this.tkStatisticsData - return [ - { - label: '拓客人数', - value: tk.TkCount || 0, - rate: null - }, - { - label: '邀约人数', - value: tk.InviteCount || 0, - rate: tk.TkCount > 0 ? this.formatPercent((tk.InviteCount || 0) / tk.TkCount * 100) : 0 - }, - { - label: '到店人数', - value: tk.StoreCount || 0, - rate: tk.InviteCount > 0 ? this.formatPercent((tk.StoreCount || 0) / tk.InviteCount * 100) : 0 - }, - { - label: '成交人数', - value: tk.DealCount || 0, - rate: tk.StoreCount > 0 ? this.formatPercent((tk.DealCount || 0) / tk.StoreCount * 100) : 0 - } - ] } }, onLoad() { @@ -713,6 +679,10 @@ export default { if (res.code === 200 && res.data) { this.tkStatisticsData = res.data + // 绘制漏斗图 + this.$nextTick(() => { + this.drawFunnelChart() + }) } } catch (error) { console.error('加载拓客漏斗数据失败:', error) @@ -1003,6 +973,16 @@ export default { formatPercent(percent) { return Math.round(percent * 100) / 100 }, + // 获取邀约率 + getTkInviteRate() { + if (!this.tkStatisticsData || !this.tkStatisticsData.TkCount) return 0 + return (this.tkStatisticsData.YaoyCount || 0) / this.tkStatisticsData.TkCount * 100 + }, + // 获取到店率 + getInviteStoreRate() { + if (!this.tkStatisticsData || !this.tkStatisticsData.YaoyCount) return 0 + return (this.tkStatisticsData.DdCount || 0) / this.tkStatisticsData.YaoyCount * 100 + }, // 格式化日期时间 formatDateTime(date) { const year = date.getFullYear() @@ -1434,6 +1414,82 @@ export default { getMemberTypeColor(index) { const colors = ['#F56C6C', '#67C23A', '#409EFF', '#E6A23C'] return colors[index % colors.length] + }, + // 绘制漏斗图 + drawFunnelChart() { + if (!this.tkStatisticsData) return + + const ctx = uni.createCanvasContext('funnelChart', this) + const systemInfo = uni.getSystemInfoSync() + const width = systemInfo.windowWidth - 60 + const height = this.chartHeight + + // 清空画布 + ctx.clearRect(0, 0, width, height) + + const d = this.tkStatisticsData + const funnelData = [ + { value: d.TkCount || 0, name: '获客', color: '#409EFF' }, + { value: d.YaoyCount || 0, name: '邀约', color: '#67C23A' }, + { value: d.DdCount || 0, name: '到店', color: '#E6A23C' }, + { value: d.XfCount || 0, name: '成交', color: '#F56C6C' } + ] + + // 计算最大值（用于归一化） + const maxValue = Math.max(...funnelData.map(item => item.value), 1) + + // 漏斗图参数 + const topWidth = width * 0.8 // 顶部宽度 + const bottomWidth = width * 0.2 // 底部宽度 + const stepHeight = (height - 40) / funnelData.length // 每层高度（留出上下边距） + const padding = { top: 20, bottom: 20, left: width * 0.1, right: width * 0.1 } + + // 绘制每一层 + funnelData.forEach((item, index) => { + // 计算当前层的宽度（从上到下逐渐变窄） + const currentTopWidth = topWidth - (topWidth - bottomWidth) * (index / (funnelData.length - 1)) + const currentBottomWidth = topWidth - (topWidth - bottomWidth) * ((index + 1) / (funnelData.length - 1)) + + // 计算当前层的Y位置 + const y = padding.top + index * stepHeight + const nextY = padding.top + (index + 1) * stepHeight + + // 计算中心X位置 + const centerX = width / 2 + const topLeftX = centerX - currentTopWidth / 2 + const topRightX = centerX + currentTopWidth / 2 + const bottomLeftX = centerX - currentBottomWidth / 2 + const bottomRightX = centerX + currentBottomWidth / 2 + + // 绘制梯形（漏斗的一层） + ctx.beginPath() + ctx.moveTo(topLeftX, y) + ctx.lineTo(topRightX, y) + ctx.lineTo(bottomRightX, nextY) + ctx.lineTo(bottomLeftX, nextY) + ctx.closePath() + + // 填充颜色 + ctx.setFillStyle(item.color) + ctx.fill() + + // 绘制边框 + ctx.setStrokeStyle('rgba(255, 255, 255, 0.3)') + ctx.setLineWidth(2) + ctx.stroke() + + // 绘制文字标签 + ctx.setFillStyle('#fff') + ctx.setFontSize(24) + ctx.setTextAlign('center') + const labelY = y + stepHeight / 2 + 8 + ctx.fillText(item.name, centerX, labelY - 8) + ctx.setFontSize(28) + ctx.setFillStyle('#fff') + ctx.fillText((item.value || 0) + '人', centerX, labelY + 16) + }) + + ctx.draw() } } } @@ -1834,44 +1890,34 @@ export default { } /* 转化漏斗 */ -.funnel-box { - padding: 20rpx 0; -} - -.funnel-step { - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 10rpx; +.funnel-section { + .chart-wrapper { + width: 100%; + height: 280px; + margin-bottom: 20rpx; + } - .step-shape { - background: linear-gradient(90deg, #66bb6a 0%, #43a047 100%); - border-radius: 8rpx; - padding: 16rpx; - box-shadow: 0 4rpx 12rpx rgba(67, 160, 71, 0.2); - display: flex; - justify-content: center; - - .step-content { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 0 20rpx; - - .step-label { color: #fff; font-size: 26rpx; font-weight: 500; } - .step-value { color: #fff; font-size: 32rpx; font-weight: bold; } - } + .funnel-chart-canvas { + width: 100%; + height: 100%; } - .step-arrow { + .funnel-stats { display: flex; - flex-direction: column; - align-items: center; - padding: 8rpx 0; - height: 60rpx; + justify-content: space-around; + padding: 20rpx 0; + border-top: 1px solid rgba(0, 0, 0, 0.05); - .rate-text { font-size: 20rpx; color: #666; margin-top: 4rpx; } + .stat-mini { + font-size: 24rpx; + color: #666; + + .stat-value { + color: #43a047; + font-weight: 600; + margin-left: 8rpx; + } + } } } diff --git a/绿纤uni-app/pages/home/home.vue b/绿纤uni-app/pages/home/home.vue index 76a63e7..0fdbc3c 100644 --- a/绿纤uni-app/pages/home/home.vue +++ b/绿纤uni-app/pages/home/home.vue @@ -913,7 +913,7 @@ export default { /* 主题色背景 - 渐变立体效果 */ &.icon-circle-bg-1 { - background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%); + background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%); box-shadow: 0 6rpx 20rpx rgba(30, 136, 229, 0.35), 0 2rpx 8rpx rgba(30, 136, 229, 0.25), @@ -922,7 +922,7 @@ export default { } &.icon-circle-bg-2 { - background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%); + background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%); box-shadow: 0 6rpx 20rpx rgba(67, 160, 71, 0.35), 0 2rpx 8rpx rgba(67, 160, 71, 0.25), @@ -931,7 +931,7 @@ export default { } &.icon-circle-bg-3 { - background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%); + background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%); box-shadow: 0 6rpx 20rpx rgba(211, 47, 47, 0.35), 0 2rpx 8rpx rgba(211, 47, 47, 0.25), @@ -940,7 +940,7 @@ export default { } &.icon-circle-bg-4 { - background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%); + background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%); box-shadow: 0 6rpx 20rpx rgba(0, 131, 143, 0.35), 0 2rpx 8rpx rgba(0, 131, 143, 0.25), @@ -949,7 +949,7 @@ export default { } &.icon-circle-bg-5 { - background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%); + background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%); box-shadow: 0 6rpx 20rpx rgba(245, 124, 0, 0.35), 0 2rpx 8rpx rgba(245, 124, 0, 0.25), @@ -958,7 +958,7 @@ export default { } &.icon-circle-bg-6 { - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%); + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%); box-shadow: 0 6rpx 20rpx rgba(123, 31, 162, 0.35), 0 2rpx 8rpx rgba(123, 31, 162, 0.25), @@ -967,7 +967,7 @@ export default { } &.icon-circle-bg-7 { - background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%); + background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%); box-shadow: 0 6rpx 20rpx rgba(194, 24, 91, 0.35), 0 2rpx 8rpx rgba(194, 24, 91, 0.25), @@ -976,7 +976,7 @@ export default { } &.icon-circle-bg-8 { - background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%); + background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%); box-shadow: 0 6rpx 20rpx rgba(249, 168, 37, 0.35), 0 2rpx 8rpx rgba(249, 168, 37, 0.25), @@ -985,7 +985,7 @@ export default { } &.icon-circle-bg-9 { - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%); + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%); box-shadow: 0 6rpx 20rpx rgba(25, 118, 210, 0.35), 0 2rpx 8rpx rgba(25, 118, 210, 0.25), @@ -994,7 +994,7 @@ export default { } &.icon-circle-bg-10 { - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%); + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%); box-shadow: 0 6rpx 20rpx rgba(56, 142, 60, 0.35), 0 2rpx 8rpx rgba(56, 142, 60, 0.25), @@ -1003,7 +1003,7 @@ export default { } &.icon-circle-bg-11 { - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%); + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%); box-shadow: 0 6rpx 20rpx rgba(183, 28, 28, 0.35), 0 2rpx 8rpx rgba(183, 28, 28, 0.25), @@ -1012,7 +1012,7 @@ export default { } &.icon-circle-bg-12 { - background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%); + background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%); box-shadow: 0 6rpx 20rpx rgba(0, 151, 167, 0.35), 0 2rpx 8rpx rgba(0, 151, 167, 0.25), @@ -1021,7 +1021,7 @@ export default { } &.icon-circle-bg-13 { - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%); + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%); box-shadow: 0 6rpx 20rpx rgba(230, 81, 0, 0.35), 0 2rpx 8rpx rgba(230, 81, 0, 0.25), @@ -1030,7 +1030,7 @@ export default { } &.icon-circle-bg-14 { - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%); box-shadow: 0 6rpx 20rpx rgba(106, 27, 154, 0.35), 0 2rpx 8rpx rgba(106, 27, 154, 0.25), @@ -1039,7 +1039,7 @@ export default { } &.icon-circle-bg-15 { - background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%); + background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%); box-shadow: 0 6rpx 20rpx rgba(173, 20, 87, 0.35), 0 2rpx 8rpx rgba(173, 20, 87, 0.25), @@ -1048,7 +1048,7 @@ export default { } &.icon-circle-bg-16 { - background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%); + background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%); box-shadow: 0 6rpx 20rpx rgba(251, 192, 45, 0.35), 0 2rpx 8rpx rgba(251, 192, 45, 0.25), @@ -1057,7 +1057,7 @@ export default { } &.icon-circle-bg-17 { - background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%); + background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%); box-shadow: 0 6rpx 20rpx rgba(93, 64, 55, 0.35), 0 2rpx 8rpx rgba(93, 64, 55, 0.25), @@ -1066,7 +1066,7 @@ export default { } &.icon-circle-bg-18 { - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #5a67d8 100%); box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.35), 0 2rpx 8rpx rgba(102, 126, 234, 0.25), @@ -1259,7 +1259,7 @@ export default { /* 主题色 - 渐变立体效果 */ &.icon-circle-bg-1 { - background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%); + background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%); box-shadow: 0 6rpx 20rpx rgba(30, 136, 229, 0.35), 0 2rpx 8rpx rgba(30, 136, 229, 0.25), @@ -1268,7 +1268,7 @@ export default { } &.icon-circle-bg-2 { - background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%); + background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%); box-shadow: 0 6rpx 20rpx rgba(67, 160, 71, 0.35), 0 2rpx 8rpx rgba(67, 160, 71, 0.25), @@ -1277,7 +1277,7 @@ export default { } &.icon-circle-bg-3 { - background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%); + background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%); box-shadow: 0 6rpx 20rpx rgba(211, 47, 47, 0.35), 0 2rpx 8rpx rgba(211, 47, 47, 0.25), @@ -1286,7 +1286,7 @@ export default { } &.icon-circle-bg-4 { - background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%); + background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%); box-shadow: 0 6rpx 20rpx rgba(0, 131, 143, 0.35), 0 2rpx 8rpx rgba(0, 131, 143, 0.25), @@ -1295,7 +1295,7 @@ export default { } &.icon-circle-bg-5 { - background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%); + background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%); box-shadow: 0 6rpx 20rpx rgba(245, 124, 0, 0.35), 0 2rpx 8rpx rgba(245, 124, 0, 0.25), @@ -1304,7 +1304,7 @@ export default { } &.icon-circle-bg-6 { - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%); + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%); box-shadow: 0 6rpx 20rpx rgba(123, 31, 162, 0.35), 0 2rpx 8rpx rgba(123, 31, 162, 0.25), @@ -1313,7 +1313,7 @@ export default { } &.icon-circle-bg-7 { - background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%); + background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%); box-shadow: 0 6rpx 20rpx rgba(194, 24, 91, 0.35), 0 2rpx 8rpx rgba(194, 24, 91, 0.25), @@ -1322,7 +1322,7 @@ export default { } &.icon-circle-bg-8 { - background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%); + background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%); box-shadow: 0 6rpx 20rpx rgba(249, 168, 37, 0.35), 0 2rpx 8rpx rgba(249, 168, 37, 0.25), @@ -1331,7 +1331,7 @@ export default { } &.icon-circle-bg-9 { - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%); + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%); box-shadow: 0 6rpx 20rpx rgba(25, 118, 210, 0.35), 0 2rpx 8rpx rgba(25, 118, 210, 0.25), @@ -1340,7 +1340,7 @@ export default { } &.icon-circle-bg-10 { - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%); + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%); box-shadow: 0 6rpx 20rpx rgba(56, 142, 60, 0.35), 0 2rpx 8rpx rgba(56, 142, 60, 0.25), @@ -1349,7 +1349,7 @@ export default { } &.icon-circle-bg-11 { - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%); + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%); box-shadow: 0 6rpx 20rpx rgba(183, 28, 28, 0.35), 0 2rpx 8rpx rgba(183, 28, 28, 0.25), @@ -1358,7 +1358,7 @@ export default { } &.icon-circle-bg-12 { - background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%); + background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%); box-shadow: 0 6rpx 20rpx rgba(0, 151, 167, 0.35), 0 2rpx 8rpx rgba(0, 151, 167, 0.25), @@ -1367,7 +1367,7 @@ export default { } &.icon-circle-bg-13 { - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%); + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%); box-shadow: 0 6rpx 20rpx rgba(230, 81, 0, 0.35), 0 2rpx 8rpx rgba(230, 81, 0, 0.25), @@ -1376,7 +1376,7 @@ export default { } &.icon-circle-bg-14 { - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%); box-shadow: 0 6rpx 20rpx rgba(106, 27, 154, 0.35), 0 2rpx 8rpx rgba(106, 27, 154, 0.25), @@ -1385,7 +1385,7 @@ export default { } &.icon-circle-bg-15 { - background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%); + background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%); box-shadow: 0 6rpx 20rpx rgba(173, 20, 87, 0.35), 0 2rpx 8rpx rgba(173, 20, 87, 0.25), @@ -1394,7 +1394,7 @@ export default { } &.icon-circle-bg-16 { - background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%); + background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%); box-shadow: 0 6rpx 20rpx rgba(251, 192, 45, 0.35), 0 2rpx 8rpx rgba(251, 192, 45, 0.25), @@ -1403,7 +1403,7 @@ export default { } &.icon-circle-bg-17 { - background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%); + background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%); box-shadow: 0 6rpx 20rpx rgba(93, 64, 55, 0.35), 0 2rpx 8rpx rgba(93, 64, 55, 0.25), @@ -1502,7 +1502,7 @@ export default { /* 主题色背景 - 渐变立体效果 */ &.icon-circle-bg-6 { - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%); + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%); box-shadow: 0 6rpx 20rpx rgba(123, 31, 162, 0.35), 0 2rpx 8rpx rgba(123, 31, 162, 0.25), @@ -1511,7 +1511,7 @@ export default { } &.icon-circle-bg-9 { - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%); + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%); box-shadow: 0 6rpx 20rpx rgba(25, 118, 210, 0.35), 0 2rpx 8rpx rgba(25, 118, 210, 0.25), @@ -1520,7 +1520,7 @@ export default { } &.icon-circle-bg-10 { - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%); + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%); box-shadow: 0 6rpx 20rpx rgba(56, 142, 60, 0.35), 0 2rpx 8rpx rgba(56, 142, 60, 0.25), @@ -1618,7 +1618,7 @@ export default { /* 主题色背景 - 渐变立体效果 */ &.icon-circle-bg-11 { - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%); + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%); box-shadow: 0 6rpx 20rpx rgba(183, 28, 28, 0.35), 0 2rpx 8rpx rgba(183, 28, 28, 0.25), @@ -1627,7 +1627,7 @@ export default { } &.icon-circle-bg-13 { - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%); + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%); box-shadow: 0 6rpx 20rpx rgba(230, 81, 0, 0.35), 0 2rpx 8rpx rgba(230, 81, 0, 0.25), @@ -1636,7 +1636,7 @@ export default { } &.icon-circle-bg-14 { - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%); box-shadow: 0 6rpx 20rpx rgba(106, 27, 154, 0.35), 0 2rpx 8rpx rgba(106, 27, 154, 0.25), diff --git a/绿纤uni-app/pages/home/home1.vue b/绿纤uni-app/pages/home/home2.vue index 0fdbc3c..76a63e7 100644 --- a/绿纤uni-app/pages/home/home1.vue +++ b/绿纤uni-app/pages/home/home2.vue @@ -913,7 +913,7 @@ export default { /* 主题色背景 - 渐变立体效果 */ &.icon-circle-bg-1 { - background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%); + background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%); box-shadow: 0 6rpx 20rpx rgba(30, 136, 229, 0.35), 0 2rpx 8rpx rgba(30, 136, 229, 0.25), @@ -922,7 +922,7 @@ export default { } &.icon-circle-bg-2 { - background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%); + background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%); box-shadow: 0 6rpx 20rpx rgba(67, 160, 71, 0.35), 0 2rpx 8rpx rgba(67, 160, 71, 0.25), @@ -931,7 +931,7 @@ export default { } &.icon-circle-bg-3 { - background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%); + background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%); box-shadow: 0 6rpx 20rpx rgba(211, 47, 47, 0.35), 0 2rpx 8rpx rgba(211, 47, 47, 0.25), @@ -940,7 +940,7 @@ export default { } &.icon-circle-bg-4 { - background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%); + background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%); box-shadow: 0 6rpx 20rpx rgba(0, 131, 143, 0.35), 0 2rpx 8rpx rgba(0, 131, 143, 0.25), @@ -949,7 +949,7 @@ export default { } &.icon-circle-bg-5 { - background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%); + background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%); box-shadow: 0 6rpx 20rpx rgba(245, 124, 0, 0.35), 0 2rpx 8rpx rgba(245, 124, 0, 0.25), @@ -958,7 +958,7 @@ export default { } &.icon-circle-bg-6 { - background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%); + background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%); box-shadow: 0 6rpx 20rpx rgba(123, 31, 162, 0.35), 0 2rpx 8rpx rgba(123, 31, 162, 0.25), @@ -967,7 +967,7 @@ export default { } &.icon-circle-bg-7 { - background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%); + background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%); box-shadow: 0 6rpx 20rpx rgba(194, 24, 91, 0.35), 0 2rpx 8rpx rgba(194, 24, 91, 0.25), @@ -976,7 +976,7 @@ export default { } &.icon-circle-bg-8 { - background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%); + background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%); box-shadow: 0 6rpx 20rpx rgba(249, 168, 37, 0.35), 0 2rpx 8rpx rgba(249, 168, 37, 0.25), @@ -985,7 +985,7 @@ export default { } &.icon-circle-bg-9 { - background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%); + background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%); box-shadow: 0 6rpx 20rpx rgba(25, 118, 210, 0.35), 0 2rpx 8rpx rgba(25, 118, 210, 0.25), @@ -994,7 +994,7 @@ export default { } &.icon-circle-bg-10 { - background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%); + background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%); box-shadow: 0 6rpx 20rpx rgba(56, 142, 60, 0.35), 0 2rpx 8rpx rgba(56, 142, 60, 0.25), @@ -1003,7 +1003,7 @@ export default { } &.icon-circle-bg-11 { - background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%); + background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%); box-shadow: 0 6rpx 20rpx rgba(183, 28, 28, 0.35), 0 2rpx 8rpx rgba(183, 28, 28, 0.25), @@ -1012,7 +1012,7 @@ export default { } &.icon-circle-bg-12 { - background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%); + background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%); box-shadow: 0 6rpx 20rpx rgba(0, 151, 167, 0.35), 0 2rpx 8rpx rgba(0, 151, 167, 0.25), @@ -1021,7 +1021,7 @@ export default { } &.icon-circle-bg-13 { - background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%); + background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%); box-shadow: 0 6rpx 20rpx rgba(230, 81, 0, 0.35), 0 2rpx 8rpx rgba(230, 81, 0, 0.25), @@ -1030,7 +1030,7 @@ export default { } &.icon-circle-bg-14 { - background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%); + background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); box-shadow: 0 6rpx 20rpx rgba(106, 27, 154, 0.35), 0 2rpx 8rpx rgba(106, 27, 154, 0.25), @@ -1039,7 +1039,7 @@ export default { } &.icon-circle-bg-15 { - background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%); + background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%); box-shadow: 0 6rpx 20rpx rgba(173, 20, 87, 0.35), 0 2rpx 8rpx rgba(173, 20, 87, 0.25), @@ -1048,7 +1048,7 @@ export default { } &.icon-circle-bg-16 { - background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%); + background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%); box-shadow: 0 6rpx 20rpx rgba(251, 192, 45, 0.35), 0 2rpx 8rpx rgba(251, 192, 45, 0.25), @@ -1057,7 +1057,7 @@ export default { } &.icon-circle-bg-17 { - background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%); + background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%); box-shadow: 0 6rpx 20rpx rgba(93, 64, 55, 0.35), 0 2rpx 8rpx rgba(93, 64, 55, 0.25), @@ -1066,7 +1066,7 @@ export default { } &.icon-circle-bg-18 { - background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #5a67d8 100%); + background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.35), 0 2rpx 8rpx rgba(102, 126, 234, 0.25), @@ -1259,7 +1259,7 @@ export default { /* 主题色 - 渐变立体效果 */ &.icon-circle-bg-1 { - background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%); + background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%); box-shadow: 0 6rpx 20rpx rgba(30, 136, 229, 0.35), 0 2rpx 8rpx rgba(30, 136, 229, 0.25), @@ -1268,7 +1268,7 @@ export default { } &.icon-circle-bg-2 { - background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%); + background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%); box-shadow: 0 6rpx 20rpx rgba(67, 160, 71, 0.35), 0 2rpx 8rpx rgba(67, 160, 71, 0.25), @@ -1277,7 +1277,7 @@ export default { } &.icon-circle-bg-3 { - background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%); + background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%); box-shadow: 0 6rpx 20rpx rgba(211, 47, 47, 0.35), 0 2rpx 8rpx rgba(211, 47, 47, 0.25), @@ -1286,7 +1286,7 @@ export default { } &.icon-circle-bg-4 { - background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%); + background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%); box-shadow: 0 6rpx 20rpx rgba(0, 131, 143, 0.35), 0 2rpx 8rpx rgba(0, 131, 143, 0.25), @@ -1295,7 +1295,7 @@ export default { } &.icon-circle-bg-5 { - background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%); + background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%); box-shadow: 0 6rpx 20rpx rgba(245, 124, 0, 0.35), 0 2rpx 8rpx rgba(245, 124, 0, 0.25), @@ -1304,7 +1304,7 @@ export default { } &.icon-circle-bg-6 { - background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%); + background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%); box-shadow: 0 6rpx 20rpx rgba(123, 31, 162, 0.35), 0 2rpx 8rpx rgba(123, 31, 162, 0.25), @@ -1313,7 +1313,7 @@ export default { } &.icon-circle-bg-7 { - background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%); + background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%); box-shadow: 0 6rpx 20rpx rgba(194, 24, 91, 0.35), 0 2rpx 8rpx rgba(194, 24, 91, 0.25), @@ -1322,7 +1322,7 @@ export default { } &.icon-circle-bg-8 { - background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%); + background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%); box-shadow: 0 6rpx 20rpx rgba(249, 168, 37, 0.35), 0 2rpx 8rpx rgba(249, 168, 37, 0.25), @@ -1331,7 +1331,7 @@ export default { } &.icon-circle-bg-9 { - background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%); + background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%); box-shadow: 0 6rpx 20rpx rgba(25, 118, 210, 0.35), 0 2rpx 8rpx rgba(25, 118, 210, 0.25), @@ -1340,7 +1340,7 @@ export default { } &.icon-circle-bg-10 { - background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%); + background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%); box-shadow: 0 6rpx 20rpx rgba(56, 142, 60, 0.35), 0 2rpx 8rpx rgba(56, 142, 60, 0.25), @@ -1349,7 +1349,7 @@ export default { } &.icon-circle-bg-11 { - background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%); + background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%); box-shadow: 0 6rpx 20rpx rgba(183, 28, 28, 0.35), 0 2rpx 8rpx rgba(183, 28, 28, 0.25), @@ -1358,7 +1358,7 @@ export default { } &.icon-circle-bg-12 { - background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%); + background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%); box-shadow: 0 6rpx 20rpx rgba(0, 151, 167, 0.35), 0 2rpx 8rpx rgba(0, 151, 167, 0.25), @@ -1367,7 +1367,7 @@ export default { } &.icon-circle-bg-13 { - background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%); + background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%); box-shadow: 0 6rpx 20rpx rgba(230, 81, 0, 0.35), 0 2rpx 8rpx rgba(230, 81, 0, 0.25), @@ -1376,7 +1376,7 @@ export default { } &.icon-circle-bg-14 { - background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%); + background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); box-shadow: 0 6rpx 20rpx rgba(106, 27, 154, 0.35), 0 2rpx 8rpx rgba(106, 27, 154, 0.25), @@ -1385,7 +1385,7 @@ export default { } &.icon-circle-bg-15 { - background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%); + background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%); box-shadow: 0 6rpx 20rpx rgba(173, 20, 87, 0.35), 0 2rpx 8rpx rgba(173, 20, 87, 0.25), @@ -1394,7 +1394,7 @@ export default { } &.icon-circle-bg-16 { - background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%); + background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%); box-shadow: 0 6rpx 20rpx rgba(251, 192, 45, 0.35), 0 2rpx 8rpx rgba(251, 192, 45, 0.25), @@ -1403,7 +1403,7 @@ export default { } &.icon-circle-bg-17 { - background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%); + background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%); box-shadow: 0 6rpx 20rpx rgba(93, 64, 55, 0.35), 0 2rpx 8rpx rgba(93, 64, 55, 0.25), @@ -1502,7 +1502,7 @@ export default { /* 主题色背景 - 渐变立体效果 */ &.icon-circle-bg-6 { - background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%); + background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%); box-shadow: 0 6rpx 20rpx rgba(123, 31, 162, 0.35), 0 2rpx 8rpx rgba(123, 31, 162, 0.25), @@ -1511,7 +1511,7 @@ export default { } &.icon-circle-bg-9 { - background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%); + background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%); box-shadow: 0 6rpx 20rpx rgba(25, 118, 210, 0.35), 0 2rpx 8rpx rgba(25, 118, 210, 0.25), @@ -1520,7 +1520,7 @@ export default { } &.icon-circle-bg-10 { - background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%); + background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%); box-shadow: 0 6rpx 20rpx rgba(56, 142, 60, 0.35), 0 2rpx 8rpx rgba(56, 142, 60, 0.25), @@ -1618,7 +1618,7 @@ export default { /* 主题色背景 - 渐变立体效果 */ &.icon-circle-bg-11 { - background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%); + background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%); box-shadow: 0 6rpx 20rpx rgba(183, 28, 28, 0.35), 0 2rpx 8rpx rgba(183, 28, 28, 0.25), @@ -1627,7 +1627,7 @@ export default { } &.icon-circle-bg-13 { - background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%); + background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%); box-shadow: 0 6rpx 20rpx rgba(230, 81, 0, 0.35), 0 2rpx 8rpx rgba(230, 81, 0, 0.25), @@ -1636,7 +1636,7 @@ export default { } &.icon-circle-bg-14 { - background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%); + background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); box-shadow: 0 6rpx 20rpx rgba(106, 27, 154, 0.35), 0 2rpx 8rpx rgba(106, 27, 154, 0.25), diff --git a/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.js b/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.js index 33afeeb..5e386ac 100644 --- a/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.js +++ b/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.js @@ -303,17 +303,11 @@ var render = function () { } }) : null - var l7 = _vm.tkStatisticsData - ? _vm.__map(_vm.funnelData, function (item, index) { - var $orig = _vm.__get_orig(item) - var m27 = _vm.formatNumber(item.value) - var g11 = _vm.funnelData.length - return { - $orig: $orig, - m27: m27, - g11: g11, - } - }) + var m27 = _vm.tkStatisticsData + ? _vm.formatPercent(_vm.getTkInviteRate()) + : null + var m28 = _vm.tkStatisticsData + ? _vm.formatPercent(_vm.getInviteStoreRate()) : null if (!_vm._isMounted) { _vm.e0 = function ($event, item) { @@ -362,7 +356,8 @@ var render = function () { l5: l5, g10: g10, l6: l6, - l7: l7, + m27: m27, + m28: m28, }, } ) @@ -750,13 +745,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va // // // -// -// -// -// -// -// -// var _default = { data: function data() { return { @@ -914,28 +902,6 @@ var _default = { TotalPerformance: item.F_TotalPerformance || item.TotalPerformance || 0 }; }); - }, - // 转化漏斗数据 - funnelData: function funnelData() { - if (!this.tkStatisticsData) return []; - var tk = this.tkStatisticsData; - return [{ - label: '拓客人数', - value: tk.TkCount || 0, - rate: null - }, { - label: '邀约人数', - value: tk.InviteCount || 0, - rate: tk.TkCount > 0 ? this.formatPercent((tk.InviteCount || 0) / tk.TkCount * 100) : 0 - }, { - label: '到店人数', - value: tk.StoreCount || 0, - rate: tk.InviteCount > 0 ? this.formatPercent((tk.StoreCount || 0) / tk.InviteCount * 100) : 0 - }, { - label: '成交人数', - value: tk.DealCount || 0, - rate: tk.StoreCount > 0 ? this.formatPercent((tk.DealCount || 0) / tk.StoreCount * 100) : 0 - }]; } }, onLoad: function onLoad() { @@ -1197,6 +1163,10 @@ var _default = { res = _context4.sent; if (res.code === 200 && res.data) { _this4.tkStatisticsData = res.data; + // 绘制漏斗图 + _this4.$nextTick(function () { + _this4.drawFunnelChart(); + }); } _context4.next = 10; break; @@ -1566,6 +1536,16 @@ var _default = { formatPercent: function formatPercent(percent) { return Math.round(percent * 100) / 100; }, + // 获取邀约率 + getTkInviteRate: function getTkInviteRate() { + if (!this.tkStatisticsData || !this.tkStatisticsData.TkCount) return 0; + return (this.tkStatisticsData.YaoyCount || 0) / this.tkStatisticsData.TkCount * 100; + }, + // 获取到店率 + getInviteStoreRate: function getInviteStoreRate() { + if (!this.tkStatisticsData || !this.tkStatisticsData.YaoyCount) return 0; + return (this.tkStatisticsData.DdCount || 0) / this.tkStatisticsData.YaoyCount * 100; + }, // 格式化日期时间 formatDateTime: function formatDateTime(date) { var year = date.getFullYear(); @@ -2013,6 +1993,97 @@ var _default = { getMemberTypeColor: function getMemberTypeColor(index) { var colors = ['#F56C6C', '#67C23A', '#409EFF', '#E6A23C']; return colors[index % colors.length]; + }, + // 绘制漏斗图 + drawFunnelChart: function drawFunnelChart() { + if (!this.tkStatisticsData) return; + var ctx = uni.createCanvasContext('funnelChart', this); + var systemInfo = uni.getSystemInfoSync(); + var width = systemInfo.windowWidth - 60; + var height = this.chartHeight; + + // 清空画布 + ctx.clearRect(0, 0, width, height); + var d = this.tkStatisticsData; + var funnelData = [{ + value: d.TkCount || 0, + name: '获客', + color: '#409EFF' + }, { + value: d.YaoyCount || 0, + name: '邀约', + color: '#67C23A' + }, { + value: d.DdCount || 0, + name: '到店', + color: '#E6A23C' + }, { + value: d.XfCount || 0, + name: '成交', + color: '#F56C6C' + }]; + + // 计算最大值（用于归一化） + var maxValue = Math.max.apply(Math, (0, _toConsumableArray2.default)(funnelData.map(function (item) { + return item.value; + })).concat([1])); + + // 漏斗图参数 + var topWidth = width * 0.8; // 顶部宽度 + var bottomWidth = width * 0.2; // 底部宽度 + var stepHeight = (height - 40) / funnelData.length; // 每层高度（留出上下边距） + var padding = { + top: 20, + bottom: 20, + left: width * 0.1, + right: width * 0.1 + }; + + // 绘制每一层 + funnelData.forEach(function (item, index) { + // 计算当前层的宽度（从上到下逐渐变窄） + var currentTopWidth = topWidth - (topWidth - bottomWidth) * (index / (funnelData.length - 1)); + var currentBottomWidth = topWidth - (topWidth - bottomWidth) * ((index + 1) / (funnelData.length - 1)); + + // 计算当前层的Y位置 + var y = padding.top + index * stepHeight; + var nextY = padding.top + (index + 1) * stepHeight; + + // 计算中心X位置 + var centerX = width / 2; + var topLeftX = centerX - currentTopWidth / 2; + var topRightX = centerX + currentTopWidth / 2; + var bottomLeftX = centerX - currentBottomWidth / 2; + var bottomRightX = centerX + currentBottomWidth / 2; + + // 绘制梯形（漏斗的一层） + ctx.beginPath(); + ctx.moveTo(topLeftX, y); + ctx.lineTo(topRightX, y); + ctx.lineTo(bottomRightX, nextY); + ctx.lineTo(bottomLeftX, nextY); + ctx.closePath(); + + // 填充颜色 + ctx.setFillStyle(item.color); + ctx.fill(); + + // 绘制边框 + ctx.setStrokeStyle('rgba(255, 255, 255, 0.3)'); + ctx.setLineWidth(2); + ctx.stroke(); + + // 绘制文字标签 + ctx.setFillStyle('#fff'); + ctx.setFontSize(24); + ctx.setTextAlign('center'); + var labelY = y + stepHeight / 2 + 8; + ctx.fillText(item.name, centerX, labelY - 8); + ctx.setFontSize(28); + ctx.setFillStyle('#fff'); + ctx.fillText((item.value || 0) + '人', centerX, labelY + 16); + }); + ctx.draw(); } } }; diff --git a/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.wxml b/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.wxml index 78dcac1..155469c 100644 --- a/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.wxml +++ b/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.wxml @@ -1 +1 @@ -经营看板{{selectedMonthText}}核心业务指标{{kpi.$orig.label}}{{kpi.m0}}￥{{kpi.g0}}%{{'目标: '+kpi.$orig.target+''}}{{kpi.$orig.status==='up'?'↑':'↓'}}会员资产全景总会员数{{$root.m1}}{{"本月新增: "+$root.m2}}{{"上月新增: "+$root.m3}}活跃会员{{$root.m4}}{{"活跃(≤3天): "+$root.m5}}{{"常到店(4-59天): "+$root.m6}}{{"60天活跃率: "+memberStatistics.activeRate+"%"}}{{"30天活跃率: "+memberStatistics.activeRate30+"%"}}剩余权益{{"￥"+$root.m7}}{{"人均: "+$root.m8+"元"}}{{"最高: "+(memberStatistics.topRemainingMemberName||'无')+" ￥"+$root.m9}}{{"本月开单最高: "+(memberStatistics.topBillingMemberName||'无')+" ￥"+$root.m10}}{{"本月消耗最高: "+(memberStatistics.topConsumeMemberName||'无')+" ￥"+$root.m11}}沉睡会员{{$root.m12}}{{"60-89天: "+$root.m13}}{{"90-179天: "+$root.m14}}{{"180-359天: "+$root.m15}}{{"360天+: "+$root.m16}}会员结构洞察{{item.$orig.MemberType||'未知'}}{{item.m18+"人"}}会员价值分层生美会员{{$root.m19+"人"}}医美会员{{$root.m20+"人"}}科技部会员{{$root.m21+"人"}}经营效能趋势月日周营收(成交额)消耗(服务产出)门店卓越榜{{index+1}}{{item.$orig.StoreName||'未知门店'}}{{"￥"+item.m22}}核心员效贡献矩阵开单消耗退卡{{index+1}}{{item.$orig.HealthCoachName?item.g6:'无'}}{{item.$orig.HealthCoachName||'未知'}}{{"￥"+item.m23}}协同作战榜{{index+1}}{{item.$orig.GoldTriangleName||'未知'}}{{"￥"+item.m24}}客户活跃度分析热门服务品项{{index+1}}{{item.$orig.ItemName||'未知品项'}}{{"￥"+item.m25}}热销产品品项{{index+1}}{{item.$orig.ItemName||'未知品项'}}{{"￥"+item.m26}}客户获取转化链{{item.$orig.label}}{{item.m27}}{{"转化率 "+item.$orig.rate+"%"}} \ No newline at end of file +经营看板{{selectedMonthText}}核心业务指标{{kpi.$orig.label}}{{kpi.m0}}￥{{kpi.g0}}%{{'目标: '+kpi.$orig.target+''}}{{kpi.$orig.status==='up'?'↑':'↓'}}会员资产全景总会员数{{$root.m1}}{{"本月新增: "+$root.m2}}{{"上月新增: "+$root.m3}}活跃会员{{$root.m4}}{{"活跃(≤3天): "+$root.m5}}{{"常到店(4-59天): "+$root.m6}}{{"60天活跃率: "+memberStatistics.activeRate+"%"}}{{"30天活跃率: "+memberStatistics.activeRate30+"%"}}剩余权益{{"￥"+$root.m7}}{{"人均: "+$root.m8+"元"}}{{"最高: "+(memberStatistics.topRemainingMemberName||'无')+" ￥"+$root.m9}}{{"本月开单最高: "+(memberStatistics.topBillingMemberName||'无')+" ￥"+$root.m10}}{{"本月消耗最高: "+(memberStatistics.topConsumeMemberName||'无')+" ￥"+$root.m11}}沉睡会员{{$root.m12}}{{"60-89天: "+$root.m13}}{{"90-179天: "+$root.m14}}{{"180-359天: "+$root.m15}}{{"360天+: "+$root.m16}}会员结构洞察{{item.$orig.MemberType||'未知'}}{{item.m18+"人"}}会员价值分层生美会员{{$root.m19+"人"}}医美会员{{$root.m20+"人"}}科技部会员{{$root.m21+"人"}}经营效能趋势月日周营收(成交额)消耗(服务产出)门店卓越榜{{index+1}}{{item.$orig.StoreName||'未知门店'}}{{"￥"+item.m22}}核心员效贡献矩阵开单消耗退卡{{index+1}}{{item.$orig.HealthCoachName?item.g6:'无'}}{{item.$orig.HealthCoachName||'未知'}}{{"￥"+item.m23}}协同作战榜{{index+1}}{{item.$orig.GoldTriangleName||'未知'}}{{"￥"+item.m24}}客户活跃度分析热门服务品项{{index+1}}{{item.$orig.ItemName||'未知品项'}}{{"￥"+item.m25}}热销产品品项{{index+1}}{{item.$orig.ItemName||'未知品项'}}{{"￥"+item.m26}}客户获取转化链邀约率: {{$root.m27+"%"}}到店率: {{$root.m28+"%"}} \ No newline at end of file diff --git a/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.wxss b/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.wxss index f5ae899..4ed8edc 100644 --- a/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.wxss +++ b/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/dashboard/dashboard.wxss @@ -471,51 +471,29 @@ border-radius: 2rpx; } /* 转化漏斗 */ -.funnel-box.data-v-a09b2520 { - padding: 20rpx 0; -} -.funnel-step.data-v-a09b2520 { - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 10rpx; -} -.funnel-step .step-shape.data-v-a09b2520 { - background: linear-gradient(90deg, #66bb6a 0%, #43a047 100%); - border-radius: 8rpx; - padding: 16rpx; - box-shadow: 0 4rpx 12rpx rgba(67, 160, 71, 0.2); - display: flex; - justify-content: center; -} -.funnel-step .step-shape .step-content.data-v-a09b2520 { - display: flex; - align-items: center; - justify-content: space-between; +.funnel-section .chart-wrapper.data-v-a09b2520 { width: 100%; - padding: 0 20rpx; -} -.funnel-step .step-shape .step-content .step-label.data-v-a09b2520 { - color: #fff; - font-size: 26rpx; - font-weight: 500; + height: 280px; + margin-bottom: 20rpx; } -.funnel-step .step-shape .step-content .step-value.data-v-a09b2520 { - color: #fff; - font-size: 32rpx; - font-weight: bold; +.funnel-section .funnel-chart-canvas.data-v-a09b2520 { + width: 100%; + height: 100%; } -.funnel-step .step-arrow.data-v-a09b2520 { +.funnel-section .funnel-stats.data-v-a09b2520 { display: flex; - flex-direction: column; - align-items: center; - padding: 8rpx 0; - height: 60rpx; + justify-content: space-around; + padding: 20rpx 0; + border-top: 1px solid rgba(0, 0, 0, 0.05); } -.funnel-step .step-arrow .rate-text.data-v-a09b2520 { - font-size: 20rpx; +.funnel-section .funnel-stats .stat-mini.data-v-a09b2520 { + font-size: 24rpx; color: #666; - margin-top: 4rpx; +} +.funnel-section .funnel-stats .stat-mini .stat-value.data-v-a09b2520 { + color: #43a047; + font-weight: 600; + margin-left: 8rpx; } @-webkit-keyframes rotate-data-v-a09b2520 { from { diff --git a/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/home/home.wxss b/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/home/home.wxss index e85e46d..53dcd84 100644 --- a/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/home/home.wxss +++ b/绿纤uni-app/unpackage/dist/dev/mp-weixin/pages/home/home.wxss @@ -199,75 +199,75 @@ filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2)); } .warpboxss .common-func-icon.icon-circle-bg-1.data-v-92bb8f34 { - background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%); + background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-2.data-v-92bb8f34 { - background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%); + background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-3.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%); + background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-4.data-v-92bb8f34 { - background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%); + background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-5.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%); + background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-6.data-v-92bb8f34 { - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%); + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-7.data-v-92bb8f34 { - background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%); + background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-8.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%); + background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-9.data-v-92bb8f34 { - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%); + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-10.data-v-92bb8f34 { - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%); + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-11.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%); + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-12.data-v-92bb8f34 { - background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%); + background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-13.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%); + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-14.data-v-92bb8f34 { - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-15.data-v-92bb8f34 { - background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%); + background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-16.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%); + background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-17.data-v-92bb8f34 { - background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%); + background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%); 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); } .warpboxss .common-func-icon.icon-circle-bg-18.data-v-92bb8f34 { - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #5a67d8 100%); 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); } .warpboxss .common-func-text.data-v-92bb8f34 { @@ -437,71 +437,71 @@ transition: transform 300ms ease, opacity 300ms ease, -webkit-transform 300ms ease; } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-1.data-v-92bb8f34 { - background: linear-gradient(135deg, #E3F2FD 0%, #2196F3 100%); + background: linear-gradient(135deg, #1E88E5 0%, #42a5f5 50%, #1565C0 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-2.data-v-92bb8f34 { - background: linear-gradient(135deg, #E8F5E9 0%, #4CAF50 100%); + background: linear-gradient(135deg, #43A047 0%, #66bb6a 50%, #388E3C 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-3.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFEBEE 0%, #F44336 100%); + background: linear-gradient(135deg, #D32F2F 0%, #ef5350 50%, #c62828 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-4.data-v-92bb8f34 { - background: linear-gradient(135deg, #E0F7FA 0%, #00BCD4 100%); + background: linear-gradient(135deg, #00838F 0%, #26a69a 50%, #00695C 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-5.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFF3E0 0%, #FF9800 100%); + background: linear-gradient(135deg, #F57C00 0%, #ffb74d 50%, #ef6c00 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-6.data-v-92bb8f34 { - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%); + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-7.data-v-92bb8f34 { - background: linear-gradient(135deg, #FCE4EC 0%, #E91E63 100%); + background: linear-gradient(135deg, #C2185B 0%, #e91e63 50%, #ad1457 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-8.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFFDE7 0%, #FFC107 100%); + background: linear-gradient(135deg, #F9A825 0%, #ffb74d 50%, #f57f17 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-9.data-v-92bb8f34 { - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%); + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-10.data-v-92bb8f34 { - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%); + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-11.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%); + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-12.data-v-92bb8f34 { - background: linear-gradient(135deg, #B2EBF2 0%, #0097A7 100%); + background: linear-gradient(135deg, #0097A7 0%, #26a69a 50%, #00838f 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-13.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%); + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-14.data-v-92bb8f34 { - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-15.data-v-92bb8f34 { - background: linear-gradient(135deg, #F8BBD0 0%, #C2185B 100%); + background: linear-gradient(135deg, #AD1457 0%, #e91e63 50%, #880e4f 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-16.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFF9C4 0%, #F9A825 100%); + background: linear-gradient(135deg, #FBC02D 0%, #ffeb3b 50%, #f9a825 100%); 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); } .fun_box_fir .fun_fir_1 .icon.icon-circle-bg-17.data-v-92bb8f34 { - background: linear-gradient(135deg, #EFEBE9 0%, #5D4037 100%); + background: linear-gradient(135deg, #5D4037 0%, #8d6e63 50%, #3e2723 100%); 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); } .fun_box_fir .fun_fir_border.data-v-92bb8f34 { @@ -582,15 +582,15 @@ filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2)); } .mgmt-icon.icon-circle-bg-6.data-v-92bb8f34 { - background: linear-gradient(135deg, #F3E5F5 0%, #9C27B0 100%); + background: linear-gradient(135deg, #7B1FA2 0%, #9c27b0 50%, #6a1b9a 100%); 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); } .mgmt-icon.icon-circle-bg-9.data-v-92bb8f34 { - background: linear-gradient(135deg, #BBDEFB 0%, #1976D2 100%); + background: linear-gradient(135deg, #1976D2 0%, #42a5f5 50%, #1565C0 100%); 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); } .mgmt-icon.icon-circle-bg-10.data-v-92bb8f34 { - background: linear-gradient(135deg, #C8E6C9 0%, #388E3C 100%); + background: linear-gradient(135deg, #388E3C 0%, #66bb6a 50%, #2e7d32 100%); 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); } .mgmt-text.data-v-92bb8f34 { @@ -673,15 +673,15 @@ filter: brightness(1.2) drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2)); } .bottom-icon.icon-circle-bg-11.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFCDD2 0%, #D32F2F 100%); + background: linear-gradient(135deg, #B71C1C 0%, #ef5350 50%, #c62828 100%); 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); } .bottom-icon.icon-circle-bg-13.data-v-92bb8f34 { - background: linear-gradient(135deg, #FFE0B2 0%, #F57C00 100%); + background: linear-gradient(135deg, #E65100 0%, #ff9800 50%, #e64a19 100%); 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); } .bottom-icon.icon-circle-bg-14.data-v-92bb8f34 { - background: linear-gradient(135deg, #E1BEE7 0%, #7B1FA2 100%); + background: linear-gradient(135deg, #6A1B9A 0%, #9c27b0 50%, #4a148c 100%); 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); } .bottom-text.data-v-92bb8f34 {