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

feat(portrait): 新增撤销下注功能并优化竖屏布局体验

Browse Source 
新增撤销功能：
- 添加 undoChip 方法，支持撤销当前区域最后一次下注
- 在确认下注组件中新增橙色撤销按钮（箭头图标）
- 所有游戏桌组件（百家乐/龙虎/牛牛/色碟/骰宝/轮盘）统一集成撤销功能

竖屏布局优化：
- 修复下注盘样式优先级问题，确保平铺全屏显示（移除 left/right 偏移）
- 路单区域改为横向布局：路单画布在左，统计信息在右，扑克牌区域独立显示
- 路单高度从 180px 增加到 250px，提升可视性
- 优化牛牛扑克牌布局为 2x2 网格，适配竖屏空间

UI 增强：
- 添加红色边框高亮效果（脉冲动画），突出当前选中的下注区域
- 优化按钮布局和间距，提升触控体验
- 调整字体大小和内边距，适配竖屏显示密度

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
li
2026-01-17 23:14:13 +08:00
co-authored by Claude Sonnet 4.5
parent aa082c3f32
commit c19ebf267a
13 changed files with 595 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/style/portrait.scss
+149 -42
View File
@@ -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;
}
}
}
}
}
}