+
+
+
{{ 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;
+ }
+ }
}
}