迁移彩票选号悬停样式

This commit is contained in:
2026-04-25 11:00:38 +08:00
parent a0aaceecc3
commit 992615b7be
@@ -12,6 +12,23 @@
@version 1.0.0 @version 1.0.0
--}} --}}
<style>
/* 彩票选号操作按钮 hover 态,替代内联 onmouseover/onmouseout 样式。 */
.lottery-quick-pick-one:hover {
background: #dbeafe !important;
border-color: #93c5fd !important;
}
.lottery-quick-pick-many:hover {
box-shadow: 0 5px 14px rgba(217, 119, 6, .35) !important;
transform: translateY(-1px);
}
.lottery-clear-selection:hover {
background: #f3f4f6 !important;
}
</style>
{{-- ─── 彩票面板遮罩 ─── --}} {{-- ─── 彩票面板遮罩 ─── --}}
<div id="lottery-panel" x-data="lotteryPanel()" x-show="show" x-cloak> <div id="lottery-panel" x-data="lotteryPanel()" x-show="show" x-cloak>
<div x-transition:enter="transition ease-out duration-250" x-transition:enter-start="opacity-0 scale-95" <div x-transition:enter="transition ease-out duration-250" x-transition:enter-start="opacity-0 scale-95"
@@ -196,29 +213,23 @@
{{-- 操作按钮行(机选1注 + 机选3注 + 清空选号) --}} {{-- 操作按钮行(机选1注 + 机选3注 + 清空选号) --}}
<div style="display:flex; gap:8px; margin-bottom:12px;"> <div style="display:flex; gap:8px; margin-bottom:12px;">
<button @click="doQuickPick(1)" <button @click="doQuickPick(1)" class="lottery-quick-pick-one"
style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold; style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
background:#f0f6ff; color:#336699; border:1.5px solid #c0d8ef; background:#f0f6ff; color:#336699; border:1.5px solid #c0d8ef;
cursor:pointer; transition:all .15s; font-family:inherit;" 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>
<button @click="doQuickPick(3)" <button @click="doQuickPick(3)" class="lottery-quick-pick-many"
style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold; style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
background:linear-gradient(135deg,#d97706,#f59e0b); color:#fff; border:none; background:linear-gradient(135deg,#d97706,#f59e0b); color:#fff; border:none;
box-shadow:0 3px 10px rgba(217,119,6,.25); cursor:pointer; box-shadow:0 3px 10px rgba(217,119,6,.25); cursor:pointer;
transition:all .15s; font-family:inherit;" 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 🎰 机选 3
</button> </button>
<button type="button" @click.prevent="selectedReds=[]; selectedBlue=null; cart=[];" <button type="button" @click.prevent="selectedReds=[]; selectedBlue=null; cart=[];" class="lottery-clear-selection"
style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold; style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
background:#f9fafb; color:#6b7280; border:1.5px solid #e5e7eb; background:#f9fafb; color:#6b7280; border:1.5px solid #e5e7eb;
cursor:pointer; transition:all .15s; font-family:inherit;" cursor:pointer; transition:all .15s; font-family:inherit;">
onmouseover="this.style.background='#f3f4f6'"
onmouseout="this.style.background='#f9fafb'">
🗑 清空选号 🗑 清空选号
</button> </button>
</div> </div>