From 9df9dbdea9937478d6fea4a885752b625048ec16 Mon Sep 17 00:00:00 2001
From: tianyongbao <tianyongbao@haier.com>
Date: Fri, 19 Dec 2025 00:01:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A1=B5=E9=9D=A2=E8=87=AA=E9=80=82?=
 =?UTF-8?q?=E5=BA=94=E5=B1=8F=E5=B9=95=E5=B0=BA=E5=AF=B8=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/bluetooth/bluetooth.vue |  28 +++
 src/pages/mixer/mixer.vue         | 283 ++++++++++++++++++++++++------
 2 files changed, 255 insertions(+), 56 deletions(-)

diff --git a/src/pages/bluetooth/bluetooth.vue b/src/pages/bluetooth/bluetooth.vue
index fa6fb45..7c5d11c 100644
--- a/src/pages/bluetooth/bluetooth.vue
+++ b/src/pages/bluetooth/bluetooth.vue
@@ -43,6 +43,18 @@
         停止搜索
       </u-button>
     </view>
+    
+    <!-- 预览按钮 -->
+    <view class="preview-button-wrapper">
+      <u-button 
+        type="success" 
+        plain
+        @click="previewMixerPage"
+      >
+        <uni-icons type="eye" color="#52c41a" size="20" style="margin-right: 8rpx;"></uni-icons>
+        预览搅拌器页面
+      </u-button>
+    </view>
 
 
     <!-- 设备列表 -->
@@ -1702,6 +1714,22 @@ page {
   }
 }
 
