feat: 调整视频显示完整性和布局优化
- 视频区域增加到320px，从顶部对齐显示完整画面 - 移除视频居中裁剪，改为从顶部显示完整内容 - 下注盘压缩到100px高度，节省空间给视频和路单 - 字体和按钮进一步缩小适应紧凑布局 - 筹码缩小到45x36px，完全透明背景 - 3D透视角度调整到6度
This commit is contained in:
li
parent
1f21ae1b57
commit
e7a9c07ef8
@ -356,14 +356,15 @@ $tie-green: #27ae60;
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
/* 视频区域容器 */
|
/* 视频区域容器 - 增加高度显示完整视频 */
|
||||||
.video {
|
.video {
|
||||||
flex: none;
|
flex: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: 320px;
|
||||||
background: #000;
|
background: #000;
|
||||||
order: 1;
|
order: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.left-btn,
|
.left-btn,
|
||||||
.right-btn {
|
.right-btn {
|
||||||
@ -406,10 +407,11 @@ $tie-green: #27ae60;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 视频 iframe - 全宽 */
|
/* 视频 iframe - 完整显示，从顶部对齐 */
|
||||||
iframe {
|
iframe {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
height: 100% !important;
|
height: auto !important;
|
||||||
|
min-height: 100% !important;
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
top: 0 !important;
|
top: 0 !important;
|
||||||
left: 0 !important;
|
left: 0 !important;
|
||||||
@ -419,7 +421,7 @@ $tie-green: #27ae60;
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 游戏区域 - 下注盘在中间 */
|
/* 游戏区域 - 下注盘在中间，最小化高度 */
|
||||||
.game-area {
|
.game-area {
|
||||||
flex: none;
|
flex: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -428,63 +430,64 @@ $tie-green: #27ae60;
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
height: auto;
|
height: auto;
|
||||||
max-height: 220px;
|
max-height: 120px;
|
||||||
order: 2;
|
order: 2;
|
||||||
|
|
||||||
/* 筹码选择器 - 在视频右侧内部，透明背景 */
|
/* 筹码选择器 - 在视频右侧内部，完全透明背景 */
|
||||||
.playchip {
|
.playchip {
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
right: 0.2rem !important;
|
right: 0.2rem !important;
|
||||||
top: 65px !important;
|
top: 80px !important;
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
background: rgba(0, 0, 0, 0.3) !important;
|
background: transparent !important;
|
||||||
border-radius: 8px !important;
|
border-radius: 0 !important;
|
||||||
padding: 6px 4px !important;
|
padding: 4px 3px !important;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
box-shadow: none !important;
|
||||||
z-index: 999 !important;
|
z-index: 999 !important;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-direction: column !important;
|
flex-direction: column !important;
|
||||||
justify-content: flex-start !important;
|
justify-content: flex-start !important;
|
||||||
align-items: center !important;
|
align-items: center !important;
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
|
|
||||||
.chip {
|
.chip {
|
||||||
width: 60px !important;
|
width: 45px !important;
|
||||||
height: 48px !important;
|
height: 36px !important;
|
||||||
margin-bottom: 0.15rem !important;
|
margin-bottom: 0.08rem !important;
|
||||||
background-size: contain !important;
|
background-size: contain !important;
|
||||||
background-repeat: no-repeat !important;
|
background-repeat: no-repeat !important;
|
||||||
background-position: center !important;
|
background-position: center !important;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
|
||||||
|
transform: scale(0.96) !important;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.9);
|
transform: scale(0.92) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
transform: scale(1.15) !important;
|
transform: scale(1) !important;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
transform: scale(1.4) !important;
|
transform: scale(1.64) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 游戏桌面 - 竖屏布局调整，缩小高度 */
|
/* 游戏桌面 - 竖屏布局调整，最小化高度 */
|
||||||
.playtable {
|
.playtable {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: 110px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0.3rem 0.4rem;
|
padding: 0.1rem 0.25rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.view {
|
.view {
|
||||||
@ -493,34 +496,34 @@ $tie-green: #27ae60;
|
|||||||
right: auto !important;
|
right: auto !important;
|
||||||
bottom: auto !important;
|
bottom: auto !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
height: 180px !important;
|
height: 100px !important;
|
||||||
transform: perspective(500px) rotateX(10deg) !important;
|
transform: perspective(380px) rotateX(6deg) !important;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 确认/取消按钮 - 竖屏位置调整 */
|
/* 确认/取消按钮 - 竖屏位置调整，最小化按钮 */
|
||||||
::v-deep {
|
::v-deep {
|
||||||
.touch-view {
|
.touch-view {
|
||||||
bottom: 65% !important;
|
bottom: 50% !important;
|
||||||
left: 50% !important;
|
left: 50% !important;
|
||||||
z-index: 999 !important;
|
z-index: 999 !important;
|
||||||
transform: translateX(-50%) !important;
|
transform: translateX(-50%) !important;
|
||||||
|
|
||||||
.btn-box {
|
.btn-box {
|
||||||
margin-bottom: 0.05rem !important;
|
margin-bottom: 0.02rem !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.12rem;
|
gap: 0.06rem;
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
width: 0.75rem !important;
|
width: 0.55rem !important;
|
||||||
height: 0.75rem !important;
|
height: 0.55rem !important;
|
||||||
background-size: 1.8rem auto !important;
|
background-size: 1.4rem auto !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.num {
|
.num {
|
||||||
font-size: 0.28rem !important;
|
font-size: 0.2rem !important;
|
||||||
padding: 0.02rem 0.06rem !important;
|
padding: 0.015rem 0.03rem !important;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -531,16 +534,16 @@ $tie-green: #27ae60;
|
|||||||
.list {
|
.list {
|
||||||
.item {
|
.item {
|
||||||
.text {
|
.text {
|
||||||
font-size: 0.32rem !important;
|
font-size: 0.24rem !important;
|
||||||
|
|
||||||
.big {
|
.big {
|
||||||
font-size: 0.4rem !important;
|
font-size: 0.3rem !important;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.money {
|
.money {
|
||||||
font-size: 0.28rem !important;
|
font-size: 0.2rem !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -551,16 +554,16 @@ $tie-green: #27ae60;
|
|||||||
.list {
|
.list {
|
||||||
.item {
|
.item {
|
||||||
.text {
|
.text {
|
||||||
font-size: 0.32rem !important;
|
font-size: 0.24rem !important;
|
||||||
|
|
||||||
.big {
|
.big {
|
||||||
font-size: 0.4rem !important;
|
font-size: 0.3rem !important;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.money {
|
.money {
|
||||||
font-size: 0.28rem !important;
|
font-size: 0.2rem !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -571,15 +574,15 @@ $tie-green: #27ae60;
|
|||||||
.list {
|
.list {
|
||||||
.item {
|
.item {
|
||||||
.text {
|
.text {
|
||||||
font-size: 0.28rem !important;
|
font-size: 0.24rem !important;
|
||||||
|
|
||||||
.big {
|
.big {
|
||||||
font-size: 0.36rem !important;
|
font-size: 0.3rem !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.money {
|
.money {
|
||||||
font-size: 0.24rem !important;
|
font-size: 0.2rem !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -591,11 +594,11 @@ $tie-green: #27ae60;
|
|||||||
.fourth .item,
|
.fourth .item,
|
||||||
.ratio .item {
|
.ratio .item {
|
||||||
.text {
|
.text {
|
||||||
font-size: 0.24rem !important;
|
font-size: 0.2rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.money {
|
.money {
|
||||||
font-size: 0.22rem !important;
|
font-size: 0.18rem !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -606,23 +609,23 @@ $tie-green: #27ae60;
|
|||||||
.fourth .item,
|
.fourth .item,
|
||||||
.ratio .item {
|
.ratio .item {
|
||||||
.text {
|
.text {
|
||||||
font-size: 0.24rem !important;
|
font-size: 0.2rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.money {
|
.money {
|
||||||
font-size: 0.22rem !important;
|
font-size: 0.18rem !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 轮盘特定样式 */
|
/* 轮盘特定样式 */
|
||||||
.roulette-table {
|
.roulette-table {
|
||||||
transform: scale(0.8) !important;
|
transform: scale(0.7) !important;
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
|
|
||||||
.table-area .item {
|
.table-area .item {
|
||||||
.money {
|
.money {
|
||||||
font-size: 0.22rem !important;
|
font-size: 0.18rem !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user