From c46ffcf567e7fe4e1179e392815067b555ae08a6 Mon Sep 17 00:00:00 2001
From: ws <ws@ws>
Date: Fri, 24 Apr 2026 17:51:02 +0800
Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E8=89=B2=E5=92=8C=E4=BA=8C=E7=BB=B4?=
 =?UTF-8?q?=E7=A0=81=E6=BB=9A=E5=8A=A8=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

style: 统一界面视觉风格与配色方 在遮罩层和内容区都加上 catchtouchmove 阻止触摸穿透滚动：
---
 app.json                                  |   4 +-
 app.wxss                                  |   4 +-
 components/qrcode-modal/qrcode-modal.js   |   4 +-
 components/qrcode-modal/qrcode-modal.wxml |   4 +-
 components/qrcode-modal/qrcode-modal.wxss |  29 +++---
 pages/appointment/appointment.wxss        |  43 +++++----
 pages/index/index.wxml                    |   5 +-
 pages/index/index.wxss                    | 112 ++++++++++++----------
 pages/records/records.wxss                |  83 ++++++++--------
 9 files changed, 156 insertions(+), 132 deletions(-)

diff --git a/app.json b/app.json
index 8d646d3..07d6815 100644
--- a/app.json
+++ b/app.json
@@ -5,9 +5,9 @@
     "pages/records/records"
   ],
   "window": {
-    "navigationBarTextStyle": "white",
+    "navigationBarTextStyle": "black",
     "navigationBarTitleText": "访客预约",
-    "navigationBarBackgroundColor": "#1890ff"
+    "navigationBarBackgroundColor": "#dbeafe"
   },
   "style": "v2",
   "componentFramework": "glass-easel",
diff --git a/app.wxss b/app.wxss
index b5f04c8..3a0482c 100644
--- a/app.wxss
+++ b/app.wxss
@@ -2,8 +2,8 @@
 page {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   font-size: 28rpx;
-  color: #333;
-  background-color: #f5f7fa;
+  color: #2c3e50;
+  background-color: #f0f5fa;
 }
 
 .container {
diff --git a/components/qrcode-modal/qrcode-modal.js b/components/qrcode-modal/qrcode-modal.js
index 9429b14..6f3db64 100644
--- a/components/qrcode-modal/qrcode-modal.js
+++ b/components/qrcode-modal/qrcode-modal.js
@@ -26,6 +26,8 @@ Component({
 
     onClose() {
       this.setData({ visible: false, qrcodeId: '' })
-    }
+    },
+
+    noop() {}
   }
 })
diff --git a/components/qrcode-modal/qrcode-modal.wxml b/components/qrcode-modal/qrcode-modal.wxml
index e6a9fea..cddfb5f 100644
--- a/components/qrcode-modal/qrcode-modal.wxml
+++ b/components/qrcode-modal/qrcode-modal.wxml
@@ -1,5 +1,5 @@
-<view class="qrcode-modal" wx:if="{{visible}}" bindtap="onClose">
-  <view class="qrcode-container" catchtap>
+<view class="qrcode-modal" wx:if="{{visible}}" bindtap="onClose" catchtouchmove="noop">
+  <view class="qrcode-container" catchtap catchtouchmove="noop">
     <view class="qrcode-title">预约凭证</view>
     <view class="qrcode-canvas-wrap">
       <canvas canvas-id="qrcodeCanvas" class="qrcode-canvas"></canvas>
diff --git a/components/qrcode-modal/qrcode-modal.wxss b/components/qrcode-modal/qrcode-modal.wxss
index c032e64..e31526d 100644
--- a/components/qrcode-modal/qrcode-modal.wxss
+++ b/components/qrcode-modal/qrcode-modal.wxss
@@ -4,7 +4,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(44, 62, 80, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12,25 +12,30 @@
 }
 
 .qrcode-container {
-  background: #fff;
-  border-radius: 24rpx;
+  background: #ffffff;
+  border-radius: 32rpx;
   padding: 48rpx 64rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
+  box-shadow: 0 16rpx 48rpx rgba(91, 155, 213, 0.2);
 }
 
 .qrcode-title {
   font-size: 34rpx;
   font-weight: 600;
-  color: #1a1a1a;
+  color: #2c3e50;
   margin-bottom: 32rpx;
+  letter-spacing: 4rpx;
 }
 
 .qrcode-canvas-wrap {
   position: relative;
   width: 400rpx;
   height: 400rpx;
+  border: 1rpx solid #e8eef5;
+  border-radius: 16rpx;
+  overflow: hidden;
 }
 
 .qrcode-canvas {
@@ -47,14 +52,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #fff;
+  background: #ffffff;
 }
 
 .qrcode-spinner {
   width: 48rpx;
   height: 48rpx;
-  border: 4rpx solid #e0e0e0;
-  border-top: 4rpx solid #1890ff;
+  border: 4rpx solid #dbeafe;
+  border-top: 4rpx solid #5b9bd5;
   border-radius: 50%;
   animation: qrcode-spin 0.8s linear infinite;
 }
