Browse Source

Merge branch 'master' into milestone-20260207-AI复盘二期

songjie/feature-20260203170638-学习页面配置
zhaowenkang 2 weeks ago
parent
commit
ffe4f51ee8
  1. 8
      src/views/PlatformData/UserLoginStats.vue
  2. 54
      src/views/PlatformData/UserOverview.vue

8
src/views/PlatformData/UserLoginStats.vue

@ -8,20 +8,20 @@
>
登录数据
</div>
<!-- <div
<div
class="tab-item"
:class="{ active: activeTab === 'regionalData' }"
@click="activeTab = 'regionalData'"
>
各地区登录数据
</div> -->
</div>
</div>
<!-- 登录数据 Tab -->
<div v-show="activeTab === 'loginData'" class="tab-content" v-loading="loading">
<!-- 搜索栏 -->
<div class="search-bar">
<!-- <div class="search-label">地区</div>
<div class="search-label">地区</div>
<el-select v-model="selectedRegion" placeholder="请选择所属地区" style="width: 200px; margin-right: 20px;">
<el-option label="全部" value="all" />
<el-option
@ -30,7 +30,7 @@
:label="item.label"
:value="item.value"
/>
</el-select> -->
</el-select>
<div class="search-label">时间段查询</div>
<el-date-picker

54
src/views/PlatformData/UserOverview.vue

@ -45,16 +45,13 @@
</div>
</div>
<div class="right-stats-col">
<div class="right-stats-grid">
<!-- 会员总数 -->
<div class="stat-card orange-gradient small-card">
<div class="small-card-content">
<div class="left-part">
<div class="card-title">
<el-icon><Trophy /></el-icon>
<el-icon><Trophy /></el-icon>
</div>
</div>
<div class="right-part">
<div class="card-value-small">{{ overviewData.member }}</div>
<div class="card-tag-wrapper">
<div class="card-tag" :class="getGrowthClass(overviewData.member_growth)">
@ -63,10 +60,24 @@
</div>
</div>
</div>
<!-- 游客总数 -->
<div class="stat-card purple-gradient small-card">
<div class="small-card-content">
<div class="card-title">
<el-icon><User /></el-icon>
</div>
<div class="card-value-small">{{ overviewData.visitor }}</div>
<div class="card-tag-wrapper">
<div class="card-tag" :class="getGrowthClass(overviewData.vistor_growth)">
{{ getGrowthText(overviewData.vistor_growth) }}
</div>
</div>
</div>
</div>
<!-- 非网注册和登录总数 -->
<div class="stat-card blue-gradient small-card">
<div class="stat-card blue-gradient small-card full-width">
<div class="small-card-row">
<!-- 非网注册总数 -->
<div class="small-card-item">
@ -248,6 +259,8 @@ const overviewData = ref({
total_login_growth: '0%',
member: 0,
member_growth: '0%',
visitor: 0,
vistor_growth: '0%',
normal_register: 0,
normal_reg_growth: '0%',
normal_login: 0,
@ -654,7 +667,7 @@ onMounted(() => {
.big-card {
flex: 1;
height: 360px;
height: auto;
border-radius: 12px;
padding: 24px;
display: flex;
@ -675,11 +688,34 @@ onMounted(() => {
background: linear-gradient(135deg, #9BB7FC 0%, #66a6ff 100%);
}
.right-stats-col {
.right-stats-grid {
flex: 2;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 20px;
}
.right-stats-grid .full-width {
grid-column: 1 / -1;
}
.right-stats-grid .small-card-content {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
height: 100%;
}
.right-stats-grid .small-card-content .card-title {
margin-bottom: 15px;
text-align: center;
}
.right-stats-grid .small-card-content .card-value-small {
margin-bottom: 10px;
text-align: center;
}
.small-card {
flex: 1;

Loading…
Cancel
Save