+.preview-button-wrapper {
+  padding: 0 20rpx;
+  margin-bottom: 20rpx;
+  
+  :deep(.u-button) {
+    width: 100%;
+    height: 80rpx;
+    border-radius: 16rpx;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
 .device-list {
   background: rgba(255, 255, 255, 0.95);
   margin: 20rpx;
diff --git a/src/pages/mixer/mixer.vue b/src/pages/mixer/mixer.vue
index 0c21210..37169f8 100644
--- a/src/pages/mixer/mixer.vue
+++ b/src/pages/mixer/mixer.vue
@@ -943,18 +943,25 @@ page {
 
 .mixer-container {
   flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  // 避免被导航栏遮挡（真机上自动适配，浏览器上固定64px）
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  // 避免被导航栏遮挡(真机上自动适配,浏览器上固定64px)
   padding-top: max(calc(44px + env(safe-area-inset-top)), 64px);
-  padding-bottom: 200rpx;
+  padding-bottom: 140rpx;
+  
+  // 平板竖屏减小底部内边距
+  @media (min-width: 768px) and (orientation: portrait) {
+    padding-bottom: 130rpx;
+  }
 }
 
 // 选择状态栏
 .selection-status {
+  flex-shrink: 0;
   background: rgba(255, 255, 255, 0.95);
-  padding: 30rpx;
-  margin: 20rpx;
+  padding: 16rpx 24rpx;
+  margin: 16rpx 20rpx 8rpx 20rpx;
   border-radius: 20rpx;
   box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
   
@@ -1010,33 +1017,76 @@ page {
 }
 
 .channel-grid {
+  flex: 1;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320rpx, 1fr));
-  gap: 20rpx;
-  padding: 0 20rpx;
-  margin-bottom: 20rpx;
+  gap: 10rpx;
+  padding: 0 20rpx 10rpx 20rpx;
+  overflow: hidden;
+  align-content: stretch;
   
-  // 平板电脑自适应（3列布局）
-  @media (min-width: 768px) {
+  // 手机端竖屏：2列3行，固定高度
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  
+  // 手机端横屏：3列2行，固定高度
+  @media (orientation: landscape) and (max-width: 767px) {
     grid-template-columns: repeat(3, 1fr);
-    gap: 24rpx;
+    grid-template-rows: repeat(2, 1fr);
   }
   
-  // 大屏幕设备（4列布局）
-  @media (min-width: 1024px) {
-    grid-template-columns: repeat(4, 1fr);
-    gap: 28rpx;
+  // 平板竖屏(768px-1023px)：2列3行，进一步减小间距
+  @media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    gap: 8rpx;
+    padding: 0 14rpx 12rpx 14rpx;
+  }
+  
+  // 平板横屏(768px-1280px)：3列2行，减小间距
+  @media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 12rpx;
+    padding: 0 16rpx 16rpx 16rpx;
+  }
+  
+  // 大屏幕设备(>1280px)：3列2行
+  @media (min-width: 1281px) {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 24rpx;
+    padding: 0 32rpx 32rpx 32rpx;
   }
 }
 
 .channel-card {
   background: rgba(255, 255, 255, 0.95);
-  border-radius: 20rpx;
-  padding: 28rpx;
+  border-radius: 16rpx;
+  padding: 12rpx;
   box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
   border: 3rpx solid transparent;
   position: relative;
   transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 0;
+  overflow: hidden;
+  
+  // 平板竖屏进一步减小内边距
+  @media (min-width: 768px) and (orientation: portrait) {
+    padding: 6rpx;
+  }
+  
+  // 平板横屏减小内边距
+  @media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
+    padding: 12rpx;
+  }
+  
+  // 大屏增加内边距
+  @media (min-width: 1281px) {
+    padding: 20rpx;
+  }
   
   &.selected {
     border-color: #667eea;
@@ -1053,12 +1103,12 @@ page {
 .channel-checkbox-inline {
   display: flex;
   align-items: center;
-  margin-right: 12rpx;
+  margin-right: 10rpx;
   cursor: pointer;
   
   .checkbox-icon {
-    width: 44rpx;
-    height: 44rpx;
+    width: 40rpx;
+    height: 40rpx;
     border-radius: 50%;
     border: 3rpx solid #d1d5db;
     display: flex;
@@ -1079,7 +1129,7 @@ page {
       
       .check-mark {
         color: #fff;
-        font-size: 32rpx;
+        font-size: 28rpx;
         font-weight: 700;
       }
     }
@@ -1090,36 +1140,65 @@ page {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20rpx;
-  padding-bottom: 16rpx;
+  margin-bottom: 8rpx;
+  padding-bottom: 6rpx;
   border-bottom: 2rpx solid #e2e8f0;
+  flex-shrink: 0;
+  
+  // 平板竖屏减小间距
+  @media (min-width: 768px) and (orientation: portrait) {
+    margin-bottom: 2rpx;
+    padding-bottom: 2rpx;
+  }
+  
+  // 平板横屏减小间距
+  @media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
+    margin-bottom: 6rpx;
+    padding-bottom: 4rpx;
+  }
   
   .channel-title {
-    font-size: 36rpx;
+    font-size: 28rpx;
     font-weight: 700;
     color: #1e293b;
     letter-spacing: 1rpx;
+    
+    // 平板竖屏减小字体
+    @media (min-width: 768px) and (orientation: portrait) {
+      font-size: 26rpx;
+    }
   }
   
   .status-indicator {
     display: flex;
     align-items: center;
-    gap: 8rpx;
-    padding: 8rpx 16rpx;
+    gap: 6rpx;
+    padding: 6rpx 12rpx;
     background: #f1f5f9;
     border-radius: 24rpx;
     
+    // 平板及以上设备增加内边距
+    @media (min-width: 768px) {
+      gap: 8rpx;
+      padding: 8rpx 16rpx;
+    }
+    
     .status-dot {
-      width: 14rpx;
-      height: 14rpx;
+      width: 12rpx;
+      height: 12rpx;
       border-radius: 50%;
       background: #cbd5e1;
     }
     
     .status-text {
-      font-size: 22rpx;
+      font-size: 20rpx;
       color: #475569;
       font-weight: 600;
+      
+      // 平板竖屏减小字体
+      @media (min-width: 768px) and (orientation: portrait) {
+        font-size: 18rpx;
+      }
     }
     
     &.running {
@@ -1188,42 +1267,63 @@ page {
 }
 
 .mode-controls {
-  margin-bottom: 20rpx;
+  margin-bottom: 8rpx;
+  flex-shrink: 0;
+  
+  // 平板竖屏减小间距
+  @media (min-width: 768px) and (orientation: portrait) {
+    margin-bottom: 2rpx;
+  }
+  
+  // 平板横屏减小间距
+  @media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
+    margin-bottom: 6rpx;
+  }
 }
 
 .slider-group {
   display: flex;
   align-items: center;
-  padding: 12rpx 0rpx;
+  padding: 6rpx 0rpx;
   background: #f8fafc;
   border-radius: 12rpx;
   
+  // 平板竖屏减小内边距
+  @media (min-width: 768px) and (orientation: portrait) {
+    padding: 2rpx 0rpx;
+  }
+  
+  // 平板横屏减小内边距
+  @media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
+    padding: 4rpx 0rpx;
+  }
+
   .slider-label {
-    font-size: 26rpx;
+    font-size: 22rpx;
     color: #475569;
     font-weight: 600;
-    margin-right: 16rpx;
+    margin-right: 10rpx;
     flex-shrink: 0;
   }
   
   .slider-min-value {
-    font-size: 24rpx;
+    font-size: 22rpx;
     color: #64748b;
     font-weight: 600;
-    margin-right: 12rpx;
+    margin-right: 10rpx;
     flex-shrink: 0;
   }
   
   slider {
     flex: 1;
-    margin: 0 12rpx;
+    margin: 0 8rpx;
   }
   
   .slider-max-value {
-    font-size: 24rpx;
+    font-size: 22rpx;
     color: #64748b;
     font-weight: 600;
-    margin-left: 12rpx;
+    margin-left: 10rpx;
     flex-shrink: 0;
   }
 }
@@ -1232,21 +1332,38 @@ page {
   display: flex;
   align-items: baseline;
   justify-content: center;
-  gap: 8rpx;
-  margin-top: 12rpx;
-  padding: 12rpx;
+  gap: 6rpx;
+  margin-top: 6rpx;
+  padding: 6rpx;
   background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
   border-radius: 12rpx;
   border: 2rpx solid #86efac;
   
+  // 平板竖屏减小间距
+  @media (min-width: 768px) and (orientation: portrait) {
+    margin-top: 2rpx;
+    padding: 2rpx;
+  }
+  
+  // 平板横屏减小间距
+  @media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
+    margin-top: 4rpx;
+    padding: 4rpx;
+  }
+
   .speed-value {
-    font-size: 40rpx;
+    font-size: 32rpx;
     font-weight: 700;
     color: #166534;
+    
+    // 平板竖屏减小字体
+    @media (min-width: 768px) and (orientation: portrait) {
+      font-size: 28rpx;
+    }
   }
   
   .speed-unit {
-    font-size: 24rpx;
+    font-size: 22rpx;
     color: #16a34a;
     font-weight: 600;
   }
@@ -1255,29 +1372,52 @@ page {
 .timer-setting {
   display: flex;
   align-items: center;
-  gap: 8rpx;
-  padding: 16rpx;
+  gap: 6rpx;
+  padding: 8rpx;
   background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
   border-radius: 12rpx;
-  margin-bottom: 20rpx;
+  margin-bottom: 8rpx;
   border: 2rpx solid #fbbf24;
+  flex-shrink: 0;
   
+  // 平板竖屏减小间距和内边距
+  @media (min-width: 768px) and (orientation: portrait) {
+    margin-bottom: 2rpx;
+    padding: 3rpx;
+  }
+  
+  // 平板横屏减小间距和内边距
+  @media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
+    margin-bottom: 6rpx;
+    padding: 6rpx;
+  }
+
   .timer-emoji {
-    font-size: 28rpx;
+    font-size: 24rpx;
     line-height: 1;
   }
   
   .timer-label {
-    font-size: 24rpx;
+    font-size: 22rpx;
     color: #92400e;
     font-weight: 600;
+    
+    // 平板竖屏减小字体
+    @media (min-width: 768px) and (orientation: portrait) {
+      font-size: 20rpx;
+    }
   }
   
   .timer-value {
     flex: 1;
-    font-size: 24rpx;
+    font-size: 22rpx;
     color: #92400e;
     font-weight: 700;
+    
+    // 平板竖屏减小字体
+    @media (min-width: 768px) and (orientation: portrait) {
+      font-size: 20rpx;
+    }
   }
 }
 
@@ -1285,12 +1425,23 @@ page {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 16rpx;
+  gap: 12rpx;
+  flex-shrink: 0;
   
+  // 平板竖屏减小间距
+  @media (min-width: 768px) and (orientation: portrait) {
+    gap: 6rpx;
+  }
+  
+  // 平板横屏减小间距
+  @media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
+    gap: 10rpx;
+  }
+
   .start-btn,
   .stop-btn {
     flex: 1;
-    height: 76rpx;
+    height: 56rpx;
     border-radius: 16rpx;
     display: flex;
     align-items: center;
@@ -1298,11 +1449,31 @@ page {
     box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
     transition: all 0.3s ease;
     
+    // 平板竖屏进一步减小高度
+    @media (min-width: 768px) and (orientation: portrait) {
+      height: 42rpx;
+    }
+    
+    // 平板横屏减小高度
+    @media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
+      height: 54rpx;
+    }
+    
     .btn-text {
-      font-size: 28rpx;
+      font-size: 24rpx;
       color: #fff;
       font-weight: 700;
       letter-spacing: 2rpx;
+      
+      // 平板竖屏减小字体
+      @media (min-width: 768px) and (orientation: portrait) {
+        font-size: 22rpx;
+      }
+      
+      // 平板横屏及大屏增大字体
+      @media (min-width: 768px) and (orientation: landscape) {
+        font-size: 28rpx;
+      }
     }
     
     &:active {
@@ -1334,8 +1505,8 @@ page {
   left: 0;
   right: 0;
   background: rgba(255, 255, 255, 0.98);
-  padding: 28rpx 20rpx;
-  padding-bottom: calc(28rpx + env(safe-area-inset-bottom));
+  padding: 20rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
   border-top: 2rpx solid rgba(102, 126, 234, 0.1);
   box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.08);
   backdrop-filter: blur(10rpx);