@@ -65,15 +70,17 @@
 }
 
 .qrcode-id {
-  font-size: 24rpx;
-  color: #999;
+  font-size: 22rpx;
+  color: #7f8fa6;
   margin-top: 24rpx;
   word-break: break-all;
   text-align: center;
+  letter-spacing: 1rpx;
 }
 
 .qrcode-tip {
-  font-size: 24rpx;
-  color: #bbb;
+  font-size: 22rpx;
+  color: #b8c9db;
   margin-top: 12rpx;
+  letter-spacing: 1rpx;
 }
diff --git a/pages/appointment/appointment.wxss b/pages/appointment/appointment.wxss
index 587cc2f..89ac4b4 100644
--- a/pages/appointment/appointment.wxss
+++ b/pages/appointment/appointment.wxss
@@ -1,6 +1,6 @@
 /**appointment.wxss**/
 page {
-  background-color: #f5f7fa;
+  background-color: #f0f5fa;
   min-height: 100vh;
 }
 
@@ -9,27 +9,28 @@ page {
 }
 
 .section {
-  background: #fff;
-  border-radius: 20rpx;
+  background: #ffffff;
+  border-radius: 24rpx;
   padding: 32rpx;
-  margin-bottom: 24rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  margin-bottom: 20rpx;
+  box-shadow: 0 4rpx 20rpx rgba(91, 155, 213, 0.08);
 }
 
 .section-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #1a1a1a;
+  color: #2c3e50;
   margin-bottom: 24rpx;
