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

fix: 调整了筹码和反馈图标的溢出显示行为及层级，并增加了筹码定位注释。

Browse Source
This commit is contained in:
li 2026-01-20 18:15:19 +08:00
parent 14752931b7
commit fc652c247a
6 changed files with 164 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/PlayTable/Index.vue
View File

@ -300,7 +300,8 @@ export default {
const downBet = (e, type) => { const downBet = (e, type) => {
store.commit("app/standbyTime") store.commit("app/standbyTime")
const { value: chip, key } = chooseChip.value const { value: chip, key } = chooseChip.value
if (props.sendMode == "startBetCountDown") { // 临时注释时间限制,方便测试界面效果
// if (props.sendMode == "startBetCountDown") {
if (type == "luck_six_amount" && props.can_bet_luck_six != 1) { if (type == "luck_six_amount" && props.can_bet_luck_six != 1) {
showToast(Lang.value[Type.value].to_bet_fail_7) showToast(Lang.value[Type.value].to_bet_fail_7)
} else if ( } else if (
@ -324,8 +325,8 @@ export default {
sendChip[type] = chipVal + (sendChip[type] || 0) sendChip[type] = chipVal + (sendChip[type] || 0)
downChip[type] = chipVal + (downChip[type] || 0) downChip[type] = chipVal + (downChip[type] || 0)
chipArray[type].push({ chipArray[type].push({
x: `calc(${getRndInteger(30, 90)}% - 0.69rem)`, x: `calc(${getRndInteger(30, 90)}% - 0.69rem)`, // 筹码保持在框内
y: `calc(${getRndInteger(50, 90)}% - 0.55rem)`, y: `calc(${getRndInteger(50, 90)}% - 0.55rem)`, // 筹码保持在框内
key: `chip_${key}`, key: `chip_${key}`,
type: "self", type: "self",
uid: userInfo.value.id, uid: userInfo.value.id,
@ -333,7 +334,7 @@ export default {
}) })
audioMp3(["push"]).Play() audioMp3(["push"]).Play()
} }
} // }
} }
const nameArray = [ const nameArray = [
// 百家乐&龙虎 // 百家乐&龙虎

57
src/components/PlayTable/TableBaccarat.vue
View File

@ -22,9 +22,9 @@
<span class="label text-blue">{{ Lang[Type].small }}</span> <span class="label text-blue">{{ Lang[Type].small }}</span>
<span class="odds">1:1.5</span> <span class="odds">1:1.5</span>
</div> </div>
<div class="money" v-if="bet_amount_msg.small_amount"> <div class="money">
<i class="coin-icon"></i> <i class="coin-icon"></i>
{{ bet_amount_msg.small_amount }} {{ bet_amount_msg.small_amount || 0 }}
</div> </div>
</div> </div>
@ -48,9 +48,9 @@
<span class="label text-blue">{{ Lang[Type].msg_player_pair }}</span> <span class="label text-blue">{{ Lang[Type].msg_player_pair }}</span>
<span class="odds">1:11</span> <span class="odds">1:11</span>
</div> </div>
<div class="money" v-if="bet_amount_msg.player_pair_amount"> <div class="money">
<i class="coin-icon"></i> <i class="coin-icon"></i>
{{ bet_amount_msg.player_pair_amount }} {{ bet_amount_msg.player_pair_amount || 0 }}
</div> </div>
</div> </div>
@ -74,9 +74,9 @@
<span class="label text-red">{{ Lang[Type].msg_banker_pair }}</span> <span class="label text-red">{{ Lang[Type].msg_banker_pair }}</span>
<span class="odds">1:11</span> <span class="odds">1:11</span>
</div> </div>
<div class="money" v-if="bet_amount_msg.banker_pair_amount"> <div class="money">
<i class="coin-icon"></i> <i class="coin-icon"></i>
{{ bet_amount_msg.banker_pair_amount }} {{ bet_amount_msg.banker_pair_amount || 0 }}
</div> </div>
</div> </div>
@ -97,9 +97,9 @@
<span class="label text-red">{{ Lang[Type].big }}</span> <span class="label text-red">{{ Lang[Type].big }}</span>
<span class="odds">1:0.5</span> <span class="odds">1:0.5</span>
</div> </div>
<div class="money" v-if="bet_amount_msg.big_amount"> <div class="money">
<i class="coin-icon"></i> <i class="coin-icon"></i>
{{ bet_amount_msg.big_amount }} {{ bet_amount_msg.big_amount || 0 }}
</div> </div>
</div> </div>
</div> </div>
@ -126,9 +126,9 @@
<span class="label-large text-blue">{{ Lang[Type].player }}</span> <span class="label-large text-blue">{{ Lang[Type].player }}</span>
<span class="odds">1:{{ tableData.price_player }}</span> <span class="odds">1:{{ tableData.price_player }}</span>
</div> </div>
<div class="money" v-if="bet_amount_msg.player_amount"> <div class="money">
<i class="coin-icon"></i> <i class="coin-icon"></i>
{{ bet_amount_msg.player_amount }} {{ bet_amount_msg.player_amount || 0 }}
</div> </div>
</div> </div>
@ -149,9 +149,9 @@
<span class="label-large text-green">{{ Lang[Type].tie }}</span> <span class="label-large text-green">{{ Lang[Type].tie }}</span>
<span class="odds">1:{{ tableData.price_tie_baccarat }}</span> <span class="odds">1:{{ tableData.price_tie_baccarat }}</span>
</div> </div>
<div class="money" v-if="bet_amount_msg.tie_amount"> <div class="money">
<i class="coin-icon"></i> <i class="coin-icon"></i>
{{ bet_amount_msg.tie_amount }} {{ bet_amount_msg.tie_amount || 0 }}
</div> </div>
</div> </div>
@ -177,9 +177,9 @@
{{ 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" v-if="bet_amount_msg.banker_amount"> <div class="money">
<i class="coin-icon"></i> <i class="coin-icon"></i>
{{ bet_amount_msg.banker_amount }} {{ bet_amount_msg.banker_amount || 0 }}
</div> </div>
</div> </div>
</div> </div>
@ -307,7 +307,7 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s; transition: all 0.2s;
overflow: hidden; overflow: visible; /* 允许反馈图标完整显示 */
// Unclick state // Unclick state
&.unclick { &.unclick {
@ -353,27 +353,34 @@ export default {
.text-green { color: #22ac38; } .text-green { color: #22ac38; }
} }
// Money display // Money display - 移到顶部并增强显示
.money { .money {
position: absolute; position: absolute;
bottom: 6px; top: 4px; /* 改为顶部 */
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2px; gap: 2px;
color: #ffd700; color: #000; /* 改为黑色，更清晰 */
font-size: 12px; font-size: 13px; /* 稍微放大 */
z-index: 3; font-weight: 700; /* 加粗 */
z-index: 100; /* 大幅提升层级，确保在筹码之上 */
white-space: nowrap; white-space: nowrap;
pointer-events: none; pointer-events: none;
/* 添加金色渐变背景，防止被筹码遮挡 */
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
padding: 2px 8px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3);
.coin-icon { .coin-icon {
width: 14px; width: 12px;
height: 14px; height: 12px;
background: #ffd700; background: #fff;
border-radius: 50%; border-radius: 50%;
border: 1px solid #fff; border: 1px solid #DAA520;
box-shadow: 0 0 2px rgba(0,0,0,0.5); box-shadow: 0 0 2px rgba(0,0,0,0.5);
} }
} }

2
src/components/PlayTable/TableBullbull.vue
View File

@ -200,7 +200,7 @@ $text-red: #f56c6c;
flex-direction: column; flex-direction: column;
border: 1px solid $border-light; border: 1px solid $border-light;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: visible; /* 允许反馈图标完整显示 */
background: $bg-dark; background: $bg-dark;
box-shadow: 0 4px 6px rgba(0,0,0,0.3); box-shadow: 0 4px 6px rgba(0,0,0,0.3);

42
src/components/PlayTable/TableLonghu.vue
View File

@ -210,27 +210,37 @@ $text-secondary: #888;
} }
.money { .money {
position: absolute; position: absolute;
left: 0px; top: 4px; /* 改为顶部 */
bottom: -2px; left: 50%;
font-size: 0.24rem; transform: translateX(-50%);
font-weight: normal; font-size: 13px; /* 放大字体 */
transform: scale(0.7); font-weight: 700; /* 加粗 */
color: $text-secondary; color: #000; /* 黑色文字 */
vertical-align: bottom;
pointer-events: none; pointer-events: none;
z-index: 100; /* 大幅提升层级 */
/* 添加金色渐变背景 */
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
padding: 2px 8px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
gap: 4px;
&::before { &::before {
display: inline-block; display: inline-block;
content: "总"; content: "总";
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.9);
font-size: 10px; font-size: 11px;
border-radius: 0.615rem; border-radius: 50%;
width: 0.615rem; width: 18px;
height: 0.615rem; height: 18px;
text-align: center; text-align: center;
line-height: 0.615rem; line-height: 18px;
font-weight: normal; font-weight: 700;
margin-right: 0.06rem; color: #000;
transform: scale(0.7); border: 1px solid #DAA520;
} }
} }
} }

3
src/components/chipView.vue
View File

@ -45,6 +45,7 @@ export default {
left: 0; left: 0;
top: 0; top: 0;
z-index: 3; z-index: 3;
overflow: visible; // 允许筹码超出容器边界
&:active { &:active {
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
} }
@ -60,11 +61,13 @@ export default {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: visible; // 允许筹码超出chip-box边界
.box { .box {
width: 50px; width: 50px;
height: 50px; height: 50px;
position: absolute; position: absolute;
transition: 0.5s all; transition: 0.5s all;
z-index: 1; // 给筹码添加层级,但低于下注框文字
} }
.chip { .chip {
width: 100%; width: 100%;

162
src/components/confirmBet.vue
View File

@ -1,18 +1,18 @@
<template> <template>
<div class="touch-view" :class="{ pointer: !data.show }"> <div class="touch-view" :class="{ pointer: !data.show }">
<!-- 红色边框高亮效果 --> <!-- 按钮组 -->
<div class="highlight-border" v-if="data.show"></div>
<div class="btn-box" v-if="data.show"> <div class="btn-box" v-if="data.show">
<span class="cancel btn" @click.stop="cancel"></span> <span class="cancel btn" @click.stop="cancel"></span>
<span class="undo btn" @click.stop="undo"></span> <button class="golden-undo-button" @click.stop="undo" aria-label="撤回下注">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 8C9.85 8 7.45 8.99 5.6 10.6L2 7V16H11L7.38 12.38C8.77 11.22 10.54 10.5 12.5 10.5C16.04 10.5 19.05 12.81 20.1 16L22.47 15.22C21.08 11.03 17.15 8 12.5 8Z" fill="white"/>
</svg>
</button>
<span class="confirm btn" @click.stop="confirm"></span> <span class="confirm btn" @click.stop="confirm"></span>
</div> </div>
<div
class="num" <!-- 总下注金额 - 独立定位在中间 -->
:style="{ marginTop: data.show ? `0` : `1rem` }" <div class="num" v-show="data.money > 0">
v-show="data.money > 0"
>
{{ data.money }} {{ data.money }}
{{ {{
data.times data.times
@ -77,53 +77,61 @@ $red-highlight: #ff3b3b;
} }
.touch-view { .touch-view {
position: absolute; position: absolute;
width: 3.5rem; width: auto; /* 改为自动宽度，避免重叠 */
z-index: 99; z-index: 999;
left: 50%; left: 50%;
bottom: 80%; bottom: 10%;
transform: translateX(-50%); transform: translateX(-50%);
text-align: center; text-align: center;
height: 1rem; overflow: visible;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none; /* 容器不拦截点击 */
/* 红色边框高亮效果 */ /* 子元素恢复点击 */
.highlight-border { > * {
position: absolute; pointer-events: auto;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc(100% + 0.4rem);
height: calc(100% + 1.8rem);
border: 3px solid $red-highlight;
border-radius: 0.2rem;
pointer-events: none;
z-index: -1;
animation: pulse-border 1.5s ease-in-out infinite;
} }
.num { .num {
background: rgba(197, 160, 89, 0.9); background: rgba(197, 160, 89, 0.95);
border-radius: 1rem; border-radius: 1rem;
color: #000; color: #000;
font-size: 0.4rem; font-size: 0.4rem;
padding: 0.02rem 0.05rem; padding: 0.04rem 0.12rem;
border: 1px solid $gold; border: 1px solid $gold;
pointer-events: none;
font-weight: 600; font-weight: 600;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
white-space: nowrap;
margin-top: 0.08rem; /* 在按钮下方，与按钮保持间距 */
} }
.btn-box { .btn-box {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 0.05rem; margin-bottom: 0.05rem;
gap: 0.15rem; gap: 0; /* 移除gap，改用margin控制间距 */
position: relative;
z-index: 1001; /* 确保按钮在最上层 */
overflow: visible !important; /* 确保按钮不被裁切 */
.btn { .btn {
width: 0.95 * 1.35rem; /* 缩小到32px */
height: 0.95 * 1.35rem; width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
/* 缩小左右边距，让按钮靠近一些 */
margin: 0 3px !important;
background: url("~@/assets/images/sprite_btn.png"); background: url("~@/assets/images/sprite_btn.png");
background-size: 2.2 * 1.35rem auto; background-size: 70.4px auto; /* 2.2 * 32px */
cursor: pointer; cursor: pointer;
transition: transform 0.1s ease; transition: transform 0.1s ease;
flex-shrink: 0; /* 防止flex压缩 */
&:active { &:active {
transform: scale(0.95); transform: scale(0.95);
@ -131,48 +139,72 @@ $red-highlight: #ff3b3b;
/* 取消按钮 - 红色 X */ /* 取消按钮 - 红色 X */
&.cancel { &.cancel {
background-position: -0.07 * 1.35rem -0.04 * 1.35rem; background-position: -2.24px -1.28px; /* -0.07 * 32px, -0.04 * 32px */
&:active { &:active {
background-position: -1.18 * 1.35rem -0.04 * 1.35rem; background-position: -37.76px -1.28px; /* -1.18 * 32px, -0.04 * 32px */
}
}
/* 撤销按钮 - 橙色箭头 */
&.undo {
width: 1rem;
height: 1rem;
background: linear-gradient(135deg, #ff9a3d 0%, #ff6b3d 100%);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(255, 107, 61, 0.5);
position: relative;
&::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 0.5rem;
height: 0.5rem;
border-left: 3px solid #fff;
border-bottom: 3px solid #fff;
transform: translate(-40%, -50%) rotate(45deg);
}
&:active {
background: linear-gradient(135deg, #e88935 0%, #e85f35 100%);
box-shadow: 0 1px 4px rgba(255, 107, 61, 0.3);
} }
} }
/* 确认按钮 - 绿色勾 */ /* 确认按钮 - 绿色勾 */
&.confirm { &.confirm {
background-position: -0.05 * 1.35rem -1.14 * 1.35rem; background-position: -1.6px -36.48px; /* -0.05 * 32px, -1.14 * 32px */
&:active { &:active {
background-position: -1.17 * 1.35rem -1.13 * 1.35rem; background-position: -37.44px -36.16px; /* -1.17 * 32px, -1.13 * 32px */
} }
} }
} }
/* 针对下注确认菜单中间的"撤回"按钮的强制修复样式 */
.golden-undo-button,
button[aria-label="撤回下注"],
button[aria-label="撤回"] {
/* 1. 强制清除默认样式 */
background-color: transparent !important;
border: none !important;
border-radius: 50% !important;
padding: 0 !important;
/* 2. 缩小尺寸到32px，与左右按钮完全一致 */
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
/* 强制盒模型 */
box-sizing: border-box !important;
/* 3. 缩小左右边距，让按钮靠近一些 */
margin: 0 3px !important;
/* 4. 设置金橙色渐变背景 */
background: linear-gradient(135deg, #FFC107 0%, #FF9800 100%) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
/* 5. 布局居中 */
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
flex-shrink: 0 !important; /* 防止flex压缩 */
/* 6. 确保层级 */
position: relative !important;
z-index: 10;
/* 修复内部 SVG 图标的颜色和大小 - 缩小到16px */
svg {
width: 16px !important;
height: 16px !important;
fill: white !important; /* 强制白色填充 */
stroke: white !important; /* 如果是线条图标，强制白色线条 */
}
/* 点击效果 */
&:active {
transform: scale(0.95) !important;
filter: brightness(0.9) !important;
}
}
} }
} }