fix: 调整了筹码和反馈图标的溢出显示行为及层级，并增加了筹码定位注释。
This commit is contained in:
li
parent
14752931b7
commit
fc652c247a
@ -300,7 +300,8 @@ export default {
|
||||
const downBet = (e, type) => {
|
||||
store.commit("app/standbyTime")
|
||||
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) {
|
||||
showToast(Lang.value[Type.value].to_bet_fail_7)
|
||||
} else if (
|
||||
@ -324,8 +325,8 @@ export default {
|
||||
sendChip[type] = chipVal + (sendChip[type] || 0)
|
||||
downChip[type] = chipVal + (downChip[type] || 0)
|
||||
chipArray[type].push({
|
||||
x: `calc(${getRndInteger(30, 90)}% - 0.69rem)`,
|
||||
y: `calc(${getRndInteger(50, 90)}% - 0.55rem)`,
|
||||
x: `calc(${getRndInteger(30, 90)}% - 0.69rem)`, // 筹码保持在框内
|
||||
y: `calc(${getRndInteger(50, 90)}% - 0.55rem)`, // 筹码保持在框内
|
||||
key: `chip_${key}`,
|
||||
type: "self",
|
||||
uid: userInfo.value.id,
|
||||
@ -333,7 +334,7 @@ export default {
|
||||
})
|
||||
audioMp3(["push"]).Play()
|
||||
}
|
||||
}
|
||||
// }
|
||||
}
|
||||
const nameArray = [
|
||||
// 百家乐&龙虎
|
||||
|
||||
@ -22,9 +22,9 @@
|
||||
<span class="label text-blue">{{ Lang[Type].small }}</span>
|
||||
<span class="odds">1:1.5</span>
|
||||
</div>
|
||||
<div class="money" v-if="bet_amount_msg.small_amount">
|
||||
<div class="money">
|
||||
<i class="coin-icon"></i>
|
||||
{{ bet_amount_msg.small_amount }}
|
||||
{{ bet_amount_msg.small_amount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -48,9 +48,9 @@
|
||||
<span class="label text-blue">{{ Lang[Type].msg_player_pair }}</span>
|
||||
<span class="odds">1:11</span>
|
||||
</div>
|
||||
<div class="money" v-if="bet_amount_msg.player_pair_amount">
|
||||
<div class="money">
|
||||
<i class="coin-icon"></i>
|
||||
{{ bet_amount_msg.player_pair_amount }}
|
||||
{{ bet_amount_msg.player_pair_amount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -74,9 +74,9 @@
|
||||
<span class="label text-red">{{ Lang[Type].msg_banker_pair }}</span>
|
||||
<span class="odds">1:11</span>
|
||||
</div>
|
||||
<div class="money" v-if="bet_amount_msg.banker_pair_amount">
|
||||
<div class="money">
|
||||
<i class="coin-icon"></i>
|
||||
{{ bet_amount_msg.banker_pair_amount }}
|
||||
{{ bet_amount_msg.banker_pair_amount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -97,9 +97,9 @@
|
||||
<span class="label text-red">{{ Lang[Type].big }}</span>
|
||||
<span class="odds">1:0.5</span>
|
||||
</div>
|
||||
<div class="money" v-if="bet_amount_msg.big_amount">
|
||||
<div class="money">
|
||||
<i class="coin-icon"></i>
|
||||
{{ bet_amount_msg.big_amount }}
|
||||
{{ bet_amount_msg.big_amount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -126,9 +126,9 @@
|
||||
<span class="label-large text-blue">{{ Lang[Type].player }}</span>
|
||||
<span class="odds">1:{{ tableData.price_player }}</span>
|
||||
</div>
|
||||
<div class="money" v-if="bet_amount_msg.player_amount">
|
||||
<div class="money">
|
||||
<i class="coin-icon"></i>
|
||||
{{ bet_amount_msg.player_amount }}
|
||||
{{ bet_amount_msg.player_amount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -149,9 +149,9 @@
|
||||
<span class="label-large text-green">{{ Lang[Type].tie }}</span>
|
||||
<span class="odds">1:{{ tableData.price_tie_baccarat }}</span>
|
||||
</div>
|
||||
<div class="money" v-if="bet_amount_msg.tie_amount">
|
||||
<div class="money">
|
||||
<i class="coin-icon"></i>
|
||||
{{ bet_amount_msg.tie_amount }}
|
||||
{{ bet_amount_msg.tie_amount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -177,9 +177,9 @@
|
||||
{{ baccarat_type == 0 ? `1:${tableData.price_banker}` : "1:1" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="money" v-if="bet_amount_msg.banker_amount">
|
||||
<div class="money">
|
||||
<i class="coin-icon"></i>
|
||||
{{ bet_amount_msg.banker_amount }}
|
||||
{{ bet_amount_msg.banker_amount || 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -307,7 +307,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
overflow: hidden;
|
||||
overflow: visible; /* 允许反馈图标完整显示 */
|
||||
|
||||
// Unclick state
|
||||
&.unclick {
|
||||
@ -353,27 +353,34 @@ export default {
|
||||
.text-green { color: #22ac38; }
|
||||
}
|
||||
|
||||
// Money display
|
||||
// Money display - 移到顶部并增强显示
|
||||
.money {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
top: 4px; /* 改为顶部 */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
color: #ffd700;
|
||||
font-size: 12px;
|
||||
z-index: 3;
|
||||
color: #000; /* 改为黑色，更清晰 */
|
||||
font-size: 13px; /* 稍微放大 */
|
||||
font-weight: 700; /* 加粗 */
|
||||
z-index: 100; /* 大幅提升层级，确保在筹码之上 */
|
||||
white-space: nowrap;
|
||||
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 {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #ffd700;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #fff;
|
||||
border: 1px solid #DAA520;
|
||||
box-shadow: 0 0 2px rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@ -200,7 +200,7 @@ $text-red: #f56c6c;
|
||||
flex-direction: column;
|
||||
border: 1px solid $border-light;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
overflow: visible; /* 允许反馈图标完整显示 */
|
||||
background: $bg-dark;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
|
||||
|
||||
|
||||
@ -210,27 +210,37 @@ $text-secondary: #888;
|
||||
}
|
||||
.money {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: -2px;
|
||||
font-size: 0.24rem;
|
||||
font-weight: normal;
|
||||
transform: scale(0.7);
|
||||
color: $text-secondary;
|
||||
vertical-align: bottom;
|
||||
top: 4px; /* 改为顶部 */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 13px; /* 放大字体 */
|
||||
font-weight: 700; /* 加粗 */
|
||||
color: #000; /* 黑色文字 */
|
||||
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 {
|
||||
display: inline-block;
|
||||
content: "总";
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
font-size: 10px;
|
||||
border-radius: 0.615rem;
|
||||
width: 0.615rem;
|
||||
height: 0.615rem;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
font-size: 11px;
|
||||
border-radius: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
text-align: center;
|
||||
line-height: 0.615rem;
|
||||
font-weight: normal;
|
||||
margin-right: 0.06rem;
|
||||
transform: scale(0.7);
|
||||
line-height: 18px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
border: 1px solid #DAA520;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,6 +45,7 @@ export default {
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
overflow: visible; // 允许筹码超出容器边界
|
||||
&:active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
@ -60,11 +61,13 @@ export default {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible; // 允许筹码超出chip-box边界
|
||||
.box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
transition: 0.5s all;
|
||||
z-index: 1; // 给筹码添加层级,但低于下注框文字
|
||||
}
|
||||
.chip {
|
||||
width: 100%;
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
<div
|
||||
class="num"
|
||||
:style="{ marginTop: data.show ? `0` : `1rem` }"
|
||||
v-show="data.money > 0"
|
||||
>
|
||||
|
||||
<!-- 总下注金额 - 独立定位在中间 -->
|
||||
<div class="num" v-show="data.money > 0">
|
||||
{{ data.money }}
|
||||
{{
|
||||
data.times
|
||||
@ -77,53 +77,61 @@ $red-highlight: #ff3b3b;
|
||||
}
|
||||
.touch-view {
|
||||
position: absolute;
|
||||
width: 3.5rem;
|
||||
z-index: 99;
|
||||
width: auto; /* 改为自动宽度，避免重叠 */
|
||||
z-index: 999;
|
||||
left: 50%;
|
||||
bottom: 80%;
|
||||
bottom: 10%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
height: 1rem;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
pointer-events: none; /* 容器不拦截点击 */
|
||||
|
||||
/* 红色边框高亮效果 */
|
||||
.highlight-border {
|
||||
position: absolute;
|
||||
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;
|
||||
/* 子元素恢复点击 */
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.num {
|
||||
background: rgba(197, 160, 89, 0.9);
|
||||
background: rgba(197, 160, 89, 0.95);
|
||||
border-radius: 1rem;
|
||||
color: #000;
|
||||
font-size: 0.4rem;
|
||||
padding: 0.02rem 0.05rem;
|
||||
padding: 0.04rem 0.12rem;
|
||||
border: 1px solid $gold;
|
||||
pointer-events: none;
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 0.05rem;
|
||||
gap: 0.15rem;
|
||||
gap: 0; /* 移除gap，改用margin控制间距 */
|
||||
position: relative;
|
||||
z-index: 1001; /* 确保按钮在最上层 */
|
||||
overflow: visible !important; /* 确保按钮不被裁切 */
|
||||
|
||||
.btn {
|
||||
width: 0.95 * 1.35rem;
|
||||
height: 0.95 * 1.35rem;
|
||||
/* 缩小到32px */
|
||||
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-size: 2.2 * 1.35rem auto;
|
||||
background-size: 70.4px auto; /* 2.2 * 32px */
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s ease;
|
||||
flex-shrink: 0; /* 防止flex压缩 */
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
@ -131,48 +139,72 @@ $red-highlight: #ff3b3b;
|
||||
|
||||
/* 取消按钮 - 红色 X */
|
||||
&.cancel {
|
||||
background-position: -0.07 * 1.35rem -0.04 * 1.35rem;
|
||||
background-position: -2.24px -1.28px; /* -0.07 * 32px, -0.04 * 32px */
|
||||
&:active {
|
||||
background-position: -1.18 * 1.35rem -0.04 * 1.35rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 撤销按钮 - 橙色箭头 */
|
||||
&.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);
|
||||
background-position: -37.76px -1.28px; /* -1.18 * 32px, -0.04 * 32px */
|
||||
}
|
||||
}
|
||||
|
||||
/* 确认按钮 - 绿色勾 */
|
||||
&.confirm {
|
||||
background-position: -0.05 * 1.35rem -1.14 * 1.35rem;
|
||||
background-position: -1.6px -36.48px; /* -0.05 * 32px, -1.14 * 32px */
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user