ws/miniwx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

配色和二维码滚动修复

Browse Source 
style: 统一界面视觉风格与配色方 在遮罩层和内容区都加上 catchtouchmove 阻止触摸穿透滚动：
This commit is contained in:
ws
2026-04-24 17:51:02 +08:00
parent 771cf41b46
commit c46ffcf567
9 changed files with 156 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.json
+2 -2
View File
@@ -5,9 +5,9 @@
"pages/records/records" "pages/records/records"
], ],
"window": { "window": {
"navigationBarTextStyle": "white", "navigationBarTextStyle": "black",
"navigationBarTitleText": "访客预约", "navigationBarTitleText": "访客预约",
"navigationBarBackgroundColor": "#1890ff" "navigationBarBackgroundColor": "#dbeafe"
}, },
"style": "v2", "style": "v2",
"componentFramework": "glass-easel", "componentFramework": "glass-easel",
app.wxss
+2 -2
View File
@@ -2,8 +2,8 @@
page { page {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #2c3e50;
background-color: #f5f7fa; background-color: #f0f5fa;
} }
.container { .container {
components/qrcode-modal/qrcode-modal.js
+3 -1
View File
@@ -26,6 +26,8 @@ Component({
onClose() { onClose() {
this.setData({ visible: false, qrcodeId: '' }) this.setData({ visible: false, qrcodeId: '' })
} },
noop() {}
} }
}) })
components/qrcode-modal/qrcode-modal.wxml
+2 -2
View File
@@ -1,5 +1,5 @@
<view class="qrcode-modal" wx:if="{{visible}}" bindtap="onClose"> <view class="qrcode-modal" wx:if="{{visible}}" bindtap="onClose" catchtouchmove="noop">
<view class="qrcode-container" catchtap> <view class="qrcode-container" catchtap catchtouchmove="noop">
<view class="qrcode-title">预约凭证</view> <view class="qrcode-title">预约凭证</view>
<view class="qrcode-canvas-wrap"> <view class="qrcode-canvas-wrap">
<canvas canvas-id="qrcodeCanvas" class="qrcode-canvas"></canvas> <canvas canvas-id="qrcodeCanvas" class="qrcode-canvas"></canvas>
components/qrcode-modal/qrcode-modal.wxss
+18 -11
View File
@@ -4,7 +4,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(44, 62, 80, 0.4);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -12,25 +12,30 @@
} }
.qrcode-container { .qrcode-container {
background: #fff; background: #ffffff;
border-radius: 24rpx; border-radius: 32rpx;
padding: 48rpx 64rpx; padding: 48rpx 64rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
box-shadow: 0 16rpx 48rpx rgba(91, 155, 213, 0.2);
} }
.qrcode-title { .qrcode-title {
font-size: 34rpx; font-size: 34rpx;
font-weight: 600; font-weight: 600;
color: #1a1a1a; color: #2c3e50;
margin-bottom: 32rpx; margin-bottom: 32rpx;
letter-spacing: 4rpx;
} }
.qrcode-canvas-wrap { .qrcode-canvas-wrap {
position: relative; position: relative;
width: 400rpx; width: 400rpx;
height: 400rpx; height: 400rpx;
border: 1rpx solid #e8eef5;
border-radius: 16rpx;
overflow: hidden;
} }
.qrcode-canvas { .qrcode-canvas {
@@ -47,14 +52,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #fff; background: #ffffff;
} }
.qrcode-spinner { .qrcode-spinner {
width: 48rpx; width: 48rpx;
height: 48rpx; height: 48rpx;
border: 4rpx solid #e0e0e0; border: 4rpx solid #dbeafe;
border-top: 4rpx solid #1890ff; border-top: 4rpx solid #5b9bd5;
border-radius: 50%; border-radius: 50%;
animation: qrcode-spin 0.8s linear infinite; animation: qrcode-spin 0.8s linear infinite;
} }
@@ -65,15 +70,17 @@
} }
.qrcode-id { .qrcode-id {
font-size: 24rpx; font-size: 22rpx;
color: #999; color: #7f8fa6;
margin-top: 24rpx; margin-top: 24rpx;
word-break: break-all; word-break: break-all;
text-align: center; text-align: center;
letter-spacing: 1rpx;
} }
.qrcode-tip { .qrcode-tip {
font-size: 24rpx; font-size: 22rpx;
color: #bbb; color: #b8c9db;
margin-top: 12rpx; margin-top: 12rpx;
letter-spacing: 1rpx;
} }
pages/appointment/appointment.wxss
+24 -19
View File
@@ -1,6 +1,6 @@
/**appointment.wxss**/ /**appointment.wxss**/
page { page {
background-color: #f5f7fa; background-color: #f0f5fa;
min-height: 100vh; min-height: 100vh;
} }
@@ -9,27 +9,28 @@ page {
} }
.section { .section {
background: #fff; background: #ffffff;
border-radius: 20rpx; border-radius: 24rpx;
padding: 32rpx; padding: 32rpx;
margin-bottom: 24rpx; margin-bottom: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 20rpx rgba(91, 155, 213, 0.08);
} }
.section-title { .section-title {
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #1a1a1a; color: #2c3e50;
margin-bottom: 24rpx; margin-bottom: 24rpx;
padding-left: 16rpx; padding-left: 20rpx;
border-left: 6rpx solid #1890ff; border-left: 6rpx solid #5b9bd5;
letter-spacing: 2rpx;
} }
.form-group { .form-group {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 88rpx; min-height: 88rpx;
border-bottom: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #e8eef5;
} }
.form-group:last-child { .form-group:last-child {
@@ -39,14 +40,14 @@ page {
.form-label { .form-label {
width: 160rpx; width: 160rpx;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #7f8fa6;
flex-shrink: 0; flex-shrink: 0;
} }
.form-input { .form-input {
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
color: #1a1a1a; color: #2c3e50;
height: 88rpx; height: 88rpx;
} }
@@ -63,17 +64,17 @@ page {
.picker-value { .picker-value {
font-size: 28rpx; font-size: 28rpx;
color: #1a1a1a; color: #2c3e50;
} }
.picker-placeholder { .picker-placeholder {
font-size: 28rpx; font-size: 28rpx;
color: #ccc; color: #b8c9db;
} }
.picker-arrow { .picker-arrow {
font-size: 32rpx; font-size: 32rpx;
color: #ccc; color: #b8c9db;
} }
.submit-wrap { .submit-wrap {
@@ -83,8 +84,9 @@ page {
right: 0; right: 0;
padding: 20rpx 32rpx; padding: 20rpx 32rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
background: #fff; background: #ffffff;
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06); border-top: 1rpx solid #e8eef5;
box-shadow: 0 -4rpx 16rpx rgba(91, 155, 213, 0.06);
} }
.submit-btn { .submit-btn {
@@ -93,7 +95,7 @@ page {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #1890ff; background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
color: #fff; color: #fff;
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
@@ -102,6 +104,8 @@ page {
padding: 0; padding: 0;
margin: 0; margin: 0;
line-height: 1; line-height: 1;
letter-spacing: 4rpx;
box-shadow: 0 6rpx 24rpx rgba(91, 155, 213, 0.3);
} }
.submit-btn::after { .submit-btn::after {
@@ -109,6 +113,7 @@ page {
} }
.submit-btn[disabled] { .submit-btn[disabled] {
background: #b3d9ff; background: #d6e2ef;
color: #fff; color: #94aec5;
box-shadow: none;
} }
pages/index/index.wxml
+2 -3
View File
@@ -45,12 +45,11 @@
<!-- 最新预约摘要 --> <!-- 最新预约摘要 -->
<view class="latest-card" wx:if="{{latestRecord}}"> <view class="latest-card" wx:if="{{latestRecord}}">
<view class="latest-header"> <view class="latest-header">
<view style="display: flex; align-items: center;"> <view class="latest-header-left">
<text style="margin-right: 10px;" class="latest-title"> 最新预约</text> <text class="latest-title">最新预约</text>
<view wx:if="{{latestRecord.status === 'approved'}}" class="qrcode-btn" catchtap="showQrcode" data-id="{{latestRecord._id}}">出示凭证</view> <view wx:if="{{latestRecord.status === 'approved'}}" class="qrcode-btn" catchtap="showQrcode" data-id="{{latestRecord._id}}">出示凭证</view>
</view> </view>
<view class="latest-header-right"> <view class="latest-header-right">
<view class="status-tag status-{{latestRecord.status}}">{{latestRecord.statusText}}</view> <view class="status-tag status-{{latestRecord.status}}">{{latestRecord.statusText}}</view>
</view> </view>
</view> </view>
pages/index/index.wxss
+62 -50
View File
@@ -1,6 +1,6 @@
/**index.wxss**/ /**index.wxss**/
page { page {
background-color: #f5f7fa; background-color: #f0f5fa;
min-height: 100vh; min-height: 100vh;
} }
@@ -28,7 +28,7 @@ page {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: #f5f7fa; background: #f0f5fa;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -39,8 +39,8 @@ page {
.loading-spinner { .loading-spinner {
width: 64rpx; width: 64rpx;
height: 64rpx; height: 64rpx;
border: 6rpx solid #e0e0e0; border: 6rpx solid #dbeafe;
border-top: 6rpx solid #1890ff; border-top: 6rpx solid #5b9bd5;
border-radius: 50%; border-radius: 50%;
animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite;
margin-bottom: 24rpx; margin-bottom: 24rpx;
@@ -53,7 +53,8 @@ page {
.loading-text { .loading-text {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #7f8fa6;
letter-spacing: 2rpx;
} }
/* 登录失败 */ /* 登录失败 */
@@ -64,32 +65,37 @@ page {
.fail-text { .fail-text {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #7f8fa6;
margin-bottom: 32rpx; margin-bottom: 32rpx;
} }
.retry-btn { .retry-btn {
font-size: 28rpx; font-size: 28rpx;
color: #fff; color: #fff;
background: #1890ff; background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
padding: 16rpx 56rpx; padding: 16rpx 56rpx;
border-radius: 36rpx; border-radius: 40rpx;
font-weight: 600;
letter-spacing: 2rpx;
box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.3);
} }
.retry-btn:active { .retry-btn:active {
background: #096dd9; opacity: 0.85;
} }
.header-title { .header-title {
font-size: 44rpx; font-size: 44rpx;
font-weight: 700; font-weight: 700;
color: #1a1a1a; color: #2c3e50;
margin-bottom: 12rpx; margin-bottom: 12rpx;
letter-spacing: 4rpx;
} }
.header-subtitle { .header-subtitle {
font-size: 28rpx; font-size: 26rpx;
color: #999; color: #7f8fa6;
letter-spacing: 2rpx;
} }
/* 功能卡片 */ /* 功能卡片 */
@@ -100,16 +106,15 @@ page {
.action-card { .action-card {
display: flex; display: flex;
align-items: center; align-items: center;
background: #fff; background: #ffffff;
border-radius: 20rpx; border-radius: 24rpx;
padding: 36rpx 32rpx; padding: 36rpx 32rpx;
margin-bottom: 24rpx; margin-bottom: 20rpx;
box-shadow: 0 8rpx 32rpx rgba(24, 144, 255, 0.12), 0 2rpx 8rpx rgba(0, 0, 0, 0.06); box-shadow: 0 4rpx 20rpx rgba(91, 155, 213, 0.08);
} }
.action-card:active { .action-card:active {
background: #f0f0f0; background: #f7fafd;
box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.08), 0 1rpx 4rpx rgba(0, 0, 0, 0.04);
} }
.action-icon-wrap { .action-icon-wrap {
@@ -124,11 +129,11 @@ page {
} }
.action-icon-blue { .action-icon-blue {
background: rgba(24, 144, 255, 0.1); background: rgba(91, 155, 213, 0.12);
} }
.action-icon-green { .action-icon-green {
background: rgba(82, 196, 26, 0.1); background: rgba(110, 198, 160, 0.12);
} }
.action-icon-text { .action-icon-text {
@@ -144,28 +149,28 @@ page {
.action-title { .action-title {
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #1a1a1a; color: #2c3e50;
margin-bottom: 8rpx; margin-bottom: 8rpx;
} }
.action-desc { .action-desc {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #7f8fa6;
} }
.action-arrow { .action-arrow {
font-size: 40rpx; font-size: 40rpx;
color: #ccc; color: #b8c9db;
margin-left: 16rpx; margin-left: 16rpx;
} }
/* 最新预约卡片 */ /* 最新预约卡片 */
.latest-card { .latest-card {
background: #fff; background: #ffffff;
border-radius: 20rpx; border-radius: 24rpx;
padding: 28rpx 32rpx; padding: 28rpx 32rpx;
margin-top: 8rpx; margin-top: 8rpx;
box-shadow: 0 8rpx 32rpx rgba(82, 196, 26, 0.12), 0 2rpx 8rpx rgba(0, 0, 0, 0.06); box-shadow: 0 4rpx 20rpx rgba(91, 155, 213, 0.08);
} }
.latest-header { .latest-header {
@@ -174,7 +179,7 @@ page {
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
padding-bottom: 16rpx; padding-bottom: 16rpx;
border-bottom: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #e8eef5;
} }
.latest-header-right { .latest-header-right {
@@ -183,51 +188,58 @@ page {
gap: 12rpx; gap: 12rpx;
} }
.latest-header-left {
display: flex;
align-items: center;
gap: 16rpx;
}
.qrcode-btn { .qrcode-btn {
font-size: 22rpx; font-size: 22rpx;
color: #52c41a; color: #fff;
background: rgba(82, 196, 26, 0.1); background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
padding: 6rpx 20rpx; padding: 8rpx 24rpx;
border-radius: 20rpx; border-radius: 30rpx;
border: 1rpx solid rgba(82, 196, 26, 0.3); letter-spacing: 1rpx;
box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.25);
} }
.qrcode-btn:active { .qrcode-btn:active {
background: rgba(82, 196, 26, 0.2); opacity: 0.85;
} }
.latest-title { .latest-title {
font-size: 28rpx; font-size: 28rpx;
font-weight: 600; font-weight: 600;
color: #1a1a1a; color: #2c3e50;
} }
.status-tag { .status-tag {
font-size: 22rpx; font-size: 22rpx;
padding: 4rpx 16rpx; padding: 4rpx 16rpx;
border-radius: 16rpx; border-radius: 20rpx;
font-weight: 500; font-weight: 500;
margin-left: auto; margin-left: auto;
} }
.status-pending { .status-pending {
background: rgba(250, 173, 20, 0.1); background: rgba(240, 164, 93, 0.12);
color: #faad14; color: #e6a23c;
} }
.status-approved { .status-approved {
background: rgba(82, 196, 26, 0.1); background: rgba(110, 198, 160, 0.12);
color: #52c41a; color: #52c41a;
} }
.status-rejected { .status-rejected {
background: rgba(255, 77, 79, 0.1); background: rgba(239, 83, 80, 0.1);
color: #ff4d4f; color: #ef5350;
} }
.status-cancelled { .status-cancelled {
background: rgba(0, 0, 0, 0.04); background: rgba(127, 143, 166, 0.1);
color: #999; color: #7f8fa6;
} }
.latest-body { .latest-body {
@@ -243,23 +255,24 @@ page {
.latest-label { .latest-label {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #7f8fa6;
} }
.latest-value { .latest-value {
font-size: 24rpx; font-size: 24rpx;
color: #333; color: #2c3e50;
} }
.latest-footer { .latest-footer {
padding-top: 16rpx; padding-top: 16rpx;
border-top: 1rpx solid #f0f0f0; border-top: 1rpx solid #e8eef5;
text-align: center; text-align: center;
} }
.latest-link { .latest-link {
font-size: 24rpx; font-size: 24rpx;
color: #1890ff; color: #5b9bd5;
letter-spacing: 1rpx;
} }
.footer { .footer {
@@ -268,8 +281,7 @@ page {
} }
.footer-text { .footer-text {
font-size: 24rpx; font-size: 22rpx;
color: #ccc; color: #b8c9db;
letter-spacing: 4rpx;
} }
pages/records/records.wxss
+41 -42
View File
@@ -1,6 +1,6 @@
/**records.wxss**/ /**records.wxss**/
page { page {
background-color: #f5f7fa; background-color: #f0f5fa;
min-height: 100vh; min-height: 100vh;
} }
@@ -11,25 +11,27 @@ page {
/* 筛选标签 */ /* 筛选标签 */
.tabs { .tabs {
display: flex; display: flex;
background: #fff; background: #ffffff;
padding: 16rpx 32rpx; padding: 16rpx 32rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); border-bottom: 1rpx solid #e8eef5;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 10; z-index: 10;
box-shadow: 0 2rpx 12rpx rgba(91, 155, 213, 0.06);
} }
.tab { .tab {
flex: 1; flex: 1;
text-align: center; text-align: center;
font-size: 28rpx; font-size: 26rpx;
color: #666; color: #7f8fa6;
padding: 16rpx 0; padding: 16rpx 0;
position: relative; position: relative;
letter-spacing: 1rpx;
} }
.tab-active { .tab-active {
color: #1890ff; color: #5b9bd5;
font-weight: 600; font-weight: 600;
} }
@@ -41,7 +43,7 @@ page {
transform: translateX(-50%); transform: translateX(-50%);
width: 48rpx; width: 48rpx;
height: 6rpx; height: 6rpx;
background: #1890ff; background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
border-radius: 3rpx; border-radius: 3rpx;
} }
@@ -51,11 +53,11 @@ page {
} }
.record-card { .record-card {
background: #fff; background: #ffffff;
border-radius: 20rpx; border-radius: 24rpx;
padding: 32rpx; padding: 32rpx;
margin-bottom: 24rpx; margin-bottom: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04); box-shadow: 0 4rpx 20rpx rgba(91, 155, 213, 0.08);
} }
.record-header { .record-header {
@@ -64,25 +66,21 @@ page {
align-items: center; align-items: center;
margin-bottom: 24rpx; margin-bottom: 24rpx;
padding-bottom: 20rpx; padding-bottom: 20rpx;
border-bottom: 1rpx solid #f0f0f0; border-bottom: 1rpx solid #e8eef5;
}
.record-id {
font-size: 24rpx;
color: #999;
} }
.qrcode-btn { .qrcode-btn {
font-size: 24rpx; font-size: 24rpx;
color: #52c41a; color: #fff;
background: rgba(82, 196, 26, 0.1); background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
padding: 8rpx 24rpx; padding: 10rpx 28rpx;
border-radius: 24rpx; border-radius: 30rpx;
border: 1rpx solid rgba(82, 196, 26, 0.3); letter-spacing: 1rpx;
box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.25);
} }
.qrcode-btn:active { .qrcode-btn:active {
background: rgba(82, 196, 26, 0.2); opacity: 0.85;
} }
.status-tag { .status-tag {
@@ -94,23 +92,23 @@ page {
} }
.status-pending { .status-pending {
background: rgba(250, 173, 20, 0.1); background: rgba(240, 164, 93, 0.12);
color: #faad14; color: #e6a23c;
} }
.status-approved { .status-approved {
background: rgba(82, 196, 26, 0.1); background: rgba(110, 198, 160, 0.12);
color: #52c41a; color: #52c41a;
} }
.status-rejected { .status-rejected {
background: rgba(255, 77, 79, 0.1); background: rgba(239, 83, 80, 0.1);
color: #ff4d4f; color: #ef5350;
} }
.status-cancelled { .status-cancelled {
background: rgba(0, 0, 0, 0.04); background: rgba(127, 143, 166, 0.1);
color: #999; color: #7f8fa6;
} }
.record-body { .record-body {
@@ -126,34 +124,34 @@ page {
.record-label { .record-label {
font-size: 26rpx; font-size: 26rpx;
color: #999; color: #7f8fa6;
flex-shrink: 0; flex-shrink: 0;
} }
.record-value { .record-value {
font-size: 26rpx; font-size: 26rpx;
color: #333; color: #2c3e50;
text-align: right; text-align: right;
margin-left: 32rpx; margin-left: 32rpx;
} }
.record-footer { .record-footer {
padding-top: 20rpx; padding-top: 20rpx;
border-top: 1rpx solid #f0f0f0; border-top: 1rpx solid #e8eef5;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.cancel-btn { .cancel-btn {
font-size: 26rpx; font-size: 26rpx;
color: #ff4d4f; color: #ef5350;
padding: 12rpx 32rpx; padding: 12rpx 32rpx;
border: 1rpx solid #ff4d4f; border: 1rpx solid rgba(239, 83, 80, 0.25);
border-radius: 32rpx; border-radius: 30rpx;
} }
.cancel-btn:active { .cancel-btn:active {
background: #fff1f0; background: rgba(239, 83, 80, 0.06);
} }
/* 空状态 */ /* 空状态 */
@@ -171,20 +169,21 @@ page {
.empty-text { .empty-text {
font-size: 28rpx; font-size: 28rpx;
color: #999; color: #7f8fa6;
margin-bottom: 48rpx; margin-bottom: 48rpx;
} }
.empty-btn { .empty-btn {
font-size: 28rpx; font-size: 28rpx;
color: #fff; color: #fff;
background: #1890ff; background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
padding: 20rpx 64rpx; padding: 20rpx 64rpx;
border-radius: 40rpx; border-radius: 40rpx;
font-weight: 600;
letter-spacing: 2rpx;
box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.3);
} }
.empty-btn:active { .empty-btn:active {
background: #096dd9; opacity: 0.85;
} }