-  padding-left: 16rpx;
-  border-left: 6rpx solid #1890ff;
+  padding-left: 20rpx;
+  border-left: 6rpx solid #5b9bd5;
+  letter-spacing: 2rpx;
 }
 
 .form-group {
   display: flex;
   align-items: center;
   min-height: 88rpx;
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid #e8eef5;
 }
 
 .form-group:last-child {
@@ -39,14 +40,14 @@ page {
 .form-label {
   width: 160rpx;
   font-size: 28rpx;
-  color: #333;
+  color: #7f8fa6;
   flex-shrink: 0;
 }
 
 .form-input {
   flex: 1;
   font-size: 28rpx;
-  color: #1a1a1a;
+  color: #2c3e50;
   height: 88rpx;
 }
 
@@ -63,17 +64,17 @@ page {
 
 .picker-value {
   font-size: 28rpx;
-  color: #1a1a1a;
+  color: #2c3e50;
 }
 
 .picker-placeholder {
   font-size: 28rpx;
-  color: #ccc;
+  color: #b8c9db;
 }
 
 .picker-arrow {
   font-size: 32rpx;
-  color: #ccc;
+  color: #b8c9db;
 }
 
 .submit-wrap {
@@ -83,8 +84,9 @@ page {
   right: 0;
   padding: 20rpx 32rpx;
   padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-  background: #fff;
-  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
+  background: #ffffff;
+  border-top: 1rpx solid #e8eef5;
+  box-shadow: 0 -4rpx 16rpx rgba(91, 155, 213, 0.06);
 }
 
 .submit-btn {
@@ -93,7 +95,7 @@ page {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #1890ff;
+  background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
   color: #fff;
   font-size: 32rpx;
   font-weight: 600;
@@ -102,6 +104,8 @@ page {
   padding: 0;
   margin: 0;
   line-height: 1;
+  letter-spacing: 4rpx;
+  box-shadow: 0 6rpx 24rpx rgba(91, 155, 213, 0.3);
 }
 
 .submit-btn::after {
@@ -109,6 +113,7 @@ page {
 }
 
 .submit-btn[disabled] {
-  background: #b3d9ff;
-  color: #fff;
+  background: #d6e2ef;
+  color: #94aec5;
+  box-shadow: none;
 }
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
index c8f4a86..95f8be0 100644
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -45,12 +45,11 @@
     <!-- 最新预约摘要 -->
     <view class="latest-card" wx:if="{{latestRecord}}">
       <view class="latest-header">
-        <view style="display: flex; align-items: center;">
-          <text style="margin-right: 10px;" class="latest-title"> 最新预约</text>
+        <view class="latest-header-left">
+          <text class="latest-title">最新预约</text>
           <view wx:if="{{latestRecord.status === 'approved'}}" class="qrcode-btn" catchtap="showQrcode" data-id="{{latestRecord._id}}">出示凭证</view>
         </view>
         <view class="latest-header-right">
-
           <view class="status-tag status-{{latestRecord.status}}">{{latestRecord.statusText}}</view>
         </view>
       </view>
diff --git a/pages/index/index.wxss b/pages/index/index.wxss
index 9cebe70..9b130ee 100644
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -1,6 +1,6 @@
 /**index.wxss**/
 page {
-  background-color: #f5f7fa;
+  background-color: #f0f5fa;
   min-height: 100vh;
 }
 
@@ -28,7 +28,7 @@ page {
   left: 0;
   right: 0;
   bottom: 0;
-  background: #f5f7fa;
+  background: #f0f5fa;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -39,8 +39,8 @@ page {
 .loading-spinner {
   width: 64rpx;
   height: 64rpx;
-  border: 6rpx solid #e0e0e0;
-  border-top: 6rpx solid #1890ff;
+  border: 6rpx solid #dbeafe;
+  border-top: 6rpx solid #5b9bd5;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   margin-bottom: 24rpx;
@@ -53,7 +53,8 @@ page {
 
 .loading-text {
   font-size: 28rpx;
-  color: #999;
+  color: #7f8fa6;
+  letter-spacing: 2rpx;
 }
 
 /* 登录失败 */
@@ -64,32 +65,37 @@ page {
 
 .fail-text {
   font-size: 28rpx;
-  color: #999;
+  color: #7f8fa6;
   margin-bottom: 32rpx;
 }
 
 .retry-btn {
   font-size: 28rpx;
   color: #fff;
-  background: #1890ff;
+  background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
   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 {
-  background: #096dd9;
+  opacity: 0.85;
 }
 
 .header-title {
   font-size: 44rpx;
   font-weight: 700;
-  color: #1a1a1a;
+  color: #2c3e50;
   margin-bottom: 12rpx;
+  letter-spacing: 4rpx;
 }
 
 .header-subtitle {
-  font-size: 28rpx;
-  color: #999;
+  font-size: 26rpx;
+  color: #7f8fa6;
+  letter-spacing: 2rpx;
 }
 
 /* 功能卡片 */
@@ -100,16 +106,15 @@ page {
 .action-card {
   display: flex;
   align-items: center;
-  background: #fff;
-  border-radius: 20rpx;
+  background: #ffffff;
+  border-radius: 24rpx;
   padding: 36rpx 32rpx;
-  margin-bottom: 24rpx;
-  box-shadow: 0 8rpx 32rpx rgba(24, 144, 255, 0.12), 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+  margin-bottom: 20rpx;
+  box-shadow: 0 4rpx 20rpx rgba(91, 155, 213, 0.08);
 }
 
 .action-card:active {
-  background: #f0f0f0;
-  box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.08), 0 1rpx 4rpx rgba(0, 0, 0, 0.04);
+  background: #f7fafd;
 }
 
 .action-icon-wrap {
@@ -124,11 +129,11 @@ page {
 }
 
 .action-icon-blue {
-  background: rgba(24, 144, 255, 0.1);
+  background: rgba(91, 155, 213, 0.12);
 }
 
 .action-icon-green {
-  background: rgba(82, 196, 26, 0.1);
+  background: rgba(110, 198, 160, 0.12);
 }
 
 .action-icon-text {
@@ -144,28 +149,28 @@ page {
 .action-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: #1a1a1a;
+  color: #2c3e50;
   margin-bottom: 8rpx;
 }
 
 .action-desc {
   font-size: 24rpx;
-  color: #999;
+  color: #7f8fa6;
 }
 
 .action-arrow {
   font-size: 40rpx;
-  color: #ccc;
+  color: #b8c9db;
   margin-left: 16rpx;
 }
 
 /* 最新预约卡片 */
 .latest-card {
-  background: #fff;
-  border-radius: 20rpx;
+  background: #ffffff;
+  border-radius: 24rpx;
   padding: 28rpx 32rpx;
   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 {
@@ -174,7 +179,7 @@ page {
   align-items: center;
   margin-bottom: 20rpx;
   padding-bottom: 16rpx;
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid #e8eef5;
 }
 
 .latest-header-right {
@@ -183,51 +188,58 @@ page {
   gap: 12rpx;
 }
 
+.latest-header-left {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
 .qrcode-btn {
   font-size: 22rpx;
-  color: #52c41a;
-  background: rgba(82, 196, 26, 0.1);
-  padding: 6rpx 20rpx;
-  border-radius: 20rpx;
-  border: 1rpx solid rgba(82, 196, 26, 0.3);
+  color: #fff;
+  background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
+  padding: 8rpx 24rpx;
+  border-radius: 30rpx;
+  letter-spacing: 1rpx;
+  box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.25);
 }
 
 .qrcode-btn:active {
-  background: rgba(82, 196, 26, 0.2);
+  opacity: 0.85;
 }
 
 .latest-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1a1a1a;
+  color: #2c3e50;
 }
 
 .status-tag {
   font-size: 22rpx;
   padding: 4rpx 16rpx;
-  border-radius: 16rpx;
+  border-radius: 20rpx;
   font-weight: 500;
   margin-left: auto;
 }
 
 .status-pending {
-  background: rgba(250, 173, 20, 0.1);
-  color: #faad14;
+  background: rgba(240, 164, 93, 0.12);
+  color: #e6a23c;
 }
 
 .status-approved {
-  background: rgba(82, 196, 26, 0.1);
+  background: rgba(110, 198, 160, 0.12);
   color: #52c41a;
 }
 
 .status-rejected {
-  background: rgba(255, 77, 79, 0.1);
-  color: #ff4d4f;
+  background: rgba(239, 83, 80, 0.1);
+  color: #ef5350;
 }
 
 .status-cancelled {
-  background: rgba(0, 0, 0, 0.04);
-  color: #999;
+  background: rgba(127, 143, 166, 0.1);
+  color: #7f8fa6;
 }
 
 .latest-body {
@@ -243,23 +255,24 @@ page {
 
 .latest-label {
   font-size: 24rpx;
-  color: #999;
+  color: #7f8fa6;
 }
 
 .latest-value {
   font-size: 24rpx;
-  color: #333;
+  color: #2c3e50;
 }
 
 .latest-footer {
   padding-top: 16rpx;
-  border-top: 1rpx solid #f0f0f0;
+  border-top: 1rpx solid #e8eef5;
   text-align: center;
 }
 
 .latest-link {
   font-size: 24rpx;
-  color: #1890ff;
+  color: #5b9bd5;
+  letter-spacing: 1rpx;
 }
 
 .footer {
@@ -268,8 +281,7 @@ page {
 }
 
 .footer-text {
-  font-size: 24rpx;
-  color: #ccc;
+  font-size: 22rpx;
+  color: #b8c9db;
+  letter-spacing: 4rpx;
 }
-
-
diff --git a/pages/records/records.wxss b/pages/records/records.wxss
index dfb246c..e2e66c2 100644
--- a/pages/records/records.wxss
+++ b/pages/records/records.wxss
@@ -1,6 +1,6 @@
 /**records.wxss**/
 page {
-  background-color: #f5f7fa;
+  background-color: #f0f5fa;
   min-height: 100vh;
 }
 
@@ -11,25 +11,27 @@ page {
 /* 筛选标签 */
 .tabs {
   display: flex;
-  background: #fff;
+  background: #ffffff;
   padding: 16rpx 32rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+  border-bottom: 1rpx solid #e8eef5;
   position: sticky;
   top: 0;
   z-index: 10;
+  box-shadow: 0 2rpx 12rpx rgba(91, 155, 213, 0.06);
 }
 
 .tab {
   flex: 1;
   text-align: center;
-  font-size: 28rpx;
-  color: #666;
+  font-size: 26rpx;
+  color: #7f8fa6;
   padding: 16rpx 0;
   position: relative;
+  letter-spacing: 1rpx;
 }
 
 .tab-active {
-  color: #1890ff;
+  color: #5b9bd5;
   font-weight: 600;
 }
 
@@ -41,7 +43,7 @@ page {
   transform: translateX(-50%);
   width: 48rpx;
   height: 6rpx;
-  background: #1890ff;
+  background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
   border-radius: 3rpx;
 }
 
@@ -51,11 +53,11 @@ page {
 }
 
 .record-card {
-  background: #fff;
-  border-radius: 20rpx;
+  background: #ffffff;
+  border-radius: 24rpx;
   padding: 32rpx;
-  margin-bottom: 24rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
+  margin-bottom: 20rpx;
+  box-shadow: 0 4rpx 20rpx rgba(91, 155, 213, 0.08);
 }
 
 .record-header {
@@ -64,25 +66,21 @@ page {
   align-items: center;
   margin-bottom: 24rpx;
   padding-bottom: 20rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-}
-
-.record-id {
-  font-size: 24rpx;
-  color: #999;
+  border-bottom: 1rpx solid #e8eef5;
 }
 
 .qrcode-btn {
   font-size: 24rpx;
-  color: #52c41a;
-  background: rgba(82, 196, 26, 0.1);
-  padding: 8rpx 24rpx;
-  border-radius: 24rpx;
-  border: 1rpx solid rgba(82, 196, 26, 0.3);
+  color: #fff;
+  background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
+  padding: 10rpx 28rpx;
+  border-radius: 30rpx;
+  letter-spacing: 1rpx;
+  box-shadow: 0 4rpx 12rpx rgba(91, 155, 213, 0.25);
 }
 
 .qrcode-btn:active {
-  background: rgba(82, 196, 26, 0.2);
+  opacity: 0.85;
 }
 
 .status-tag {
@@ -94,23 +92,23 @@ page {
 }
 
 .status-pending {
-  background: rgba(250, 173, 20, 0.1);
-  color: #faad14;
+  background: rgba(240, 164, 93, 0.12);
+  color: #e6a23c;
 }
 
 .status-approved {
-  background: rgba(82, 196, 26, 0.1);
+  background: rgba(110, 198, 160, 0.12);
   color: #52c41a;
 }
 
 .status-rejected {
-  background: rgba(255, 77, 79, 0.1);
-  color: #ff4d4f;
+  background: rgba(239, 83, 80, 0.1);
+  color: #ef5350;
 }
 
 .status-cancelled {
-  background: rgba(0, 0, 0, 0.04);
-  color: #999;
+  background: rgba(127, 143, 166, 0.1);
+  color: #7f8fa6;
 }
 
 .record-body {
@@ -126,34 +124,34 @@ page {
 
 .record-label {
   font-size: 26rpx;
-  color: #999;
+  color: #7f8fa6;
   flex-shrink: 0;
 }
 
 .record-value {
   font-size: 26rpx;
-  color: #333;
+  color: #2c3e50;
   text-align: right;
   margin-left: 32rpx;
 }
 
 .record-footer {
   padding-top: 20rpx;
-  border-top: 1rpx solid #f0f0f0;
+  border-top: 1rpx solid #e8eef5;
   display: flex;
   justify-content: flex-end;
 }
 
 .cancel-btn {
   font-size: 26rpx;
-  color: #ff4d4f;
+  color: #ef5350;
   padding: 12rpx 32rpx;
-  border: 1rpx solid #ff4d4f;
-  border-radius: 32rpx;
+  border: 1rpx solid rgba(239, 83, 80, 0.25);
+  border-radius: 30rpx;
 }
 
 .cancel-btn:active {
-  background: #fff1f0;
+  background: rgba(239, 83, 80, 0.06);
 }
 
 /* 空状态 */
@@ -171,20 +169,21 @@ page {
 
 .empty-text {
   font-size: 28rpx;
-  color: #999;
+  color: #7f8fa6;
   margin-bottom: 48rpx;
 }
 
 .empty-btn {
   font-size: 28rpx;
   color: #fff;
-  background: #1890ff;
+  background: linear-gradient(135deg, #5b9bd5, #4a8bc2);
   padding: 20rpx 64rpx;
   border-radius: 40rpx;
+  font-weight: 600;
+  letter-spacing: 2rpx;
+  box-shadow: 0 4rpx 16rpx rgba(91, 155, 213, 0.3);
 }
 
 .empty-btn:active {
-  background: #096dd9;
+  opacity: 0.85;
 }
-
-