feat(player): 优化PC端优胜冠军下单弹窗UI与交互体验 - 弹窗宽度增至420px - Hero区域水平布局 - 赔率变化展示优化 - 快捷金额增加1000选项 - 弹窗进入动画 - 按钮微交互 - SVG图标

apps/player/src/components/outright/OutrightBetModal.vue

@@ -258,16 +258,24 @@ function formatOdds(odds: string) {
 </script>
 
 <template>
+  <Transition name="modal-fade">
   <div v-if="open && pick" class="overlay" @click.self="close">
     <div class="modal" role="dialog" aria-modal="true">
-      <button type="button" class="close-x" :aria-label="t('bet.cancel')" @click="close">✕</button>
+      <button type="button" class="close-x" :aria-label="t('bet.cancel')" @click="close">
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1L13 13M13 1L1 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
+      </button>
 
       <template v-if="step === 'form'">
-        <p class="hint">{{ t('bet.outright_enter_stake') }}</p>
+        <div class="modal-header">
+          <p class="hint">{{ t('bet.outright_enter_stake') }}</p>
+        </div>
 
         <div class="hero">
           <img v-if="flagUrl" :src="flagUrl" alt="" class="flag" />
-          <p class="team">{{ pick.teamName }}</p>
+          <div class="hero-info">
+            <p class="team">{{ pick.teamName }}</p>
+            <p class="event-title">{{ pick.eventTitle }}</p>
+          </div>
           <span
             class="odds-badge"
             :class="{
@@ -277,16 +285,16 @@ function formatOdds(odds: string) {
             }"
           >
             <template v-if="oddsDelta && !oddsDelta.suspended">
-              @ {{ oddsDelta.oldOdds.toFixed(2) }} → {{ oddsDelta.newOdds.toFixed(2) }}
+              <span class="odds-old">{{ oddsDelta.oldOdds.toFixed(2) }}</span>
+              <span class="odds-arrow">→</span>
+              <span class="odds-new">{{ oddsDelta.newOdds.toFixed(2) }}</span>
             </template>
             <template v-else>
-              @ {{ formatOdds(currentOdds || pick.odds) }}
+              {{ formatOdds(currentOdds || pick.odds) }}
             </template>
           </span>
         </div>
 
-        <p class="event-title">{{ pick.eventTitle }}</p>
-
         <p v-if="oddsWarningText" class="odds-warning">{{ oddsWarningText }}</p>
 
         <div class="balance-row">
@@ -294,27 +302,33 @@ function formatOdds(odds: string) {
           <span class="balance-value">{{ balanceText }}</span>
         </div>
 
-        <label class="stake-label">{{ t('bet.stake_label') }}</label>
+        <div class="stake-section">
-        <input
+          <label class="stake-label">{{ t('bet.stake_label') }}</label>
-          v-model.number="stake"
+          <div class="stake-input-wrap">
-          type="number"
+            <input
-          class="stake-input"
+              v-model.number="stake"
-          min="0.01"
+              type="number"
-          step="0.01"
+              class="stake-input"
-          inputmode="decimal"
+              min="0.01"
-          :placeholder="t('bet.stake_placeholder')"
+              step="0.01"
-        />
+              inputmode="decimal"
+              :placeholder="t('bet.stake_placeholder')"
+            />
+          </div>
 
-        <div class="quick-stakes">
+          <div class="quick-stakes">
-          <button type="button" class="chip" @click="setStake(50)">50</button>
+            <button type="button" class="chip" @click="setStake(50)">50</button>
-          <button type="button" class="chip" @click="setStake(100)">100</button>
+            <button type="button" class="chip" @click="setStake(100)">100</button>
-          <button type="button" class="chip" @click="setStake(500)">500</button>
+            <button type="button" class="chip" @click="setStake(500)">500</button>
-          <button type="button" class="chip" @click="setMaxStake">{{ t('bet.stake_max') }}</button>
+            <button type="button" class="chip" @click="setStake(1000)">1000</button>
+            <button type="button" class="chip chip-max" @click="setMaxStake">{{ t('bet.stake_max') }}</button>
+          </div>
         </div>
 
-        <p class="est-return">
+        <div class="est-return">
-          {{ t('history.est_return') }}：<span class="est-value">{{ estReturnText }}</span>
+          <span class="est-label">{{ t('history.est_return') }}</span>
-        </p>
+          <span class="est-value">{{ estReturnText }}</span>
+        </div>
 
         <p v-if="error" class="error">{{ error }}</p>
 
@@ -324,73 +338,97 @@ function formatOdds(odds: string) {
           </button>
           <button
             type="button"
-            class="btn-confirm btn-gold-outline"
+            class="btn-confirm"
             :disabled="loading || stake <= 0 || hasSuspendedSelection"
             @click="submit"
           >
+            <span v-if="loading" class="btn-spinner"></span>
             {{ submitButtonLabel }}
           </button>
         </div>
       </template>
 
       <template v-else>
-        <div class="success-icon">✓</div>
+        <div class="success-icon">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12.5L10 17.5L19 7.5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </div>
         <h3 class="success-title">{{ t('bet.outright_success') }}</h3>
 
         <div class="hero hero--compact">
           <img v-if="flagUrl" :src="flagUrl" alt="" class="flag" />
-          <p class="team">{{ pick.teamName }}</p>
+          <div class="hero-info">
-          <span class="odds-badge">@ {{ formatOdds(pick.odds) }}</span>
+            <p class="team">{{ pick.teamName }}</p>
+            <p class="event-title">{{ pick.eventTitle }}</p>
+          </div>
+          <span class="odds-badge odds-badge--success">{{ formatOdds(pick.odds) }}</span>
         </div>
 
-        <p class="event-title">{{ pick.eventTitle }}</p>
-
         <div class="summary">
           <div class="summary-row">
-            <span>{{ t('bet.outright_stake_amount') }}</span>
+            <span class="summary-label">{{ t('bet.outright_stake_amount') }}</span>
-            <span>{{ formatMoney(successStake, locale) }}</span>
+            <span class="summary-value">{{ formatMoney(successStake, locale) }}</span>
           </div>
           <div class="summary-row">
-            <span>{{ t('bet.outright_balance') }}</span>
+            <span class="summary-label">{{ t('bet.outright_balance') }}</span>
-            <span class="balance-value">{{ formatMoney(successBalance, locale) }}</span>
+            <span class="summary-value balance-value">{{ formatMoney(successBalance, locale) }}</span>
           </div>
         </div>
 
-        <button type="button" class="btn-done btn-gold-outline" @click="close">
+        <button type="button" class="btn-done" @click="close">
           {{ t('bet.outright_done') }}
         </button>
       </template>
     </div>
   </div>
+  </Transition>
 
   <BetSuccessOverlay :show="showSuccess" @done="showSuccess = false" />
 </template>
 
 <style scoped>
+/* ── Transition ── */
+.modal-fade-enter-active {
+  transition: opacity 0.25s ease;
+}
+.modal-fade-enter-active .modal {
+  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
+}
+.modal-fade-enter-from {
+  opacity: 0;
+}
+.modal-fade-enter-from .modal {
+  transform: scale(0.92) translateY(12px);
+  opacity: 0;
+}
+
+/* ── Overlay ── */
 .overlay {
   position: fixed;
   inset: 0;
   z-index: 200;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.55);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
 }
 
+/* ── Modal ── */
 .modal {
   position: relative;
   width: 100%;
   max-width: 300px;
   background: var(--bg-card);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 10px;
-  padding: 18px 16px 16px;
+  padding: 20px 16px 16px;
   text-align: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
 }
 
+/* ── Close button ── */
 .close-x {
   position: absolute;
   top: 10px;
@@ -400,29 +438,52 @@ function formatOdds(odds: string) {
   border-radius: 50%;
   background: var(--bg-elevated);
   color: var(--text-muted);
-  font-size: 14px;
+  display: flex;
-  line-height: 1;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, background 0.15s;
+}
+
+.close-x:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+
+/* ── Header ── */
+.modal-header {
+  margin-bottom: 14px;
 }
 
 .hint {
   font-size: 12px;
   font-weight: 600;
   color: var(--text-muted);
-  margin-bottom: 12px;
   letter-spacing: 0.04em;
 }
 
+/* ── Hero ── */
 .hero {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
+  padding: 10px 8px;
+  border-radius: 8px;
+  background: rgba(244, 162, 97, 0.04);
+  border: 1px solid rgba(244, 162, 97, 0.1);
 }
 
 .hero--compact {
   margin-top: 4px;
-  margin-bottom: 8px;
+  margin-bottom: 10px;
+}
+
+.hero-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
 }
 
 .flag {
@@ -430,7 +491,7 @@ function formatOdds(odds: string) {
   height: 32px;
   object-fit: cover;
   border-radius: 4px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
 }
 
 .team {
@@ -438,17 +499,33 @@ function formatOdds(odds: string) {
   font-weight: 900;
   color: var(--text);
   letter-spacing: 0.02em;
+  line-height: 1.2;
 }
 
+/* ── Odds badge ── */
 .odds-badge {
-  display: inline-block;
+  display: inline-flex;
-  padding: 3px 10px;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
   background: var(--warning);
   border: 1px solid rgba(255, 179, 0, 0.3);
   color: #FFFFFF;
   font-size: 13px;
   font-weight: 800;
-  border-radius: 4px;
+  border-radius: 5px;
+  white-space: nowrap;
+}
+
+.odds-old {
+  text-decoration: line-through;
+  opacity: 0.65;
+  font-size: 11px;
+}
+
+.odds-arrow {
+  opacity: 0.7;
+  font-size: 11px;
 }
 
 .odds-badge--up {
@@ -466,6 +543,12 @@ function formatOdds(odds: string) {
   border-color: rgba(255, 184, 77, 0.35);
 }
 
+.odds-badge--success {
+  background: rgba(22, 101, 52, 0.85);
+  border-color: rgba(110, 231, 160, 0.3);
+}
+
+/* ── Odds warning ── */
 .odds-warning {
   margin: 0 0 10px;
   padding: 8px 10px;
@@ -477,14 +560,14 @@ function formatOdds(odds: string) {
   line-height: 1.45;
 }
 
+/* ── Event title ── */
 .event-title {
   font-size: 11px;
   color: var(--text-muted);
-  margin-bottom: 12px;
   line-height: 1.4;
-  padding: 0 4px;
 }
 
+/* ── Balance ── */
 .balance-row {
   display: flex;
   justify-content: space-between;
@@ -508,6 +591,11 @@ function formatOdds(odds: string) {
   color: var(--primary);
 }
 
+/* ── Stake section ── */
+.stake-section {
+  margin-bottom: 12px;
+}
+
 .stake-label {
   display: block;
   text-align: left;
@@ -517,10 +605,14 @@ function formatOdds(odds: string) {
   margin-bottom: 6px;
 }
 
+.stake-input-wrap {
+  position: relative;
+  margin-bottom: 8px;
+}
+
 .stake-input {
   width: 100%;
   padding: 11px 12px;
-  margin-bottom: 8px;
   border-radius: 8px;
   border: 1px solid var(--border);
   background: var(--bg-input);
@@ -529,11 +621,12 @@ function formatOdds(odds: string) {
   font-weight: 800;
   text-align: center;
   outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .stake-input:focus {
   border-color: var(--primary);
-  box-shadow: 0 0 0 1px rgba(244, 162, 97, 0.15);
+  box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.15);
 }
 
 .stake-input::placeholder {
@@ -542,22 +635,22 @@ function formatOdds(odds: string) {
   font-size: 14px;
 }
 
+/* ── Quick stakes ── */
 .quick-stakes {
   display: flex;
-  gap: 6px;
+  gap: 5px;
-  margin-bottom: 10px;
 }
 
 .chip {
   flex: 1;
-  padding: 6px 4px;
+  padding: 6px 2px;
-  border-radius: 8px;
+  border-radius: 6px;
   border: 1px solid var(--border);
   background: var(--bg-card-elevated);
   color: var(--text-muted);
   font-size: 11px;
   font-weight: 700;
-  transition: border-color 0.15s ease, background 0.15s ease;
+  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
 }
 
 .chip:active {
@@ -566,17 +659,36 @@ function formatOdds(odds: string) {
   background: rgba(244, 162, 97, 0.06);
 }
 
+.chip-max {
+  color: var(--primary-light);
+  border-color: rgba(244, 162, 97, 0.2);
+}
+
+/* ── Est return ── */
 .est-return {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  margin-bottom: 12px;
+  border-radius: 6px;
+  background: rgba(244, 162, 97, 0.06);
+  border: 1px solid rgba(244, 162, 97, 0.12);
+}
+
+.est-label {
   font-size: 12px;
   color: var(--text-muted);
-  margin-bottom: 12px;
+  font-weight: 600;
 }
 
 .est-value {
   color: var(--primary);
   font-weight: 800;
+  font-size: 15px;
 }
 
+/* ── Error ── */
 .error {
   color: var(--danger);
   font-size: 12px;
@@ -584,9 +696,10 @@ function formatOdds(odds: string) {
   margin-bottom: 10px;
 }
 
+/* ── Actions ── */
 .actions {
   display: grid;
-  grid-template-columns: 1fr 1.2fr;
+  grid-template-columns: 1fr 1.3fr;
   gap: 8px;
 }
 
@@ -598,9 +711,19 @@ function formatOdds(odds: string) {
   color: var(--text-muted);
   font-size: 14px;
   font-weight: 700;
+  transition: background 0.15s, color 0.15s;
+}
+
+.btn-cancel:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--text);
 }
 
 .btn-confirm {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
   padding: 10px;
   border-radius: 8px;
   font-size: 14px;
@@ -608,35 +731,59 @@ function formatOdds(odds: string) {
   background: var(--gradient-primary);
   color: #FFFFFF;
   border: none;
+  transition: opacity 0.2s, transform 0.1s;
+}
+
+.btn-confirm:hover:not(:disabled) {
+  opacity: 0.92;
+}
+
+.btn-confirm:active:not(:disabled) {
+  transform: scale(0.97);
 }
 
 .btn-confirm:disabled {
   opacity: 0.45;
+  cursor: default;
 }
 
+.btn-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: btn-spin 0.6s linear infinite;
+}
+
+@keyframes btn-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Success ── */
 .success-icon {
-  width: 44px;
+  width: 48px;
-  height: 44px;
+  height: 48px;
-  margin: 0 auto 8px;
+  margin: 0 auto 10px;
   border-radius: 50%;
   border: 2px solid var(--success);
   background: rgba(16, 185, 129, 0.1);
   color: var(--success);
-  font-size: 24px;
+  display: flex;
-  font-weight: 900;
+  align-items: center;
-  line-height: 40px;
+  justify-content: center;
 }
 
 .success-title {
   font-size: 16px;
   font-weight: 800;
   color: var(--text);
-  margin-bottom: 10px;
+  margin-bottom: 12px;
 }
 
 .summary {
   margin: 12px 0 14px;
-  padding: 10px;
+  padding: 10px 12px;
   background: var(--bg-elevated);
   border: 1px solid var(--border);
   border-radius: 8px;
@@ -646,10 +793,18 @@ function formatOdds(odds: string) {
   display: flex;
   justify-content: space-between;
   font-size: 13px;
-  color: var(--text-muted);
   padding: 4px 0;
 }
 
+.summary-label {
+  color: var(--text-muted);
+}
+
+.summary-value {
+  color: var(--text);
+  font-weight: 700;
+}
+
 .summary-row + .summary-row {
   margin-top: 4px;
   padding-top: 8px;
@@ -665,5 +820,208 @@ function formatOdds(odds: string) {
   background: var(--gradient-primary);
   color: #FFFFFF;
   border: none;
+  transition: opacity 0.2s, transform 0.1s;
+}
+
+.btn-done:hover {
+  opacity: 0.92;
+}
+
+.btn-done:active {
+  transform: scale(0.97);
+}
+
+/* ════════════════════════════════════════════
+   Desktop / PC styles (≥ 768px)
+   ════════════════════════════════════════════ */
+@media (min-width: 768px) {
+  .overlay {
+    padding: 32px;
+  }
+
+  .modal {
+    max-width: 420px;
+    border-radius: 14px;
+    padding: 24px 24px 20px;
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(244, 162, 97, 0.06);
+  }
+
+  .close-x {
+    top: 14px;
+    right: 14px;
+    width: 30px;
+    height: 30px;
+  }
+
+  .modal-header {
+    margin-bottom: 16px;
+  }
+
+  .hint {
+    font-size: 13px;
+  }
+
+  /* Hero — horizontal layout on desktop */
+  .hero {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 12px;
+    padding: 12px 14px;
+    margin-bottom: 14px;
+    border-radius: 10px;
+  }
+
+  .flag {
+    width: 52px;
+    height: 36px;
+    flex-shrink: 0;
+    border-radius: 5px;
+  }
+
+  .hero-info {
+    flex: 1;
+    align-items: flex-start;
+    min-width: 0;
+    gap: 3px;
+  }
+
+  .team {
+    font-size: 18px;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
+  .event-title {
+    font-size: 11px;
+    text-align: left;
+  }
+
+  .odds-badge {
+    flex-shrink: 0;
+    font-size: 14px;
+    padding: 5px 14px;
+    border-radius: 6px;
+  }
+
+  .odds-warning {
+    margin-bottom: 12px;
+    padding: 9px 12px;
+    font-size: 12px;
+    border-radius: 8px;
+  }
+
+  .balance-row {
+    padding: 10px 14px;
+    margin-bottom: 14px;
+    border-radius: 10px;
+  }
+
+  .balance-label {
+    font-size: 13px;
+  }
+
+  .balance-value {
+    font-size: 15px;
+  }
+
+  .stake-section {
+    margin-bottom: 14px;
+  }
+
+  .stake-label {
+    font-size: 12px;
+    margin-bottom: 8px;
+  }
+
+  .stake-input-wrap {
+    margin-bottom: 10px;
+  }
+
+  .stake-input {
+    padding: 12px 14px;
+    font-size: 20px;
+    border-radius: 10px;
+  }
+
+  .quick-stakes {
+    gap: 6px;
+  }
+
+  .chip {
+    padding: 8px 4px;
+    font-size: 12px;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+
+  .chip:hover {
+    border-color: rgba(244, 162, 97, 0.4);
+    color: var(--primary-light);
+    background: rgba(244, 162, 97, 0.06);
+  }
+
+  .est-return {
+    padding: 10px 14px;
+    margin-bottom: 14px;
+    border-radius: 8px;
+  }
+
+  .est-label {
+    font-size: 13px;
+  }
+
+  .est-value {
+    font-size: 17px;
+  }
+
+  .actions {
+    gap: 10px;
+  }
+
+  .btn-cancel,
+  .btn-confirm {
+    padding: 12px;
+    font-size: 15px;
+    border-radius: 10px;
+    cursor: pointer;
+  }
+
+  /* Success state desktop */
+  .success-icon {
+    width: 56px;
+    height: 56px;
+    margin-bottom: 12px;
+  }
+
+  .success-icon svg {
+    width: 28px;
+    height: 28px;
+  }
+
+  .success-title {
+    font-size: 18px;
+    margin-bottom: 14px;
+  }
+
+  .summary {
+    margin: 14px 0 16px;
+    padding: 12px 14px;
+    border-radius: 10px;
+  }
+
+  .summary-row {
+    font-size: 14px;
+  }
+
+  .btn-done {
+    padding: 13px;
+    font-size: 15px;
+    border-radius: 10px;
+    cursor: pointer;
+  }
 }
 </style>