fix: 统计分析页面，ui问题修复。
This commit is contained in:
tianyongbao
@@ -145,8 +145,7 @@
|
|||||||
<u-transition :show="filterPanel" mode="fade">
|
<u-transition :show="filterPanel" mode="fade">
|
||||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||||
<view class="filter-panel-content">
|
<view class="filter-panel-content">
|
||||||
|
<view class="filter-title">交易日期</view>
|
||||||
<view class="select-header">交易日期</view>
|
|
||||||
<view class="selcet-content" style="padding: 0 24rpx">
|
<view class="selcet-content" style="padding: 0 24rpx">
|
||||||
<u-input
|
<u-input
|
||||||
:disabled="true"
|
:disabled="true"
|
||||||
@@ -175,21 +174,29 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="btn-box">
|
<view class="btn-box">
|
||||||
<u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
|
<view class="btn-reset" @click="resetQuery()">
|
||||||
<u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
|
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||||
|
<text>重置</text>
|
||||||
|
</view>
|
||||||
|
<view class="btn-confirm" @click="searchSubmit()">
|
||||||
|
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||||
|
<text>确定</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<u-datetime-picker
|
|
||||||
:closeOnClickOverlay="true"
|
|
||||||
:show="timeShow"
|
|
||||||
v-model="time"
|
|
||||||
mode="date"
|
|
||||||
:minDate="-2209017600000"
|
|
||||||
@close="openOrCloseDate"
|
|
||||||
@cancel="openOrCloseDate"
|
|
||||||
@confirm="confirm"
|
|
||||||
></u-datetime-picker>
|
|
||||||
</view>
|
</view>
|
||||||
</u-transition>
|
</u-transition>
|
||||||
|
|
||||||
|
<!-- 日期选择器 -->
|
||||||
|
<u-datetime-picker
|
||||||
|
:closeOnClickOverlay="true"
|
||||||
|
:show="timeShow"
|
||||||
|
v-model="time"
|
||||||
|
mode="date"
|
||||||
|
:minDate="-2209017600000"
|
||||||
|
@close="openOrCloseDate"
|
||||||
|
@cancel="openOrCloseDate"
|
||||||
|
@confirm="confirm"
|
||||||
|
></u-datetime-picker>
|
||||||
|
|
||||||
<!-- 曲线图展示 -->
|
<!-- 曲线图展示 -->
|
||||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||||
@@ -738,69 +745,123 @@ page {
|
|||||||
color: #667eea;
|
color: #667eea;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 96rpx;
|
top: 90rpx;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 999;
|
||||||
.filter-panel-content {
|
|
||||||
background-color: #ffffff;
|
.filter-panel-content {
|
||||||
padding: 0 30rpx 30rpx;
|
background-color: #ffffff;
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
padding: 0 30rpx 30rpx;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
.filter-title {
|
|
||||||
color: #2c3e50;
|
.filter-title {
|
||||||
font-size: 32rpx;
|
color: #2c3e50;
|
||||||
font-weight: 600;
|
font-size: 32rpx;
|
||||||
padding: 32rpx 0 24rpx 20rpx;
|
font-weight: 600;
|
||||||
position: relative;
|
padding: 32rpx 0 24rpx 20rpx;
|
||||||
display: flex;
|
position: relative;
|
||||||
align-items: center;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
&::before {
|
|
||||||
content: '';
|
&::before {
|
||||||
width: 6rpx;
|
content: '';
|
||||||
height: 32rpx;
|
width: 6rpx;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
height: 32rpx;
|
||||||
border-radius: 3rpx;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
margin-right: 12rpx;
|
border-radius: 3rpx;
|
||||||
flex-shrink: 0;
|
margin-right: 12rpx;
|
||||||
}
|
flex-shrink: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.state-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
.state-item {
|
|
||||||
width: 210rpx;
|
|
||||||
height: 72rpx;
|
|
||||||
border: 1rpx solid rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 72rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 72rpx;
|
|
||||||
margin: 0 20rpx 20rpx 0;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background-color: rgba(222, 241, 255, 1);
|
|
||||||
border: 1rpx solid rgba(22, 119, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-box {
|
.state-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20rpx;
|
flex-wrap: wrap;
|
||||||
padding: 24rpx 30rpx;
|
justify-content: flex-start;
|
||||||
background-color: #fff;
|
gap: 16rpx;
|
||||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
|
||||||
|
.state-item {
|
||||||
|
padding: 0 32rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
border: 2rpx solid #e8edf3;
|
||||||
|
border-radius: 34rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 68rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
color: #ffffff;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||||
|
|
||||||
|
.btn-reset,
|
||||||
|
.btn-confirm {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-reset {
|
||||||
|
flex: 1;
|
||||||
|
background: #f5f7fa;
|
||||||
|
border: 2rpx solid #dcdfe6;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-confirm {
|
||||||
|
flex: 1;
|
||||||
|
background: #667eea;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -693,12 +693,13 @@ page {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 96rpx;
|
top: 90rpx;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
.filter-panel-content {
|
.filter-panel-content {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
|
|||||||
@@ -149,8 +149,7 @@
|
|||||||
<u-transition :show="filterPanel" mode="fade">
|
<u-transition :show="filterPanel" mode="fade">
|
||||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||||
<view class="filter-panel-content">
|
<view class="filter-panel-content">
|
||||||
|
<view class="filter-title">交易日期</view>
|
||||||
<view class="select-header">交易日期</view>
|
|
||||||
<view class="selcet-content" style="padding: 0 24rpx">
|
<view class="selcet-content" style="padding: 0 24rpx">
|
||||||
<u-input
|
<u-input
|
||||||
:disabled="true"
|
:disabled="true"
|
||||||
@@ -179,21 +178,29 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="btn-box">
|
<view class="btn-box">
|
||||||
<u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
|
<view class="btn-reset" @click="resetQuery()">
|
||||||
<u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
|
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||||
|
<text>重置</text>
|
||||||
|
</view>
|
||||||
|
<view class="btn-confirm" @click="searchSubmit()">
|
||||||
|
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||||
|
<text>确定</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<u-datetime-picker
|
|
||||||
:closeOnClickOverlay="true"
|
|
||||||
:show="timeShow"
|
|
||||||
v-model="time"
|
|
||||||
mode="date"
|
|
||||||
:minDate="-2209017600000"
|
|
||||||
@close="openOrCloseDate"
|
|
||||||
@cancel="openOrCloseDate"
|
|
||||||
@confirm="confirm"
|
|
||||||
></u-datetime-picker>
|
|
||||||
</view>
|
</view>
|
||||||
</u-transition>
|
</u-transition>
|
||||||
|
|
||||||
|
<!-- 日期选择器 -->
|
||||||
|
<u-datetime-picker
|
||||||
|
:closeOnClickOverlay="true"
|
||||||
|
:show="timeShow"
|
||||||
|
v-model="time"
|
||||||
|
mode="date"
|
||||||
|
:minDate="-2209017600000"
|
||||||
|
@close="openOrCloseDate"
|
||||||
|
@cancel="openOrCloseDate"
|
||||||
|
@confirm="confirm"
|
||||||
|
></u-datetime-picker>
|
||||||
|
|
||||||
<!-- 曲线图展示 -->
|
<!-- 曲线图展示 -->
|
||||||
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
<view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
|
||||||
@@ -796,69 +803,123 @@ page {
|
|||||||
color: #667eea;
|
color: #667eea;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 96rpx;
|
top: 180rpx;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 999;
|
||||||
.filter-panel-content {
|
|
||||||
background-color: #ffffff;
|
.filter-panel-content {
|
||||||
padding: 0 30rpx 30rpx;
|
background-color: #ffffff;
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
padding: 0 30rpx 30rpx;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
.filter-title {
|
|
||||||
color: #2c3e50;
|
.filter-title {
|
||||||
font-size: 32rpx;
|
color: #2c3e50;
|
||||||
font-weight: 600;
|
font-size: 32rpx;
|
||||||
padding: 32rpx 0 24rpx 20rpx;
|
font-weight: 600;
|
||||||
position: relative;
|
padding: 32rpx 0 24rpx 20rpx;
|
||||||
display: flex;
|
position: relative;
|
||||||
align-items: center;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
&::before {
|
|
||||||
content: '';
|
&::before {
|
||||||
width: 6rpx;
|
content: '';
|
||||||
height: 32rpx;
|
width: 6rpx;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
height: 32rpx;
|
||||||
border-radius: 3rpx;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
margin-right: 12rpx;
|
border-radius: 3rpx;
|
||||||
flex-shrink: 0;
|
margin-right: 12rpx;
|
||||||
}
|
flex-shrink: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.state-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
.state-item {
|
|
||||||
width: 210rpx;
|
|
||||||
height: 72rpx;
|
|
||||||
border: 1rpx solid rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 72rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 72rpx;
|
|
||||||
margin: 0 20rpx 20rpx 0;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background-color: rgba(222, 241, 255, 1);
|
|
||||||
border: 1rpx solid rgba(22, 119, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-box {
|
.state-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20rpx;
|
flex-wrap: wrap;
|
||||||
padding: 24rpx 30rpx;
|
justify-content: flex-start;
|
||||||
background-color: #fff;
|
gap: 16rpx;
|
||||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
|
||||||
|
.state-item {
|
||||||
|
padding: 0 32rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
border: 2rpx solid #e8edf3;
|
||||||
|
border-radius: 34rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 68rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
color: #ffffff;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||||
|
|
||||||
|
.btn-reset,
|
||||||
|
.btn-confirm {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-reset {
|
||||||
|
flex: 1;
|
||||||
|
background: #f5f7fa;
|
||||||
|
border: 2rpx solid #dcdfe6;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-confirm {
|
||||||
|
flex: 1;
|
||||||
|
background: #667eea;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -218,7 +218,7 @@
|
|||||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||||
<view class="filter-panel-content">
|
<view class="filter-panel-content">
|
||||||
|
|
||||||
<view class="select-header">交易日期</view>
|
<view class="filter-title">交易日期</view>
|
||||||
<view class="selcet-content" style="padding: 0 24rpx">
|
<view class="selcet-content" style="padding: 0 24rpx">
|
||||||
<u-input
|
<u-input
|
||||||
:disabled="true"
|
:disabled="true"
|
||||||
@@ -893,70 +893,79 @@ page {
|
|||||||
color: #667eea;
|
color: #667eea;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 96rpx;
|
top: 180rpx;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 999;
|
||||||
.filter-panel-content {
|
|
||||||
background-color: #ffffff;
|
.filter-panel-content {
|
||||||
padding: 0 30rpx 30rpx;
|
background-color: #ffffff;
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
padding: 0 30rpx 30rpx;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
.filter-title {
|
|
||||||
color: #2c3e50;
|
.filter-title {
|
||||||
font-size: 32rpx;
|
color: #2c3e50;
|
||||||
font-weight: 600;
|
font-size: 32rpx;
|
||||||
padding: 32rpx 0 24rpx 20rpx;
|
font-weight: 600;
|
||||||
position: relative;
|
padding: 32rpx 0 24rpx 20rpx;
|
||||||
display: flex;
|
position: relative;
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
width: 6rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border-radius: 3rpx;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.state-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
.state-item {
|
|
||||||
width: 210rpx;
|
|
||||||
height: 72rpx;
|
|
||||||
border: 1rpx solid rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 72rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 72rpx;
|
|
||||||
margin: 0 20rpx 20rpx 0;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background-color: rgba(222, 241, 255, 1);
|
|
||||||
border: 1rpx solid rgba(22, 119, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-box {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20rpx;
|
align-items: center;
|
||||||
padding: 24rpx 30rpx;
|
|
||||||
background-color: #fff;
|
&::before {
|
||||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
content: '';
|
||||||
|
width: 6rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border-radius: 3rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.state-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 16rpx;
|
||||||
|
|
||||||
|
.state-item {
|
||||||
|
padding: 0 32rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
line-height: 68rpx;
|
||||||
|
border: 2rpx solid #e8edf3;
|
||||||
|
border-radius: 68rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #2c3e50;
|
||||||
|
background: #ffffff;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.96);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||||
|
border: 2rpx solid #667eea;
|
||||||
|
color: #667eea;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,11 +9,14 @@
|
|||||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||||
<text>筛选</text>
|
<text>筛选</text>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-sticky>
|
||||||
|
|
||||||
<u-transition :show="filterPanel" mode="fade">
|
<u-transition :show="filterPanel" mode="fade">
|
||||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||||
<view class="filter-panel-content">
|
<view class="filter-panel-content">
|
||||||
|
|
||||||
<view class="select-header">记录日期</view>
|
<view class="filter-title">记录日期</view>
|
||||||
<view class="selcet-content" style="padding: 0 24rpx">
|
<view class="selcet-content" style="padding: 0 24rpx">
|
||||||
<u-input
|
<u-input
|
||||||
:disabled="true"
|
:disabled="true"
|
||||||
@@ -63,8 +66,7 @@
|
|||||||
></u-datetime-picker>
|
></u-datetime-picker>
|
||||||
</view>
|
</view>
|
||||||
</u-transition>
|
</u-transition>
|
||||||
</view>
|
|
||||||
</u-sticky>
|
|
||||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||||
<u-list-item v-for="(item, index) in listData" :key="index">
|
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||||
<view class="list-item">
|
<view class="list-item">
|
||||||
@@ -290,112 +292,120 @@ page {
|
|||||||
color: #667eea;
|
color: #667eea;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 96rpx;
|
top: 96rpx;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
|
|
||||||
.filter-panel-content {
|
.filter-panel-content {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
padding: 0 30rpx 30rpx;
|
padding: 0 30rpx 30rpx;
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
|
||||||
.filter-title {
|
.filter-title {
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 32rpx 0 24rpx 20rpx;
|
padding: 32rpx 0 24rpx 20rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 6rpx;
|
width: 6rpx;
|
||||||
height: 32rpx;
|
height: 32rpx;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
border-radius: 3rpx;
|
border-radius: 3rpx;
|
||||||
margin-right: 12rpx;
|
margin-right: 12rpx;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.state-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
.state-item {
|
|
||||||
width: 210rpx;
|
|
||||||
height: 72rpx;
|
|
||||||
border: 1rpx solid rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 72rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 72rpx;
|
|
||||||
margin: 0 20rpx 20rpx 0;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background-color: rgba(222, 241, 255, 1);
|
|
||||||
border: 1rpx solid rgba(22, 119, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-box {
|
.state-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20rpx;
|
flex-wrap: wrap;
|
||||||
padding: 24rpx 30rpx;
|
justify-content: flex-start;
|
||||||
background-color: #fff;
|
gap: 16rpx;
|
||||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
|
||||||
|
.state-item {
|
||||||
.btn-reset,
|
padding: 0 32rpx;
|
||||||
.btn-confirm {
|
height: 68rpx;
|
||||||
display: flex;
|
line-height: 68rpx;
|
||||||
align-items: center;
|
border: 2rpx solid #e8edf3;
|
||||||
justify-content: center;
|
border-radius: 68rpx;
|
||||||
gap: 8rpx;
|
text-align: center;
|
||||||
height: 88rpx;
|
font-size: 28rpx;
|
||||||
border-radius: 12rpx;
|
color: #2c3e50;
|
||||||
font-size: 30rpx;
|
background: #ffffff;
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.98);
|
transform: scale(0.96);
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||||
|
border: 2rpx solid #667eea;
|
||||||
|
color: #667eea;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||||
|
|
||||||
|
.btn-reset,
|
||||||
|
.btn-confirm {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
.btn-reset {
|
&:active {
|
||||||
flex: 1;
|
transform: scale(0.98);
|
||||||
background: #f5f7fa;
|
opacity: 0.9;
|
||||||
border: 2rpx solid #dcdfe6;
|
|
||||||
|
|
||||||
text {
|
|
||||||
color: #606266;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-confirm {
|
text {
|
||||||
flex: 1;
|
line-height: 1;
|
||||||
background: #667eea;
|
}
|
||||||
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
}
|
||||||
border: none;
|
|
||||||
|
.btn-reset {
|
||||||
text {
|
flex: 1;
|
||||||
color: #ffffff;
|
background: #f5f7fa;
|
||||||
}
|
border: 2rpx solid #dcdfe6;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-confirm {
|
||||||
|
flex: 1;
|
||||||
|
background: #667eea;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -203,7 +203,7 @@
|
|||||||
@click="viewMode = 'amountList'; btSecondClick()"
|
@click="viewMode = 'amountList'; btSecondClick()"
|
||||||
>
|
>
|
||||||
<uni-icons type="star" size="16" :color="viewMode === 'amountList' ? '#667eea' : '#999'"></uni-icons>
|
<uni-icons type="star" size="16" :color="viewMode === 'amountList' ? '#667eea' : '#999'"></uni-icons>
|
||||||
<text>收款</text>
|
<text>近6月收款</text>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<view
|
||||||
:class="['switch-item', { 'active': viewMode === 'line' }]"
|
:class="['switch-item', { 'active': viewMode === 'line' }]"
|
||||||
@@ -745,61 +745,86 @@ page {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
background: #F5F5F5;
|
background: #F5F5F5;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
margin-right: 36rpx;
|
margin-right: 36rpx;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 96rpx;
|
top: 180rpx;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 999;
|
||||||
.filter-panel-content {
|
|
||||||
background-color: #ffff;
|
.filter-panel-content {
|
||||||
padding: 0 30rpx 30rpx;
|
background-color: #ffffff;
|
||||||
|
padding: 0 30rpx 30rpx;
|
||||||
.filter-title {
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
color: #000000;
|
|
||||||
font-size: 30rpx;
|
.filter-title {
|
||||||
font-weight: 500;
|
color: #2c3e50;
|
||||||
padding: 30rpx 0;
|
font-size: 32rpx;
|
||||||
}
|
font-weight: 600;
|
||||||
|
padding: 32rpx 0 24rpx 20rpx;
|
||||||
.state-list {
|
position: relative;
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
.state-item {
|
|
||||||
width: 210rpx;
|
|
||||||
height: 72rpx;
|
|
||||||
border: 1rpx solid rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 72rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 72rpx;
|
|
||||||
margin: 0 20rpx 20rpx 0;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background-color: rgba(222, 241, 255, 1);
|
|
||||||
border: 1rpx solid rgba(22, 119, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-box {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 24rpx 30rpx;
|
align-items: center;
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
&::before {
|
||||||
|
content: '';
|
||||||
|
width: 6rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border-radius: 3rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.state-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 16rpx;
|
||||||
|
|
||||||
|
.state-item {
|
||||||
|
padding: 0 32rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
line-height: 68rpx;
|
||||||
|
border: 2rpx solid #e8edf3;
|
||||||
|
border-radius: 68rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #2c3e50;
|
||||||
|
background: #ffffff;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.96);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||||
|
border: 2rpx solid #667eea;
|
||||||
|
color: #667eea;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -151,7 +151,7 @@
|
|||||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||||
<view class="filter-panel-content">
|
<view class="filter-panel-content">
|
||||||
|
|
||||||
<view class="select-header">交易日期</view>
|
<view class="filter-title">交易日期</view>
|
||||||
<view class="selcet-content" style="padding: 0 24rpx">
|
<view class="selcet-content" style="padding: 0 24rpx">
|
||||||
<u-input
|
<u-input
|
||||||
:disabled="true"
|
:disabled="true"
|
||||||
@@ -792,70 +792,79 @@ page {
|
|||||||
color: #667eea;
|
color: #667eea;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 96rpx;
|
top: 180rpx;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 999;
|
||||||
.filter-panel-content {
|
|
||||||
background-color: #ffffff;
|
.filter-panel-content {
|
||||||
padding: 0 30rpx 30rpx;
|
background-color: #ffffff;
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
padding: 0 30rpx 30rpx;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
.filter-title {
|
|
||||||
color: #2c3e50;
|
.filter-title {
|
||||||
font-size: 32rpx;
|
color: #2c3e50;
|
||||||
font-weight: 600;
|
font-size: 32rpx;
|
||||||
padding: 32rpx 0 24rpx 20rpx;
|
font-weight: 600;
|
||||||
position: relative;
|
padding: 32rpx 0 24rpx 20rpx;
|
||||||
display: flex;
|
position: relative;
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
width: 6rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border-radius: 3rpx;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.state-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
.state-item {
|
|
||||||
width: 210rpx;
|
|
||||||
height: 72rpx;
|
|
||||||
border: 1rpx solid rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 72rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 72rpx;
|
|
||||||
margin: 0 20rpx 20rpx 0;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background-color: rgba(222, 241, 255, 1);
|
|
||||||
border: 1rpx solid rgba(22, 119, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-box {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20rpx;
|
align-items: center;
|
||||||
padding: 24rpx 30rpx;
|
|
||||||
background-color: #fff;
|
&::before {
|
||||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
content: '';
|
||||||
|
width: 6rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border-radius: 3rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.state-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 16rpx;
|
||||||
|
|
||||||
|
.state-item {
|
||||||
|
padding: 0 32rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
line-height: 68rpx;
|
||||||
|
border: 2rpx solid #e8edf3;
|
||||||
|
border-radius: 68rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #2c3e50;
|
||||||
|
background: #ffffff;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.96);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||||
|
border: 2rpx solid #667eea;
|
||||||
|
color: #667eea;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -135,7 +135,7 @@
|
|||||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||||
<view class="filter-panel-content">
|
<view class="filter-panel-content">
|
||||||
|
|
||||||
<view class="select-header">交易日期</view>
|
<view class="filter-title">交易日期</view>
|
||||||
<view class="selcet-content" style="padding: 0 24rpx">
|
<view class="selcet-content" style="padding: 0 24rpx">
|
||||||
<u-input
|
<u-input
|
||||||
:disabled="true"
|
:disabled="true"
|
||||||
@@ -805,70 +805,79 @@ page {
|
|||||||
color: #667eea;
|
color: #667eea;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 96rpx;
|
top: 96rpx;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 999;
|
||||||
.filter-panel-content {
|
|
||||||
background-color: #ffffff;
|
.filter-panel-content {
|
||||||
padding: 0 30rpx 30rpx;
|
background-color: #ffffff;
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
padding: 0 30rpx 30rpx;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
.filter-title {
|
|
||||||
color: #2c3e50;
|
.filter-title {
|
||||||
font-size: 32rpx;
|
color: #2c3e50;
|
||||||
font-weight: 600;
|
font-size: 32rpx;
|
||||||
padding: 32rpx 0 24rpx 20rpx;
|
font-weight: 600;
|
||||||
position: relative;
|
padding: 32rpx 0 24rpx 20rpx;
|
||||||
display: flex;
|
position: relative;
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
width: 6rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border-radius: 3rpx;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.state-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
.state-item {
|
|
||||||
width: 210rpx;
|
|
||||||
height: 72rpx;
|
|
||||||
border: 1rpx solid rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 72rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 72rpx;
|
|
||||||
margin: 0 20rpx 20rpx 0;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background-color: rgba(222, 241, 255, 1);
|
|
||||||
border: 1rpx solid rgba(22, 119, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-box {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20rpx;
|
align-items: center;
|
||||||
padding: 24rpx 30rpx;
|
|
||||||
background-color: #fff;
|
&::before {
|
||||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
content: '';
|
||||||
|
width: 6rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border-radius: 3rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.state-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 16rpx;
|
||||||
|
|
||||||
|
.state-item {
|
||||||
|
padding: 0 32rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
line-height: 68rpx;
|
||||||
|
border: 2rpx solid #e8edf3;
|
||||||
|
border-radius: 68rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #2c3e50;
|
||||||
|
background: #ffffff;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.96);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||||
|
border: 2rpx solid #667eea;
|
||||||
|
color: #667eea;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -97,7 +97,7 @@
|
|||||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||||
<view class="filter-panel-content">
|
<view class="filter-panel-content">
|
||||||
|
|
||||||
<view class="select-header">开户日期</view>
|
<view class="filter-title">开户日期</view>
|
||||||
<view class="selcet-content" style="padding: 0 24rpx">
|
<view class="selcet-content" style="padding: 0 24rpx">
|
||||||
<u-input
|
<u-input
|
||||||
:disabled="true"
|
:disabled="true"
|
||||||
@@ -745,112 +745,120 @@ page {
|
|||||||
color: #667eea;
|
color: #667eea;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 96rpx;
|
top: 96rpx;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
|
|
||||||
.filter-panel-content {
|
.filter-panel-content {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
padding: 0 30rpx 30rpx;
|
padding: 0 30rpx 30rpx;
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
|
|
||||||
.filter-title {
|
.filter-title {
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
padding: 32rpx 0 24rpx 20rpx;
|
padding: 32rpx 0 24rpx 20rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 6rpx;
|
width: 6rpx;
|
||||||
height: 32rpx;
|
height: 32rpx;
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
border-radius: 3rpx;
|
border-radius: 3rpx;
|
||||||
margin-right: 12rpx;
|
margin-right: 12rpx;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.state-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
.state-item {
|
|
||||||
width: 210rpx;
|
|
||||||
height: 72rpx;
|
|
||||||
border: 1rpx solid rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 72rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 72rpx;
|
|
||||||
margin: 0 20rpx 20rpx 0;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background-color: rgba(222, 241, 255, 1);
|
|
||||||
border: 1rpx solid rgba(22, 119, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-box {
|
.state-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20rpx;
|
flex-wrap: wrap;
|
||||||
padding: 24rpx 30rpx;
|
justify-content: flex-start;
|
||||||
background-color: #fff;
|
gap: 16rpx;
|
||||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
|
||||||
|
.state-item {
|
||||||
.btn-reset,
|
padding: 0 32rpx;
|
||||||
.btn-confirm {
|
height: 68rpx;
|
||||||
display: flex;
|
line-height: 68rpx;
|
||||||
align-items: center;
|
border: 2rpx solid #e8edf3;
|
||||||
justify-content: center;
|
border-radius: 68rpx;
|
||||||
gap: 8rpx;
|
text-align: center;
|
||||||
height: 88rpx;
|
font-size: 28rpx;
|
||||||
border-radius: 12rpx;
|
color: #2c3e50;
|
||||||
font-size: 30rpx;
|
background: #ffffff;
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.98);
|
transform: scale(0.96);
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||||
|
border: 2rpx solid #667eea;
|
||||||
|
color: #667eea;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||||
|
|
||||||
|
.btn-reset,
|
||||||
|
.btn-confirm {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
.btn-reset {
|
&:active {
|
||||||
flex: 1;
|
transform: scale(0.98);
|
||||||
background: #f5f7fa;
|
opacity: 0.9;
|
||||||
border: 2rpx solid #dcdfe6;
|
|
||||||
|
|
||||||
text {
|
|
||||||
color: #606266;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-confirm {
|
text {
|
||||||
flex: 1;
|
line-height: 1;
|
||||||
background: #667eea;
|
}
|
||||||
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
}
|
||||||
border: none;
|
|
||||||
|
.btn-reset {
|
||||||
text {
|
flex: 1;
|
||||||
color: #ffffff;
|
background: #f5f7fa;
|
||||||
}
|
border: 2rpx solid #dcdfe6;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-confirm {
|
||||||
|
flex: 1;
|
||||||
|
background: #667eea;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -91,7 +91,7 @@
|
|||||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
||||||
<view class="filter-panel-content">
|
<view class="filter-panel-content">
|
||||||
|
|
||||||
<view class="select-header">刷卡日期</view>
|
<view class="filter-title">刷卡日期</view>
|
||||||
<view class="selcet-content" style="padding: 0 24rpx">
|
<view class="selcet-content" style="padding: 0 24rpx">
|
||||||
<u-input
|
<u-input
|
||||||
:disabled="true"
|
:disabled="true"
|
||||||
@@ -746,70 +746,79 @@ page {
|
|||||||
color: #667eea;
|
color: #667eea;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-panel {
|
.filter-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 96rpx;
|
top: 180rpx;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 999;
|
||||||
.filter-panel-content {
|
|
||||||
background-color: #ffffff;
|
.filter-panel-content {
|
||||||
padding: 0 30rpx 30rpx;
|
background-color: #ffffff;
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
padding: 0 30rpx 30rpx;
|
||||||
|
border-radius: 16rpx 16rpx 0 0;
|
||||||
.filter-title {
|
|
||||||
color: #2c3e50;
|
.filter-title {
|
||||||
font-size: 32rpx;
|
color: #2c3e50;
|
||||||
font-weight: 600;
|
font-size: 32rpx;
|
||||||
padding: 32rpx 0 24rpx 20rpx;
|
font-weight: 600;
|
||||||
position: relative;
|
padding: 32rpx 0 24rpx 20rpx;
|
||||||
display: flex;
|
position: relative;
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
width: 6rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border-radius: 3rpx;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.state-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
.state-item {
|
|
||||||
width: 210rpx;
|
|
||||||
height: 72rpx;
|
|
||||||
border: 1rpx solid rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 72rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 72rpx;
|
|
||||||
margin: 0 20rpx 20rpx 0;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background-color: rgba(222, 241, 255, 1);
|
|
||||||
border: 1rpx solid rgba(22, 119, 255, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-box {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20rpx;
|
align-items: center;
|
||||||
padding: 24rpx 30rpx;
|
|
||||||
background-color: #fff;
|
&::before {
|
||||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
content: '';
|
||||||
|
width: 6rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border-radius: 3rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.state-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 16rpx;
|
||||||
|
|
||||||
|
.state-item {
|
||||||
|
padding: 0 32rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
line-height: 68rpx;
|
||||||
|
border: 2rpx solid #e8edf3;
|
||||||
|
border-radius: 68rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #2c3e50;
|
||||||
|
background: #ffffff;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.96);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||||
|
border: 2rpx solid #667eea;
|
||||||
|
color: #667eea;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user