|
|
@@ -1,465 +1,434 @@
|
|
|
<template>
|
|
|
- <div class="dashboard-container">
|
|
|
- <!-- 实时大屏主体（100%占满父容器） -->
|
|
|
- <div class="dashboard">
|
|
|
- <!-- 顶部数据卡片区（占满宽度，高度20%） -->
|
|
|
- <div class="data-cards">
|
|
|
- <div class="card" v-for="item in dataCards" :key="item.title">
|
|
|
- <h3>{{ item.title }}</h3>
|
|
|
- <p class="value">{{ item.value }}</p>
|
|
|
- <div class="sub-values" v-if="item.subValues">
|
|
|
- <span class="sub-item">直播: {{ item.subValues.live }}</span>
|
|
|
- <span class="sub-item">回放: {{ item.subValues.replay }}</span>
|
|
|
- </div>
|
|
|
+ <div class="dashboard-page">
|
|
|
+ <!-- 顶栏 -->
|
|
|
+ <header class="dash-header">
|
|
|
+ <div class="header-left">
|
|
|
+ <h1 class="live-title">{{ liveName || '直播实时大屏' }}</h1>
|
|
|
+ <div class="meta-tags">
|
|
|
+ <span class="tag" v-if="startTime">
|
|
|
+ <i class="el-icon-time"></i> 开播 {{ formatTime(startTime) }}
|
|
|
+ </span>
|
|
|
+ <span class="tag tag-live" v-if="!liveDataFrozen">直播中</span>
|
|
|
+ <span class="tag tag-frozen" v-if="liveDataFrozen">直播数据已冻结</span>
|
|
|
+ <span class="tag tag-frozen" v-if="replayDataFrozen && liveStatus === 4">回放数据已冻结</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="header-right">
|
|
|
+ <span class="refresh-tip">{{ lastRefreshText }}</span>
|
|
|
+ <el-button type="primary" size="small" icon="el-icon-refresh" :loading="loading" @click="refreshData">
|
|
|
+ 刷新数据
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
|
|
|
- <!-- 中间内容区（上下分两部分，各占40%高度） -->
|
|
|
- <div class="middle-content">
|
|
|
- <!-- 左侧用户分析区（占50%宽度） -->
|
|
|
- <div class="user-analysis">
|
|
|
- <div class="new-old">
|
|
|
- <h3>直播新老用户占比</h3>
|
|
|
- <EChartsComponent chartId="liveNewOldChart" :option="liveNewOldOption" />
|
|
|
- </div>
|
|
|
- <div class="region">
|
|
|
- <h3>回放新老用户占比</h3>
|
|
|
- <EChartsComponent chartId="replayNewOldChart" :option="replayNewOldOption" />
|
|
|
+ <!-- 互动指标 -->
|
|
|
+ <section class="section">
|
|
|
+ <div class="section-title">实时互动</div>
|
|
|
+ <div class="metric-grid metric-grid-4">
|
|
|
+ <div class="metric-card accent-blue" v-for="item in interactionCards" :key="item.label">
|
|
|
+ <div class="metric-icon">{{ item.icon }}</div>
|
|
|
+ <div class="metric-body">
|
|
|
+ <div class="metric-label">{{ item.label }}</div>
|
|
|
+ <div class="metric-value">{{ item.value }}</div>
|
|
|
+ <div class="metric-sub" v-if="item.sub">{{ item.sub }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
|
|
|
- <!-- 右侧来源与榜单区（占50%宽度） -->
|
|
|
- <div class="source-rank">
|
|
|
- <div class="source">
|
|
|
- <h3>观众来源</h3>
|
|
|
- <EChartsComponent chartId="sourceChart" :option="sourceOption" />
|
|
|
- </div>
|
|
|
- <div class="rank">
|
|
|
- <h3>邀请达人榜</h3>
|
|
|
- <ul class="rank-list" v-if="rankList.length > 0">
|
|
|
- <li v-for="(item, index) in rankList" :key="index">
|
|
|
- <span class="rank-num">{{ index + 1 }}</span>
|
|
|
- <span class="rank-name">{{ item.userName }}</span>
|
|
|
- <span class="rank-count">{{ item.inviteNum }}</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <p class="no-data" style="text-align: center;" v-if="rankList.length == 0">暂无数据</p>
|
|
|
- </div>
|
|
|
+ <!-- 订单整体数据 -->
|
|
|
+ <section class="section">
|
|
|
+ <div class="section-title">订单整体数据</div>
|
|
|
+ <div class="metric-grid metric-grid-4">
|
|
|
+ <div class="metric-card" v-for="item in orderCards" :key="item.label">
|
|
|
+ <div class="metric-label">{{ item.label }}</div>
|
|
|
+ <div class="metric-value" :class="{ money: item.isMoney }">{{ item.value }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </section>
|
|
|
|
|
|
- <!-- 底部趋势图（占20%高度） -->
|
|
|
- <!-- <div class="trend">-->
|
|
|
- <!-- <h3>实时在线人数趋势</h3>-->
|
|
|
- <!-- <EChartsComponent chartId="trendChart" :option="trendOption" />-->
|
|
|
- <!-- </div>-->
|
|
|
- </div>
|
|
|
+ <!-- 商品数据 + 邀请榜 -->
|
|
|
+ <section class="section section-split">
|
|
|
+ <div class="panel product-panel">
|
|
|
+ <div class="section-title">商品数据</div>
|
|
|
+ <el-table
|
|
|
+ :data="productStats"
|
|
|
+ size="small"
|
|
|
+ height="320"
|
|
|
+ class="dark-table"
|
|
|
+ empty-text="暂无商品订单数据">
|
|
|
+ <el-table-column prop="productName" label="商品" min-width="120" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="totalOrderCount" label="累计下单" width="80" align="center" />
|
|
|
+ <el-table-column label="累计金额" width="100" align="right">
|
|
|
+ <template slot-scope="{ row }">{{ formatMoney(row.totalOrderAmount) }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="paidOrderCount" label="成交数" width="70" align="center" />
|
|
|
+ <el-table-column label="成交额" width="100" align="right">
|
|
|
+ <template slot-scope="{ row }">{{ formatMoney(row.paidOrderAmount) }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="unpaidOrderCount" label="待支付" width="70" align="center" />
|
|
|
+ <el-table-column prop="refundApplyCount" label="退款申请" width="80" align="center" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel rank-panel">
|
|
|
+ <div class="section-title">
|
|
|
+ 销售邀请榜
|
|
|
+ <span class="invite-total">共 {{ totalInviteCount }} 人</span>
|
|
|
+ </div>
|
|
|
+ <ul class="rank-list" v-if="rankList.length">
|
|
|
+ <li v-for="(item, index) in rankList" :key="index" class="rank-item">
|
|
|
+ <span class="rank-badge" :class="'rank-' + (index + 1)">{{ index + 1 }}</span>
|
|
|
+ <span class="rank-name">{{ item.userName || '未知销售' }}</span>
|
|
|
+ <span class="rank-count">{{ item.inviteNum }} 人</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="empty-rank" v-else>暂无邀请数据</div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import EChartsComponent from './EchartsComponent.vue';
|
|
|
-import {dashboardData} from '@/api/live/liveData'
|
|
|
+import { dashboardData } from '@/api/live/liveData'
|
|
|
|
|
|
export default {
|
|
|
- components: {EChartsComponent},
|
|
|
props: {
|
|
|
- liveId: {
|
|
|
- type: String,
|
|
|
- default: null
|
|
|
- }
|
|
|
+ liveId: { type: String, default: null }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // 数据保持不变（与原代码一致）
|
|
|
- dataCards: [
|
|
|
- {title: '在线人数', value: 0},
|
|
|
- {
|
|
|
- title: '观看人次',
|
|
|
- value: 0,
|
|
|
- subValues: {live: 0, replay: 0}
|
|
|
- },
|
|
|
- {
|
|
|
- title: '点赞数',
|
|
|
- value: 0,
|
|
|
- subValues: {live: 0, replay: 0}
|
|
|
- },
|
|
|
- {
|
|
|
- title: '评论数',
|
|
|
- value: 0,
|
|
|
- subValues: {live: 0, replay: 0}
|
|
|
- }
|
|
|
- ],
|
|
|
- liveNewOldOption: {
|
|
|
- tooltip: {trigger: 'item'},
|
|
|
- series: [{
|
|
|
- type: 'pie', radius: '70%',
|
|
|
- data: [{value: 0, name: '新用户'}, {value: 0, name: '老用户'}],
|
|
|
- itemStyle: {colors: ['#36cfc9', '#722ed1']}
|
|
|
- }]
|
|
|
- },
|
|
|
- replayNewOldOption: {
|
|
|
- tooltip: {trigger: 'item'},
|
|
|
- series: [{
|
|
|
- type: 'pie', radius: '70%',
|
|
|
- data: [{value: 0, name: '新用户'}, {value: 0, name: '老用户'}],
|
|
|
- itemStyle: {colors: ['#36cfc9', '#722ed1']}
|
|
|
- }]
|
|
|
- },
|
|
|
- regionOption: {
|
|
|
- tooltip: {trigger: 'item'},
|
|
|
- series: [{
|
|
|
- type: 'map', map: 'china', roam: true,
|
|
|
- itemStyle: {
|
|
|
- normal: {areaColor: '#36cfc9', borderColor: '#fff'},
|
|
|
- emphasis: {areaColor: '#722ed1'}
|
|
|
- },
|
|
|
- data: [{name: '北京', value: 120}, {name: '上海', value: 150}, {name: '广州', value: 90}, {
|
|
|
- name: '深圳',
|
|
|
- value: 80
|
|
|
- }, {name: '杭州', value: 70}]
|
|
|
- }]
|
|
|
- },
|
|
|
- sourceOption: {
|
|
|
- tooltip: {trigger: 'item'},
|
|
|
- series: [{
|
|
|
- type: 'pie', radius: '70%',
|
|
|
- data: [{value: 45, name: '分享链接'}, {value: 30, name: '直接访问'}, {value: 25, name: '其他'}],
|
|
|
- itemStyle: {colors: ['#3b82f6', '#10b981', '#f59e0b']}
|
|
|
- }]
|
|
|
- },
|
|
|
- rankList: [
|
|
|
- {userName: '达人1', inviteNum: 258},
|
|
|
- {userName: '达人2', inviteNum: 186},
|
|
|
- {userName: '达人3', inviteNum: 152},
|
|
|
- {userName: '达人4', inviteNum: 121},
|
|
|
- {userName: '达人5', inviteNum: 98}
|
|
|
- ],
|
|
|
- trendOption: {
|
|
|
- // 网格：控制图表与容器的边距，避免内容被裁剪
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- top: '10%',
|
|
|
- containLabel: true // 确保坐标轴标签不被裁剪
|
|
|
- },
|
|
|
- // X轴配置（补充样式，适配深色背景）
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['09:00', '09:10', '09:20', '09:30', '09:40', '09:50'],
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#475569' // 坐标轴线条颜色（深色背景可见）
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: '#cbd5e1' // 坐标轴文字颜色
|
|
|
- }
|
|
|
- },
|
|
|
- // Y轴配置（同上）
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#475569'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: '#cbd5e1'
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(71, 85, 105, 0.3)' // 网格线半透明
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 系列配置（补充线条和区域样式）
|
|
|
- series: [{
|
|
|
- data: [1200, 1500, 1800, 2100, 2300, 2500],
|
|
|
- type: 'line',
|
|
|
- smooth: true,
|
|
|
- // 线条样式
|
|
|
- lineStyle: {
|
|
|
- color: '#36cfc9',
|
|
|
- width: 3
|
|
|
- },
|
|
|
- // 点样式
|
|
|
- itemStyle: {
|
|
|
- color: '#36cfc9',
|
|
|
- borderWidth: 2,
|
|
|
- borderColor: '#fff' // 点边缘白色，突出显示
|
|
|
- },
|
|
|
- // 填充区域（可选，增强视觉效果）
|
|
|
- areaStyle: {
|
|
|
- color: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [{
|
|
|
- offset: 0, color: 'rgba(54, 207, 201, 0.3)'
|
|
|
- }, {
|
|
|
- offset: 1, color: 'rgba(54, 207, 201, 0)'
|
|
|
- }]
|
|
|
- }
|
|
|
- }
|
|
|
- }]
|
|
|
- },
|
|
|
- socket: null,
|
|
|
+ loading: false,
|
|
|
+ liveName: '',
|
|
|
+ startTime: null,
|
|
|
+ liveStatus: null,
|
|
|
+ liveDataFrozen: false,
|
|
|
+ replayDataFrozen: false,
|
|
|
+ totalInviteCount: 0,
|
|
|
+ interactionCards: [],
|
|
|
+ orderCards: [],
|
|
|
+ productStats: [],
|
|
|
+ rankList: [],
|
|
|
+ lastRefreshAt: null,
|
|
|
timer: null
|
|
|
- };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ lastRefreshText() {
|
|
|
+ if (!this.lastRefreshAt) return '等待首次加载'
|
|
|
+ const diff = Math.floor((Date.now() - this.lastRefreshAt) / 1000)
|
|
|
+ if (diff < 60) return `${diff} 秒前更新`
|
|
|
+ return `${Math.floor(diff / 60)} 分钟前更新`
|
|
|
+ }
|
|
|
},
|
|
|
created() {
|
|
|
- this.getInitData()
|
|
|
- this.timer = setInterval(() => {
|
|
|
- this.getInitData();
|
|
|
- }, 30000);
|
|
|
+ this.refreshData()
|
|
|
+ this.timer = setInterval(() => this.refreshData(), 30000)
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
- clearInterval(this.timer); // 组件销毁时清除定时器
|
|
|
+ if (this.timer) clearInterval(this.timer)
|
|
|
},
|
|
|
methods: {
|
|
|
- async getInitData() {
|
|
|
+ refreshData() {
|
|
|
+ if (!this.liveId) return
|
|
|
+ this.loading = true
|
|
|
dashboardData(this.liveId).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.dealData(res.data)
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ this.applyData(res.data)
|
|
|
+ this.lastRefreshAt = Date.now()
|
|
|
}
|
|
|
- });
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
},
|
|
|
- dealData(data) {
|
|
|
- // 计算总计
|
|
|
- const totalViewNum = (data.liveViewNum || 0) + (data.replayViewNum || 0);
|
|
|
- const totalLikeNum = (data.liveLikeNum || 0) + (data.replayLikeNum || 0);
|
|
|
- const totalCommentNum = (data.liveCommentNum || 0) + (data.replayCommentNum || 0);
|
|
|
-
|
|
|
- this.dataCards = [
|
|
|
- {title: '在线人数', value: data.onlineNum || 0},
|
|
|
- {
|
|
|
- title: '观看人次',
|
|
|
- value: totalViewNum,
|
|
|
- subValues: {
|
|
|
- live: data.liveViewNum || 0,
|
|
|
- replay: data.replayViewNum || 0
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '点赞数',
|
|
|
- value: totalLikeNum,
|
|
|
- subValues: {
|
|
|
- live: data.liveLikeNum || 0,
|
|
|
- replay: data.replayLikeNum || 0
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '评论数',
|
|
|
- value: totalCommentNum,
|
|
|
- subValues: {
|
|
|
- live: data.liveCommentNum || 0,
|
|
|
- replay: data.replayCommentNum || 0
|
|
|
- }
|
|
|
- }
|
|
|
+ applyData(data) {
|
|
|
+ this.liveName = data.liveName || ''
|
|
|
+ this.startTime = data.startTime || null
|
|
|
+ this.liveStatus = data.liveStatus
|
|
|
+ this.liveDataFrozen = !!data.liveDataFrozen
|
|
|
+ this.replayDataFrozen = !!data.replayDataFrozen
|
|
|
+ this.totalInviteCount = data.totalInviteCount || 0
|
|
|
+ this.rankList = data.inviteUserList || []
|
|
|
+ this.productStats = data.productStats || []
|
|
|
+
|
|
|
+ const totalView = (data.liveViewNum || 0) + (data.replayViewNum || 0)
|
|
|
+ const totalLike = (data.liveLikeNum || 0) + (data.replayLikeNum || 0)
|
|
|
+ const totalComment = Number(data.liveCommentNum || 0) + Number(data.replayCommentNum || 0)
|
|
|
+
|
|
|
+ this.interactionCards = [
|
|
|
+ { icon: '👁', label: '实时在线', value: data.onlineNum || 0, sub: `离线 ${data.offlineNum || 0}` },
|
|
|
+ { icon: '📊', label: '累计观看人数', value: data.uniqueViewCount || 0, sub: `人次 ${totalView}` },
|
|
|
+ { icon: '👍', label: '累计点赞', value: totalLike, sub: `直播 ${data.liveLikeNum || 0} / 回放 ${data.replayLikeNum || 0}` },
|
|
|
+ { icon: '💬', label: '累计评论', value: totalComment, sub: `直播 ${data.liveCommentNum || 0} / 回放 ${data.replayCommentNum || 0}` }
|
|
|
]
|
|
|
|
|
|
- // 直播新老用户占比
|
|
|
- this.liveNewOldOption = {
|
|
|
- tooltip: {trigger: 'item'},
|
|
|
- series: [{
|
|
|
- type: 'pie', radius: '70%',
|
|
|
- data: [
|
|
|
- {value: data.liveNewUserNum || 0, name: '新用户'},
|
|
|
- {value: data.liveOldUserNum || 0, name: '老用户'}
|
|
|
- ],
|
|
|
- itemStyle: {colors: ['#36cfc9', '#722ed1']}
|
|
|
- }]
|
|
|
- }
|
|
|
-
|
|
|
- // 回放新老用户占比
|
|
|
- this.replayNewOldOption = {
|
|
|
- tooltip: {trigger: 'item'},
|
|
|
- series: [{
|
|
|
- type: 'pie', radius: '70%',
|
|
|
- data: [
|
|
|
- {value: data.replayNewUserNum || 0, name: '新用户'},
|
|
|
- {value: data.replayOldUserNum || 0, name: '老用户'}
|
|
|
- ],
|
|
|
- itemStyle: {colors: ['#36cfc9', '#722ed1']}
|
|
|
- }]
|
|
|
- }
|
|
|
-
|
|
|
- // 观众来源
|
|
|
- this.sourceOption = {
|
|
|
- tooltip: {trigger: 'item'},
|
|
|
- series: [{
|
|
|
- type: 'pie', radius: '70%',
|
|
|
- data: [
|
|
|
- {value: data.shareUrlNum || 0, name: '分享链接'},
|
|
|
- {value: data.directAccessNum || 0, name: '直接访问'}
|
|
|
- ],
|
|
|
- itemStyle: {colors: ['#3b82f6', '#10b981']}
|
|
|
- }]
|
|
|
- }
|
|
|
-
|
|
|
- // 邀请用户列表
|
|
|
- this.rankList = data.inviteUserList || [];
|
|
|
+ const os = data.orderStats || {}
|
|
|
+ this.orderCards = [
|
|
|
+ { label: '累计下单数', value: os.totalOrderCount || 0 },
|
|
|
+ { label: '累计下单金额', value: this.formatMoney(os.totalOrderAmount), isMoney: true },
|
|
|
+ { label: '现存成交订单数', value: os.paidOrderCount || 0 },
|
|
|
+ { label: '现存成交额', value: this.formatMoney(os.paidOrderAmount), isMoney: true },
|
|
|
+ { label: '申请退款订单数', value: os.refundApplyCount || 0 },
|
|
|
+ { label: '申请退款金额', value: this.formatMoney(os.refundApplyAmount), isMoney: true },
|
|
|
+ { label: '待支付订单数', value: os.unpaidOrderCount || 0 },
|
|
|
+ { label: '待支付金额', value: this.formatMoney(os.unpaidOrderAmount), isMoney: true }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ formatMoney(val) {
|
|
|
+ const num = Number(val || 0)
|
|
|
+ return '¥' + num.toFixed(2)
|
|
|
},
|
|
|
+ formatTime(val) {
|
|
|
+ if (!val) return '-'
|
|
|
+ const d = new Date(val)
|
|
|
+ if (isNaN(d.getTime())) return val
|
|
|
+ const p = n => String(n).padStart(2, '0')
|
|
|
+ return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
|
|
|
+ }
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-/* 容器占满整个屏幕 */
|
|
|
-.dashboard-container {
|
|
|
- width: 100vw;
|
|
|
- height: 92vh;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #0f172a;
|
|
|
+.dashboard-page {
|
|
|
+ min-height: 92vh;
|
|
|
+ background: #f5f8fc;
|
|
|
+ color: #334155;
|
|
|
+ padding: 20px 24px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
-/* 大屏主体：100%宽高，内边距用百分比 */
|
|
|
-.dashboard {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 1%; /* 用百分比内边距，适配不同屏幕 */
|
|
|
- box-sizing: border-box;
|
|
|
- color: #fff;
|
|
|
+.dash-header {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 1%; /* 区域间间距 */
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding-bottom: 14px;
|
|
|
+ border-bottom: 1px solid #e8eef5;
|
|
|
+}
|
|
|
+
|
|
|
+.live-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 0 0 8px;
|
|
|
+ color: #1e293b;
|
|
|
}
|
|
|
|
|
|
-/* 顶部数据卡片区：高度20%，横向排列 */
|
|
|
-.data-cards {
|
|
|
- width: 100%;
|
|
|
- height: 20%;
|
|
|
+.meta-tags {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- gap: 1%; /* 卡片间间距 */
|
|
|
+ gap: 8px;
|
|
|
+ flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
-/* 每个卡片：平均分配宽度（4个卡片各占 ~24%） */
|
|
|
-.card {
|
|
|
- width: 24%; /* 100% - 3个间距(1%) = 97% → 97%/4 ≈ 24% */
|
|
|
- height: 100%;
|
|
|
- background: #1a202c;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 1%;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
+.tag {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 3px 10px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: #eef2f7;
|
|
|
+ color: #64748b;
|
|
|
}
|
|
|
|
|
|
-.card h3 {
|
|
|
- font-size: 1.2vw; /* 字体用vw单位，随屏幕宽度缩放 */
|
|
|
- margin: 0 0 5% 0;
|
|
|
+.tag-live {
|
|
|
+ background: #ecfdf5;
|
|
|
+ color: #059669;
|
|
|
}
|
|
|
|
|
|
-.card .value {
|
|
|
- font-size: 2vw;
|
|
|
- font-weight: bold;
|
|
|
- margin: 0;
|
|
|
+.tag-frozen {
|
|
|
+ background: #fffbeb;
|
|
|
+ color: #d97706;
|
|
|
}
|
|
|
|
|
|
-.card .sub-values {
|
|
|
+.header-right {
|
|
|
display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 0.8vw;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.refresh-tip {
|
|
|
+ font-size: 12px;
|
|
|
color: #94a3b8;
|
|
|
}
|
|
|
|
|
|
-.card .sub-item {
|
|
|
- padding: 3px 8px;
|
|
|
- background: rgba(54, 207, 201, 0.1);
|
|
|
- border-radius: 4px;
|
|
|
+.section {
|
|
|
+ margin-bottom: 18px;
|
|
|
}
|
|
|
|
|
|
-/* 中间内容区：高度40%，左右分栏 */
|
|
|
-.middle-content {
|
|
|
- width: 100%;
|
|
|
- height: 70%;
|
|
|
- display: flex;
|
|
|
- gap: 1%;
|
|
|
+.section-title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #64748b;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ letter-spacing: 0.3px;
|
|
|
}
|
|
|
|
|
|
-/* 左侧用户分析区：占50%宽度，内部上下分栏 */
|
|
|
-.user-analysis {
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 1%;
|
|
|
+.section-split {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 340px;
|
|
|
+ gap: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.metric-grid {
|
|
|
+ display: grid;
|
|
|
+ gap: 12px;
|
|
|
}
|
|
|
|
|
|
-/* 右侧来源与榜单区：占50%宽度，内部上下分栏 */
|
|
|
-.source-rank {
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
+.metric-grid-4 {
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 1200px) {
|
|
|
+ .metric-grid-4 { grid-template-columns: repeat(2, 1fr); }
|
|
|
+ .section-split { grid-template-columns: 1fr; }
|
|
|
+}
|
|
|
+
|
|
|
+.metric-card {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #e8eef5;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 16px;
|
|
|
+ box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
|
|
|
+ transition: border-color 0.2s, box-shadow 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.metric-card:hover {
|
|
|
+ border-color: #c7d7fe;
|
|
|
+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+.metric-card.accent-blue {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 1%;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
}
|
|
|
|
|
|
-/* 中间区域的子模块（新老用户/地域/来源/榜单）：各占50%高度 */
|
|
|
-.new-old, .region, .source, .rank {
|
|
|
- width: 100%;
|
|
|
- height: 60.5%; /* 100% - 1个间距(1%) = 99% → 99%/2 ≈ 49.5% */
|
|
|
- background: #1a202c;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 1%;
|
|
|
- box-sizing: border-box;
|
|
|
+.metric-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.metric-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #94a3b8;
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.metric-value {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1e293b;
|
|
|
+ line-height: 1.2;
|
|
|
+}
|
|
|
+
|
|
|
+.metric-value.money {
|
|
|
+ color: #ea580c;
|
|
|
+}
|
|
|
+
|
|
|
+.metric-sub {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #94a3b8;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.panel {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #e8eef5;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 16px;
|
|
|
+ box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
|
|
|
}
|
|
|
|
|
|
-/* 标题样式：用vw单位适配 */
|
|
|
-.new-old h3, .region h3, .source h3, .rank h3, .trend h3 {
|
|
|
- font-size: 1.1vw;
|
|
|
- margin: 0 0 2% 0;
|
|
|
+.invite-total {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #4f46e5;
|
|
|
+ margin-left: 8px;
|
|
|
}
|
|
|
|
|
|
-/* 达人榜单列表 */
|
|
|
.rank-list {
|
|
|
list-style: none;
|
|
|
padding: 0;
|
|
|
- height: calc(100% - 15%); /* 减去标题高度 */
|
|
|
+ margin: 0;
|
|
|
+ max-height: 320px;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
-.rank-list li {
|
|
|
+.rank-item {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- padding: 2%;
|
|
|
- margin-bottom: 1%;
|
|
|
- border-bottom: 1px solid #2d3748;
|
|
|
- font-size: 1vw;
|
|
|
-}
|
|
|
-
|
|
|
-.rank-num {
|
|
|
- width: 3vw;
|
|
|
- height: 3vw;
|
|
|
- max-width: 30px;
|
|
|
- max-height: 30px;
|
|
|
- border-radius: 50%;
|
|
|
- background: #36cfc9;
|
|
|
+ padding: 10px 8px;
|
|
|
+ border-bottom: 1px solid #f1f5f9;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.rank-badge {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 6px;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
align-items: center;
|
|
|
- font-size: 0.8vw;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 700;
|
|
|
+ background: #f1f5f9;
|
|
|
+ color: #64748b;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
-/* 底部趋势图：高度20% */
|
|
|
-.trend {
|
|
|
- width: 100%;
|
|
|
- height: 20%;
|
|
|
- background: #1a202c;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 1%;
|
|
|
- box-sizing: border-box;
|
|
|
+.rank-1 { background: #fef3c7; color: #b45309; }
|
|
|
+.rank-2 { background: #e2e8f0; color: #475569; }
|
|
|
+.rank-3 { background: #ffedd5; color: #c2410c; }
|
|
|
+
|
|
|
+.rank-name {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 12px;
|
|
|
+ color: #334155;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.rank-count {
|
|
|
+ color: #4f46e5;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-rank {
|
|
|
+ text-align: center;
|
|
|
+ color: #94a3b8;
|
|
|
+ padding: 40px 0;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.dark-table {
|
|
|
+ background: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+.dark-table >>> .el-table {
|
|
|
+ background: transparent;
|
|
|
+ color: #334155;
|
|
|
+}
|
|
|
+
|
|
|
+.dark-table >>> .el-table th {
|
|
|
+ background: #f8fafc !important;
|
|
|
+ color: #64748b;
|
|
|
+ border-bottom: 1px solid #e8eef5;
|
|
|
+}
|
|
|
+
|
|
|
+.dark-table >>> .el-table td {
|
|
|
+ background: #fff !important;
|
|
|
+ border-bottom: 1px solid #f1f5f9;
|
|
|
+}
|
|
|
+
|
|
|
+.dark-table >>> .el-table tr {
|
|
|
+ background: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.dark-table >>> .el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
|
+ background: #f8fafc !important;
|
|
|
}
|
|
|
|
|
|
-/* ECharts图表容器：占满父元素 */
|
|
|
-::v-deep .chart-container {
|
|
|
- width: 100% !important;
|
|
|
- height: calc(100% - 15%) !important; /* 减去标题高度 */
|
|
|
+.dark-table >>> .el-table::before {
|
|
|
+ display: none;
|
|
|
}
|
|
|
</style>
|
