feat: 优化竖屏游戏布局 - 筹码在视频内，下注盘缩小，路单完整显示
- 重新调整竖屏布局顺序：导航(60px) → 视频+筹码(200px) → 下注盘(200px) → 路单(flex自适应) - 筹码选择器移到视频右侧内部，透明背景和毛玻璃效果 - 缩小下注盘高度到200px，节省空间 - 路单区域使用flex自适应，确保完整显示 - 优化各游戏类型字体大小 - 确认/取消按钮缩小，位置调整
This commit is contained in:
li
parent
40976e4b45
commit
1f21ae1b57
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
.ace-tool/
|
||||||
2
node_modules/.cache/eslint/2da15f18.json
generated
vendored
2
node_modules/.cache/eslint/2da15f18.json
generated
vendored
File diff suppressed because one or more lines are too long
2
node_modules/.cache/eslint/b743df2c.json
generated
vendored
2
node_modules/.cache/eslint/b743df2c.json
generated
vendored
File diff suppressed because one or more lines are too long
@ -327,34 +327,435 @@ $tie-green: #27ae60;
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ----------------------
|
/* ----------------------
|
||||||
游戏页 (Play) 适配 - 保持原有布局
|
游戏页 (Play) 适配 - 竖屏布局优化
|
||||||
---------------------- */
|
---------------------- */
|
||||||
.play {
|
.play {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
&.offcamera::after {
|
&.offcamera::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
|
flex: none;
|
||||||
|
height: 60px;
|
||||||
|
background: $dark-bg-secondary;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.view {
|
.view {
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
/* 视频区域容器 */
|
||||||
.video {
|
.video {
|
||||||
|
flex: none;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
background: #000;
|
||||||
|
order: 1;
|
||||||
|
|
||||||
.left-btn,
|
.left-btn,
|
||||||
.right-btn {
|
.right-btn {
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 左侧按钮 - 在视频左下角 */
|
||||||
|
.left-btn {
|
||||||
|
position: absolute !important;
|
||||||
|
left: 0.3rem !important;
|
||||||
|
bottom: 0.3rem !important;
|
||||||
|
width: auto !important;
|
||||||
|
z-index: 20 !important;
|
||||||
|
|
||||||
|
.btn,
|
||||||
|
.dice-btn,
|
||||||
|
.roulette-btn {
|
||||||
|
width: 1rem !important;
|
||||||
|
height: 1rem !important;
|
||||||
|
margin-bottom: 0.25rem !important;
|
||||||
|
|
||||||
|
.img-btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧按钮 - 在视频右上角 */
|
||||||
|
.right-btn {
|
||||||
|
position: absolute !important;
|
||||||
|
right: 0.3rem !important;
|
||||||
|
top: 0.3rem !important;
|
||||||
|
width: auto !important;
|
||||||
|
z-index: 20 !important;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 0.9rem !important;
|
||||||
|
height: 0.9rem !important;
|
||||||
|
margin-bottom: 0.25rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 视频 iframe - 全宽 */
|
||||||
|
iframe {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
position: absolute !important;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
transform: none !important;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 游戏区域 - 下注盘在中间 */
|
||||||
|
.game-area {
|
||||||
|
flex: none;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: visible;
|
||||||
|
height: auto;
|
||||||
|
max-height: 220px;
|
||||||
|
order: 2;
|
||||||
|
|
||||||
|
/* 筹码选择器 - 在视频右侧内部，透明背景 */
|
||||||
|
.playchip {
|
||||||
|
position: fixed !important;
|
||||||
|
right: 0.2rem !important;
|
||||||
|
top: 65px !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
background: rgba(0, 0, 0, 0.3) !important;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
padding: 6px 4px !important;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||||
|
z-index: 999 !important;
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
align-items: center !important;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
|
||||||
|
.chip {
|
||||||
|
width: 60px !important;
|
||||||
|
height: 48px !important;
|
||||||
|
margin-bottom: 0.15rem !important;
|
||||||
|
background-size: contain !important;
|
||||||
|
background-repeat: no-repeat !important;
|
||||||
|
background-position: center !important;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
transform: scale(1.15) !important;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
transform: scale(1.4) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 游戏桌面 - 竖屏布局调整，缩小高度 */
|
||||||
|
.playtable {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.3rem 0.4rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.view {
|
||||||
|
position: relative !important;
|
||||||
|
left: auto !important;
|
||||||
|
right: auto !important;
|
||||||
|
bottom: auto !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 180px !important;
|
||||||
|
transform: perspective(500px) rotateX(10deg) !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确认/取消按钮 - 竖屏位置调整 */
|
||||||
|
::v-deep {
|
||||||
|
.touch-view {
|
||||||
|
bottom: 65% !important;
|
||||||
|
left: 50% !important;
|
||||||
|
z-index: 999 !important;
|
||||||
|
transform: translateX(-50%) !important;
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
margin-bottom: 0.05rem !important;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.12rem;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 0.75rem !important;
|
||||||
|
height: 0.75rem !important;
|
||||||
|
background-size: 1.8rem auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.num {
|
||||||
|
font-size: 0.28rem !important;
|
||||||
|
padding: 0.02rem 0.06rem !important;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 百家乐特定样式 */
|
||||||
|
.baccarat {
|
||||||
|
.list {
|
||||||
|
.item {
|
||||||
|
.text {
|
||||||
|
font-size: 0.32rem !important;
|
||||||
|
|
||||||
|
.big {
|
||||||
|
font-size: 0.4rem !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.money {
|
||||||
|
font-size: 0.28rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 龙虎特定样式 */
|
||||||
|
.longhu {
|
||||||
|
.list {
|
||||||
|
.item {
|
||||||
|
.text {
|
||||||
|
font-size: 0.32rem !important;
|
||||||
|
|
||||||
|
.big {
|
||||||
|
font-size: 0.4rem !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.money {
|
||||||
|
font-size: 0.28rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 牛牛/三卡特定样式 */
|
||||||
|
.bullbull {
|
||||||
|
.list {
|
||||||
|
.item {
|
||||||
|
.text {
|
||||||
|
font-size: 0.28rem !important;
|
||||||
|
|
||||||
|
.big {
|
||||||
|
font-size: 0.36rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.money {
|
||||||
|
font-size: 0.24rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 色碟特定样式 */
|
||||||
|
.toning {
|
||||||
|
.fifth .center .item,
|
||||||
|
.fourth .item,
|
||||||
|
.ratio .item {
|
||||||
|
.text {
|
||||||
|
font-size: 0.24rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.money {
|
||||||
|
font-size: 0.22rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 骰宝特定样式 */
|
||||||
|
.dice {
|
||||||
|
.fifth .center .item,
|
||||||
|
.fourth .item,
|
||||||
|
.ratio .item {
|
||||||
|
.text {
|
||||||
|
font-size: 0.24rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.money {
|
||||||
|
font-size: 0.22rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 轮盘特定样式 */
|
||||||
|
.roulette-table {
|
||||||
|
transform: scale(0.8) !important;
|
||||||
|
transform-origin: center center;
|
||||||
|
|
||||||
|
.table-area .item {
|
||||||
|
.money {
|
||||||
|
font-size: 0.22rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 路单区域 - 竖屏适配，放在最底部，增加空间 */
|
||||||
.wayView {
|
.wayView {
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 180px;
|
||||||
|
background: $card-bg;
|
||||||
|
border-top: 2px solid $border-color;
|
||||||
|
flex: 1;
|
||||||
|
order: 3;
|
||||||
|
min-height: 180px;
|
||||||
|
max-height: 220px;
|
||||||
|
|
||||||
|
.playway {
|
||||||
|
height: 100% !important;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.canvas-box {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 100px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.canvas {
|
||||||
|
height: 100% !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-btn {
|
||||||
|
font-size: 0.26rem !important;
|
||||||
|
padding: 0.08rem 0.2rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
flex: none;
|
||||||
|
height: 65px !important;
|
||||||
|
font-size: 0.26rem !important;
|
||||||
|
padding: 0.08rem 0.15rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
.left,
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left .item,
|
||||||
|
.right .item {
|
||||||
|
font-size: 0.26rem !important;
|
||||||
|
padding: 0.05rem 0.12rem !important;
|
||||||
|
margin: 0.02rem;
|
||||||
|
|
||||||
|
.lab {
|
||||||
|
font-size: 0.24rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num {
|
||||||
|
font-size: 0.26rem !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ask {
|
||||||
|
padding: 0.06rem 0.12rem !important;
|
||||||
|
margin: 0.02rem;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 0.24rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.05rem;
|
||||||
|
|
||||||
|
.li {
|
||||||
|
width: 0.26rem !important;
|
||||||
|
height: 0.26rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.totle-box {
|
||||||
|
width: auto !important;
|
||||||
|
min-width: 140px !important;
|
||||||
|
max-width: 40%;
|
||||||
|
|
||||||
|
.list {
|
||||||
|
font-size: 0.26rem !important;
|
||||||
|
padding: 0.06rem 0.1rem !important;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
line-height: 1.3;
|
||||||
|
margin: 0.02rem 0;
|
||||||
|
|
||||||
|
.lab,
|
||||||
|
.num {
|
||||||
|
font-size: 0.24rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokerView {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 切换台按钮 */
|
||||||
.switchView {
|
.switchView {
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
|
position: relative;
|
||||||
|
bottom: auto;
|
||||||
|
height: auto;
|
||||||
|
flex: none;
|
||||||
|
order: 4;
|
||||||
|
background: $dark-bg;
|
||||||
|
border-top: 1px solid $border-color;
|
||||||
|
padding: 0.2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user