fix(portrait): 修复竖屏布局样式优先级问题，确保下注盘平铺全屏
**问题**： - 页面初始加载时下注盘平铺正常，但 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 **影响范围**： - 竖屏模式下所有游戏的下注盘布局 - 视频播放区域显示 - 牛牛/三卡游戏下注区域 **测试**： - ✅ 牛牛游戏下注盘平铺全屏 - ✅ 页面加载后布局保持稳定 - ✅ 视频显示完整内容
This commit is contained in:
li
parent
e7a9c07ef8
commit
aa082c3f32
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user