feat(logs): add overview section and enhance layout for better data visibility
This commit is contained in:
+14
-10
@@ -16,14 +16,6 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<scroll-view
|
|
||||||
class="scroll-container"
|
|
||||||
scroll-y
|
|
||||||
:refresher-enabled="true"
|
|
||||||
:refresher-triggered="logsStore.refreshing"
|
|
||||||
@refresherrefresh="onRefresh"
|
|
||||||
@scrolltolower="onLoadMore"
|
|
||||||
>
|
|
||||||
<view class="overview">
|
<view class="overview">
|
||||||
<view class="overview-item overview-primary">
|
<view class="overview-item overview-primary">
|
||||||
<text class="overview-label">今日已抽</text>
|
<text class="overview-label">今日已抽</text>
|
||||||
@@ -46,6 +38,14 @@
|
|||||||
<text class="section-note">{{ currentDateFilterLabel }} · 按日期倒序</text>
|
<text class="section-note">{{ currentDateFilterLabel }} · 按日期倒序</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<scroll-view
|
||||||
|
class="scroll-container"
|
||||||
|
scroll-y
|
||||||
|
:refresher-enabled="true"
|
||||||
|
:refresher-triggered="logsStore.refreshing"
|
||||||
|
@refresherrefresh="onRefresh"
|
||||||
|
@scrolltolower="onLoadMore"
|
||||||
|
>
|
||||||
<view v-if="logsStore.loading && logsStore.logs.length === 0" class="skeleton">
|
<view v-if="logsStore.loading && logsStore.logs.length === 0" class="skeleton">
|
||||||
<view v-for="i in 3" :key="i" class="skeleton-item">
|
<view v-for="i in 3" :key="i" class="skeleton-item">
|
||||||
<view class="skeleton-dot"></view>
|
<view class="skeleton-dot"></view>
|
||||||
@@ -359,13 +359,14 @@ onShareAppMessage(() => {
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.page {
|
.page {
|
||||||
min-height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background:
|
background:
|
||||||
linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 54%, #E9F0EC 100%);
|
linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 54%, #E9F0EC 100%);
|
||||||
padding: 0 32rpx;
|
padding: 0 32rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-sticky {
|
.filters-sticky {
|
||||||
@@ -413,7 +414,8 @@ onShareAppMessage(() => {
|
|||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1.25fr 1fr 1fr;
|
grid-template-columns: 1.25fr 1fr 1fr;
|
||||||
gap: 14rpx;
|
gap: 14rpx;
|
||||||
margin-bottom: 24rpx;
|
margin-bottom: 20rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overview-item {
|
.overview-item {
|
||||||
@@ -470,6 +472,7 @@ onShareAppMessage(() => {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 16rpx;
|
gap: 16rpx;
|
||||||
margin-bottom: 18rpx;
|
margin-bottom: 18rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-label {
|
.section-label {
|
||||||
@@ -487,6 +490,7 @@ onShareAppMessage(() => {
|
|||||||
|
|
||||||
.scroll-container {
|
.scroll-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
height: 0;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user