og/GamePortrait
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化竖屏游戏布局 - 筹码在视频内，下注盘缩小，路单完整显示

Browse Source 
- 重新调整竖屏布局顺序：导航(60px) → 视频+筹码(200px) → 下注盘(200px) → 路单(flex自适应)
- 筹码选择器移到视频右侧内部，透明背景和毛玻璃效果
- 缩小下注盘高度到200px，节省空间
- 路单区域使用flex自适应，确保完整显示
- 优化各游戏类型字体大小
- 确认/取消按钮缩小，位置调整
This commit is contained in:
li 2026-01-16 20:05:41 +08:00
parent 40976e4b45
commit 1f21ae1b57
4 changed files with 408 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.ace-tool/

2
node_modules/.cache/eslint/2da15f18.json generated vendored
View File

File diff suppressed because one or more lines are too long

2
node_modules/.cache/eslint/b743df2c.json generated vendored
View File

File diff suppressed because one or more lines are too long

409
src/assets/style/portrait.scss
View File

@ -327,34 +327,435 @@ $tie-green: #27ae60;
}
/* ----------------------
游戏页 (Play) 适配 - 保持原有布局
游戏页 (Play) 适配 - 竖屏布局优化
---------------------- */
.play {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
&.offcamera::after {
display: none;
}
.nav {
transform: none !important;
flex: none;
height: 60px;
background: $dark-bg-secondary;
border-bottom: 1px solid $border-color;
}
.view {
transform: none !important;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
overflow-y: auto;
overflow-x: hidden;
/* 视频区域容器 */
.video {
flex: none;
position: relative;
width: 100%;
height: 200px;
background: #000;
order: 1;
.left-btn,
.right-btn {
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 {
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 {
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;
}
}