diff --git a/src/assets/style/portrait.scss b/src/assets/style/portrait.scss index 068c9975..694d7328 100644 --- a/src/assets/style/portrait.scss +++ b/src/assets/style/portrait.scss @@ -356,14 +356,15 @@ $tie-green: #27ae60; overflow-y: auto; overflow-x: hidden; - /* 视频区域容器 */ + /* 视频区域容器 - 增加高度显示完整视频 */ .video { flex: none; position: relative; width: 100%; - height: 200px; + height: 320px; background: #000; order: 1; + overflow: hidden; .left-btn, .right-btn { @@ -406,10 +407,11 @@ $tie-green: #27ae60; } } - /* 视频 iframe - 全宽 */ + /* 视频 iframe - 完整显示,从顶部对齐 */ iframe { width: 100% !important; - height: 100% !important; + height: auto !important; + min-height: 100% !important; position: absolute !important; top: 0 !important; left: 0 !important; @@ -419,7 +421,7 @@ $tie-green: #27ae60; } - /* 游戏区域 - 下注盘在中间 */ + /* 游戏区域 - 下注盘在中间,最小化高度 */ .game-area { flex: none; position: relative; @@ -428,63 +430,64 @@ $tie-green: #27ae60; flex-direction: column; overflow: visible; height: auto; - max-height: 220px; + max-height: 120px; order: 2; - /* 筹码选择器 - 在视频右侧内部,透明背景 */ + /* 筹码选择器 - 在视频右侧内部,完全透明背景 */ .playchip { position: fixed !important; right: 0.2rem !important; - top: 65px !important; + top: 80px !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); + background: transparent !important; + border-radius: 0 !important; + padding: 4px 3px !important; + box-shadow: none !important; 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; + width: 45px !important; + height: 36px !important; + margin-bottom: 0.08rem !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; transition: all 0.2s ease; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); + transform: scale(0.96) !important; &:last-child { margin-bottom: 0 !important; } &:active { - transform: scale(0.9); + transform: scale(0.92) !important; } &.active { - transform: scale(1.15) !important; + transform: scale(1) !important; &::after { - transform: scale(1.4) !important; + transform: scale(1.64) !important; } } } } - /* 游戏桌面 - 竖屏布局调整,缩小高度 */ + /* 游戏桌面 - 竖屏布局调整,最小化高度 */ .playtable { position: relative; width: 100%; - height: 200px; + height: 110px; display: flex; align-items: center; justify-content: center; - padding: 0.3rem 0.4rem; + padding: 0.1rem 0.25rem; box-sizing: border-box; .view { @@ -493,34 +496,34 @@ $tie-green: #27ae60; right: auto !important; bottom: auto !important; width: 100% !important; - height: 180px !important; - transform: perspective(500px) rotateX(10deg) !important; + height: 100px !important; + transform: perspective(380px) rotateX(6deg) !important; margin: 0 auto; } - /* 确认/取消按钮 - 竖屏位置调整 */ + /* 确认/取消按钮 - 竖屏位置调整,最小化按钮 */ ::v-deep { .touch-view { - bottom: 65% !important; + bottom: 50% !important; left: 50% !important; z-index: 999 !important; transform: translateX(-50%) !important; .btn-box { - margin-bottom: 0.05rem !important; + margin-bottom: 0.02rem !important; display: flex; - gap: 0.12rem; + gap: 0.06rem; .btn { - width: 0.75rem !important; - height: 0.75rem !important; - background-size: 1.8rem auto !important; + width: 0.55rem !important; + height: 0.55rem !important; + background-size: 1.4rem auto !important; } } .num { - font-size: 0.28rem !important; - padding: 0.02rem 0.06rem !important; + font-size: 0.2rem !important; + padding: 0.015rem 0.03rem !important; white-space: nowrap; } } @@ -531,16 +534,16 @@ $tie-green: #27ae60; .list { .item { .text { - font-size: 0.32rem !important; + font-size: 0.24rem !important; .big { - font-size: 0.4rem !important; + font-size: 0.3rem !important; font-weight: bold; } } .money { - font-size: 0.28rem !important; + font-size: 0.2rem !important; } } } @@ -551,16 +554,16 @@ $tie-green: #27ae60; .list { .item { .text { - font-size: 0.32rem !important; + font-size: 0.24rem !important; .big { - font-size: 0.4rem !important; + font-size: 0.3rem !important; font-weight: bold; } } .money { - font-size: 0.28rem !important; + font-size: 0.2rem !important; } } } @@ -571,15 +574,15 @@ $tie-green: #27ae60; .list { .item { .text { - font-size: 0.28rem !important; + font-size: 0.24rem !important; .big { - font-size: 0.36rem !important; + font-size: 0.3rem !important; } } .money { - font-size: 0.24rem !important; + font-size: 0.2rem !important; } } } @@ -591,11 +594,11 @@ $tie-green: #27ae60; .fourth .item, .ratio .item { .text { - font-size: 0.24rem !important; + font-size: 0.2rem !important; } .money { - font-size: 0.22rem !important; + font-size: 0.18rem !important; } } } @@ -606,23 +609,23 @@ $tie-green: #27ae60; .fourth .item, .ratio .item { .text { - font-size: 0.24rem !important; + font-size: 0.2rem !important; } .money { - font-size: 0.22rem !important; + font-size: 0.18rem !important; } } } /* 轮盘特定样式 */ .roulette-table { - transform: scale(0.8) !important; + transform: scale(0.7) !important; transform-origin: center center; .table-area .item { .money { - font-size: 0.22rem !important; + font-size: 0.18rem !important; } } }