From aa082c3f32ed00e8630664bde973d59bc11d6509 Mon Sep 17 00:00:00 2001 From: li Date: Fri, 16 Jan 2026 20:46:38 +0800 Subject: [PATCH] =?UTF-8?q?fix(portrait):=20=E4=BF=AE=E5=A4=8D=E7=AB=96?= =?UTF-8?q?=E5=B1=8F=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=85=88?= =?UTF-8?q?=E7=BA=A7=E9=97=AE=E9=A2=98=EF=BC=8C=E7=A1=AE=E4=BF=9D=E4=B8=8B?= =?UTF-8?q?=E6=B3=A8=E7=9B=98=E5=B9=B3=E9=93=BA=E5=85=A8=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **问题**： - 页面初始加载时下注盘平铺正常，但 Vue 组件加载后被 scoped 样式覆盖 - 牛牛游戏下注盘只占屏幕中间很小区域，两侧留白严重 - 视频显示不完整，顶部时间戳被裁剪 **解决方案**： 1. 使用子选择器（>）增加 CSS 优先级覆盖 scoped 样式 - .play > .view - .play > .view > .game-area - .play > .view > .game-area > .playtable 2. 修复布局容器对齐方式 - .view: align-items: stretch（覆盖原始的 center） - .playtable: display: block（避免 flex 居中问题） 3. 强制全宽显示 - 为所有容器添加 width/max-width/min-width: 100% !important - 移除所有 margin 和 padding 4. 优化视频显示 - object-fit: contain（完整显示不裁剪） - 移除 transform 居中和缩放 - 增加最小高度到 380px **影响范围**： - 竖屏模式下所有游戏的下注盘布局 - 视频播放区域显示 - 牛牛/三卡游戏下注区域 **测试**： - ✅ 牛牛游戏下注盘平铺全屏 - ✅ 页面加载后布局保持稳定 - ✅ 视频显示完整内容 --- src/assets/style/portrait.scss | 123 +++++++++++++++++++++------------ 1 file changed, 80 insertions(+), 43 deletions(-) diff --git a/src/assets/style/portrait.scss b/src/assets/style/portrait.scss index 694d7328..4c43dfd3 100644 --- a/src/assets/style/portrait.scss +++ b/src/assets/style/portrait.scss @@ -330,10 +330,10 @@ $tie-green: #27ae60; 游戏页 (Play) 适配 - 竖屏布局优化 ---------------------- */ .play { - display: flex; - flex-direction: column; - height: 100%; - width: 100%; + display: flex !important; + flex-direction: column !important; + height: 100% !important; + width: 100% !important; &.offcamera::after { display: none; @@ -347,21 +347,26 @@ $tie-green: #27ae60; border-bottom: 1px solid $border-color; } - .view { + /* 使用更高优先级的选择器覆盖scoped样式 */ + > .view { transform: none !important; - flex: 1; - display: flex; - flex-direction: column; - position: relative; - overflow-y: auto; - overflow-x: hidden; + flex: 1 !important; + display: flex !important; + flex-direction: column !important; + position: relative !important; + overflow-y: auto !important; + overflow-x: hidden !important; + align-items: stretch !important; /* 覆盖原始的center，让子元素占满宽度 */ + width: 100% !important; + max-width: 100% !important; - /* 视频区域容器 - 增加高度显示完整视频 */ + /* 视频区域容器 - 最大化显示完整视频 */ .video { - flex: none; + flex: 1; position: relative; width: 100%; - height: 320px; + min-height: 360px; + max-height: 50vh; background: #000; order: 1; overflow: hidden; @@ -407,37 +412,51 @@ $tie-green: #27ae60; } } - /* 视频 iframe - 完整显示，从顶部对齐 */ + /* 视频 iframe - 竖屏特殊处理：不放大、不居中、从顶部完整显示 */ iframe { width: 100% !important; - height: auto !important; - min-height: 100% !important; + height: 100% !important; + min-height: 380px !important; + max-height: 100% !important; position: absolute !important; top: 0 !important; left: 0 !important; - transform: none !important; - border: none; + bottom: 0 !important; + margin: 0 !important; /* 移除所有margin */ + padding: 0 !important; + transform: none !important; /* 移除任何transform（包括居中和缩放） */ + border: none !important; + object-fit: contain !important; /* contain模式：完整显示视频内容，不裁剪 */ + } + + /* 针对scale状态也要覆盖 */ + iframe.scale { + transform: none !important; /* 即使有scale类也不缩放 */ } } - /* 游戏区域 - 下注盘在中间，最小化高度 */ - .game-area { - flex: none; - position: relative; - width: 100%; - display: flex; - flex-direction: column; - overflow: visible; - height: auto; - max-height: 120px; - order: 2; + /* 游戏区域 - 下注盘在中间，最小化高度 - 使用子选择器增加优先级 */ + > .game-area { + flex: none !important; + position: relative !important; + width: 100% !important; + max-width: 100% !important; + min-width: 100% !important; + display: flex !important; + flex-direction: column !important; + overflow: visible !important; + height: auto !important; + max-height: 120px !important; + order: 2 !important; + margin: 0 !important; + padding: 0 !important; /* 筹码选择器 - 在视频右侧内部，完全透明背景 */ .playchip { position: fixed !important; right: 0.2rem !important; - top: 80px !important; + top: 90px !important; width: auto !important; height: auto !important; background: transparent !important; @@ -480,17 +499,16 @@ $tie-green: #27ae60; } /* 游戏桌面 - 竖屏布局调整，最小化高度 */ - .playtable { - position: relative; - width: 100%; - height: 110px; - display: flex; - align-items: center; - justify-content: center; - padding: 0.1rem 0.25rem; - box-sizing: border-box; + > .playtable { + position: relative !important; + width: 100% !important; + height: 110px !important; + display: block !important; /* 改为block布局，避免flex居中的问题 */ + padding: 0 !important; /* 移除左右padding，让下注盘平铺全屏 */ + margin: 0 !important; + box-sizing: border-box !important; - .view { + > .view { position: relative !important; left: auto !important; right: auto !important; @@ -498,7 +516,15 @@ $tie-green: #27ae60; width: 100% !important; height: 100px !important; transform: perspective(380px) rotateX(6deg) !important; - margin: 0 auto; + margin: 0 !important; /* 移除margin，让内容占满宽度 */ + max-width: 100% !important; /* 确保不被限制宽度 */ + min-width: 100% !important; + + /* 牛牛游戏需要更多高度来显示3列x4行布局 */ + &.nn { + height: 100% !important; + width: 100% !important; + } } /* 确认/取消按钮 - 竖屏位置调整，最小化按钮 */ @@ -570,8 +596,19 @@ $tie-green: #27ae60; } /* 牛牛/三卡特定样式 */ - .bullbull { + .nn { + height: 100% !important; /* 确保牛牛容器占满父元素 */ + width: 100% !important; /* 强制全宽显示 */ + max-width: 100% !important; + min-width: 100% !important; + margin: 0 !important; + padding: 0 !important; + .list { + width: 33.33% !important; /* 确保每列占33.33% */ + max-width: 33.33% !important; + flex: 0 0 33.33% !important; /* flex不增长不缩小，固定33.33% */ + .item { .text { font-size: 0.24rem !important;