diff --git a/src/pages/statistic/bill/creditBillAnalysis/index.vue b/src/pages/statistic/bill/creditBillAnalysis/index.vue index d89d984..50f6c99 100644 --- a/src/pages/statistic/bill/creditBillAnalysis/index.vue +++ b/src/pages/statistic/bill/creditBillAnalysis/index.vue @@ -118,53 +118,62 @@ - - - - - 账单时间 - - - - - - - - - - - - - - - - + + + + + + 账单时间 + + + + + + + + + + + + + 重置 + + + + 确定 + + + + + + + @@ -759,70 +768,123 @@ page { color: #667eea; } } + } - .filter-panel { - width: 100%; - position: absolute; - left: 0; - top: 96rpx; - background-color: rgba(0, 0, 0, 0.5); - z-index: 999; - - .filter-panel-content { - background-color: #ffffff; - padding: 0 30rpx 30rpx; - border-radius: 16rpx 16rpx 0 0; - - .filter-title { - color: #2c3e50; - font-size: 32rpx; - font-weight: 600; - padding: 32rpx 0 24rpx 20rpx; - position: relative; - display: flex; - 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); - } + .filter-panel { + width: 100%; + position: absolute; + left: 0; + top: 180rpx; + background-color: rgba(0, 0, 0, 0.5); + z-index: 999; + + .filter-panel-content { + background-color: #ffffff; + padding: 0 30rpx 30rpx; + border-radius: 16rpx 16rpx 0 0; + + .filter-title { + color: #2c3e50; + font-size: 32rpx; + font-weight: 600; + padding: 32rpx 0 24rpx 20rpx; + position: relative; + display: flex; + 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; } } - - .btn-box { + + .state-list { display: flex; - gap: 20rpx; - padding: 24rpx 30rpx; - background-color: #fff; - box-shadow: 0rpx -10rpx 20rpx #EEEEEE; + flex-wrap: wrap; + justify-content: flex-start; + gap: 16rpx; + + .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; + } } } } diff --git a/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue b/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue index c416ffa..12d442a 100644 --- a/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue +++ b/src/pages/statistic/bill/creditInstallmentAnalysis/index.vue @@ -128,54 +128,62 @@ - - - - - 还款日期 - - - - - - - - - - - - - - - - + + + + + 还款日期 + + + + + + + + + + + + + 重置 + + + + 确定 + + + + + + + @@ -775,71 +783,127 @@ page { color: #667eea; } } - - .filter-panel { - width: 100%; - position: absolute; - left: 0; - top: 96rpx; - background-color: rgba(0, 0, 0, 0.5); - - .filter-panel-content { - background-color: #ffff; - padding: 0 30rpx 30rpx; - - .filter-title { - color: #2c3e50; - font-size: 32rpx; - font-weight: 600; - padding: 32rpx 0 24rpx 20rpx; - position: relative; - display: flex; - 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); - } + } + + .filter-panel { + width: 100%; + position: absolute; + left: 0; + top: 180rpx; + background-color: rgba(0, 0, 0, 0.5); + z-index: 999; + + .filter-panel-content { + background-color: #ffffff; + padding: 0 30rpx 30rpx; + border-radius: 16rpx 16rpx 0 0; + + .filter-title { + color: #2c3e50; + font-size: 32rpx; + font-weight: 600; + padding: 32rpx 0 24rpx 20rpx; + position: relative; + display: flex; + 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; } } - - .btn-box { + + .state-list { display: flex; - padding: 24rpx 30rpx; - background-color: #fff; - box-shadow: 0rpx -10rpx 20rpx #EEEEEE; + flex-wrap: wrap; + justify-content: flex-start; + gap: 16rpx; + + .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; + } } } } - + .list-item { margin: 0 24rpx 16rpx; background-color: #fff; diff --git a/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue b/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue index 60e6886..7982382 100644 --- a/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue +++ b/src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue @@ -90,52 +90,59 @@ - - - - 分期时间 - - - - - - - - - - - - - - - - + + + 分期时间 + + + + + + + + + + + + + 重置 + + + + 确定 + + + + + + + @@ -729,67 +736,123 @@ page { color: #667eea; } } - - .filter-panel { - width: 100%; - position: absolute; - left: 0; - top: 96rpx; - background-color: rgba(0, 0, 0, 0.5); - - .filter-panel-content { - background-color: #ffff; - padding: 0 30rpx 30rpx; - - .filter-title { - color: #2c3e50; - font-size: 32rpx; - font-weight: 600; - padding: 32rpx 0 24rpx 20rpx; - position: relative; - display: flex; - 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); - } + } + + .filter-panel { + width: 100%; + position: absolute; + left: 0; + top: 180rpx; + background-color: rgba(0, 0, 0, 0.5); + z-index: 999; + + .filter-panel-content { + background-color: #ffffff; + padding: 0 30rpx 30rpx; + border-radius: 16rpx 16rpx 0 0; + + .filter-title { + color: #2c3e50; + font-size: 32rpx; + font-weight: 600; + padding: 32rpx 0 24rpx 20rpx; + position: relative; + display: flex; + 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; } } - - .btn-box { + + .state-list { display: flex; - padding: 24rpx 30rpx; - background-color: #fff; - box-shadow: 0rpx -10rpx 20rpx #EEEEEE; + flex-wrap: wrap; + justify-content: flex-start; + gap: 16rpx; + + .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; + } } } } diff --git a/src/pages/statistic/bill/creditRecordAnalysis/index.vue b/src/pages/statistic/bill/creditRecordAnalysis/index.vue index a87ed29..e4f2b6d 100644 --- a/src/pages/statistic/bill/creditRecordAnalysis/index.vue +++ b/src/pages/statistic/bill/creditRecordAnalysis/index.vue @@ -176,21 +176,29 @@ - - + + + 重置 + + + + 确定 + - + + + @@ -728,17 +736,20 @@ page { line-height: 1; } } - - .filter-panel { + } + + .filter-panel { width: 100%; position: absolute; left: 0; top: 96rpx; background-color: rgba(0, 0, 0, 0.5); + z-index: 999; .filter-panel-content { - background-color: #ffff; + background-color: #ffffff; padding: 0 30rpx 30rpx; + border-radius: 16rpx 16rpx 0 0; .filter-title { color: #2c3e50; @@ -786,13 +797,54 @@ page { .btn-box { display: flex; + gap: 20rpx; padding: 24rpx 30rpx; background-color: #fff; box-shadow: 0rpx -10rpx 20rpx #EEEEEE; + + .btn-reset, + .btn-confirm { + flex: 1; + height: 80rpx; + border-radius: 12rpx; + display: flex; + align-items: center; + justify-content: center; + gap: 8rpx; + transition: all 0.3s ease; + + text { + font-size: 28rpx; + font-weight: 500; + line-height: 1; + } + + &:active { + transform: scale(0.98); + opacity: 0.8; + } + } + + .btn-reset { + background: #f5f7fa; + border: 2rpx solid #dcdfe6; + + text { + color: #606266; + } + } + + .btn-confirm { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2); + + text { + color: #ffffff; + } + } } - } } - + .list-item { margin: 0 24rpx 16rpx; background-color: #fff; diff --git a/src/pages/statistic/bill/futuresAnalysis/index.vue b/src/pages/statistic/bill/futuresAnalysis/index.vue index 944f7ed..fcfe444 100644 --- a/src/pages/statistic/bill/futuresAnalysis/index.vue +++ b/src/pages/statistic/bill/futuresAnalysis/index.vue @@ -91,52 +91,59 @@ - - - - 统计日期 - - - - - - - - - - - - - - - - + + + 统计日期 + + + + + + + + + + + + + 重置 + + + + 确定 + + + + + + + @@ -756,13 +763,15 @@ page { color: #667eea; } } - - .filter-panel { + } + + .filter-panel { width: 100%; position: absolute; left: 0; - top: 96rpx; + top: 180rpx; background-color: rgba(0, 0, 0, 0.5); + z-index: 999; .filter-panel-content { background-color: #ffffff; @@ -793,22 +802,32 @@ page { display: flex; flex-wrap: wrap; justify-content: flex-start; + gap: 16rpx; .state-item { - width: 210rpx; - height: 72rpx; - border: 1rpx solid rgba(0, 0, 0, 0.25); - border-radius: 72rpx; + padding: 0 32rpx; + height: 68rpx; + border: 2rpx solid #e8edf3; + border-radius: 34rpx; text-align: center; - line-height: 72rpx; - margin: 0 20rpx 20rpx 0; + line-height: 68rpx; font-size: 28rpx; - color: #000000; + 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-color: rgba(222, 241, 255, 1); - border: 1rpx solid rgba(22, 119, 255, 1); + 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; } } } @@ -819,9 +838,51 @@ page { 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; + } + } } } - } .list-item { margin: 0 24rpx 16rpx; diff --git a/src/pages/statistic/bill/investAnalysis/index.vue b/src/pages/statistic/bill/investAnalysis/index.vue index 6c38526..6bfce9a 100644 --- a/src/pages/statistic/bill/investAnalysis/index.vue +++ b/src/pages/statistic/bill/investAnalysis/index.vue @@ -96,52 +96,59 @@ - - - - 统计日期 - - - - - - - - - - - - - - - - + + + 统计日期 + + + + + + + + + + + + + 重置 + + + + 确定 + + + + + + + @@ -754,13 +761,15 @@ page { color: #667eea; } } - - .filter-panel { + } + + .filter-panel { width: 100%; position: absolute; left: 0; top: 96rpx; background-color: rgba(0, 0, 0, 0.5); + z-index: 999; .filter-panel-content { background-color: #ffffff; @@ -791,22 +800,32 @@ page { display: flex; flex-wrap: wrap; justify-content: flex-start; + gap: 16rpx; .state-item { - width: 210rpx; - height: 72rpx; - border: 1rpx solid rgba(0, 0, 0, 0.25); - border-radius: 72rpx; + padding: 0 32rpx; + height: 68rpx; + border: 2rpx solid #e8edf3; + border-radius: 34rpx; text-align: center; - line-height: 72rpx; - margin: 0 20rpx 20rpx 0; + line-height: 68rpx; font-size: 28rpx; - color: #000000; + 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-color: rgba(222, 241, 255, 1); - border: 1rpx solid rgba(22, 119, 255, 1); + 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; } } } @@ -817,9 +836,51 @@ page { 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; + } + } } } - } .list-item { margin: 0 24rpx 16rpx; diff --git a/src/pages/statistic/bill/onlineLendAnalysis/index.vue b/src/pages/statistic/bill/onlineLendAnalysis/index.vue index cd406f3..377bfe8 100644 --- a/src/pages/statistic/bill/onlineLendAnalysis/index.vue +++ b/src/pages/statistic/bill/onlineLendAnalysis/index.vue @@ -131,53 +131,60 @@ - - - - 还款日期 - - - - - - - - - - - - - - - - + + + 还款日期 + + + + + + + + + + + + + 重置 + + + + 确定 + + + + + + + @@ -779,13 +786,15 @@ page { color: #667eea; } } - - .filter-panel { + } + + .filter-panel { width: 100%; position: absolute; left: 0; - top: 96rpx; + top: 180rpx; background-color: rgba(0, 0, 0, 0.5); + z-index: 999; .filter-panel-content { background-color: #ffffff; @@ -816,22 +825,32 @@ page { display: flex; flex-wrap: wrap; justify-content: flex-start; + gap: 16rpx; .state-item { - width: 210rpx; - height: 72rpx; - border: 1rpx solid rgba(0, 0, 0, 0.25); - border-radius: 72rpx; + padding: 0 32rpx; + height: 68rpx; + border: 2rpx solid #e8edf3; + border-radius: 34rpx; text-align: center; - line-height: 72rpx; - margin: 0 20rpx 20rpx 0; + line-height: 68rpx; font-size: 28rpx; - color: #000000; + 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-color: rgba(222, 241, 255, 1); - border: 1rpx solid rgba(22, 119, 255, 1); + 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; } } } @@ -842,10 +861,52 @@ page { 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; + } + } } - } } - + .list-item { margin: 0 24rpx 16rpx; background-color: #fff; diff --git a/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue b/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue index db686d4..4fe8c90 100644 --- a/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue +++ b/src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue @@ -123,20 +123,28 @@ - - + + + 重置 + + + + 确定 + - + + + @@ -727,17 +735,20 @@ page { line-height: 1; } } - - .filter-panel { + } + + .filter-panel { width: 100%; position: absolute; left: 0; - top: 96rpx; + top: 180rpx; background-color: rgba(0, 0, 0, 0.5); + z-index: 999; .filter-panel-content { - background-color: #ffff; + background-color: #ffffff; padding: 0 30rpx 30rpx; + border-radius: 16rpx 16rpx 0 0; .filter-title { color: #2c3e50; @@ -785,12 +796,53 @@ page { .btn-box { display: flex; + gap: 20rpx; padding: 24rpx 30rpx; background-color: #fff; box-shadow: 0rpx -10rpx 20rpx #EEEEEE; + + .btn-reset, + .btn-confirm { + flex: 1; + height: 80rpx; + border-radius: 12rpx; + display: flex; + align-items: center; + justify-content: center; + gap: 8rpx; + transition: all 0.3s ease; + + text { + font-size: 28rpx; + font-weight: 500; + line-height: 1; + } + + &:active { + transform: scale(0.98); + opacity: 0.8; + } + } + + .btn-reset { + background: #f5f7fa; + border: 2rpx solid #dcdfe6; + + text { + color: #606266; + } + } + + .btn-confirm { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2); + + text { + color: #ffffff; + } + } } } - } .list-item { margin: 0 24rpx 16rpx; diff --git a/src/pages/statistic/bill/stocksAnalysis/index.vue b/src/pages/statistic/bill/stocksAnalysis/index.vue index 0924050..69ae3d6 100644 --- a/src/pages/statistic/bill/stocksAnalysis/index.vue +++ b/src/pages/statistic/bill/stocksAnalysis/index.vue @@ -91,52 +91,59 @@ - - - - 统计日期 - - - - - - - - - - - - - - - - + + + 统计日期 + + + + + + + + + + + + + 重置 + + + + 确定 + + + + + + + @@ -751,13 +758,15 @@ page { color: #667eea; } } - - .filter-panel { + } + + .filter-panel { width: 100%; position: absolute; left: 0; - top: 96rpx; + top: 180rpx; background-color: rgba(0, 0, 0, 0.5); + z-index: 999; .filter-panel-content { background-color: #ffffff; @@ -788,22 +797,32 @@ page { display: flex; flex-wrap: wrap; justify-content: flex-start; + gap: 16rpx; .state-item { - width: 210rpx; - height: 72rpx; - border: 1rpx solid rgba(0, 0, 0, 0.25); - border-radius: 72rpx; + padding: 0 32rpx; + height: 68rpx; + border: 2rpx solid #e8edf3; + border-radius: 34rpx; text-align: center; - line-height: 72rpx; - margin: 0 20rpx 20rpx 0; + line-height: 68rpx; font-size: 28rpx; - color: #000000; + 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-color: rgba(222, 241, 255, 1); - border: 1rpx solid rgba(22, 119, 255, 1); + 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; } } } @@ -814,10 +833,52 @@ page { 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; + } + } } - } } - + .list-item { margin: 0 24rpx 16rpx; background-color: #fff;