@charset "UTF-8"; /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ .page.data-v-06a22555 { min-height: 100vh; background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%); padding-bottom: 40rpx; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; } .warpbox.data-v-06a22555 { padding: 0 30rpx; padding-top: 20rpx; } /* 顶部区域 */ .header-section.data-v-06a22555 { margin-bottom: 20rpx; display: flex; justify-content: space-between; align-items: center; padding: 0 10rpx; } .header-section .page-title.data-v-06a22555 { font-size: 36rpx; font-weight: bold; color: #1f2937; } .header-section .filter-box.data-v-06a22555 { display: flex; align-items: center; gap: 12rpx; } .header-section .filter-box .date-picker-trigger.data-v-06a22555 { display: flex; align-items: center; background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 8rpx 16rpx; border-radius: 30rpx; border: 1px solid rgba(255, 255, 255, 0.8); } .header-section .filter-box .date-picker-trigger .date-text.data-v-06a22555 { font-size: 24rpx; color: #333; margin-right: 6rpx; } .header-section .filter-box .refresh-btn.data-v-06a22555 { padding: 6rpx; } .header-section .filter-box .refresh-btn.loading.data-v-06a22555 { -webkit-animation: rotate-data-v-06a22555 1s linear infinite; animation: rotate-data-v-06a22555 1s linear infinite; } .header-section .filter-box .screenshot-btn.data-v-06a22555 { display: flex; align-items: center; gap: 8rpx; padding: 8rpx 16rpx; background: rgba(64, 158, 255, 0.1); border-radius: 20rpx; transition: all 0.3s; } .header-section .filter-box .screenshot-btn.data-v-06a22555:active { background: rgba(64, 158, 255, 0.2); -webkit-transform: scale(0.95); transform: scale(0.95); } .header-section .filter-box .screenshot-btn.loading.data-v-06a22555 { opacity: 0.6; } .header-section .filter-box .screenshot-btn .screenshot-text.data-v-06a22555 { font-size: 24rpx; color: #409EFF; } /* 卡片容器通用样式 - 玻璃拟态 */ .warpboxss.data-v-06a22555 { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); padding: 20rpx; border-radius: 20rpx; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset; margin-bottom: 20rpx; transition: all 0.3s ease; } .warpboxss.data-v-06a22555:active { -webkit-transform: scale(0.99); transform: scale(0.99); } .warpboxs-small-title.data-v-06a22555 { display: flex; justify-content: space-between; align-items: center; font-size: 28rpx; font-weight: 600; color: #1f2937; margin-bottom: 16rpx; } .warpboxs-small-title view.data-v-06a22555:first-child { display: flex; align-items: center; } .warpboxs-small-title .warpboxs-small-title-line.data-v-06a22555 { background: linear-gradient(180deg, #43a047 0%, #66bb6a 100%); height: 26rpx; width: 10rpx; margin-right: 12rpx; border-radius: 18rpx; box-shadow: 0 2rpx 8rpx rgba(67, 160, 71, 0.4), 0 0 12rpx rgba(67, 160, 71, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.3); } /* KPI 核心指标 */ .kpi-section.data-v-06a22555 { margin-bottom: 20rpx; } /* 上方4个指标 - 按照me.vue样式 */ .billing-card.data-v-06a22555 { width: 100%; display: flex; flex-direction: column; justify-content: center; padding: 24rpx; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 24rpx; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset; margin-bottom: 16rpx; box-sizing: border-box; } .billing-main.data-v-06a22555 { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; width: 100%; padding: 0 8rpx; margin-bottom: 30rpx; } .billing-card .stat-content.data-v-06a22555 { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 10rpx; } .billing-card .label-row.data-v-06a22555 { display: flex; align-items: center; justify-content: flex-start; width: 100%; gap: 8rpx; } .billing-card .card-label.data-v-06a22555 { font-size: 24rpx; font-weight: 500; color: #666; } .billing-card .stat-icon-small.data-v-06a22555 { width: 48rpx; height: 48rpx; border-radius: 12rpx; margin-right: 8rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .billing-card .stat-icon-small.green.data-v-06a22555 { background: #4caf50; } .billing-card .stat-icon-small.red.data-v-06a22555 { background: #f44336; } .billing-card .stat-icon-small.light-blue.data-v-06a22555 { background: #42a5f5; } .billing-card .stat-icon-small.purple.data-v-06a22555 { background: #9c27b0; } .billing-card .stat-icon-small.orange.data-v-06a22555 { background: #ff9800; } .billing-card .stat-icon-small.pink.data-v-06a22555 { background: #e91e63; } .billing-value.data-v-06a22555 { font-size: 38rpx; font-weight: bold; color: #1f2937; line-height: 1.1; text-align: center; width: 100%; padding: 0 30rpx; box-sizing: border-box; display: flex; align-items: baseline; justify-content: center; } .billing-value .currency.data-v-06a22555 { font-size: 24rpx; margin-right: 4rpx; } .billing-value .value.data-v-06a22555 { font-size: 38rpx; } .billing-value .unit.data-v-06a22555 { font-size: 24rpx; color: #666; margin-left: 4rpx; } .billing-footer.data-v-06a22555 { display: flex; justify-content: space-around; width: 100%; padding-top: 30rpx; border-top: 1px solid rgba(0, 0, 0, 0.05); margin-top: auto; } .count-item.data-v-06a22555 { display: flex; align-items: center; gap: 8rpx; } .count-icon.data-v-06a22555 { width: 36rpx; height: 36rpx; border-radius: 8rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .count-icon.green.data-v-06a22555 { background: #4caf50; } .count-icon.red.data-v-06a22555 { background: #f44336; } .count-icon.light-blue.data-v-06a22555 { background: #42a5f5; } .count-icon.purple.data-v-06a22555 { background: #9c27b0; } .count-icon.orange.data-v-06a22555 { background: #ff9800; } .count-icon.pink.data-v-06a22555 { background: #e91e63; } .count-text.data-v-06a22555 { font-size: 26rpx; color: #666666; line-height: 1.5; display: flex; align-items: baseline; } .count-text .count-value.data-v-06a22555 { font-size: 26rpx; font-weight: 500; } .count-text .count-unit.data-v-06a22555 { font-size: 24rpx; margin-left: 4rpx; } .kpi-grid-bottom.data-v-06a22555 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rpx; } .kpi-card.data-v-06a22555 { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 24rpx; padding: 24rpx; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset; } .kpi-card .kpi-header.data-v-06a22555 { display: flex; align-items: center; margin-bottom: 16rpx; } .kpi-card .kpi-header .kpi-icon-square.data-v-06a22555 { width: 50rpx; height: 50rpx; border-radius: 10rpx; display: flex; align-items: center; justify-content: center; margin-right: 12rpx; flex-shrink: 0; } .kpi-card .kpi-header .kpi-icon-square.green.data-v-06a22555 { background: #4caf50; } .kpi-card .kpi-header .kpi-icon-square.red.data-v-06a22555 { background: #f44336; } .kpi-card .kpi-header .kpi-icon-square.light-blue.data-v-06a22555 { background: #42a5f5; } .kpi-card .kpi-header .kpi-icon-square.purple.data-v-06a22555 { background: #9c27b0; } .kpi-card .kpi-header .kpi-icon-square.orange.data-v-06a22555 { background: #ff9800; } .kpi-card .kpi-header .kpi-icon-square.pink.data-v-06a22555 { background: #e91e63; } .kpi-card .kpi-header .kpi-label.data-v-06a22555 { font-size: 24rpx; color: #666; } .kpi-card .kpi-value-group.data-v-06a22555 { display: flex; align-items: baseline; } .kpi-card .kpi-value-group .currency.data-v-06a22555 { font-size: 24rpx; color: #333; margin-right: 4rpx; } .kpi-card .kpi-value-group .value.data-v-06a22555 { font-size: 36rpx; font-weight: bold; color: #333; letter-spacing: -1rpx; flex: 1; text-align: center; } .kpi-card .kpi-value-group .unit.data-v-06a22555 { font-size: 24rpx; color: #666; margin-left: 4rpx; } /* 会员数据 */ .member-grid.data-v-06a22555 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16rpx; } .member-stat-card.data-v-06a22555 { background: #fff; padding: 18rpx; border-radius: 14rpx; display: flex; align-items: flex-start; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03); } .member-stat-card .icon-circle.data-v-06a22555 { width: 56rpx; height: 56rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; flex-shrink: 0; } .member-stat-card.blue-theme .icon-circle.data-v-06a22555 { background: rgba(64, 158, 255, 0.1); } .member-stat-card.green-theme .icon-circle.data-v-06a22555 { background: rgba(103, 194, 58, 0.1); } .member-stat-card.orange-theme .icon-circle.data-v-06a22555 { background: rgba(230, 162, 60, 0.1); } .member-stat-card.red-theme .icon-circle.data-v-06a22555 { background: rgba(245, 108, 108, 0.1); } .member-stat-card .stat-info.data-v-06a22555 { flex: 1; } .member-stat-card .stat-info .stat-label.data-v-06a22555 { font-size: 22rpx; color: #666; margin-bottom: 6rpx; } .member-stat-card .stat-info .stat-value.data-v-06a22555 { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 6rpx; } .member-stat-card .stat-info .stat-value.mini.data-v-06a22555 { font-size: 24rpx; } .member-stat-card .stat-info .stat-sub.data-v-06a22555 { font-size: 18rpx; color: #999; line-height: 1.4; } /* 趋势图表 */ .trend-controls .pill-switch.data-v-06a22555 { display: flex; background: #f5f5f5; border-radius: 26rpx; padding: 3rpx; } .trend-controls .pill-switch .pill-item.data-v-06a22555 { padding: 5rpx 18rpx; font-size: 22rpx; color: #666; border-radius: 24rpx; transition: all 0.3s; } .trend-controls .pill-switch .pill-item.active.data-v-06a22555 { background: #fff; color: #43a047; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); font-weight: 500; } .chart-wrapper.data-v-06a22555 { width: 100%; height: 400rpx; position: relative; } .trend-chart-canvas.data-v-06a22555, .visit-frequency-chart-canvas.data-v-06a22555, .funnel-chart-canvas.data-v-06a22555 { width: 100%; height: 100%; } .trend-legend-modern.data-v-06a22555 { display: flex; justify-content: center; margin-top: 16rpx; } .trend-legend-modern .legend-item.data-v-06a22555 { display: flex; align-items: center; margin: 0 20rpx; font-size: 22rpx; color: #666; } .trend-legend-modern .legend-item .dot.data-v-06a22555 { width: 10rpx; height: 10rpx; border-radius: 50%; margin-right: 6rpx; } .trend-legend-modern .legend-item .dot.revenue.data-v-06a22555 { background: #43a047; } .trend-legend-modern .legend-item .dot.consume.data-v-06a22555 { background: #409EFF; } /* 排行榜通用 */ .type-tags.data-v-06a22555 { display: flex; } .type-tags .tag-item.data-v-06a22555 { padding: 5rpx 16rpx; font-size: 20rpx; margin-left: 10rpx; border-radius: 18rpx; background: #f0f0f0; color: #666; } .type-tags .tag-item.active.data-v-06a22555 { background: #e8f5e9; color: #43a047; } .rank-list-modern .rank-item.data-v-06a22555 { display: flex; align-items: center; padding: 18rpx 0; } .rank-list-modern .rank-item .rank-idx.data-v-06a22555 { width: 50rpx; font-size: 26rpx; font-weight: bold; color: #999; text-align: center; margin-right: 16rpx; } .rank-list-modern .rank-item .rank-idx.rank-1.data-v-06a22555 { color: #FFD700; font-size: 30rpx; text-shadow: 0 2rpx 4rpx rgba(255, 215, 0, 0.3); } .rank-list-modern .rank-item .rank-idx.rank-2.data-v-06a22555 { color: #C0C0C0; font-size: 30rpx; text-shadow: 0 2rpx 4rpx rgba(192, 192, 192, 0.3); } .rank-list-modern .rank-item .rank-idx.rank-3.data-v-06a22555 { color: #CD7F32; font-size: 30rpx; text-shadow: 0 2rpx 4rpx rgba(205, 127, 50, 0.3); } .rank-list-modern .rank-item .rank-idx.top-3.data-v-06a22555 { color: #43a047; font-size: 30rpx; } .rank-list-modern .rank-item .rank-idx .medal-icon.data-v-06a22555 { width: 40rpx; height: 40rpx; } .rank-list-modern .rank-item .rank-avatar.data-v-06a22555 { width: 56rpx; height: 56rpx; background: #e8f5e9; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; color: #43a047; font-weight: bold; font-size: 24rpx; } .rank-list-modern .rank-item .rank-info.data-v-06a22555 { flex: 1; } .rank-list-modern .rank-item .rank-info .info-main.data-v-06a22555 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10rpx; } .rank-list-modern .rank-item .rank-info .info-main .name.data-v-06a22555 { font-size: 26rpx; font-weight: 500; color: #333; } .rank-list-modern .rank-item .rank-info .info-main .value.data-v-06a22555 { font-size: 26rpx; font-weight: bold; color: #43a047; } .rank-list-modern .rank-item .rank-info .info-main .value.orange-value.data-v-06a22555 { color: #ff9800; } .rank-list-modern .rank-item .rank-info .progress-bg.data-v-06a22555 { height: 6rpx; background: #f5f5f5; border-radius: 3rpx; overflow: hidden; } .rank-list-modern .rank-item .rank-info .progress-bg .progress-bar.data-v-06a22555 { height: 100%; background: linear-gradient(90deg, #66bb6a 0%, #43a047 100%); border-radius: 3rpx; } .rank-list-modern .rank-item .rank-info .progress-bg .progress-bar.green.data-v-06a22555 { background: linear-gradient(90deg, #66bb6a 0%, #43a047 100%); } .rank-list-modern .rank-item .rank-info .progress-bg .progress-bar.orange.data-v-06a22555 { background: linear-gradient(90deg, #ffb74d 0%, #ff9800 100%); } /* 热门品项 */ .item-grid.data-v-06a22555 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16rpx; } .item-grid .item-card.data-v-06a22555 { background: #fff; border-radius: 12rpx; padding: 16rpx; position: relative; overflow: hidden; } .item-grid .item-card .item-rank-badge.data-v-06a22555 { position: absolute; top: 0; left: 0; padding: 3rpx 10rpx; background: #f0f0f0; color: #999; font-size: 18rpx; border-bottom-right-radius: 12rpx; } .item-grid .item-card .item-rank-badge.rank-1.data-v-06a22555 { background: #ffe0b2; color: #ef6c00; } .item-grid .item-card .item-rank-badge.rank-2.data-v-06a22555 { background: #e0f2f1; color: #00897b; } .item-grid .item-card .item-rank-badge.rank-3.data-v-06a22555 { background: #e3f2fd; color: #1e88e5; } .item-grid .item-card .item-name.data-v-06a22555 { font-size: 24rpx; color: #333; margin-top: 20rpx; margin-bottom: 6rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .item-grid .item-card .item-val.data-v-06a22555 { font-size: 24rpx; color: #43a047; font-weight: bold; margin-bottom: 10rpx; } .item-grid .item-card .item-process.data-v-06a22555 { width: 100%; height: 4rpx; background: #f0f0f0; border-radius: 2rpx; } .item-grid .item-card .item-process .bar.data-v-06a22555 { height: 100%; background: #43a047; border-radius: 2rpx; } /* 转化漏斗 */ .funnel-section .chart-wrapper.data-v-06a22555 { width: 100%; height: 400rpx; margin-bottom: 16rpx; } .funnel-section .funnel-chart-canvas.data-v-06a22555 { width: 100%; height: 100%; } .funnel-section .funnel-stats.data-v-06a22555 { display: flex; justify-content: space-around; padding: 16rpx 0; } .funnel-section .funnel-stats .stat-mini.data-v-06a22555 { font-size: 22rpx; color: #666; } .funnel-section .funnel-stats .stat-mini .stat-value.data-v-06a22555 { color: #43a047; font-weight: 600; margin-left: 6rpx; } @-webkit-keyframes rotate-data-v-06a22555 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-data-v-06a22555 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 会员结构洞察 */ .member-chart-container.data-v-06a22555 { display: flex; flex-direction: column; align-items: center; } .member-type-chart-wrapper.data-v-06a22555 { width: 100%; height: 480rpx; margin-bottom: 16rpx; } .member-type-chart-canvas.data-v-06a22555 { width: 100%; height: 100%; } .member-type-legend.data-v-06a22555 { display: flex; flex-wrap: wrap; justify-content: center; gap: 16rpx; padding: 16rpx; border-radius: 12rpx; width: 100%; } .member-type-legend .legend-item.data-v-06a22555 { display: flex; align-items: center; gap: 6rpx; padding: 6rpx 12rpx; background: #fff; border-radius: 8rpx; } .member-type-legend .legend-dot.data-v-06a22555 { width: 20rpx; height: 20rpx; border-radius: 50%; } .member-type-legend .legend-name.data-v-06a22555 { font-size: 22rpx; color: #666; margin-right: 6rpx; } .member-type-legend .legend-value.data-v-06a22555 { font-size: 22rpx; color: #333; font-weight: bold; } /* 会员价值分层 */ .member-category-container.data-v-06a22555 { display: flex; flex-direction: column; align-items: center; } .member-category-chart-wrapper.data-v-06a22555 { width: 100%; height: 480rpx; margin-bottom: 16rpx; } .member-category-chart-canvas.data-v-06a22555 { width: 100%; height: 100%; } .member-category-legend.data-v-06a22555 { display: flex; flex-direction: row; gap: 12rpx; padding: 16rpx; border-radius: 12rpx; width: 100%; } .member-category-legend .legend-item.data-v-06a22555 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8rpx; padding: 10rpx; background: #fff; border-radius: 8rpx; flex: 1; } .member-category-legend .legend-color.data-v-06a22555 { width: 28rpx; height: 28rpx; border-radius: 4rpx; flex-shrink: 0; } .member-category-legend .legend-text.data-v-06a22555 { display: flex; flex-direction: column; align-items: center; text-align: center; } .member-category-legend .legend-name.data-v-06a22555 { font-size: 22rpx; color: #666; margin-bottom: 3rpx; } .member-category-legend .legend-value.data-v-06a22555 { font-size: 24rpx; color: #333; font-weight: bold; } /* 客户活跃度分析 */ .visit-frequency-section .chart-wrapper.data-v-06a22555 { width: 100%; height: 400rpx; } .visit-frequency-section .visit-frequency-chart-canvas.data-v-06a22555 { width: 100%; height: 100%; } /* 热销产品品项 */ .item-process .bar.blue.data-v-06a22555 { background: #409EFF; } /* 会员统计卡片点击提示 */ .stat-hint.data-v-06a22555 { font-size: 18rpx; color: #999; margin-top: 4rpx; } .member-stat-card.data-v-06a22555 { cursor: pointer; transition: all 0.3s ease; } .member-stat-card.data-v-06a22555:active { -webkit-transform: scale(0.98); transform: scale(0.98); opacity: 0.9; } /* 会员详情弹窗 */ .member-detail-modal.data-v-06a22555 { width: 600rpx; max-height: 80vh; background: #fff; border-radius: 20rpx; overflow: hidden; } .member-detail-modal .modal-title.data-v-06a22555 { font-size: 32rpx; font-weight: bold; color: #333; text-align: center; padding: 30rpx 20rpx 20rpx; border-bottom: 1px solid #f0f0f0; } .member-detail-modal .modal-content.data-v-06a22555 { padding: 20rpx; max-height: 60vh; overflow-y: auto; } .member-detail-modal .modal-content .detail-item.data-v-06a22555 { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 0; border-bottom: 1px solid #f5f5f5; } .member-detail-modal .modal-content .detail-item.data-v-06a22555:last-child { border-bottom: none; } .member-detail-modal .modal-content .detail-item .detail-label.data-v-06a22555 { font-size: 26rpx; color: #666; flex: 1; } .member-detail-modal .modal-content .detail-item .detail-value.data-v-06a22555 { font-size: 26rpx; color: #333; font-weight: 500; text-align: right; flex: 1; }