feat: 优化筹码选择区布局与样式，移除百家乐幸运6投注项并调整投注区显示。
This commit is contained in:
li
parent
616be27823
commit
bae11d09f1
@ -260,7 +260,11 @@ function waybillConfig(canvas, data, game_id, ask, askroad) {
|
|||||||
width = canvas.clientWidth
|
width = canvas.clientWidth
|
||||||
let rows, unit, cols, path, unit_y, unit_x
|
let rows, unit, cols, path, unit_y, unit_x
|
||||||
rows = 6
|
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))
|
cols = parseInt(width / (unit / dpr))
|
||||||
path = false
|
path = false
|
||||||
if (cols % 2 != 0) {
|
if (cols % 2 != 0) {
|
||||||
@ -969,7 +973,7 @@ function Font_tie(ctb, num, Font_x, Font_y, fontsize, color) {
|
|||||||
ctb.font = fontsize
|
ctb.font = fontsize
|
||||||
ctb.textAlign = "center"
|
ctb.textAlign = "center"
|
||||||
ctb.textBaseline = "middle"
|
ctb.textBaseline = "middle"
|
||||||
ctb.fillStyle = color || "#000"
|
ctb.fillStyle = color || "#fff"
|
||||||
ctb.fillText(num, Font_x, Font_y)
|
ctb.fillText(num, Font_x, Font_y)
|
||||||
ctb.stroke()
|
ctb.stroke()
|
||||||
}
|
}
|
||||||
@ -1361,7 +1365,7 @@ function NNcanvas(
|
|||||||
|
|
||||||
function NNwaybill(gameId, ctb, unit_x, unit_y, x, y, type, result, win) {
|
function NNwaybill(gameId, ctb, unit_x, unit_y, x, y, type, result, win) {
|
||||||
var fonts = "",
|
var fonts = "",
|
||||||
color = "#000"
|
color = "#fff"
|
||||||
var fontsize = unit_x * 0.28
|
var fontsize = unit_x * 0.28
|
||||||
if ($store.state.config.$Type == "cn") {
|
if ($store.state.config.$Type == "cn") {
|
||||||
if (result == 0) {
|
if (result == 0) {
|
||||||
@ -1516,7 +1520,7 @@ function NNtitle(ctb, unit_x, unit_y) {
|
|||||||
} else if ($store.state.config.$Type == "tl") {
|
} else if ($store.state.config.$Type == "tl") {
|
||||||
var color = "#fff",
|
var color = "#fff",
|
||||||
font = "เจ้ามือ"
|
font = "เจ้ามือ"
|
||||||
}else {
|
} else {
|
||||||
var color = "#fff",
|
var color = "#fff",
|
||||||
font = "Banker",
|
font = "Banker",
|
||||||
fontsize = unit_x * 0.25
|
fontsize = unit_x * 0.25
|
||||||
|
|||||||
@ -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 {
|
> .game-area {
|
||||||
flex: none !important;
|
flex: none !important;
|
||||||
@ -452,49 +561,28 @@ $tie-green: #27ae60;
|
|||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
|
||||||
/* 筹码选择器 - 在视频右侧内部，完全透明背景 */
|
/* 筹码选择器 - 在下注盘下方，横向排列，显示7个筹码 */
|
||||||
.playchip {
|
.playchip {
|
||||||
position: fixed !important;
|
position: relative !important;
|
||||||
right: 0.2rem !important;
|
width: 100% !important;
|
||||||
top: 90px !important;
|
height: 80px !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;
|
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-direction: column !important;
|
flex-direction: row !important;
|
||||||
justify-content: flex-start !important;
|
|
||||||
align-items: center !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 {
|
.chip {
|
||||||
width: 45px !important;
|
width: 56px !important;
|
||||||
height: 36px !important;
|
height: 56px !important;
|
||||||
margin-bottom: 0.08rem !important;
|
margin: 0 !important;
|
||||||
background-size: contain !important;
|
flex-shrink: 0 !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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -751,55 +839,93 @@ $tie-green: #27ae60;
|
|||||||
flex: none;
|
flex: none;
|
||||||
width: 150px !important;
|
width: 150px !important;
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
font-size: 0.24rem !important;
|
font-size: 0.22rem !important;
|
||||||
padding: 0.06rem 0.1rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-left: 1px solid $border-color;
|
border-left: 1px solid $border-color;
|
||||||
background: rgba(0, 0, 0, 0.3);
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
.left,
|
.left {
|
||||||
.right {
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
padding: 0.08rem;
|
||||||
|
border-bottom: 1px solid $border-color;
|
||||||
|
|
||||||
.left .item,
|
.item {
|
||||||
.right .item {
|
|
||||||
font-size: 0.24rem !important;
|
|
||||||
padding: 0.03rem 0.08rem !important;
|
|
||||||
margin: 0.02rem 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.lab {
|
|
||||||
font-size: 0.22rem !important;
|
font-size: 0.22rem !important;
|
||||||
}
|
padding: 0.02rem 0 !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 {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.04rem;
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
.li {
|
.lab {
|
||||||
width: 0.24rem !important;
|
font-size: 0.2rem !important;
|
||||||
height: 0.24rem !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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,7 +6,9 @@
|
|||||||
v-for="item in chipArry"
|
v-for="item in chipArry"
|
||||||
:key="item.key"
|
:key="item.key"
|
||||||
@click="chooseFn(item)"
|
@click="chooseFn(item)"
|
||||||
></div>
|
>
|
||||||
|
<span class="chip-value">{{ item.value }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -36,16 +38,65 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/* 深色豪华主题配色 */
|
|
||||||
.playchip {
|
.playchip {
|
||||||
width: 1.385rem;
|
position: relative;
|
||||||
position: absolute;
|
width: 100%;
|
||||||
right: 0.52rem;
|
height: 70px;
|
||||||
bottom: 0px;
|
display: flex;
|
||||||
z-index: 9;
|
align-items: center;
|
||||||
transform: rotateX(0deg);
|
justify-content: flex-start; /* Left align for scroll */
|
||||||
|
gap: 12px;
|
||||||
|
padding: 0 16px;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.6);
|
||||||
border-radius: 8px;
|
backdrop-filter: blur(5px);
|
||||||
padding: 5px;
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
overflow-x: auto;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
/* Hide scrollbar */
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
transform: scale(1.1); /* Slight scale for emphasis, consistent with modern UI */
|
||||||
|
box-shadow: 0 0 10px 2px #fceabb; /* Gold Glow */
|
||||||
|
border-radius: 50%; /* Ensure glow is circular */
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
/* Remove the misaligned image overlay */
|
||||||
|
&:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chip-value {
|
||||||
|
display: none; /* Hide text, use image text */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Map classes to images */
|
||||||
|
&.chip_1s, &.chip_10 { background-image: url("~@/assets/images/chip/1s.png"); }
|
||||||
|
&.chip_2s, &.chip_20 { background-image: url("~@/assets/images/chip/1s.png"); } /* Fallback or specific if exists */
|
||||||
|
&.chip_5s, &.chip_50 { background-image: url("~@/assets/images/chip/5s.png"); }
|
||||||
|
&.chip_1b, &.chip_100 { background-image: url("~@/assets/images/chip/1b.png"); }
|
||||||
|
&.chip_2b, &.chip_200 { background-image: url("~@/assets/images/chip/2b.png"); }
|
||||||
|
&.chip_5b, &.chip_500 { background-image: url("~@/assets/images/chip/5b.png"); }
|
||||||
|
&.chip_1k, &.chip_1000 { background-image: url("~@/assets/images/chip/1k.png"); }
|
||||||
|
&.chip_2k, &.chip_2000 { background-image: url("~@/assets/images/chip/2k.png"); }
|
||||||
|
&.chip_5k, &.chip_5000 { background-image: url("~@/assets/images/chip/5k.png"); }
|
||||||
|
&.chip_1w, &.chip_10000 { background-image: url("~@/assets/images/chip/1w.png"); }
|
||||||
|
&.chip_2w { background-image: url("~@/assets/images/chip/2w.png"); }
|
||||||
|
&.chip_5w { background-image: url("~@/assets/images/chip/5w.png"); }
|
||||||
|
&.chip_10w { background-image: url("~@/assets/images/chip/10w.png"); }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -691,7 +691,7 @@ export default {
|
|||||||
/* 深色豪华主题配色 */
|
/* 深色豪华主题配色 */
|
||||||
$dark-bg: #0d0d0d;
|
$dark-bg: #0d0d0d;
|
||||||
$card-bg: #1e1e1e;
|
$card-bg: #1e1e1e;
|
||||||
$border-color: #333;
|
$border-color: #59cfa8;
|
||||||
$gold: #c5a059;
|
$gold: #c5a059;
|
||||||
|
|
||||||
.playtable {
|
.playtable {
|
||||||
@ -701,20 +701,21 @@ $gold: #c5a059;
|
|||||||
z-index: 8;
|
z-index: 8;
|
||||||
.view {
|
.view {
|
||||||
// width: 17.35rem;
|
// width: 17.35rem;
|
||||||
height: 2.7rem;
|
height: 2.5rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
// bottom: 0.25rem;
|
// bottom: 0.25rem;
|
||||||
// left: 50%;
|
// left: 50%;
|
||||||
// margin-left: -8.675rem;
|
// margin-left: -8.675rem;
|
||||||
left: 3rem;
|
left: 3rem;
|
||||||
right: 3rem;
|
right: 3rem;
|
||||||
bottom: 0.25rem;
|
bottom: 4.5rem; /* Raised further to clear chips */
|
||||||
|
|
||||||
border-radius: 10px;
|
border-radius: 12px;
|
||||||
transform: perspective(400px) rotateX(24deg);
|
transform: perspective(400px) rotateX(24deg);
|
||||||
border: 1px solid $border-color;
|
border: 2px solid $border-color;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: rgba(30, 30, 30, 0.95);
|
background: rgba(9, 60, 54, 0.4);
|
||||||
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.8);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.unclick {
|
.unclick {
|
||||||
@ -745,31 +746,6 @@ $gold: #c5a059;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
::v-deep {
|
|
||||||
.banker {
|
|
||||||
color: #fe8365;
|
|
||||||
}
|
|
||||||
.palyer {
|
|
||||||
color: #12a2e6;
|
|
||||||
}
|
|
||||||
.bpair {
|
|
||||||
color: #fe8365;
|
|
||||||
}
|
|
||||||
.ppair {
|
|
||||||
color: #12a2e6;
|
|
||||||
}
|
|
||||||
.tie {
|
|
||||||
color: #75e7af;
|
|
||||||
}
|
|
||||||
.min {
|
|
||||||
border-top-left-radius: 10px;
|
|
||||||
color: #f3c866;
|
|
||||||
}
|
|
||||||
.max {
|
|
||||||
border-top-right-radius: 10px;
|
|
||||||
color: #f3c866;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 竖屏模式下，移除左右空白，下注盘平铺全屏 */
|
/* 竖屏模式下，移除左右空白，下注盘平铺全屏 */
|
||||||
@media screen and (orientation: portrait) {
|
@media screen and (orientation: portrait) {
|
||||||
@ -780,6 +756,10 @@ $gold: #c5a059;
|
|||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
transform: none !important; /* Portrait mode usually doesn't need 3D perspective */
|
||||||
|
bottom: 0 !important;
|
||||||
|
height: 35% !important; /* Adjust height for portrait */
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="baccarat">
|
<div class="baccarat">
|
||||||
|
<!-- 第一行: 小 | 闲对 | 庄对 | 大 -->
|
||||||
<div class="list top">
|
<div class="list top">
|
||||||
<!-- 小 -->
|
<!-- 小 -->
|
||||||
<div class="item min" :class="{ unclick: can_bet_big_small != 1 }">
|
<div class="item grid-item" :class="{ unclick: can_bet_big_small != 1 }">
|
||||||
<confirmBet
|
<confirmBet
|
||||||
@confirm="confirmChip"
|
@confirm="confirmChip"
|
||||||
@cancel="cancelChip"
|
@cancel="cancelChip"
|
||||||
@ -18,13 +19,17 @@
|
|||||||
:win="winArray.includes('small')"
|
:win="winArray.includes('small')"
|
||||||
></chipView>
|
></chipView>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<span class="big">{{ Lang[Type].small }}</span>
|
<span class="label text-blue">{{ Lang[Type].small }}</span>
|
||||||
<span>1:1.5</span>
|
<span class="odds">1:1.5</span>
|
||||||
|
</div>
|
||||||
|
<div class="money" v-if="bet_amount_msg.small_amount">
|
||||||
|
<i class="coin-icon"></i>
|
||||||
|
{{ bet_amount_msg.small_amount }}
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.small_amount || 0 }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 闲对 -->
|
<!-- 闲对 -->
|
||||||
<div class="item ppair">
|
<div class="item grid-item">
|
||||||
<confirmBet
|
<confirmBet
|
||||||
@confirm="confirmChip"
|
@confirm="confirmChip"
|
||||||
@cancel="cancelChip"
|
@cancel="cancelChip"
|
||||||
@ -34,43 +39,23 @@
|
|||||||
show: touch == 'player_pair_amount'
|
show: touch == 'player_pair_amount'
|
||||||
}"
|
}"
|
||||||
></confirmBet>
|
></confirmBet>
|
||||||
|
|
||||||
<chipView
|
<chipView
|
||||||
@click="downBet($event, 'player_pair_amount')"
|
@click="downBet($event, 'player_pair_amount')"
|
||||||
:list="chipArray.player_pair_amount"
|
:list="chipArray.player_pair_amount"
|
||||||
:win="winArray.includes('player_pair')"
|
:win="winArray.includes('player_pair')"
|
||||||
></chipView>
|
></chipView>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<span class="big">{{ Lang[Type].p_player }}</span>
|
<span class="label text-blue">{{ Lang[Type].msg_player_pair }}</span>
|
||||||
<span>1:{{ tableData.price_pair }}</span>
|
<span class="odds">1:11</span>
|
||||||
|
</div>
|
||||||
|
<div class="money" v-if="bet_amount_msg.player_pair_amount">
|
||||||
|
<i class="coin-icon"></i>
|
||||||
|
{{ bet_amount_msg.player_pair_amount }}
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.player_pair_amount }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 幸运6 -->
|
|
||||||
<div class="item luck" :class="{ unclick: can_bet_luck_six != 1 }">
|
|
||||||
<confirmBet
|
|
||||||
@confirm="confirmChip"
|
|
||||||
@cancel="cancelChip"
|
|
||||||
@undo="undoChip"
|
|
||||||
:data="{
|
|
||||||
money: downChip.luck_six_amount,
|
|
||||||
show: touch == 'luck_six_amount'
|
|
||||||
}"
|
|
||||||
></confirmBet>
|
|
||||||
<chipView
|
|
||||||
@click="downBet($event, 'luck_six_amount')"
|
|
||||||
:list="chipArray.luck_six_amount"
|
|
||||||
:win="winArray.includes('luck_six')"
|
|
||||||
></chipView>
|
|
||||||
<div class="text">
|
|
||||||
<span class="big">{{ Lang[Type].luckSix }} {{ Lang[Type].max }}</span>
|
|
||||||
<span>1:20</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="money">{{ bet_amount_msg.luck_six_amount || 0 }}</div>
|
|
||||||
</div>
|
|
||||||
<!-- 庄对 -->
|
<!-- 庄对 -->
|
||||||
<div class="item bpair">
|
<div class="item grid-item">
|
||||||
<confirmBet
|
<confirmBet
|
||||||
@confirm="confirmChip"
|
@confirm="confirmChip"
|
||||||
@cancel="cancelChip"
|
@cancel="cancelChip"
|
||||||
@ -86,13 +71,17 @@
|
|||||||
:win="winArray.includes('banker_pair')"
|
:win="winArray.includes('banker_pair')"
|
||||||
></chipView>
|
></chipView>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<span class="big">{{ Lang[Type].p_banker }}</span>
|
<span class="label text-red">{{ Lang[Type].msg_banker_pair }}</span>
|
||||||
<span>1:{{ tableData.price_pair }}</span>
|
<span class="odds">1:11</span>
|
||||||
|
</div>
|
||||||
|
<div class="money" v-if="bet_amount_msg.banker_pair_amount">
|
||||||
|
<i class="coin-icon"></i>
|
||||||
|
{{ bet_amount_msg.banker_pair_amount }}
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.banker_pair_amount }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 大 -->
|
<!-- 大 -->
|
||||||
<div class="item max" :class="{ unclick: can_bet_big_small != 1 }">
|
<div class="item grid-item" :class="{ unclick: can_bet_big_small != 1 }">
|
||||||
<confirmBet
|
<confirmBet
|
||||||
@confirm="confirmChip"
|
@confirm="confirmChip"
|
||||||
@cancel="cancelChip"
|
@cancel="cancelChip"
|
||||||
@ -105,15 +94,20 @@
|
|||||||
:win="winArray.includes('big')"
|
:win="winArray.includes('big')"
|
||||||
></chipView>
|
></chipView>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<span class="big">{{ Lang[Type].big }}</span>
|
<span class="label text-red">{{ Lang[Type].big }}</span>
|
||||||
<span>1:0.5</span>
|
<span class="odds">1:0.5</span>
|
||||||
|
</div>
|
||||||
|
<div class="money" v-if="bet_amount_msg.big_amount">
|
||||||
|
<i class="coin-icon"></i>
|
||||||
|
{{ bet_amount_msg.big_amount }}
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.big_amount || 0 }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 第二行: 闲 | 和 | 庄 -->
|
||||||
<div class="list bottom">
|
<div class="list bottom">
|
||||||
<!-- 闲 -->
|
<!-- 闲 -->
|
||||||
<div class="item palyer">
|
<div class="item grid-item">
|
||||||
<confirmBet
|
<confirmBet
|
||||||
@confirm="confirmChip"
|
@confirm="confirmChip"
|
||||||
@cancel="cancelChip"
|
@cancel="cancelChip"
|
||||||
@ -129,13 +123,17 @@
|
|||||||
:win="winArray.includes('player')"
|
:win="winArray.includes('player')"
|
||||||
></chipView>
|
></chipView>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<span class="big">{{ Lang[Type].player }}</span>
|
<span class="label-large text-blue">{{ Lang[Type].player }}</span>
|
||||||
<span>1:{{ tableData.price_player }}</span>
|
<span class="odds">1:{{ tableData.price_player }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="money" v-if="bet_amount_msg.player_amount">
|
||||||
|
<i class="coin-icon"></i>
|
||||||
|
{{ bet_amount_msg.player_amount }}
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.player_amount }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 和 -->
|
<!-- 和 -->
|
||||||
<div class="item tie">
|
<div class="item grid-item">
|
||||||
<confirmBet
|
<confirmBet
|
||||||
@confirm="confirmChip"
|
@confirm="confirmChip"
|
||||||
@cancel="cancelChip"
|
@cancel="cancelChip"
|
||||||
@ -148,13 +146,17 @@
|
|||||||
:win="winArray.includes('tie')"
|
:win="winArray.includes('tie')"
|
||||||
></chipView>
|
></chipView>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<span class="big">{{ Lang[Type].tie }}</span>
|
<span class="label-large text-green">{{ Lang[Type].tie }}</span>
|
||||||
<span>1:{{ tableData.price_tie_baccarat }}</span>
|
<span class="odds">1:{{ tableData.price_tie_baccarat }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="money" v-if="bet_amount_msg.tie_amount">
|
||||||
|
<i class="coin-icon"></i>
|
||||||
|
{{ bet_amount_msg.tie_amount }}
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.tie_amount }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 庄 -->
|
<!-- 庄 -->
|
||||||
<div class="item banker">
|
<div class="item grid-item">
|
||||||
<confirmBet
|
<confirmBet
|
||||||
@confirm="confirmChip"
|
@confirm="confirmChip"
|
||||||
@cancel="cancelChip"
|
@cancel="cancelChip"
|
||||||
@ -170,12 +172,15 @@
|
|||||||
:win="winArray.includes('banker')"
|
:win="winArray.includes('banker')"
|
||||||
></chipView>
|
></chipView>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<span class="big">{{ Lang[Type].banker }}</span>
|
<span class="label-large text-red">{{ Lang[Type].banker }}</span>
|
||||||
<span>
|
<span class="odds">
|
||||||
{{ baccarat_type == 0 ? `1:${tableData.price_banker}` : "1:1" }}
|
{{ baccarat_type == 0 ? `1:${tableData.price_banker}` : "1:1" }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="money">{{ bet_amount_msg.banker_amount }}</div>
|
<div class="money" v-if="bet_amount_msg.banker_amount">
|
||||||
|
<i class="coin-icon"></i>
|
||||||
|
{{ bet_amount_msg.banker_amount }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -253,153 +258,125 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/* 深色豪华主题配色 */
|
|
||||||
$dark-bg: #0d0d0d;
|
|
||||||
$card-bg: #1e1e1e;
|
|
||||||
$border-color: #444;
|
|
||||||
$gold: #c5a059;
|
|
||||||
$text-secondary: #888;
|
|
||||||
|
|
||||||
.baccarat {
|
.baccarat {
|
||||||
background: rgba(30, 30, 30, 0.95);
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
display: flex;
|
display: flex;
|
||||||
box-sizing: border-box;
|
gap: 8px;
|
||||||
&:first-child {
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
}
|
|
||||||
&.top {
|
&.top {
|
||||||
height: 50%;
|
flex: 3; // Top row height ratio
|
||||||
.item {
|
.item {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 100%;
|
|
||||||
&:nth-child(3) {
|
|
||||||
min-width: 4.86rem;
|
|
||||||
}
|
|
||||||
.text {
|
|
||||||
margin-top: -2px;
|
|
||||||
text-shadow: 1px 1px #050505;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.bottom {
|
&.bottom {
|
||||||
height: 50%;
|
flex: 5; // Bottom row height ratio
|
||||||
.item {
|
.item {
|
||||||
width: 33.33%;
|
flex: 1;
|
||||||
height: 100%;
|
|
||||||
.text {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
text-shadow: 1px 1px #050505;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
// Removed specific flex for green-main as per instruction, assuming it's not needed for the new look.
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-right: 1px solid $border-color;
|
border-radius: 8px;
|
||||||
font-size: 0.45rem;
|
// Removed border and box-shadow, now handled by .grid-item
|
||||||
&:last-child {
|
display: flex;
|
||||||
border: none;
|
flex-direction: column;
|
||||||
}
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.2s;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
// Unclick state
|
||||||
&.unclick {
|
&.unclick {
|
||||||
&:after {
|
opacity: 0.5;
|
||||||
content: "";
|
cursor: not-allowed;
|
||||||
position: absolute;
|
filter: grayscale(0.8);
|
||||||
width: 102%;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
top: 50%;
|
|
||||||
transform: rotate(14deg);
|
|
||||||
z-index: 6;
|
|
||||||
left: -2px;
|
|
||||||
}
|
|
||||||
&.max:after {
|
|
||||||
width: 104%;
|
|
||||||
transform: rotate(21deg);
|
|
||||||
}
|
|
||||||
&.min:after {
|
|
||||||
width: 104%;
|
|
||||||
transform: rotate(21deg);
|
|
||||||
}
|
|
||||||
.chip-view {
|
|
||||||
background: rgba(98, 74, 4, 0.4);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chip-box {
|
// Text Styles
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
&:active {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.text {
|
.text {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
line-height: 1;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
color: #fff;
|
|
||||||
.big {
|
.label {
|
||||||
font-weight: bold;
|
font-size: 16px;
|
||||||
padding-right: 0.24rem;
|
font-weight: 600;
|
||||||
padding-left: 0.2rem;
|
margin-bottom: 2px;
|
||||||
}
|
}
|
||||||
|
.label-large {
|
||||||
|
font-size: 24px; /* Reduced from 32px */
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 2px; /* Reduced margin */
|
||||||
|
}
|
||||||
|
|
||||||
|
.odds {
|
||||||
|
font-size: 14px; /* Increased from 12px */
|
||||||
|
color: #FFD700; /* Gold */
|
||||||
|
font-weight: 600;
|
||||||
|
display: block; /* Ensure formatting */
|
||||||
|
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-blue { color: #29abe2; }
|
||||||
|
.text-red { color: #ed1c24; }
|
||||||
|
.text-green { color: #22ac38; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Money display
|
||||||
.money {
|
.money {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
bottom: 6px;
|
||||||
bottom: -2px;
|
left: 50%;
|
||||||
font-size: 0.24rem;
|
transform: translateX(-50%);
|
||||||
font-weight: normal;
|
display: flex;
|
||||||
transform: scale(0.7);
|
align-items: center;
|
||||||
color: $text-secondary;
|
gap: 2px;
|
||||||
vertical-align: bottom;
|
color: #ffd700;
|
||||||
|
font-size: 12px;
|
||||||
|
z-index: 3;
|
||||||
|
white-space: nowrap;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
&::before {
|
// Removed background, padding, border-radius, border
|
||||||
display: inline-block;
|
|
||||||
content: "总";
|
.coin-icon {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
width: 14px;
|
||||||
font-size: 10px;
|
height: 14px;
|
||||||
border-radius: 0.615rem;
|
background: #ffd700;
|
||||||
width: 0.615rem;
|
border-radius: 50%;
|
||||||
height: 0.615rem;
|
border: 1px solid #fff;
|
||||||
text-align: center;
|
box-shadow: 0 0 2px rgba(0,0,0,0.5);
|
||||||
line-height: 0.615rem;
|
|
||||||
font-weight: normal;
|
|
||||||
margin-right: 0.06rem;
|
|
||||||
transform: scale(0.7);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.banker .chip-view {
|
// Grid Item Style (Digital Table Look)
|
||||||
border-bottom-right-radius: 10px;
|
.grid-item {
|
||||||
}
|
background: rgba(9, 60, 50, 0.7); // Deep Teal Transparent
|
||||||
.palyer .chip-view {
|
border: 1px solid #59cfa8; // Cyan/Green Border
|
||||||
border-bottom-left-radius: 10px;
|
box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
|
||||||
}
|
|
||||||
.max .chip-view {
|
&:active {
|
||||||
border-top-right-radius: 10px;
|
background: rgba(9, 60, 50, 0.9);
|
||||||
}
|
border-color: #7fffd4;
|
||||||
.min .chip-view {
|
}
|
||||||
border-top-left-radius: 10px;
|
}
|
||||||
}
|
|
||||||
.luck .text {
|
|
||||||
text-shadow: none !important;
|
|
||||||
background-image: linear-gradient(
|
|
||||||
90deg,
|
|
||||||
#ffcc7d 0%,
|
|
||||||
#93dd96 20%,
|
|
||||||
#6078d4 50%,
|
|
||||||
#f7e96f 100%
|
|
||||||
);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,256 +1,76 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="playway">
|
<div class="playway" :class="{ 'white-theme': [1, 2].includes(tableData.game_id) }">
|
||||||
<div class="canvas-box">
|
|
||||||
<canvas class="canvas" ref="refItem"></canvas>
|
<!-- New Baccarat/DT Layout -->
|
||||||
<div
|
<div class="baccarat-view" v-if="[1, 2].includes(tableData.game_id)">
|
||||||
class="switch-btn"
|
<!-- Top Header Bar -->
|
||||||
@click="switchBigWay"
|
<div class="header-bar">
|
||||||
v-if="tableData.game_id == 6"
|
<div class="left-stats">
|
||||||
>
|
<div class="stat-item"><span class="badge red">庄</span><span class="val red">{{ tableData.bankerCount || 0 }}</span></div>
|
||||||
{{ Lang[Type].zhupan }}
|
<div class="stat-item"><span class="badge blue">闲</span><span class="val blue">{{ tableData.playerCount || 0 }}</span></div>
|
||||||
</div>
|
<div class="stat-item"><span class="badge green">和</span><span class="val green">{{ tableData.tieCount || 0 }}</span></div>
|
||||||
</div>
|
<div class="stat-item" v-if="tableData.game_id == 1"><span class="badge red">庄对</span><span class="val red">{{ tableData.banker_pair_Count || 0 }}</span></div>
|
||||||
<div
|
<div class="stat-item" v-if="tableData.game_id == 1"><span class="badge blue">闲对</span><span class="val blue">{{ tableData.player_pair_Count || 0 }}</span></div>
|
||||||
class="btn-box"
|
|
||||||
v-if="tableData.game_id == 1 || tableData.game_id == 2"
|
|
||||||
>
|
|
||||||
<div class="left">
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">
|
|
||||||
{{ tableData.game_id == 1 ? Lang[Type].banker : Lang[Type].dragon }}
|
|
||||||
</span>
|
|
||||||
<span class="num banker">{{ tableData.bankerCount || 0 }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="item" v-if="tableData.game_id == 1">
|
<div class="right-info">
|
||||||
<span class="lab">{{ Lang[Type].p_banker }}</span>
|
<span class="badge black">局号</span>
|
||||||
<span class="num banker">{{ tableData.banker_pair_Count || 0 }}</span>
|
<span class="game-num">{{ tableData.number_tab_number || '0-0' }}</span>
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">
|
|
||||||
{{ tableData.game_id == 1 ? Lang[Type].player : Lang[Type].tiger }}
|
|
||||||
</span>
|
|
||||||
<span class="num palyer">{{ tableData.playerCount || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item" v-if="tableData.game_id == 1">
|
|
||||||
<span class="lab">{{ Lang[Type].p_player }}</span>
|
|
||||||
<span class="num palyer">{{ tableData.player_pair_Count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].tie }}</span>
|
|
||||||
<span class="num tie">{{ tableData.tieCount || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].game }}</span>
|
|
||||||
<span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
|
||||||
<div class="banker ask" @click="askWay('banker')">
|
<!-- Main Road Area -->
|
||||||
<span class="text">
|
<div class="road-box">
|
||||||
{{
|
<canvas class="canvas" ref="refItem"></canvas>
|
||||||
tableData.game_id == 1
|
|
||||||
? Lang[Type].askbanker
|
<!-- Ask Way Overlay (Bottom Right) -->
|
||||||
: Lang[Type].askdragon
|
<div class="ask-panel">
|
||||||
}}
|
<!-- Banker Ask -->
|
||||||
</span>
|
<div class="ask-group" @click="askWay('banker')">
|
||||||
<ul class="btn">
|
<div class="ask-title text-red">庄问路</div>
|
||||||
<li
|
<div class="ask-icons">
|
||||||
class="li circle"
|
<span class="icon solid red" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'red'"></span>
|
||||||
:class="autoaskData.BbigEyeRoadcolor"
|
<span class="icon solid blue" v-if="autoaskData.BbigEyeRoadisshow && autoaskData.BbigEyeRoadcolor == 'blue'"></span>
|
||||||
v-show="autoaskData.BbigEyeRoadisshow"
|
|
||||||
></li>
|
<span class="icon hollow red" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'red'"></span>
|
||||||
<li
|
<span class="icon hollow blue" v-if="autoaskData.Bpathwayisshow && autoaskData.Bpathwaycolor == 'blue'"></span>
|
||||||
class="li round"
|
|
||||||
:class="autoaskData.Bpathwaycolor"
|
<span class="icon slash red" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'red'"></span>
|
||||||
v-show="autoaskData.Bpathwayisshow"
|
<span class="icon slash blue" v-if="autoaskData.Broachisshow && autoaskData.Broachcolor == 'blue'"></span>
|
||||||
></li>
|
</div>
|
||||||
<li
|
</div>
|
||||||
class="li line"
|
|
||||||
:class="autoaskData.Broachcolor"
|
<!-- Player Ask -->
|
||||||
v-show="autoaskData.Broachisshow"
|
<div class="ask-group" @click="askWay('palyer')">
|
||||||
></li>
|
<div class="ask-title text-blue">闲问路</div>
|
||||||
</ul>
|
<div class="ask-icons">
|
||||||
</div>
|
<span class="icon solid red" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'red'"></span>
|
||||||
<div class="palyer ask" @click="askWay('palyer')">
|
<span class="icon solid blue" v-if="autoaskData.PbigEyeRoadisshow && autoaskData.PbigEyeRoadcolor == 'blue'"></span>
|
||||||
<span class="text">
|
|
||||||
{{
|
<span class="icon hollow red" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'red'"></span>
|
||||||
tableData.game_id == 1
|
<span class="icon hollow blue" v-if="autoaskData.Ppathwayisshow && autoaskData.Ppathwaycolor == 'blue'"></span>
|
||||||
? Lang[Type].askplayer
|
|
||||||
: Lang[Type].asktiger
|
<span class="icon slash red" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'red'"></span>
|
||||||
}}
|
<span class="icon slash blue" v-if="autoaskData.Proachisshow && autoaskData.Proachcolor == 'blue'"></span>
|
||||||
</span>
|
</div>
|
||||||
<ul class="btn">
|
</div>
|
||||||
<li
|
|
||||||
class="li circle"
|
|
||||||
:class="autoaskData.PbigEyeRoadcolor"
|
|
||||||
v-show="autoaskData.PbigEyeRoadisshow"
|
|
||||||
></li>
|
|
||||||
<li
|
|
||||||
class="li round"
|
|
||||||
:class="autoaskData.Ppathwaycolor"
|
|
||||||
v-show="autoaskData.Ppathwayisshow"
|
|
||||||
></li>
|
|
||||||
<li
|
|
||||||
class="li line"
|
|
||||||
:class="autoaskData.Proachcolor"
|
|
||||||
v-show="autoaskData.Proachisshow"
|
|
||||||
></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
class="totle-box"
|
<!-- Fallback for Other Games -->
|
||||||
style="width: 2.6rem"
|
<div class="other-view" v-else>
|
||||||
v-if="tableData.game_id == 4 || tableData.game_id == 5"
|
<div class="canvas-box">
|
||||||
>
|
<canvas class="canvas" ref="refItem"></canvas>
|
||||||
<div class="list" style="max-width: 100%">
|
</div>
|
||||||
<div class="item">
|
<div class="totle-box" v-if="[4,5,6,7,8].includes(tableData.game_id)">
|
||||||
<span class="lab">{{ Lang[Type].player }}1</span>
|
<div class="list">
|
||||||
<span class="num banker">{{ tableData.player_1_count || 0 }}</span>
|
<div class="item" v-for="(val, key) in tableData.count" :key="key">
|
||||||
</div>
|
<span class="lab">{{key}}</span><span class="num">{{val}}</span>
|
||||||
<div class="item">
|
</div>
|
||||||
<span class="lab">{{ Lang[Type].player }}2</span>
|
</div>
|
||||||
<span class="num palyer">{{ tableData.player_2_count || 0 }}</span>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].player }}3</span>
|
|
||||||
<span class="num tie">{{ tableData.player_3_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].game }}</span>
|
|
||||||
<span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="totle-box" v-if="tableData.game_id == 6">
|
|
||||||
<div class="list">
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">0</span>
|
|
||||||
<span class="num black">{{ tableData.count.zero_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">1</span>
|
|
||||||
<span class="num palyer">{{ tableData.count.one_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">2</span>
|
|
||||||
<span class="num tie">{{ tableData.count.two_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">3</span>
|
|
||||||
<span class="num yellow">{{ tableData.count.three_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">4</span>
|
|
||||||
<span class="num banker">{{ tableData.count.four_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="list">
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].odd }}</span>
|
|
||||||
<span class="num palyer">
|
|
||||||
{{ tableData.count.singular_count || 0 }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].even }}</span>
|
|
||||||
<span class="num banker">
|
|
||||||
{{ tableData.count.plural_count || 0 }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].big }}</span>
|
|
||||||
<span class="num banker">{{ tableData.count.big_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].small }}</span>
|
|
||||||
<span class="num palyer">{{ tableData.count.small_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].game }}</span>
|
|
||||||
<span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="totle-box" v-if="tableData.game_id == 7">
|
|
||||||
<div class="list">
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].big }}</span>
|
|
||||||
<span class="num banker">{{ tableData.count.big_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].small }}</span>
|
|
||||||
<span class="num palyer">{{ tableData.count.small_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].wai_dice }}</span>
|
|
||||||
<span class="num tie">{{ tableData.count.leopard_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="list">
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].even }}</span>
|
|
||||||
<span class="num banker">
|
|
||||||
{{ tableData.count.plural_count || 0 }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].odd }}</span>
|
|
||||||
<span class="num palyer">
|
|
||||||
{{ tableData.count.singular_count || 0 }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].game }}</span>
|
|
||||||
<span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="totle-box" v-if="tableData.game_id == 8">
|
|
||||||
<div class="list">
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].red }}</span>
|
|
||||||
<span class="num banker">{{ tableData.count.red_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].big }}</span>
|
|
||||||
<span class="num banker">{{ tableData.count.high_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].odd }}</span>
|
|
||||||
<span class="num palyer">{{ tableData.count.odd_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].zero }}</span>
|
|
||||||
<span class="num tie">{{ tableData.count.zero_count || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="list">
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].black }}</span>
|
|
||||||
<span class="num black">
|
|
||||||
{{ tableData.count.black_count || 0 }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].small }}</span>
|
|
||||||
<span class="num palyer">
|
|
||||||
{{ tableData.count.low_count || 0 }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].even }}</span>
|
|
||||||
<span class="num banker">
|
|
||||||
{{ tableData.count.even_count || 0 }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<span class="lab">{{ Lang[Type].game }}</span>
|
|
||||||
<span class="num">{{ tableData.number_tab_number - 1 || 0 }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -258,16 +78,13 @@
|
|||||||
import { ref, watch, nextTick, computed } from "vue"
|
import { ref, watch, nextTick, computed } from "vue"
|
||||||
import { useStore } from "vuex"
|
import { useStore } from "vuex"
|
||||||
import { waybillAsk, waybillConfig, autoask } from "@/assets/js/waybill.js"
|
import { waybillAsk, waybillConfig, autoask } from "@/assets/js/waybill.js"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "PlayWay",
|
name: "PlayWay",
|
||||||
components: {},
|
|
||||||
props: {
|
props: {
|
||||||
tableData: {
|
tableData: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({
|
default: () => ({ ludan: {}, game_id: 1 })
|
||||||
ludan: {},
|
|
||||||
game_id: 1
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
@ -278,13 +95,11 @@ export default {
|
|||||||
const Lang = computed(() => store.state.config.$lang)
|
const Lang = computed(() => store.state.config.$lang)
|
||||||
const toningShowBigWay = computed(() => store.state.config.toningShowBigWay)
|
const toningShowBigWay = computed(() => store.state.config.toningShowBigWay)
|
||||||
const timeStamp = computed(() => store.state.config.timeStamp)
|
const timeStamp = computed(() => store.state.config.timeStamp)
|
||||||
|
|
||||||
const askWay = (type) => {
|
const askWay = (type) => {
|
||||||
const data = props.tableData
|
waybillAsk(refItem.value, type, props.tableData, props.tableData.game_id)
|
||||||
waybillAsk(refItem.value, type, data, data.game_id)
|
|
||||||
}
|
|
||||||
const switchBigWay = () => {
|
|
||||||
store.commit("config/toningShowBigWay")
|
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => [
|
() => [
|
||||||
props.tableData.ludan,
|
props.tableData.ludan,
|
||||||
@ -294,274 +109,199 @@ export default {
|
|||||||
],
|
],
|
||||||
() => {
|
() => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
waybillConfig(refItem.value, props.tableData, props.tableData.game_id)
|
if (refItem.value) {
|
||||||
autoaskData.value = autoask(props.tableData)
|
waybillConfig(refItem.value, props.tableData, props.tableData.game_id)
|
||||||
|
autoaskData.value = autoask(props.tableData)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
{ immediate: true, deep: true }
|
{ immediate: true, deep: true }
|
||||||
)
|
)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
Type,
|
Type,
|
||||||
Lang,
|
Lang,
|
||||||
refItem,
|
refItem,
|
||||||
autoaskData,
|
autoaskData,
|
||||||
askWay,
|
askWay
|
||||||
switchBigWay
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
/* 深色豪华主题配色 */
|
|
||||||
$dark-bg: #0d0d0d;
|
|
||||||
$card-bg: #1e1e1e;
|
|
||||||
$border-color: #444;
|
|
||||||
$text-secondary: #888;
|
|
||||||
$gold: #c5a059;
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
.playway {
|
.playway {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background: #1a1a1a;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
background: $card-bg;
|
border-top: 1px solid #333;
|
||||||
.canvas-box {
|
}
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
.baccarat-view {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.header-bar {
|
||||||
|
flex: 0 0 32px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 12px;
|
||||||
|
background: #252525;
|
||||||
|
border-bottom: 1px solid #333;
|
||||||
|
font-size: 13px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||||
|
z-index: 5;
|
||||||
|
|
||||||
|
.left-stats {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
.stat-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
.badge {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: bold;
|
||||||
|
&.red { background: #d0021b; }
|
||||||
|
&.blue { background: #0044fa; }
|
||||||
|
&.green { background: #22ac38; }
|
||||||
|
}
|
||||||
|
.val {
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
&.red { color: #ff4d4f; }
|
||||||
|
&.blue { color: #40a9ff; }
|
||||||
|
&.green { color: #52c41a; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
.badge.black {
|
||||||
|
background: #444;
|
||||||
|
color: #ccc;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
.game-num {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffd700;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.road-box {
|
||||||
|
flex: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
background: #1a1a1a;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.canvas {
|
.canvas {
|
||||||
display: block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
.switch-btn {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 32%;
|
|
||||||
font-size: 0.2rem;
|
|
||||||
background: rgba(197, 160, 89, 0.8);
|
|
||||||
color: #000;
|
|
||||||
padding: 0.05rem 0.1rem 0 0.1rem;
|
|
||||||
border-top-left-radius: 0.1rem;
|
|
||||||
border-top-right-radius: 0.1rem;
|
|
||||||
&:active {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn-box {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
font-weight: 600;
|
|
||||||
background: $card-bg;
|
|
||||||
.left {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 3.169rem;
|
|
||||||
line-height: 1;
|
|
||||||
color: $text-secondary;
|
|
||||||
border-left: 1px solid $border-color;
|
|
||||||
min-width: 90px;
|
|
||||||
max-width: 180px;
|
|
||||||
.item {
|
|
||||||
min-width: 45%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
.lab {
|
|
||||||
padding: 0 0.153rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
border-left: 1px solid $border-color;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.369rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-items: center;
|
|
||||||
min-width: 55px;
|
|
||||||
max-width: 100px;
|
|
||||||
flex: 1;
|
|
||||||
.ask {
|
|
||||||
height: 50%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0 0.2rem;
|
|
||||||
color: #fff;
|
|
||||||
.btn {
|
|
||||||
height: 0.55rem;
|
|
||||||
border-radius: 0.55rem;
|
|
||||||
background: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
rgba(60, 60, 60, 1) 0%,
|
|
||||||
rgba(40, 40, 40, 1) 35%,
|
|
||||||
rgba(30, 30, 30, 1) 100%
|
|
||||||
);
|
|
||||||
box-shadow: 0px 0px 1px 0.5px rgba(197, 160, 89, 0.3);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
padding: 0 0.1rem;
|
|
||||||
min-width: 90%;
|
|
||||||
&:active {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.li {
|
|
||||||
width: 0.369rem;
|
|
||||||
min-width: 0.369rem;
|
|
||||||
height: 0.369rem;
|
|
||||||
|
|
||||||
&.circle {
|
/* Ask Panel Floating Bottom Right */
|
||||||
border-radius: 0.369rem;
|
.ask-panel {
|
||||||
box-sizing: border-box;
|
position: absolute;
|
||||||
border: 3px solid #444;
|
right: 0;
|
||||||
&.red {
|
bottom: 0;
|
||||||
border-color: #d14458;
|
width: 200px; /* Compact width */
|
||||||
}
|
height: 32px;
|
||||||
&.blue {
|
background: rgba(30,30,30, 0.95);
|
||||||
border-color: #3779d7;
|
border-top-left-radius: 8px;
|
||||||
}
|
border: 1px solid #444;
|
||||||
}
|
border-right: none;
|
||||||
&.line {
|
border-bottom: none;
|
||||||
position: relative;
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 5%;
|
|
||||||
width: 3px;
|
|
||||||
height: 90%;
|
|
||||||
border-radius: 3px;
|
|
||||||
transform: skewX(-30deg);
|
|
||||||
}
|
|
||||||
&.red:after {
|
|
||||||
background: #d14458;
|
|
||||||
}
|
|
||||||
&.blue:after {
|
|
||||||
background: #3779d7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.round {
|
|
||||||
border-radius: 12px;
|
|
||||||
margin-left: 5px;
|
|
||||||
&.red {
|
|
||||||
background: #d14458;
|
|
||||||
}
|
|
||||||
&.blue {
|
|
||||||
background: #3779d7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.banker {
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.totle-box {
|
|
||||||
display: flex;
|
|
||||||
width: 5.2rem;
|
|
||||||
height: 100%;
|
|
||||||
border-left: 1px solid $border-color;
|
|
||||||
background: $card-bg;
|
|
||||||
.list {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 0.38rem;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 0.15rem 0.25rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
z-index: 10;
|
||||||
justify-content: space-between;
|
box-shadow: -2px -2px 5px rgba(0,0,0,0.5);
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
.ask-group {
|
||||||
&:first-child {
|
flex: 1;
|
||||||
max-width: 42%;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
.item {
|
justify-content: center;
|
||||||
display: flex;
|
gap: 6px;
|
||||||
justify-content: space-between;
|
cursor: pointer;
|
||||||
align-items: center;
|
border-right: 1px solid #444;
|
||||||
line-height: 1;
|
&:last-child { border-right: none; }
|
||||||
color: $text-secondary;
|
|
||||||
.black {
|
.ask-title {
|
||||||
color: #aaa;
|
font-size: 12px;
|
||||||
}
|
font-weight: bold;
|
||||||
.yellow {
|
&.text-red { color: #ff4d4f; }
|
||||||
color: #ffc107;
|
&.text-blue { color: #40a9ff; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ask-icons {
|
||||||
|
display: flex;
|
||||||
|
gap: 3px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
&.solid {
|
||||||
|
width: 6px; height: 6px; border-radius: 50%;
|
||||||
|
&.red { background: #d0021b; }
|
||||||
|
&.blue { background: #0044fa; }
|
||||||
|
}
|
||||||
|
&.hollow {
|
||||||
|
width: 6px; height: 6px; border-radius: 50%; border: 1px solid;
|
||||||
|
&.red { border-color: #d0021b; }
|
||||||
|
&.blue { border-color: #0044fa; }
|
||||||
|
}
|
||||||
|
&.slash {
|
||||||
|
width: 2px; height: 6px; transform: rotate(-45deg);
|
||||||
|
&.red { background: #d0021b; }
|
||||||
|
&.blue { background: #0044fa; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 竖屏模式下，路单内容适配 */
|
.other-view {
|
||||||
@media screen and (orientation: portrait) {
|
display: flex;
|
||||||
.playway.playway {
|
height: 100%;
|
||||||
display: flex !important;
|
width: 100%;
|
||||||
flex-direction: row !important;
|
.canvas-box { flex: 1; height: 100%; .canvas{width:100%; height:100%;} }
|
||||||
align-items: stretch !important;
|
.totle-box {
|
||||||
width: 100% !important;
|
width: 120px;
|
||||||
height: 100% !important;
|
background: #222;
|
||||||
|
color: #fff;
|
||||||
.canvas-box.canvas-box {
|
padding: 10px;
|
||||||
flex: 1 !important;
|
overflow-y: auto;
|
||||||
min-width: 0 !important;
|
border-left: 1px solid #444;
|
||||||
width: auto !important;
|
.item {
|
||||||
height: 100% !important;
|
display: flex;
|
||||||
margin: 0 !important;
|
justify-content: space-between;
|
||||||
}
|
margin-bottom: 5px;
|
||||||
|
font-size: 12px;
|
||||||
.btn-box.btn-box {
|
color: #ccc;
|
||||||
flex: none !important;
|
|
||||||
width: 150px !important;
|
|
||||||
height: 100% !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
border-left: 1px solid #444 !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
|
|
||||||
.left,
|
|
||||||
.right {
|
|
||||||
flex: 1 !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
justify-content: space-evenly !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.totle-box.totle-box {
|
|
||||||
flex: none !important;
|
|
||||||
width: 100px !important;
|
|
||||||
height: 100% !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
border-left: 1px solid #444 !important;
|
|
||||||
|
|
||||||
.list.list {
|
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
font-size: 0.22rem !important;
|
|
||||||
padding: 0.06rem 0.08rem !important;
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
justify-content: space-evenly !important;
|
|
||||||
align-items: flex-start !important;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
width: 100% !important;
|
|
||||||
margin: 0.01rem 0 !important;
|
|
||||||
|
|
||||||
.lab {
|
|
||||||
font-size: 0.2rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.num {
|
|
||||||
font-size: 0.22rem !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -61,8 +61,8 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.box {
|
.box {
|
||||||
width: 0.69 * 1.35rem;
|
width: 50px;
|
||||||
height: 0.55 * 1.35rem;
|
height: 50px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transition: 0.5s all;
|
transition: 0.5s all;
|
||||||
}
|
}
|
||||||
@ -70,6 +70,47 @@ export default {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
|
||||||
|
// 筹码图片背景（只为存在的图片文件添加样式）
|
||||||
|
&.chip_1s {
|
||||||
|
background-image: url("~@/assets/images/chip/1s.png");
|
||||||
|
}
|
||||||
|
&.chip_5s {
|
||||||
|
background-image: url("~@/assets/images/chip/5s.png");
|
||||||
|
}
|
||||||
|
&.chip_1b {
|
||||||
|
background-image: url("~@/assets/images/chip/1b.png");
|
||||||
|
}
|
||||||
|
&.chip_2b {
|
||||||
|
background-image: url("~@/assets/images/chip/2b.png");
|
||||||
|
}
|
||||||
|
&.chip_5b {
|
||||||
|
background-image: url("~@/assets/images/chip/5b.png");
|
||||||
|
}
|
||||||
|
&.chip_1k {
|
||||||
|
background-image: url("~@/assets/images/chip/1k.png");
|
||||||
|
}
|
||||||
|
&.chip_2k {
|
||||||
|
background-image: url("~@/assets/images/chip/2k.png");
|
||||||
|
}
|
||||||
|
&.chip_5k {
|
||||||
|
background-image: url("~@/assets/images/chip/5k.png");
|
||||||
|
}
|
||||||
|
&.chip_1w {
|
||||||
|
background-image: url("~@/assets/images/chip/1w.png");
|
||||||
|
}
|
||||||
|
&.chip_2w {
|
||||||
|
background-image: url("~@/assets/images/chip/2w.png");
|
||||||
|
}
|
||||||
|
&.chip_5w {
|
||||||
|
background-image: url("~@/assets/images/chip/5w.png");
|
||||||
|
}
|
||||||
|
&.chip_10w {
|
||||||
|
background-image: url("~@/assets/images/chip/10w.png");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -41,6 +41,7 @@ const state = {
|
|||||||
$Type: localStorage.getItem("language") || "en",
|
$Type: localStorage.getItem("language") || "en",
|
||||||
chipArry: [
|
chipArry: [
|
||||||
{ key: "1s", show: true, value: 10 },
|
{ key: "1s", show: true, value: 10 },
|
||||||
|
{ key: "2s", show: true, value: 20 },
|
||||||
{ key: "5s", show: true, value: 50 },
|
{ key: "5s", show: true, value: 50 },
|
||||||
{ key: "1b", show: true, value: 100 },
|
{ key: "1b", show: true, value: 100 },
|
||||||
{ key: "5b", show: true, value: 500 },
|
{ key: "5b", show: true, value: 500 },
|
||||||
|
|||||||
@ -6,6 +6,7 @@
|
|||||||
{ no_bg: tableData && (tableData.game_id == 7 || tableData.game_id == 8) }
|
{ no_bg: tableData && (tableData.game_id == 7 || tableData.game_id == 8) }
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
|
<!-- Top Navigation Bar -->
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="back" @click="handleBack"></div>
|
<div class="back" @click="handleBack"></div>
|
||||||
@ -52,87 +53,20 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Main View Container: Vertical Flex Stack -->
|
||||||
<div class="view">
|
<div class="view">
|
||||||
<div class="video" ref="videoDom" @click.stop="closeSwitchView(false)">
|
|
||||||
<ul class="left-btn">
|
<!-- 1. Video & Game Area (Top Section, Flex Grow to fill space) -->
|
||||||
<li
|
<div class="video-container" ref="videoDom" @click.stop="closeSwitchView(false)">
|
||||||
class="dice-btn"
|
<!-- Video Iframe -->
|
||||||
v-if="tableData && tableData.game_id == 7 && switchVideo == true"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="img-btn"
|
|
||||||
src="~@/assets/images/dice/video_btn.png"
|
|
||||||
alt=""
|
|
||||||
v-if="hideVideo"
|
|
||||||
@click="toggleVide"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
class="img-btn"
|
|
||||||
src="~@/assets/images/dice/table_btn.png"
|
|
||||||
alt=""
|
|
||||||
@click="toggleVide"
|
|
||||||
v-else
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
class="roulette-btn"
|
|
||||||
v-if="tableData && tableData.game_id == 8 && switchVideo == true"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="img-btn"
|
|
||||||
src="~@/assets/images/roulette/video_btn.png"
|
|
||||||
alt=""
|
|
||||||
v-if="hideVideo"
|
|
||||||
@click="toggleVide"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
class="img-btn"
|
|
||||||
src="~@/assets/images/roulette/table_btn.png"
|
|
||||||
alt=""
|
|
||||||
@click="toggleVide"
|
|
||||||
v-else
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
class="btn switch"
|
|
||||||
v-if="tableData && tableData.game_id == 8"
|
|
||||||
@click="switchRouletteType"
|
|
||||||
></li>
|
|
||||||
<li
|
|
||||||
class="btn switch"
|
|
||||||
v-if="tableData && tableData.game_id == 1"
|
|
||||||
@click="showBaccaratPlayType"
|
|
||||||
></li>
|
|
||||||
<li
|
|
||||||
class="btn free"
|
|
||||||
v-if="tableData && tableData.game_id == 1"
|
|
||||||
:class="[
|
|
||||||
{ active: baccaratType == 1 },
|
|
||||||
{ en: Type != 'tw' && Type != 'cn' }
|
|
||||||
]"
|
|
||||||
@click="showSetFree"
|
|
||||||
></li>
|
|
||||||
<li class="btn tip" @click="showTableInfo"></li>
|
|
||||||
<li
|
|
||||||
class="btn people"
|
|
||||||
@click="showOnLine"
|
|
||||||
:style="{
|
|
||||||
marginBottom:
|
|
||||||
tableData && (tableData.game_id == 4 || tableData.game_id == 5)
|
|
||||||
? '1.5rem'
|
|
||||||
: 0
|
|
||||||
}"
|
|
||||||
></li>
|
|
||||||
</ul>
|
|
||||||
<ul class="right-btn">
|
|
||||||
<!-- 右侧按钮已移至左上角导航栏 -->
|
|
||||||
</ul>
|
|
||||||
<iframe
|
<iframe
|
||||||
v-if="switchVideo && tableData"
|
v-if="switchVideo && tableData"
|
||||||
:style="{
|
:style="{
|
||||||
width: foxVideo.w,
|
width: foxVideo.w,
|
||||||
height: foxVideo.h,
|
height: foxVideo.h,
|
||||||
marginTop: foxVideo.mt
|
marginTop: foxVideo.mt,
|
||||||
|
marginLeft: foxVideo.ml
|
||||||
}"
|
}"
|
||||||
class="iframe"
|
class="iframe"
|
||||||
:class="[
|
:class="[
|
||||||
@ -146,20 +80,39 @@
|
|||||||
]"
|
]"
|
||||||
:src="videoUrl"
|
:src="videoUrl"
|
||||||
></iframe>
|
></iframe>
|
||||||
</div>
|
|
||||||
<div class="game-area">
|
<!-- Game Betting Overlay -->
|
||||||
<PlayChip></PlayChip>
|
<div class="game-area">
|
||||||
<template
|
<template
|
||||||
v-if="tableData && (tableData.game_id == 7 || tableData.game_id == 8)"
|
v-if="tableData && (tableData.game_id == 7 || tableData.game_id == 8)"
|
||||||
>
|
|
||||||
<Transition
|
|
||||||
name="custom-classes"
|
|
||||||
enter-active-class="animate__animated animate__faster animate__fadeInRight"
|
|
||||||
leave-active-class="animate__animated animate__faster animate__fadeOutRight"
|
|
||||||
>
|
>
|
||||||
|
<Transition
|
||||||
|
name="custom-classes"
|
||||||
|
enter-active-class="animate__animated animate__faster animate__fadeInRight"
|
||||||
|
leave-active-class="animate__animated animate__faster animate__fadeOutRight"
|
||||||
|
>
|
||||||
|
<PlayTable
|
||||||
|
v-if="hideVideo"
|
||||||
|
class="dice-table"
|
||||||
|
ref="chipTable"
|
||||||
|
:game_id="tableData?.game_id"
|
||||||
|
:sendMode="tableData?.sendMode"
|
||||||
|
:table_id="tableData?.id"
|
||||||
|
:number_tab_id="tableData?.number_tab_id"
|
||||||
|
:is_scavenging="tableData?.is_scavenging"
|
||||||
|
:winArray="winArray"
|
||||||
|
:bet_amount_msg="tableData?.bet_amount_msg"
|
||||||
|
:can_bet_big_small="tableData?.can_bet_big_small"
|
||||||
|
:can_bet_luck_six="tableData?.can_bet_luck_six"
|
||||||
|
:limit_money="tableData?.limit_money"
|
||||||
|
:limit_money_pair="tableData?.limit_money_pair"
|
||||||
|
:limit_money_tie="tableData?.limit_money_tie"
|
||||||
|
:tableData="tableData"
|
||||||
|
></PlayTable>
|
||||||
|
</Transition>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
<PlayTable
|
<PlayTable
|
||||||
v-if="hideVideo"
|
|
||||||
class="dice-table"
|
|
||||||
ref="chipTable"
|
ref="chipTable"
|
||||||
:game_id="tableData?.game_id"
|
:game_id="tableData?.game_id"
|
||||||
:sendMode="tableData?.sendMode"
|
:sendMode="tableData?.sendMode"
|
||||||
@ -174,43 +127,46 @@
|
|||||||
:limit_money_pair="tableData?.limit_money_pair"
|
:limit_money_pair="tableData?.limit_money_pair"
|
||||||
:limit_money_tie="tableData?.limit_money_tie"
|
:limit_money_tie="tableData?.limit_money_tie"
|
||||||
:tableData="tableData"
|
:tableData="tableData"
|
||||||
|
:class="[
|
||||||
|
{
|
||||||
|
hideTable:
|
||||||
|
tableData &&
|
||||||
|
(tableData.sendMode == 'sendScanResult' ||
|
||||||
|
tableData.sendMode == 'endBet') &&
|
||||||
|
(tableData.game_id == 4 || tableData.game_id == 5)
|
||||||
|
}
|
||||||
|
]"
|
||||||
></PlayTable>
|
></PlayTable>
|
||||||
</Transition>
|
</template>
|
||||||
</template>
|
<RushVillage
|
||||||
<template v-else>
|
v-if="tableData && tableData.is_rob == 1"
|
||||||
<PlayTable
|
:thisData="tableData"
|
||||||
ref="chipTable"
|
></RushVillage>
|
||||||
:game_id="tableData?.game_id"
|
</div>
|
||||||
:sendMode="tableData?.sendMode"
|
|
||||||
:table_id="tableData?.id"
|
<!-- Overlays inside Top Section -->
|
||||||
:number_tab_id="tableData?.number_tab_id"
|
<div class="switchView animate__fadeIn animated0" v-if="switchtabshow">
|
||||||
:is_scavenging="tableData?.is_scavenging"
|
<SwitchTab
|
||||||
:winArray="winArray"
|
@showSwitchtab="showSwitchtab"
|
||||||
:bet_amount_msg="tableData?.bet_amount_msg"
|
:tabInfo="{
|
||||||
:can_bet_big_small="tableData?.can_bet_big_small"
|
game_id: tableData && tableData.game_id,
|
||||||
:can_bet_luck_six="tableData?.can_bet_luck_six"
|
table_id: tableData && tableData.id
|
||||||
:limit_money="tableData?.limit_money"
|
}"
|
||||||
:limit_money_pair="tableData?.limit_money_pair"
|
></SwitchTab>
|
||||||
:limit_money_tie="tableData?.limit_money_tie"
|
</div>
|
||||||
:tableData="tableData"
|
<div
|
||||||
:class="[
|
class="switchView camera animate__fadeIn animated0"
|
||||||
{
|
v-if="switchCameraShow"
|
||||||
hideTable:
|
>
|
||||||
tableData &&
|
<setCamera @showSwitchCamera="showSwitchCamera"></setCamera>
|
||||||
(tableData.sendMode == 'sendScanResult' ||
|
</div>
|
||||||
tableData.sendMode == 'endBet') &&
|
|
||||||
(tableData.game_id == 4 || tableData.game_id == 5)
|
|
||||||
}
|
|
||||||
]"
|
|
||||||
></PlayTable>
|
|
||||||
</template>
|
|
||||||
<RushVillage
|
|
||||||
v-if="tableData && tableData.is_rob == 1"
|
|
||||||
:thisData="tableData"
|
|
||||||
></RushVillage>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 路单 -->
|
|
||||||
<div class="wayView" @click.stop="closeSwitchView(false)">
|
<!-- 2. Chip Control Bar (Middle Section, Fixed Height) -->
|
||||||
|
<PlayChip class="bet-chip-bar"></PlayChip>
|
||||||
|
|
||||||
|
<!-- 3. Roadmap (Bottom Section, Fixed Height or Flex Basis) -->
|
||||||
|
<div class="roadmap-container" @click.stop="closeSwitchView(false)">
|
||||||
<PlayWay :tableData="tableData"></PlayWay>
|
<PlayWay :tableData="tableData"></PlayWay>
|
||||||
<Poker
|
<Poker
|
||||||
class="pokerView"
|
class="pokerView"
|
||||||
@ -233,29 +189,12 @@
|
|||||||
:sendMode="tableData.sendMode"
|
:sendMode="tableData.sendMode"
|
||||||
></RouletteResult>
|
></RouletteResult>
|
||||||
</div>
|
</div>
|
||||||
<!-- 切换台 -->
|
|
||||||
<div class="switchView animate__fadeIn animated0" v-if="switchtabshow">
|
|
||||||
<SwitchTab
|
|
||||||
@showSwitchtab="showSwitchtab"
|
|
||||||
:tabInfo="{
|
|
||||||
game_id: tableData && tableData.game_id,
|
|
||||||
table_id: tableData && tableData.id
|
|
||||||
}"
|
|
||||||
></SwitchTab>
|
|
||||||
</div>
|
|
||||||
<!-- 切换视频线路 -->
|
|
||||||
<div
|
|
||||||
class="switchView camera animate__fadeIn animated0"
|
|
||||||
v-if="switchCameraShow"
|
|
||||||
>
|
|
||||||
<setCamera @showSwitchCamera="showSwitchCamera"></setCamera>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- 玩法切换 -->
|
|
||||||
|
<!-- Popups -->
|
||||||
<PlayTypePop class="play-type-pop"></PlayTypePop>
|
<PlayTypePop class="play-type-pop"></PlayTypePop>
|
||||||
<!-- 桌台信息 -->
|
|
||||||
<TableInfoPop class="table-info-pop" :tableData="tableData"></TableInfoPop>
|
<TableInfoPop class="table-info-pop" :tableData="tableData"></TableInfoPop>
|
||||||
<!-- 在线玩家 -->
|
|
||||||
<OnLinePop class="online-pop"></OnLinePop>
|
<OnLinePop class="online-pop"></OnLinePop>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -923,30 +862,53 @@ export default {
|
|||||||
}
|
}
|
||||||
const foxVideoFn = () => {
|
const foxVideoFn = () => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const h = videoDom.value.clientHeight * videoConfig.value.scale
|
if (!videoDom.value) return;
|
||||||
const w =
|
const containerH = videoDom.value.clientHeight;
|
||||||
(videoConfig.value.proportion[0] / videoConfig.value.proportion[1]) *
|
const containerW = videoDom.value.clientWidth;
|
||||||
h
|
|
||||||
const mt = 0
|
// Default to 16:9 if missing
|
||||||
|
const proportion = videoConfig.value.proportion || [16, 9];
|
||||||
|
const videoRatio = proportion[0] / proportion[1];
|
||||||
|
const screenRatio = containerW / containerH; // Inverse for calculation check
|
||||||
|
|
||||||
|
let w, h, ml = 0, mt = 0;
|
||||||
|
|
||||||
|
if (screenRatio > videoRatio) {
|
||||||
|
// Screen is wider than video (or video is taller than screen) -> Height constrained
|
||||||
|
// e.g. Landscape or wide container
|
||||||
|
h = containerH;
|
||||||
|
w = h * videoRatio;
|
||||||
|
ml = (containerW - w) / 2;
|
||||||
|
} else {
|
||||||
|
// Screen is narrower than video (Standard Mobile Portrait) -> Width constrained
|
||||||
|
w = containerW;
|
||||||
|
h = w / videoRatio;
|
||||||
|
mt = (containerH - h) / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply specific offsets if needed, though usually centering is best for 'contain'
|
||||||
|
if (phoneModel.value == "ios") {
|
||||||
|
if (phoneScreen.value == "landscape") {
|
||||||
|
mt += videoConfig.value.offset.iosLandscape || 0;
|
||||||
|
} else {
|
||||||
|
mt += videoConfig.value.offset.iosPortrait || 0;
|
||||||
|
}
|
||||||
|
} else if (phoneModel.value == "android") {
|
||||||
|
mt += videoConfig.value.offset.android || 0;
|
||||||
|
} else {
|
||||||
|
mt += videoConfig.value.offset.pc || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ensure values are safe
|
||||||
|
if (isNaN(w)) w = containerW;
|
||||||
|
if (isNaN(h)) h = containerW * 0.56; // Fallback 16:9
|
||||||
|
|
||||||
foxVideo.value.w = `${w}px`
|
foxVideo.value.w = `${w}px`
|
||||||
foxVideo.value.h = `${h}px`
|
foxVideo.value.h = `${h}px`
|
||||||
foxVideo.value.mt = `${mt}px`
|
foxVideo.value.mt = `${mt}px`
|
||||||
|
foxVideo.value.ml = `${ml}px`
|
||||||
foxVideo.value.model = phoneModel.value
|
foxVideo.value.model = phoneModel.value
|
||||||
foxVideo.value.screen = phoneScreen.value
|
foxVideo.value.screen = phoneScreen.value
|
||||||
if (phoneModel.value == "ios") {
|
|
||||||
foxVideo.value.w = `100%`
|
|
||||||
if (phoneScreen.value == "landscape") {
|
|
||||||
foxVideo.value.mt = videoConfig.value.offset.iosLandscape
|
|
||||||
} else {
|
|
||||||
foxVideo.value.mt = videoConfig.value.offset.iosPortrait
|
|
||||||
}
|
|
||||||
} else if (phoneModel.value == "android") {
|
|
||||||
foxVideo.value.w = `100%`
|
|
||||||
foxVideo.value.mt = videoConfig.value.offset.android
|
|
||||||
} else {
|
|
||||||
foxVideo.value.w = `100%`
|
|
||||||
foxVideo.value.mt = videoConfig.value.offset.pc
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 牛牛点数声音
|
// 牛牛点数声音
|
||||||
@ -1252,8 +1214,8 @@ export default {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
/* 深色豪华主题配色 */
|
/* 深色豪华主题配色 */
|
||||||
$dark-bg: #0d0d0d;
|
$dark-bg: #0d0d0d;
|
||||||
$dark-bg-secondary: #1a1a1a;
|
$dark-bg-secondary: #000;
|
||||||
$card-bg: #1e1e1e;
|
$card-bg: #000;
|
||||||
$border-color: #333;
|
$border-color: #333;
|
||||||
$gold: #c5a059;
|
$gold: #c5a059;
|
||||||
|
|
||||||
@ -1267,32 +1229,21 @@ $gold: #c5a059;
|
|||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
&.offcamera {
|
/* Navigation Bar */
|
||||||
background: $dark-bg;
|
|
||||||
&::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.no_bg {
|
|
||||||
background: $dark-bg;
|
|
||||||
&::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nav {
|
.nav {
|
||||||
position: absolute;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 100;
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 45px;
|
height: 45px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
transform: rotateX(0deg);
|
|
||||||
background: $dark-bg-secondary;
|
background: $dark-bg-secondary;
|
||||||
border-bottom: 1px solid $border-color;
|
border-bottom: 1px solid $border-color;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
height: 0.923rem;
|
height: 0.923rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1301,23 +1252,15 @@ $gold: #c5a059;
|
|||||||
.back {
|
.back {
|
||||||
width: 0.923rem;
|
width: 0.923rem;
|
||||||
height: 0.923rem;
|
height: 0.923rem;
|
||||||
background: url("~@/assets/images/icon/back.png") center center
|
background: url("~@/assets/images/icon/back.png") center center no-repeat;
|
||||||
no-repeat;
|
|
||||||
background-size: 60% auto;
|
background-size: 60% auto;
|
||||||
margin-left: 0.6rem;
|
margin-left: 0.6rem;
|
||||||
&:active {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.switch-tab {
|
.switch-tab {
|
||||||
width: 0.923rem;
|
width: 0.923rem;
|
||||||
height: 0.923rem;
|
height: 0.923rem;
|
||||||
background: url("~@/assets/images/icon/switch_tab.png") center center
|
background: url("~@/assets/images/icon/switch_tab.png") center center no-repeat;
|
||||||
no-repeat;
|
|
||||||
background-size: 60% auto;
|
background-size: 60% auto;
|
||||||
&:active {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.user {
|
.user {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
@ -1328,16 +1271,14 @@ $gold: #c5a059;
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
background: url("~@/assets/images/icon/user.png") left center
|
background: url("~@/assets/images/icon/user.png") left center no-repeat;
|
||||||
no-repeat;
|
|
||||||
background-size: 14px;
|
background-size: 14px;
|
||||||
}
|
}
|
||||||
.money {
|
.money {
|
||||||
color: $gold;
|
color: $gold;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
background: url("~@/assets/images/icon/money.png") left center
|
background: url("~@/assets/images/icon/money.png") left center no-repeat;
|
||||||
no-repeat;
|
|
||||||
background-size: 14px;
|
background-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1351,10 +1292,8 @@ $gold: #c5a059;
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
top: 0.15rem;
|
top: 0.15rem;
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
::v-deep {
|
::v-deep .van-circle__text {
|
||||||
.van-circle__text {
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.box {
|
.box {
|
||||||
@ -1367,9 +1306,6 @@ $gold: #c5a059;
|
|||||||
background-size: 1.2rem;
|
background-size: 1.2rem;
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
&:active {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
&.camera {
|
&.camera {
|
||||||
background-image: url("~@/assets/images/icon/camera.png");
|
background-image: url("~@/assets/images/icon/camera.png");
|
||||||
&.off {
|
&.off {
|
||||||
@ -1386,183 +1322,119 @@ $gold: #c5a059;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Main View Container - Vertical Flex */
|
||||||
.view {
|
.view {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: calc(100% - 45px); /* Subtract nav height */
|
||||||
align-items: center;
|
position: relative;
|
||||||
.video {
|
overflow: hidden;
|
||||||
width: 100%;
|
|
||||||
// height: 100%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
flex: 1;
|
|
||||||
.left-btn {
|
|
||||||
position: absolute;
|
|
||||||
left: 0.6rem;
|
|
||||||
bottom: 0.5rem;
|
|
||||||
width: 1rem;
|
|
||||||
z-index: 9;
|
|
||||||
transform: rotateX(0deg);
|
|
||||||
.dice-btn,
|
|
||||||
.roulette-btn {
|
|
||||||
width: 1.5rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
.img-btn {
|
|
||||||
width: 100%;
|
|
||||||
&:active {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.roulette-btn {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
/* 1. Video Container (Top) - Flex Grow */
|
||||||
width: 1.3rem;
|
.video-container {
|
||||||
height: 1.3rem;
|
flex: 1; /* Grow to fill available space */
|
||||||
margin-bottom: 0.553rem;
|
position: relative;
|
||||||
background-size: 100%;
|
width: 100%;
|
||||||
background-position: center center;
|
background: #000;
|
||||||
background-repeat: no-repeat;
|
overflow: hidden;
|
||||||
&:active {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
&.switch {
|
|
||||||
background-image: url("~@/assets/images/icon/switch.png");
|
|
||||||
}
|
|
||||||
&.free {
|
|
||||||
background-image: url("~@/assets/images/icon/free.png");
|
|
||||||
&.active {
|
|
||||||
background-image: url("~@/assets/images/icon/free_active.png");
|
|
||||||
}
|
|
||||||
&.en {
|
|
||||||
background-image: url("~@/assets/images/icon/en_free.png");
|
|
||||||
&.active {
|
|
||||||
background-image: url("~@/assets/images/icon/en_free_active.png");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.tip {
|
|
||||||
background-image: url("~@/assets/images/icon/tip.png");
|
|
||||||
}
|
|
||||||
&.people {
|
|
||||||
background-image: url("~@/assets/images/icon/people.png");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right-btn {
|
|
||||||
position: absolute;
|
|
||||||
right: 2.7rem;
|
|
||||||
top: 1.5rem;
|
|
||||||
width: 0.923rem;
|
|
||||||
z-index: 9;
|
|
||||||
transform: rotateX(0deg);
|
|
||||||
.btn {
|
|
||||||
width: 1.2rem;
|
|
||||||
height: 1.2rem;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
background-size: 100%;
|
|
||||||
background-position: center center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
&:active {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
&.switch-tab {
|
|
||||||
background-image: url("~@/assets/images/icon/switch_tab.png");
|
|
||||||
}
|
|
||||||
&.continue {
|
|
||||||
background-image: url("~@/assets/images/icon/continue.png");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dice-table {
|
|
||||||
background: $dark-bg;
|
|
||||||
transform: rotateX(1deg);
|
|
||||||
}
|
|
||||||
.hideTable {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.iframe {
|
.iframe {
|
||||||
border: none;
|
border: none;
|
||||||
width: 100%;
|
/* Remove fixed width/height to allow JS dynamic sizing */
|
||||||
|
/* width: 100%; */
|
||||||
|
/* height: 100%; */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 0;
|
||||||
transform: translateY(-50%);
|
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
transition: all 2s, left 0s, top 0s, width 0s, height 0s;
|
/* object-fit: cover; Remove object-fit as it might conflict with iframe content */
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-area {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 10;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
&.scale {
|
|
||||||
transition-delay: 2s;
|
/* Enable clicks on children */
|
||||||
transform: translateY(-70%) scale(2);
|
::v-deep .playtable, ::v-deep .rushvillage {
|
||||||
}
|
pointer-events: auto;
|
||||||
&.hideVideo {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Switch Views (Camera/Tables)Overlay */
|
||||||
|
.switchView {
|
||||||
|
position: absolute;
|
||||||
|
width: 60%;
|
||||||
|
height: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: $dark-bg-secondary;
|
||||||
|
border-top-left-radius: 0.3rem;
|
||||||
|
&.camera { width: 40%; }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.wayView {
|
/* 2. Chip Control Bar (Middle) - Fixed Height */
|
||||||
position: relative;
|
.bet-chip-bar {
|
||||||
width: 100%;
|
|
||||||
height: 2.31rem;
|
|
||||||
background: $card-bg;
|
|
||||||
border-top: 1px solid $border-color;
|
|
||||||
// overflow: hidden;
|
|
||||||
.pokerView {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 70px;
|
||||||
bottom: 0;
|
flex-shrink: 0;
|
||||||
left: 0;
|
position: relative;
|
||||||
pointer-events: none;
|
z-index: 20;
|
||||||
|
background: #111;
|
||||||
|
border-top: 1px solid #333;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.switchView {
|
|
||||||
position: absolute;
|
|
||||||
width: 60%;
|
|
||||||
height: 100%;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
z-index: 10001;
|
|
||||||
transform: rotateX(0deg);
|
|
||||||
border-top-left-radius: 0.3rem;
|
|
||||||
border-bottom-left-radius: 0.3rem;
|
|
||||||
overflow: hidden;
|
|
||||||
background: $dark-bg-secondary;
|
|
||||||
&.camera {
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 竖屏模式下，路单区域平铺全屏 */
|
/* 3. Roadmap Container (Bottom) - Auto Height for Aspect Ratio */
|
||||||
@media screen and (orientation: portrait) {
|
.roadmap-container {
|
||||||
.play .view {
|
width: 100%;
|
||||||
.wayView {
|
height: auto;
|
||||||
width: 100% !important;
|
flex-shrink: 0;
|
||||||
max-width: 100% !important;
|
background: #000;
|
||||||
height: 250px !important;
|
position: relative;
|
||||||
min-height: 250px !important;
|
z-index: 20;
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
.wayView {
|
||||||
left: 0 !important;
|
width: 100%;
|
||||||
right: 0 !important;
|
height: auto;
|
||||||
display: flex !important;
|
|
||||||
flex-direction: row !important;
|
|
||||||
|
|
||||||
.pokerView {
|
|
||||||
order: 1 !important;
|
|
||||||
flex: none !important;
|
|
||||||
width: 200px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.playway {
|
/* Deep overrides to fix canvas distortion */
|
||||||
order: 2 !important;
|
::v-deep .playway {
|
||||||
flex: 1 !important;
|
height: auto !important;
|
||||||
|
background: #000 !important;
|
||||||
|
|
||||||
|
&.white-theme {
|
||||||
|
background: #000 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .baccarat-view {
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
::v-deep .road-box {
|
||||||
|
flex: none !important;
|
||||||
|
height: auto !important;
|
||||||
|
background: #000 !important;
|
||||||
|
}
|
||||||
|
::v-deep .header-bar {
|
||||||
|
background: #1a1a1a !important;
|
||||||
|
border-bottom: 1px solid #333 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
.game-num { color: #fff !important; }
|
||||||
|
}
|
||||||
|
::v-deep .canvas {
|
||||||
|
height: auto !important;
|
||||||
|
min-height: 0 !important;
|
||||||
|
flex: none !important;
|
||||||
|
width: 100% !important;
|
||||||
|
display: block !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user