Browse Source

字体放大;容器改为左右结构;

songjie/feature-20260120101758-dc后台
songjie 4 weeks ago
parent
commit
8a7bf94912
  1. 50
      src/views/PlatformData/UserOverview.vue

50
src/views/PlatformData/UserOverview.vue

@ -36,27 +36,30 @@
<div class="right-stats-col">
<!-- 会员总数 -->
<div class="stat-card orange-gradient small-card">
<div class="top-row">
<div class="left-part">
<div class="card-title">
<el-icon><Trophy /></el-icon>
</div>
<div class="card-value-small">{{ overviewData.member }}</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)">
{{ getGrowthText(overviewData.member_growth) }}
</div>
</div>
</div>
</div>
<!-- 非会员总数 -->
<div class="stat-card blue-gradient small-card">
<div class="top-row">
<div class="left-part">
<div class="card-title">
<el-icon><User /></el-icon>
</div>
<div class="card-value-small">{{ overviewData.normal }}</div>
</div>
<div class="right-part">
<div class="card-value-small">{{ overviewData.normal }}</div>
<div class="card-tag-wrapper">
<div class="card-tag" :class="getGrowthClass(overviewData.normal_growth)">
{{ getGrowthText(overviewData.normal_growth) }}
@ -65,6 +68,7 @@
</div>
</div>
</div>
</div>
<!-- 用户构成比例 -->
<div class="composition-section">
@ -622,14 +626,28 @@ onMounted(() => {
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start; /* 改为从顶部开始布局 */
flex-direction: row;
justify-content: space-between;
align-items: center;
color: #fff;
position: relative; /* 确保绝对定位相对于卡片 */
}
.left-part {
display: flex;
align-items: center;
align-self: flex-start; /* 标题垂直居上 */
}
.right-part {
display: flex;
flex-direction: column;
align-items: center; /* 改为水平居中 */
justify-content: center;
}
.card-title {
font-size: 24px; /* 字体放大 */
font-size: 34px; /* 字体放大 */
font-weight: bold; /* 加粗 */
display: flex;
align-items: center;
@ -637,6 +655,12 @@ onMounted(() => {
margin-bottom: 20px; /* 增加底部间距 */
width: 100%; /* 占满宽度 */
}
.small-card .card-title {
width: auto;
margin-bottom: 0;
}
.card-value {
font-size: 64px;
font-weight: bold;
@ -652,10 +676,16 @@ onMounted(() => {
gap: 10px; /* 数字和百分比之间的间距 */
}
.card-value-small {
font-size: 48px;
font-size: 64px;
font-weight: bold;
margin-left: auto;
}
.small-card .card-value-small {
margin-left: 0;
line-height: 1.2;
}
.top-row {
display: flex;
align-items: center;
@ -666,6 +696,10 @@ onMounted(() => {
justify-content: flex-end;
margin-top: 10px;
}
.small-card .card-tag-wrapper {
margin-top: 8px;
}
.card-tag {
background-color: #fff;
padding: 8px 16px; /* 增加高度 */

Loading…
Cancel
Save