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

feat: 调整视频显示完整性和布局优化

Browse Source 
- 视频区域增加到320px，从顶部对齐显示完整画面
- 移除视频居中裁剪，改为从顶部显示完整内容
- 下注盘压缩到100px高度，节省空间给视频和路单
- 字体和按钮进一步缩小适应紧凑布局
- 筹码缩小到45x36px，完全透明背景
- 3D透视角度调整到6度
This commit is contained in:
li 2026-01-16 20:15:40 +08:00
parent 1f21ae1b57
commit e7a9c07ef8
1 changed files with 51 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}
}
}