diff --git a/src/assets/style/portrait.scss b/src/assets/style/portrait.scss index 4c43dfd3..472d2bcb 100644 --- a/src/assets/style/portrait.scss +++ b/src/assets/style/portrait.scss @@ -508,15 +508,17 @@ $tie-green: #27ae60; margin: 0 !important; box-sizing: border-box !important; - > .view { + /* 重复选择器增加优先级,覆盖 scoped 样式 */ + .view.view { position: relative !important; - left: auto !important; - right: auto !important; + left: 0 !important; /* 覆盖原始的 left: 3rem */ + right: 0 !important; /* 覆盖原始的 right: 3rem */ bottom: auto !important; width: 100% !important; height: 100px !important; transform: perspective(380px) rotateX(6deg) !important; margin: 0 !important; /* 移除margin,让内容占满宽度 */ + padding: 0 !important; /* 移除padding */ max-width: 100% !important; /* 确保不被限制宽度 */ min-width: 100% !important; @@ -525,6 +527,14 @@ $tie-green: #27ae60; height: 100% !important; width: 100% !important; } + + /* 百家乐和龙虎游戏确保全宽 */ + &.baccarat, + &.longhu { + width: 100% !important; + max-width: 100% !important; + min-width: 100% !important; + } } /* 确认/取消按钮 - 竖屏位置调整,最小化按钮 */ @@ -555,9 +565,22 @@ $tie-green: #27ae60; } } - /* 百家乐特定样式 */ - .baccarat { + /* 百家乐特定样式 - 同时针对 .view.baccarat */ + .baccarat.baccarat, + .view.baccarat { + width: 100% !important; + max-width: 100% !important; + min-width: 100% !important; + margin: 0 !important; + padding: 0 !important; + left: 0 !important; + right: 0 !important; + .list { + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + .item { .text { font-size: 0.24rem !important; @@ -575,9 +598,22 @@ $tie-green: #27ae60; } } - /* 龙虎特定样式 */ - .longhu { + /* 龙虎特定样式 - 同时针对 .view.longhu */ + .longhu.longhu, + .view.longhu { + width: 100% !important; + max-width: 100% !important; + min-width: 100% !important; + margin: 0 !important; + padding: 0 !important; + left: 0 !important; + right: 0 !important; + .list { + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + .item { .text { font-size: 0.24rem !important; @@ -675,23 +711,29 @@ $tie-green: #27ae60; transform: none !important; position: relative; width: 100%; - height: 180px; + height: 250px; background: $card-bg; border-top: 2px solid $border-color; flex: 1; order: 3; - min-height: 180px; - max-height: 220px; + min-height: 250px; + max-height: 300px; + display: flex !important; + flex-direction: row !important; .playway { height: 100% !important; - width: 100%; - display: flex; - flex-direction: column; + flex: 1 !important; + display: flex !important; + flex-direction: row !important; /* 横向布局:路单画布在左,统计信息在右 */ + align-items: stretch !important; + order: 2 !important; .canvas-box { - flex: 1; - min-height: 100px; + flex: 1 !important; /* 路单画布占据剩余空间,给16张牌足够的横向显示空间 */ + min-width: 0 !important; /* 允许缩小 */ + width: auto !important; + height: 100% !important; position: relative; .canvas { @@ -707,73 +749,90 @@ $tie-green: #27ae60; .btn-box { flex: none; - height: 65px !important; - font-size: 0.26rem !important; - padding: 0.08rem 0.15rem; + width: 150px !important; + height: 100% !important; + font-size: 0.24rem !important; + padding: 0.06rem 0.1rem; display: flex; - align-items: center; + flex-direction: column; + border-left: 1px solid $border-color; background: rgba(0, 0, 0, 0.3); .left, .right { flex: 1; display: flex; - flex-wrap: wrap; - align-items: center; + flex-direction: column; + justify-content: space-evenly; + align-items: flex-start; } .left .item, .right .item { - font-size: 0.26rem !important; - padding: 0.05rem 0.12rem !important; - margin: 0.02rem; + font-size: 0.24rem !important; + padding: 0.03rem 0.08rem !important; + margin: 0.02rem 0; + width: 100%; .lab { - font-size: 0.24rem !important; + font-size: 0.22rem !important; } .num { - font-size: 0.26rem !important; + font-size: 0.24rem !important; font-weight: bold; } } .ask { - padding: 0.06rem 0.12rem !important; - margin: 0.02rem; + padding: 0.04rem 0.08rem !important; + margin: 0.02rem 0; + width: 100%; .text { - font-size: 0.24rem !important; + font-size: 0.22rem !important; } .btn { display: flex; - gap: 0.05rem; + gap: 0.04rem; .li { - width: 0.26rem !important; - height: 0.26rem !important; + width: 0.24rem !important; + height: 0.24rem !important; } } } } .totle-box { - width: auto !important; - min-width: 140px !important; - max-width: 40%; + flex: none; + width: 100px !important; + height: 100% !important; + margin: 0 !important; + border-left: 1px solid $border-color !important; .list { - font-size: 0.26rem !important; - padding: 0.06rem 0.1rem !important; + width: 100% !important; + height: 100% !important; + display: flex !important; + flex-direction: column !important; + justify-content: space-evenly !important; + align-items: flex-start !important; + font-size: 0.22rem !important; + padding: 0.06rem 0.08rem !important; .item { - line-height: 1.3; - margin: 0.02rem 0; + line-height: 1.4; + margin: 0.01rem 0; + width: 100%; + + .lab { + font-size: 0.2rem !important; + } - .lab, .num { - font-size: 0.24rem !important; + font-size: 0.22rem !important; } } } @@ -781,7 +840,55 @@ $tie-green: #27ae60; } .pokerView { - pointer-events: none; + flex: none !important; + width: 200px !important; + height: 100% !important; + position: relative !important; + pointer-events: none !important; + order: 1 !important; + border-right: 1px solid $border-color; + + /* 牛牛扑克牌布局 */ + .poker-box.nn { + width: 100% !important; + height: 100% !important; + display: flex !important; + flex-direction: row !important; + flex-wrap: wrap !important; + padding: 0.05rem !important; + + .list { + width: 50% !important; + height: 50% !important; + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-content: flex-start !important; + padding: 0.03rem !important; + box-sizing: border-box !important; + + .title { + font-size: 0.24rem !important; + margin-bottom: 0.02rem !important; + } + + .role { + font-size: 0.2rem !important; + margin-bottom: 0.02rem !important; + } + + .item { + width: 0.4rem !important; + height: 0.56rem !important; + margin: 0.01rem 0 !important; + + .card { + width: 100% !important; + height: 100% !important; + } + } + } + } } } diff --git a/src/components/PlayTable/Index.vue b/src/components/PlayTable/Index.vue index de5c3266..e0a536f3 100644 --- a/src/components/PlayTable/Index.vue +++ b/src/components/PlayTable/Index.vue @@ -27,6 +27,7 @@ @downBet="downBet" @confirmChip="confirmChip" @cancelChip="cancelChip" + @undoChip="undoChip" /> @@ -103,6 +108,7 @@ @downBet="downBet" @confirmChip="confirmChip" @cancelChip="cancelChip" + @undoChip="undoChip" /> @@ -357,6 +364,33 @@ export default { }) } + // 撤销当前区域最后一次下注 + const undoChip = () => { + if (touch.value) { + const type = touch.value + // 找到当前区域所有自己下注的筹码 + const selfChips = chipArray[type].filter((v) => v.type == "self") + if (selfChips.length > 0) { + // 移除最后一个筹码 + const lastChip = selfChips[selfChips.length - 1] + const lastIndex = chipArray[type].lastIndexOf(lastChip) + chipArray[type].splice(lastIndex, 1) + + // 更新金额 + downChip[type] = Math.max(0, downChip[type] - lastChip.value) + sendChip[type] = Math.max(0, sendChip[type] - lastChip.value) + + // 播放音效 + audioMp3(["push"]).Play() + + // 如果没有筹码了,取消触摸状态 + if (chipArray[type].filter((v) => v.type == "self").length === 0) { + touch.value = null + } + } + } + } + // 确认下注 const confirmChip = () => { if (props.sendMode == "startBetCountDown") { @@ -647,6 +681,7 @@ export default { downBet, resetChip, cancelChip, + undoChip, confirmChip } } @@ -735,4 +770,17 @@ $gold: #c5a059; color: #f3c866; } } + +/* 竖屏模式下,移除左右空白,下注盘平铺全屏 */ +@media screen and (orientation: portrait) { + .playtable { + .view { + left: 0 !important; + right: 0 !important; + width: 100% !important; + margin: 0 !important; + padding: 0 !important; + } + } +} diff --git a/src/components/PlayTable/TableBaccarat.vue b/src/components/PlayTable/TableBaccarat.vue index c9b3b43a..d965f341 100644 --- a/src/components/PlayTable/TableBaccarat.vue +++ b/src/components/PlayTable/TableBaccarat.vue @@ -6,6 +6,7 @@ { + context.emit("undoChip") + } + return { Type, Lang, downBet, confirmChip, cancelChip, undoChip } } } diff --git a/src/components/PlayTable/TableBullbull.vue b/src/components/PlayTable/TableBullbull.vue index b7077faa..4016e090 100644 --- a/src/components/PlayTable/TableBullbull.vue +++ b/src/components/PlayTable/TableBullbull.vue @@ -8,6 +8,7 @@ { + context.emit("undoChip") + } + return { Type, Lang, downBet, confirmChip, cancelChip, undoChip } } } diff --git a/src/components/PlayTable/TableDice.vue b/src/components/PlayTable/TableDice.vue index b527cad1..278f838d 100644 --- a/src/components/PlayTable/TableDice.vue +++ b/src/components/PlayTable/TableDice.vue @@ -7,6 +7,7 @@ { + context.emit("undoChip") + } + return { Type, Lang, downBet, confirmChip, cancelChip, undoChip } } } diff --git a/src/components/PlayTable/TableLonghu.vue b/src/components/PlayTable/TableLonghu.vue index 96404286..b6ba3ace 100644 --- a/src/components/PlayTable/TableLonghu.vue +++ b/src/components/PlayTable/TableLonghu.vue @@ -6,6 +6,7 @@ { + context.emit("undoChip") + } + return { Type, Lang, downBet, confirmChip, cancelChip, undoChip } } } diff --git a/src/components/PlayTable/TableRouletteEuropean.vue b/src/components/PlayTable/TableRouletteEuropean.vue index 3c89be72..63b0a69a 100644 --- a/src/components/PlayTable/TableRouletteEuropean.vue +++ b/src/components/PlayTable/TableRouletteEuropean.vue @@ -7,6 +7,7 @@ { + context.emit("undoChip") + } const testClick = () => { console.log("点击有效") } - return { Type, Lang, downBet, confirmChip, cancelChip, testClick } + return { Type, Lang, downBet, confirmChip, cancelChip, undoChip, testClick } } } diff --git a/src/components/PlayTable/TableRouletteFrench.vue b/src/components/PlayTable/TableRouletteFrench.vue index 5daa127b..45e41e81 100644 --- a/src/components/PlayTable/TableRouletteFrench.vue +++ b/src/components/PlayTable/TableRouletteFrench.vue @@ -8,6 +8,7 @@ { + context.emit("undoChip") + } const testClick = () => { // console.log("点击有效") } - return { Type, Lang, downBet, confirmChip, cancelChip, testClick } + return { Type, Lang, downBet, confirmChip, cancelChip, undoChip, testClick } } } diff --git a/src/components/PlayTable/TableToning.vue b/src/components/PlayTable/TableToning.vue index b5ad156a..0e5077d8 100644 --- a/src/components/PlayTable/TableToning.vue +++ b/src/components/PlayTable/TableToning.vue @@ -6,6 +6,7 @@ { + context.emit("undoChip") + } + return { Type, Lang, downBet, confirmChip, cancelChip, undoChip } } } diff --git a/src/components/PlayWay.vue b/src/components/PlayWay.vue index 23a43ed0..e6bba32e 100644 --- a/src/components/PlayWay.vue +++ b/src/components/PlayWay.vue @@ -498,4 +498,71 @@ $gold: #c5a059; } } } + +/* 竖屏模式下,路单内容适配 */ +@media screen and (orientation: portrait) { + .playway.playway { + display: flex !important; + flex-direction: row !important; + align-items: stretch !important; + width: 100% !important; + height: 100% !important; + + .canvas-box.canvas-box { + flex: 1 !important; + min-width: 0 !important; + width: auto !important; + height: 100% !important; + margin: 0 !important; + } + + .btn-box.btn-box { + flex: none !important; + width: 150px !important; + height: 100% !important; + margin: 0 !important; + border-left: 1px solid #444 !important; + flex-direction: column !important; + + .left, + .right { + flex: 1 !important; + flex-direction: column !important; + justify-content: space-evenly !important; + } + } + + .totle-box.totle-box { + flex: none !important; + width: 100px !important; + height: 100% !important; + margin: 0 !important; + border-left: 1px solid #444 !important; + + .list.list { + width: 100% !important; + height: 100% !important; + font-size: 0.22rem !important; + padding: 0.06rem 0.08rem !important; + display: flex !important; + flex-direction: column !important; + justify-content: space-evenly !important; + align-items: flex-start !important; + + .item { + width: 100% !important; + margin: 0.01rem 0 !important; + + .lab { + font-size: 0.2rem !important; + } + + .num { + font-size: 0.22rem !important; + } + } + } + } + } +} diff --git a/src/components/Poker.vue b/src/components/Poker.vue index 4d417069..7db87e5c 100644 --- a/src/components/Poker.vue +++ b/src/components/Poker.vue @@ -1057,4 +1057,5 @@ export default { .poker-box.pt_nn .list .role { transform: rotateX(0deg); } + diff --git a/src/components/confirmBet.vue b/src/components/confirmBet.vue index 67236a9d..3aa5543d 100644 --- a/src/components/confirmBet.vue +++ b/src/components/confirmBet.vue @@ -1,7 +1,11 @@