配色和二维码滚动修复

style: 统一界面视觉风格与配色方 在遮罩层和内容区都加上 catchtouchmove 阻止触摸穿透滚动：

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;
 }
-
-