|
@@ -1,14 +1,16 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="gift-stats app-content">
|
|
<view class="gift-stats app-content">
|
|
|
<view class="period-row">
|
|
<view class="period-row">
|
|
|
- <text class="label">时间周期</text>
|
|
|
|
|
|
|
+ <view class="label">时间</view>
|
|
|
<view
|
|
<view
|
|
|
v-for="p in periodTabs"
|
|
v-for="p in periodTabs"
|
|
|
:key="p.value"
|
|
:key="p.value"
|
|
|
class="pill"
|
|
class="pill"
|
|
|
:class="{ active: period === p.value }"
|
|
:class="{ active: period === p.value }"
|
|
|
@click="changePeriod(p.value)"
|
|
@click="changePeriod(p.value)"
|
|
|
- >{{ p.name }}</view>
|
|
|
|
|
|
|
+ >
|
|
|
|
|
+ <text class="pill-text">{{ p.name }}</text>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="table-block">
|
|
<view class="table-block">
|
|
@@ -52,10 +54,10 @@ export default {
|
|
|
name: 'BirthdayGiftStats',
|
|
name: 'BirthdayGiftStats',
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- period: 'today',
|
|
|
|
|
|
|
+ period: 'tomorrow',
|
|
|
periodTabs: [
|
|
periodTabs: [
|
|
|
- { name: '今日', value: 'today' },
|
|
|
|
|
- { name: '明日', value: 'tomorrow' },
|
|
|
|
|
|
|
+ { name: '今天', value: 'today' },
|
|
|
|
|
+ { name: '明天', value: 'tomorrow' },
|
|
|
{ name: '近一周', value: 'week' },
|
|
{ name: '近一周', value: 'week' },
|
|
|
{ name: '全部', value: 'all' }
|
|
{ name: '全部', value: 'all' }
|
|
|
],
|
|
],
|
|
@@ -103,16 +105,32 @@ export default {
|
|
|
margin-bottom: 24upx;
|
|
margin-bottom: 24upx;
|
|
|
}
|
|
}
|
|
|
.label {
|
|
.label {
|
|
|
- font-size: 28upx;
|
|
|
|
|
- margin-right: 16upx;
|
|
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ height: 68upx;
|
|
|
|
|
+ font-size: 32upx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+ margin-right: 20upx;
|
|
|
}
|
|
}
|
|
|
.pill {
|
|
.pill {
|
|
|
- padding: 10upx 24upx;
|
|
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ height: 68upx;
|
|
|
|
|
+ padding: 0 28upx;
|
|
|
margin-right: 12upx;
|
|
margin-right: 12upx;
|
|
|
- font-size: 26upx;
|
|
|
|
|
- border-radius: 8upx;
|
|
|
|
|
|
|
+ margin-bottom: 12upx;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ border-radius: 34upx;
|
|
|
background: #e8f8ef;
|
|
background: #e8f8ef;
|
|
|
}
|
|
}
|
|
|
|
|
+.pill-text {
|
|
|
|
|
+ font-size: 30upx;
|
|
|
|
|
+ line-height: 1;
|
|
|
|
|
+ color: inherit;
|
|
|
|
|
+}
|
|
|
.pill.active {
|
|
.pill.active {
|
|
|
background: #08b955;
|
|
background: #08b955;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
@@ -124,13 +142,13 @@ export default {
|
|
|
margin-bottom: 24upx;
|
|
margin-bottom: 24upx;
|
|
|
}
|
|
}
|
|
|
.block-title {
|
|
.block-title {
|
|
|
- font-size: 30upx;
|
|
|
|
|
|
|
+ font-size: 36upx;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
margin-bottom: 8upx;
|
|
margin-bottom: 8upx;
|
|
|
}
|
|
}
|
|
|
.block-desc {
|
|
.block-desc {
|
|
|
color: #888;
|
|
color: #888;
|
|
|
- font-size: 24upx;
|
|
|
|
|
|
|
+ font-size: 26upx;
|
|
|
line-height: 34upx;
|
|
line-height: 34upx;
|
|
|
margin-bottom: 20upx;
|
|
margin-bottom: 20upx;
|
|
|
}
|
|
}
|