qdintc/intc-mixer-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 页面自适应屏幕尺寸。

Browse Source
This commit is contained in:
tianyongbao
2025-12-19 00:01:31 +08:00
parent 0d40967167
commit 9df9dbdea9
2 changed files with 255 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/bluetooth/bluetooth.vue
View File

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

283
src/pages/mixer/mixer.vue
View File

@@ -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);