优化：彩票面板按钮样式升级（对齐百家乐风格）
- 机选/清除/加入 三按钮：border-radius:10px，更大内边距，hover 效果 - 加入购物车按钮：选号完成时金色渐变 + shadow，未选满时灰化禁用 - 确认购买按钮：border-radius:12px，红色渐变，shadow 层次感，购买中灰化 - 底部操作栏按钮：圆角胶囊（border-radius:20px），机选金色渐变 + hover 上移动效
This commit is contained in:
@@ -194,22 +194,31 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{-- 操作按钮行（机选 + 清除 + 加入购物车 + 立即购买） --}}
|
||||
<div style="display:flex; gap:6px; margin-bottom:10px;">
|
||||
{{-- 操作按鈕行（机选 + 清除 + 加入购物车） --}}
|
||||
<div style="display:flex; gap:8px; margin-bottom:12px;">
|
||||
<button @click="doQuickPick(1)"
|
||||
style="flex:1; padding:8px; background:#f3f4f6; border:1px solid #d1d5db;
|
||||
border-radius:6px; font-size:12px; color:#374151; cursor:pointer;">
|
||||
🎲 机选
|
||||
style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
|
||||
background:#f0f6ff; color:#336699; border:1.5px solid #c0d8ef;
|
||||
cursor:pointer; transition:all .15s; font-family:inherit;"
|
||||
onmouseover="this.style.background='#dbeafe'; this.style.borderColor='#93c5fd'"
|
||||
onmouseout="this.style.background='#f0f6ff'; this.style.borderColor='#c0d8ef'">
|
||||
� 机选
|
||||
</button>
|
||||
<button @click="selectedReds=[]; selectedBlue=null;"
|
||||
style="flex:1; padding:8px; background:#f3f4f6; border:1px solid #d1d5db;
|
||||
border-radius:6px; font-size:12px; color:#374151; cursor:pointer;">
|
||||
style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
|
||||
background:#f9fafb; color:#6b7280; border:1.5px solid #e5e7eb;
|
||||
cursor:pointer; transition:all .15s; font-family:inherit;"
|
||||
onmouseover="this.style.background='#f3f4f6'"
|
||||
onmouseout="this.style.background='#f9fafb'">
|
||||
🗑 清除
|
||||
</button>
|
||||
<button @click="addToCart()"
|
||||
style="flex:1; padding:8px; background:#fef3c7; border:1px solid #fde68a;
|
||||
border-radius:6px; font-size:12px; color:#92400e; cursor:pointer; font-weight:bold;">
|
||||
➕ 加入
|
||||
<button @click="addToCart()" :disabled="selectedReds.length !== 3 || !selectedBlue"
|
||||
style="flex:1.3; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
|
||||
cursor:pointer; transition:all .15s; font-family:inherit; border:none;"
|
||||
:style="selectedReds.length === 3 && selectedBlue ?
|
||||
'background:linear-gradient(135deg,#d97706,#f59e0b); color:#fff; box-shadow:0 3px 10px rgba(217,119,6,.3);' :
|
||||
'background:#f3f4f6; color:#9ca3af; cursor:not-allowed;'">
|
||||
＋ 加入购物车
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -244,12 +253,15 @@
|
||||
</template>
|
||||
</div>
|
||||
<button @click="submitCart()" :disabled="buying"
|
||||
style="width:100%; margin-top:8px; padding:9px; background:linear-gradient(135deg,#dc2626,#ef4444);
|
||||
color:#fff; border:none; border-radius:6px; font-size:13px; font-weight:bold;
|
||||
cursor:pointer; transition:opacity .15s;"
|
||||
:style="buying ? 'opacity:.6;cursor:not-allowed;' : ''">
|
||||
style="width:100%; margin-top:10px; border:none; border-radius:12px;
|
||||
padding:13px 0; font-size:14px; font-weight:bold;
|
||||
cursor:pointer; transition:all .2s; font-family:inherit;"
|
||||
:style="buying
|
||||
?
|
||||
'background:#e0e8f0; color:#99a8b8; cursor:not-allowed; box-shadow:none;' :
|
||||
'background:linear-gradient(135deg,#dc2626,#ef4444); color:#fff; box-shadow:0 4px 14px rgba(220,38,38,.3);'">
|
||||
<span
|
||||
x-text="buying ? '购买中…' : '🎟️ 确认购买 ' + cart.length + ' 注（' + cart.length*100 + ' 金币）'"></span>
|
||||
x-text="buying ? '购买中…' : '🎟️ 确认购买 ' + cart.length + ' 注（共 ' + (cart.length*100).toLocaleString() + ' 金币）'"></span>
|
||||
</button>
|
||||
{{-- 内联购买结果提示 --}}
|
||||
<div id="lottery-buy-msg"
|
||||
@@ -345,21 +357,29 @@
|
||||
|
||||
{{-- ─── 底部操作栏 ─── --}}
|
||||
<div
|
||||
style="padding:8px 14px; background:#fff; border-top:1px solid #fee2e2;
|
||||
style="padding:10px 14px; background:#fff; border-top:1px solid #fee2e2;
|
||||
display:flex; justify-content:space-between; align-items:center; flex-shrink:0;">
|
||||
<button @click="doQuickPick(3)" x-show="isOpen"
|
||||
style="padding:6px 14px; background:#fef3c7; border:1px solid #fde68a;
|
||||
border-radius:6px; font-size:12px; color:#92400e; cursor:pointer;">
|
||||
🎲 一次机选3注
|
||||
style="padding:9px 18px; border-radius:20px; font-size:12px; font-weight:bold;
|
||||
background:linear-gradient(135deg,#d97706,#f59e0b); color:#fff; border:none;
|
||||
box-shadow:0 3px 10px rgba(217,119,6,.25); cursor:pointer;
|
||||
transition:all .15s; font-family:inherit;"
|
||||
onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 5px 14px rgba(217,119,6,.35)'"
|
||||
onmouseout="this.style.transform=''; this.style.boxShadow='0 3px 10px rgba(217,119,6,.25)'">
|
||||
� 机选 3 注
|
||||
</button>
|
||||
<button @click="loadData()"
|
||||
style="padding:6px 14px; background:#f3f4f6; border:1px solid #e5e7eb;
|
||||
border-radius:6px; font-size:12px; color:#6b7280; cursor:pointer;">
|
||||
style="padding:9px 18px; border-radius:20px; font-size:12px; font-weight:bold;
|
||||
background:#f0f6ff; color:#336699; border:1.5px solid #c0d8ef;
|
||||
cursor:pointer; transition:all .15s; font-family:inherit;"
|
||||
onmouseover="this.style.background='#dbeafe'" onmouseout="this.style.background='#f0f6ff'">
|
||||
🔄 刷新
|
||||
</button>
|
||||
<button @click="closeLotteryPanel()"
|
||||
style="padding:6px 14px; background:#f0f6ff; border:1px solid #b0d0ee;
|
||||
border-radius:6px; font-size:12px; color:#336699; cursor:pointer;">
|
||||
style="padding:9px 18px; border-radius:20px; font-size:12px; font-weight:bold;
|
||||
background:#f9fafb; color:#6b7280; border:1.5px solid #e5e7eb;
|
||||
cursor:pointer; transition:all .15s; font-family:inherit;"
|
||||
onmouseover="this.style.background='#f3f4f6'" onmouseout="this.style.background='#f9fafb'">
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user