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

feat: 优化筹码选择区布局与样式，移除百家乐幸运6投注项并调整投注区显示。

Browse Source
This commit is contained in:
li
2026-01-18 18:15:52 +08:00
parent 616be27823
commit bae11d09f1
9 changed files with 933 additions and 1141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/js/waybill.js
+8 -4
View File
@@ -260,7 +260,11 @@ function waybillConfig(canvas, data, game_id, ask, askroad) {
width = canvas.clientWidth
let rows, unit, cols, path, unit_y, unit_x
rows = 6
unit = parseInt(height / rows) * dpr
// Strict Width-Based Calculation for Compact Layout
// Target fewer columns to make cells larger as requested
let targetCols = 14
unit = (width / targetCols) * dpr // Use float to fill width exactly
cols = parseInt(width / (unit / dpr))
path = false
if (cols % 2 != 0) {
@@ -969,7 +973,7 @@ function Font_tie(ctb, num, Font_x, Font_y, fontsize, color) {
ctb.font = fontsize
ctb.textAlign = "center"
ctb.textBaseline = "middle"
ctb.fillStyle = color || "#000"
ctb.fillStyle = color || "#fff"
ctb.fillText(num, Font_x, Font_y)
ctb.stroke()
}
@@ -1361,7 +1365,7 @@ function NNcanvas(
function NNwaybill(gameId, ctb, unit_x, unit_y, x, y, type, result, win) {
var fonts = "",
color = "#000"
color = "#fff"
var fontsize = unit_x * 0.28
if ($store.state.config.$Type == "cn") {
if (result == 0) {
@@ -1516,7 +1520,7 @@ function NNtitle(ctb, unit_x, unit_y) {
} else if ($store.state.config.$Type == "tl") {
var color = "#fff",
font = "เจ้ามือ"
}else {
} else {
var color = "#fff",
font = "Banker",
fontsize = unit_x * 0.25
src/assets/style/portrait.scss
+199 -73
View File
@@ -436,6 +436,115 @@ $tie-green: #27ae60;
}
/* 用户信息栏 - 竖屏专用样式 */
.user-info-bar {
flex: none;
height: 50px;
background: #1a1a1a;
border-bottom: 1px solid #333;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
order: 2;
.left-section {
display: flex;
align-items: center;
gap: 8px;
.user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2px solid #c5a059;
}
.username {
font-size: 14px;
color: #fff;
font-weight: 500;
}
}
.middle-section {
display: flex;
align-items: center;
gap: 16px;
.info-item {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #fff;
.icon {
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-block;
&.coin {
background: #ffd700;
border: 2px solid #ffed4e;
}
&.chips {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
border: 2px solid #ff9ff3;
}
}
span {
font-weight: 600;
}
}
}
.right-section {
display: flex;
align-items: center;
gap: 8px;
.icon-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
transition: opacity 0.2s;
&.camera-btn {
background-color: #4CAF50;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E");
&.off {
background-color: #f44336;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M21 6.5l-4 4V7c0-.55-.45-1-1-1H9.82L21 17.18V6.5zM3.27 2L2 3.27 4.73 6H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.21 0 .39-.08.54-.18L19.73 21 21 19.73 3.27 2z'/%3E%3C/svg%3E");
}
}
&.mic-btn {
background-color: #2196F3;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z'/%3E%3Cpath d='M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z'/%3E%3C/svg%3E");
}
&:hover {
opacity: 0.8;
}
&:active {
transform: scale(0.95);
}
}
}
}
/* 游戏区域 - 下注盘在中间，最小化高度 - 使用子选择器增加优先级 */
> .game-area {
flex: none !important;
@@ -452,49 +561,28 @@ $tie-green: #27ae60;
margin: 0 !important;
padding: 0 !important;
/* 筹码选择器 - 在视频右侧内部，完全透明背景 */
/* 筹码选择器 - 在下注盘下方，横向排列，显示7个筹码 */
.playchip {
position: fixed !important;
right: 0.2rem !important;
top: 90px !important;
width: auto !important;
height: auto !important;
background: transparent !important;
border-radius: 0 !important;
padding: 4px 3px !important;
box-shadow: none !important;
z-index: 999 !important;
position: relative !important;
width: 100% !important;
height: 80px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 10px 16px !important;
background: rgba(0, 0, 0, 0.8) !important;
border-top: 1px solid #333 !important;
border-radius: 0 !important;
order: 4 !important;
z-index: 10 !important;
.chip {
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.92) !important;
}
&.active {
transform: scale(1) !important;
&::after {
transform: scale(1.64) !important;
}
}
width: 56px !important;
height: 56px !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
}
@@ -751,55 +839,93 @@ $tie-green: #27ae60;
flex: none;
width: 150px !important;
height: 100% !important;
font-size: 0.24rem !important;
padding: 0.06rem 0.1rem;
font-size: 0.22rem !important;
display: flex;
flex-direction: column;
border-left: 1px solid $border-color;
background: rgba(0, 0, 0, 0.3);
.left,
.right {
.left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-start;
}
padding: 0.08rem;
border-bottom: 1px solid $border-color;
.left .item,
.right .item {
font-size: 0.24rem !important;
padding: 0.03rem 0.08rem !important;
margin: 0.02rem 0;
width: 100%;
.lab {
.item {
font-size: 0.22rem !important;
}
.num {
font-size: 0.24rem !important;
font-weight: bold;
}
}
.ask {
padding: 0.04rem 0.08rem !important;
margin: 0.02rem 0;
width: 100%;
.text {
font-size: 0.22rem !important;
}
.btn {
padding: 0.02rem 0 !important;
display: flex;
gap: 0.04rem;
align-items: center;
width: 100%;
.li {
width: 0.24rem !important;
height: 0.24rem !important;
.lab {
font-size: 0.2rem !important;
color: #888;
margin-right: 0.1rem;
}
.num {
font-size: 0.24rem !important;
font-weight: bold;
&.banker {
color: #d14458;
}
&.palyer {
color: #3779d7;
}
&.tie {
color: #2ecc71;
}
}
}
}
.right {
flex: 0 0 auto;
display: flex;
flex-direction: column;
padding: 0.08rem;
.ask {
padding: 0.12rem 0.1rem !important;
margin: 0.04rem 0;
width: 100%;
background: rgba(255, 255, 255, 0.05);
border-radius: 0.1rem;
cursor: pointer;
transition: all 0.2s;
&:active {
background: rgba(255, 255, 255, 0.15);
}
.text {
font-size: 0.22rem !important;
color: #fff;
margin-bottom: 0.06rem;
display: block;
text-align: center;
}
.btn {
display: flex;
justify-content: center;
gap: 0.08rem;
.li {
width: 0.28rem !important;
height: 0.28rem !important;
}
}
&.banker {
border-bottom: none;
}
}
}