|
|
@@ -4,17 +4,16 @@
|
|
|
<!-- 欢迎区域 -->
|
|
|
<div class="welcome-banner">
|
|
|
<div class="welcome-content">
|
|
|
- <h1 class="welcome-title">欢迎回来!👋</h1>
|
|
|
+ <h1 class="welcome-title">欢迎回来!</h1>
|
|
|
<p class="welcome-desc">今天是 {{ todayDate }},来看看今天的运营数据吧</p>
|
|
|
</div>
|
|
|
- <div class="welcome-illustration">📊</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
|
|
|
<!-- 统计卡片 -->
|
|
|
<el-row :gutter="20" class="stats-row">
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
- <el-card class="stat-card" shadow="hover">
|
|
|
- <div class="stat-icon" style="background: linear-gradient(135deg, #FF8C42, #FFA66B);">
|
|
|
+ <el-card class="stat-card" shadow="never">
|
|
|
+ <div class="stat-icon" style="background: #FFFBE6; color: #D48806;">
|
|
|
<i class="el-icon-s-home"></i>
|
|
|
</div>
|
|
|
<div class="stat-info">
|
|
|
@@ -24,8 +23,8 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
- <el-card class="stat-card" shadow="hover">
|
|
|
- <div class="stat-icon" style="background: linear-gradient(135deg, #6366F1, #818CF8);">
|
|
|
+ <el-card class="stat-card" shadow="never">
|
|
|
+ <div class="stat-icon" style="background: #E6F4FF; color: #1677FF;">
|
|
|
<i class="el-icon-user"></i>
|
|
|
</div>
|
|
|
<div class="stat-info">
|
|
|
@@ -35,8 +34,8 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
- <el-card class="stat-card" shadow="hover">
|
|
|
- <div class="stat-icon" style="background: linear-gradient(135deg, #F59E0B, #FBBF24);">
|
|
|
+ <el-card class="stat-card" shadow="never">
|
|
|
+ <div class="stat-icon" style="background: #FFFBE6; color: #D48806;">
|
|
|
<i class="el-icon-s-custom"></i>
|
|
|
</div>
|
|
|
<div class="stat-info">
|
|
|
@@ -46,8 +45,8 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
- <el-card class="stat-card" shadow="hover">
|
|
|
- <div class="stat-icon" style="background: linear-gradient(135deg, #10B981, #34D399);">
|
|
|
+ <el-card class="stat-card" shadow="never">
|
|
|
+ <div class="stat-icon" style="background: #F6FFED; color: #389E0D;">
|
|
|
<i class="el-icon-s-cooperation"></i>
|
|
|
</div>
|
|
|
<div class="stat-info">
|
|
|
@@ -61,7 +60,7 @@
|
|
|
<!-- 第二行统计卡片 -->
|
|
|
<el-row :gutter="20" class="stats-row">
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
- <el-card class="stat-card todo-stat-card" shadow="hover" @click.native="stats.pendingGuideCount > 0 && $router.push('/review-center?tab=guide')">
|
|
|
+ <el-card class="stat-card todo-stat-card" shadow="never" @click.native="stats.pendingGuideCount > 0 && $router.push('/review-center?tab=guide')">
|
|
|
<div class="stat-icon" :class="stats.pendingGuideCount > 0 ? 'todo-heart' : 'todo-disabled'">
|
|
|
<i class="el-icon-s-check"></i>
|
|
|
</div>
|
|
|
@@ -75,7 +74,7 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
- <el-card class="stat-card todo-stat-card" shadow="hover" @click.native="stats.pendingPackageCount > 0 && $router.push('/review-center?tab=package')">
|
|
|
+ <el-card class="stat-card todo-stat-card" shadow="never" @click.native="stats.pendingPackageCount > 0 && $router.push('/review-center?tab=package')">
|
|
|
<div class="stat-icon" :class="stats.pendingPackageCount > 0 ? 'todo-danger' : 'todo-disabled'">
|
|
|
<i class="el-icon-s-goods"></i>
|
|
|
</div>
|
|
|
@@ -89,8 +88,8 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
- <el-card class="stat-card" shadow="hover">
|
|
|
- <div class="stat-icon" style="background: linear-gradient(135deg, #0EA5E9, #38BDF8);">
|
|
|
+ <el-card class="stat-card" shadow="never">
|
|
|
+ <div class="stat-icon" style="background: #E6F4FF; color: #1677FF;">
|
|
|
<i class="el-icon-user-solid"></i>
|
|
|
</div>
|
|
|
<div class="stat-info">
|
|
|
@@ -100,8 +99,8 @@
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
|
- <el-card class="stat-card" shadow="hover">
|
|
|
- <div class="stat-icon" style="background: linear-gradient(135deg, #8B5CF6, #A78BFA);">
|
|
|
+ <el-card class="stat-card" shadow="never">
|
|
|
+ <div class="stat-icon" style="background: #E6F4FF; color: #1677FF;">
|
|
|
<i class="el-icon-s-home"></i>
|
|
|
</div>
|
|
|
<div class="stat-info">
|
|
|
@@ -117,7 +116,7 @@
|
|
|
<el-col :span="16">
|
|
|
<el-card class="chart-card" v-loading="trendLoading">
|
|
|
<div slot="header" class="card-header">
|
|
|
- <span class="card-title">📈 用户与家庭增长趋势(近30天)</span>
|
|
|
+ <span class="card-title"> 用户与家庭增长趋势(近30天)</span>
|
|
|
</div>
|
|
|
<div ref="trendChart" class="echarts-container"></div>
|
|
|
</el-card>
|
|
|
@@ -125,7 +124,7 @@
|
|
|
<el-col :span="8">
|
|
|
<el-card class="chart-card" v-loading="memberLoading">
|
|
|
<div slot="header" class="card-header">
|
|
|
- <span class="card-title">🍩 会员等级分布</span>
|
|
|
+ <span class="card-title"> 会员等级分布</span>
|
|
|
</div>
|
|
|
<div ref="memberPieChart" class="echarts-container"></div>
|
|
|
</el-card>
|
|
|
@@ -135,9 +134,9 @@
|
|
|
<!-- 内容区域 -->
|
|
|
<el-row :gutter="20" class="content-row">
|
|
|
<el-col :span="14">
|
|
|
- <el-card class="content-card" shadow="hover">
|
|
|
+ <el-card class="content-card" shadow="never">
|
|
|
<div slot="header" class="card-header">
|
|
|
- <span class="card-title">📋 最近任务</span>
|
|
|
+ <span class="card-title"> 最近任务</span>
|
|
|
<el-button type="text" size="small" @click="$router.push('/tasks')">
|
|
|
查看全部 →
|
|
|
</el-button>
|
|
|
@@ -168,9 +167,9 @@
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="10">
|
|
|
-<el-card class="content-card system-health-card" shadow="hover">
|
|
|
+<el-card class="content-card system-health-card" shadow="never">
|
|
|
<div slot="header" class="card-header">
|
|
|
- <span class="card-title">⚙️ 系统状态</span>
|
|
|
+ <span class="card-title"> 系统状态</span>
|
|
|
<el-tag size="mini" type="success">正常运行</el-tag>
|
|
|
</div>
|
|
|
<div class="health-grid">
|
|
|
@@ -604,14 +603,15 @@ initMemberPieChart() {
|
|
|
|
|
|
/* 欢迎横幅 */
|
|
|
.welcome-banner {
|
|
|
- background: linear-gradient(135deg, #6366F1, #8B5CF6);
|
|
|
- border-radius: 16px;
|
|
|
- padding: 32px;
|
|
|
+ background: #E6F4FF; color: #1677FF;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 24px 32px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 24px;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #1E293B;
|
|
|
+ border: 1px solid #E6F4FF;
|
|
|
}
|
|
|
|
|
|
.welcome-title {
|
|
|
@@ -622,7 +622,7 @@ initMemberPieChart() {
|
|
|
|
|
|
.welcome-desc {
|
|
|
font-size: 16px;
|
|
|
- opacity: 0.9;
|
|
|
+ color: rgba(0,0,0,0.65);
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
@@ -636,8 +636,8 @@ initMemberPieChart() {
|
|
|
}
|
|
|
|
|
|
.stat-card {
|
|
|
- border-radius: 12px;
|
|
|
- border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #F0F0F0;
|
|
|
}
|
|
|
|
|
|
.stat-card ::v-deep .el-card__body {
|
|
|
@@ -659,24 +659,25 @@ initMemberPieChart() {
|
|
|
.stat-icon {
|
|
|
width: 56px;
|
|
|
height: 56px;
|
|
|
- border-radius: 12px;
|
|
|
+ border-radius: 8px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 24px;
|
|
|
- color: #fff;
|
|
|
+ color: #1677FF;
|
|
|
+ background: #E6F4FF;
|
|
|
margin-right: 16px;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
-.stat-icon.blue { background: linear-gradient(135deg, #6366F1, #818CF8); }
|
|
|
-.stat-icon.green { background: linear-gradient(135deg, #10B981, #34D399); }
|
|
|
-.stat-icon.orange { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
|
|
|
-.stat-icon.purple { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }
|
|
|
-.stat-icon.todo-warning { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
|
|
|
-.stat-icon.todo-heart { background: linear-gradient(135deg, #FF6B9D, #FF8FB3); }
|
|
|
-.stat-icon.todo-danger { background: linear-gradient(135deg, #EF4444, #F87171); }
|
|
|
-.stat-icon.todo-disabled { background: linear-gradient(135deg, #CBD5E1, #94A3B8); }
|
|
|
+.stat-icon.blue { background:#E6F4FF; color:#1677FF; }
|
|
|
+.stat-icon.green { background: #F6FFED; color: #389E0D; }
|
|
|
+.stat-icon.orange { background: #FFFBE6; color: #D48806; }
|
|
|
+.stat-icon.purple { background:#E6F4FF; color:#1677FF; }
|
|
|
+.stat-icon.todo-warning { background: #FFFBE6; color: #D48806; }
|
|
|
+.stat-icon.todo-heart { background: #FFF1F0; color: #CF1322; }
|
|
|
+.stat-icon.todo-danger { background: #FFF1F0; color: #CF1322; }
|
|
|
+.stat-icon.todo-disabled { background: #F5F5F5; color: rgba(0,0,0,0.45); }
|
|
|
|
|
|
.stat-value {
|
|
|
font-size: 28px;
|
|
|
@@ -693,7 +694,7 @@ initMemberPieChart() {
|
|
|
|
|
|
.stat-trend {
|
|
|
font-size: 12px;
|
|
|
- color: #6366F1;
|
|
|
+ color: #1677FF;
|
|
|
margin-top: 8px;
|
|
|
}
|
|
|
|
|
|
@@ -707,8 +708,8 @@ initMemberPieChart() {
|
|
|
}
|
|
|
|
|
|
.content-card {
|
|
|
- border-radius: 12px;
|
|
|
- border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #F0F0F0;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
@@ -738,8 +739,8 @@ initMemberPieChart() {
|
|
|
|
|
|
/* 系统健康面板 */
|
|
|
.system-health-card {
|
|
|
- border-radius: 12px;
|
|
|
- border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #F0F0F0;
|
|
|
}
|
|
|
|
|
|
.health-grid {
|
|
|
@@ -768,31 +769,31 @@ initMemberPieChart() {
|
|
|
}
|
|
|
|
|
|
.health-icon--status {
|
|
|
- background: linear-gradient(135deg, #10B981, #059669);
|
|
|
+ background: #F6FFED; color: #389E0D;
|
|
|
}
|
|
|
|
|
|
.health-icon--version {
|
|
|
- background: linear-gradient(135deg, #6366F1, #4F46E5);
|
|
|
+ background: #E6F4FF; color: #1677FF;
|
|
|
}
|
|
|
|
|
|
.health-icon--time {
|
|
|
- background: linear-gradient(135deg, #F59E0B, #D97706);
|
|
|
+ background: #FFFBE6; color: #D48806;
|
|
|
}
|
|
|
|
|
|
.health-icon--api {
|
|
|
- background: linear-gradient(135deg, #0EA5E9, #0284C7);
|
|
|
+ background: #E6F4FF; color: #1677FF;
|
|
|
}
|
|
|
|
|
|
.health-icon--uptime {
|
|
|
- background: linear-gradient(135deg, #8B5CF6, #7C3AED);
|
|
|
+ background: #E6F4FF; color: #1677FF;
|
|
|
}
|
|
|
|
|
|
.health-icon--cpu {
|
|
|
- background: linear-gradient(135deg, #EF4444, #F87171);
|
|
|
+ background: #FFF1F0; color: #CF1322;
|
|
|
}
|
|
|
|
|
|
.health-icon--memory {
|
|
|
- background: linear-gradient(135deg, #10B981, #059669);
|
|
|
+ background: #F6FFED; color: #389E0D;
|
|
|
}
|
|
|
|
|
|
.health-info {
|
|
|
@@ -849,7 +850,7 @@ initMemberPieChart() {
|
|
|
|
|
|
.quick-item i {
|
|
|
font-size: 24px;
|
|
|
- color: #6366F1;
|
|
|
+ color: #1677FF;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
@@ -908,35 +909,35 @@ initMemberPieChart() {
|
|
|
}
|
|
|
|
|
|
.action-icon--primary {
|
|
|
- background: linear-gradient(135deg, #FF8C42, #FF6B35);
|
|
|
+ background: #FFFBE6; color: #D48806;
|
|
|
}
|
|
|
|
|
|
.action-icon--family {
|
|
|
- background: linear-gradient(135deg, #6366F1, #4F46E5);
|
|
|
+ background: #E6F4FF; color: #1677FF;
|
|
|
}
|
|
|
|
|
|
.action-icon--guide {
|
|
|
- background: linear-gradient(135deg, #F59E0B, #D97706);
|
|
|
+ background: #FFFBE6; color: #D48806;
|
|
|
}
|
|
|
|
|
|
.action-icon--package {
|
|
|
- background: linear-gradient(135deg, #10B981, #059669);
|
|
|
+ background: #F6FFED; color: #389E0D;
|
|
|
}
|
|
|
|
|
|
.action-icon--reward {
|
|
|
- background: linear-gradient(135deg, #FF6B9D, #E11D48);
|
|
|
+ background: #FFF1F0; color: #CF1322;
|
|
|
}
|
|
|
|
|
|
.action-icon--user {
|
|
|
- background: linear-gradient(135deg, #0EA5E9, #0284C7);
|
|
|
+ background: #E6F4FF; color: #1677FF;
|
|
|
}
|
|
|
|
|
|
.action-icon--audit {
|
|
|
- background: linear-gradient(135deg, #8B5CF6, #7C3AED);
|
|
|
+ background: #E6F4FF; color: #1677FF;
|
|
|
}
|
|
|
|
|
|
.action-icon--settings {
|
|
|
- background: linear-gradient(135deg, #6B7280, #4B5563);
|
|
|
+ background: #F5F5F5; color: rgba(0,0,0,0.45);
|
|
|
}
|
|
|
|
|
|
.action-label {
|
|
|
@@ -950,8 +951,8 @@ initMemberPieChart() {
|
|
|
margin-bottom: 24px;
|
|
|
}
|
|
|
.chart-card {
|
|
|
- border-radius: 12px;
|
|
|
- border: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #F0F0F0;
|
|
|
min-height: 320px;
|
|
|
}
|
|
|
.echarts-container {
|
|
|
@@ -982,7 +983,7 @@ initMemberPieChart() {
|
|
|
font-weight: 600;
|
|
|
margin: 14px 0 6px;
|
|
|
color: #1E293B;
|
|
|
- border-left: 3px solid #6366F1;
|
|
|
+ border-left: 3px solid #1677FF;
|
|
|
padding-left: 8px;
|
|
|
}
|
|
|
.changelog-body h3 {
|
|
|
@@ -1024,7 +1025,7 @@ initMemberPieChart() {
|
|
|
padding: 0;
|
|
|
}
|
|
|
.changelog-body a {
|
|
|
- color: #6366F1;
|
|
|
+ color: #1677FF;
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
.changelog-body a:hover {
|