blandarebiter/AIGC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整图表布局 - 将用户转化率图移到日活用户趋势图下方，形成垂直布局

Browse Source
This commit is contained in:
AIGC Developer
2025-10-22 09:23:39 +08:00
parent fb94de28c2
commit 7b7975e438
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
demo/frontend/src/views/Home.vue
View File

@@ -99,7 +99,7 @@
<!-- 图表区域 --> <!-- 图表区域 -->
<section class="charts-section"> <section class="charts-section">
<!-- 日活用户趋势图 --> <!-- 日活用户趋势图 -->
<div class="chart-card"> <div class="chart-card full-width">
<div class="chart-header"> <div class="chart-header">
<h3>日活用户趋势</h3> <h3>日活用户趋势</h3>
<div class="year-selector"> <div class="year-selector">
@@ -179,7 +179,7 @@
</div> </div>
<!-- 用户转化率图 --> <!-- 用户转化率图 -->
<div class="chart-card"> <div class="chart-card full-width">
<div class="chart-header"> <div class="chart-header">
<h3>用户转化率</h3> <h3>用户转化率</h3>
<div class="year-selector"> <div class="year-selector">
@@ -542,11 +542,15 @@ onMounted(() => {
/* 图表区域 */ /* 图表区域 */
.charts-section { .charts-section {
padding: 0 24px 24px; padding: 0 24px 24px;
display: grid; display: flex;
grid-template-columns: 2fr 1fr; flex-direction: column;
gap: 24px; gap: 24px;
} }
.chart-card.full-width {
width: 100%;
}
.chart-card { .chart-card {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
@@ -732,10 +736,6 @@ onMounted(() => {
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.charts-section {
grid-template-columns: 1fr;
}
.kpi-section { .kpi-section {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }