refactor: 数据中枢去除冗余包裹并收敛纯div行到AppStack
This commit is contained in:
parent
79bc0860cb
commit
56d715a7bd
@ -92,7 +92,7 @@ const mockDelta = computed(() => {
|
||||
/>
|
||||
|
||||
<!-- ============ 移动端首页 ============ -->
|
||||
<div v-else-if="isMobile && d" class="home">
|
||||
<template v-else-if="isMobile && d">
|
||||
<header class="home__hello">
|
||||
<h1>{{ greeting }}</h1>
|
||||
</header>
|
||||
@ -114,10 +114,10 @@ const mockDelta = computed(() => {
|
||||
|
||||
<!-- 今日学习 -->
|
||||
<AppCard class="home-study">
|
||||
<div class="home-study__row">
|
||||
<AppStack direction="row" class="home-study__row">
|
||||
<span class="home-study__label">今日学习</span>
|
||||
<strong class="home-study__value">{{ formatMinutes(d.todayMinutes) }}</strong>
|
||||
</div>
|
||||
</AppStack>
|
||||
</AppCard>
|
||||
|
||||
<!-- 三指标 -->
|
||||
@ -144,7 +144,7 @@ const mockDelta = computed(() => {
|
||||
|
||||
<!-- 待复习错题 -->
|
||||
<AppCard class="home-review">
|
||||
<div class="home-review__row">
|
||||
<AppStack direction="row" gap="space-3" class="home-review__row">
|
||||
<div class="home-review__info">
|
||||
<span class="home-review__icon"><AppIcon name="alert" :size="18" /></span>
|
||||
<div class="home-review__meta">
|
||||
@ -153,7 +153,7 @@ const mockDelta = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
<RouterLink class="home-review__more" to="/practice/wrong">去复习</RouterLink>
|
||||
</div>
|
||||
</AppStack>
|
||||
</AppCard>
|
||||
|
||||
<!-- 本周薄弱考点 -->
|
||||
@ -163,25 +163,25 @@ const mockDelta = computed(() => {
|
||||
<AppCard title="最近模考" icon="chart">
|
||||
<AppEmpty v-if="!latestMock" icon="chart" title="暂无模考成绩" description="录入行测模考成绩后展示最近一次。" />
|
||||
<div v-else class="home-mock">
|
||||
<div class="home-mock__head">
|
||||
<AppStack direction="row" gap="space-3" class="home-mock__head">
|
||||
<span class="home-mock__name">{{ latestMock.name }}</span>
|
||||
<span class="home-mock__date">{{ formatDateShort(latestMock.date) }} · 行测</span>
|
||||
</div>
|
||||
<div class="home-mock__score">
|
||||
</AppStack>
|
||||
<AppStack direction="row" gap="space-3" class="home-mock__score">
|
||||
<strong class="num">{{ latestMock.total }}</strong>
|
||||
<span class="home-mock__delta" :class="mockDelta !== null && mockDelta >= 0 ? 'is-up' : 'is-down'">
|
||||
<template v-if="mockDelta !== null">较上次 {{ mockDelta >= 0 ? '+' : '' }}{{ mockDelta }}</template>
|
||||
</span>
|
||||
</div>
|
||||
</AppStack>
|
||||
<div class="home-mock__goal">
|
||||
距目标 {{ targetScore }} 分 · 还差 {{ Math.max(0, targetScore - latestMock.total) }} 分
|
||||
</div>
|
||||
</div>
|
||||
</AppCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ============ 桌面端数据中枢 ============ -->
|
||||
<div v-else-if="d" class="hub">
|
||||
<template v-else-if="d">
|
||||
<AppPageHeader
|
||||
title="数据中枢"
|
||||
:subtitle="`备考第 ${d.studyDays} 天:距离国考还有 ${d.daysToExam} 天:已连续打卡 ${d.streakDays} 天`"
|
||||
@ -233,7 +233,7 @@ const mockDelta = computed(() => {
|
||||
<MasteryCard :mastery="masteryItems" />
|
||||
<WeakPointsCard :weak-points="weakItems" compact />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AppStack>
|
||||
</template>
|
||||
|
||||
@ -244,11 +244,6 @@ const mockDelta = computed(() => {
|
||||
}
|
||||
|
||||
/* ---------- 桌面 ---------- */
|
||||
.hub {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
.hub-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
@ -270,11 +265,6 @@ const mockDelta = computed(() => {
|
||||
}
|
||||
|
||||
/* ---------- 移动 ---------- */
|
||||
.home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.home__hello h1 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
@ -313,9 +303,8 @@ const mockDelta = computed(() => {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.home-study__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
--stack-align: center;
|
||||
--stack-justify: space-between;
|
||||
}
|
||||
.home-study__label {
|
||||
font-size: var(--fs-subtitle);
|
||||
@ -383,10 +372,8 @@ const mockDelta = computed(() => {
|
||||
border: 1px solid var(--primary);
|
||||
}
|
||||
.home-review__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
--stack-align: center;
|
||||
--stack-justify: space-between;
|
||||
}
|
||||
.home-review__info {
|
||||
display: flex;
|
||||
@ -424,10 +411,8 @@ const mockDelta = computed(() => {
|
||||
flex: none;
|
||||
}
|
||||
.home-mock__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
--stack-align: center;
|
||||
--stack-justify: space-between;
|
||||
}
|
||||
.home-mock__name {
|
||||
font-size: var(--fs-subtitle);
|
||||
@ -439,9 +424,7 @@ const mockDelta = computed(() => {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.home-mock__score {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-3);
|
||||
--stack-align: baseline;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
.home-mock__score .num {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user