feat(player): theme-2 PC auth layout and correct-score quick bet popover

apps/player/src/views/desktop/DesktopLoginView.vue

@@ -1,156 +1,10 @@
 <script setup lang="ts">
-/**
- * Desktop Login View
- * Reuses the existing LoginView form in a centered two-column auth layout.
- */
-import { RouterLink } from 'vue-router';
-import { useI18n } from 'vue-i18n';
+import DesktopAuthLayout from '../../components/desktop/DesktopAuthLayout.vue';
 import LoginView from '../LoginView.vue';
-
-const { t } = useI18n();
 </script>
 
 <template>
-  <div class="desktop-auth-shell">
-    <RouterLink to="/" class="auth-back-link">{{ t('common.back') }}</RouterLink>
-    <div class="auth-brand">
-      <div class="brand-inner">
-        <img src="/logo.png" alt="TheBet365" class="brand-logo" />
-        <h1 class="brand-name">THEBET365</h1>
-        <p class="brand-tagline">专业体育赛事投注平台</p>
-        <div class="brand-features">
-          <div class="feature-item">
-            <span class="feature-icon">⚡</span>
-            <span>实时赔率更新</span>
-          </div>
-          <div class="feature-item">
-            <span class="feature-icon">🔒</span>
-            <span>安全稳定平台</span>
-          </div>
-          <div class="feature-item">
-            <span class="feature-icon">💰</span>
-            <span>快速充值提款</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="auth-card-wrap">
-      <div class="auth-card">
-        <LoginView />
-      </div>
-    </div>
-  </div>
+  <DesktopAuthLayout>
+    <LoginView desktop />
+  </DesktopAuthLayout>
 </template>
-
-<style scoped>
-.desktop-auth-shell {
-  display: flex;
-  min-height: 100vh;
-  background: var(--desktop-bg);
-  position: relative;
-}
-
-.auth-back-link {
-  position: absolute;
-  top: 20px;
-  left: 24px;
-  z-index: 2;
-  color: var(--text-muted);
-  font-size: 14px;
-  font-weight: 700;
-  text-decoration: none;
-  transition: color 0.2s;
-}
-
-.auth-back-link:hover {
-  color: var(--text);
-}
-
-.auth-brand {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card) 50%, var(--bg-card) 100%);
-  border-right: 1px solid var(--desktop-border);
-  position: relative;
-  overflow: hidden;
-}
-
-.auth-brand::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(0, 102, 204,0.06) 0%, transparent 70%);
-  pointer-events: none;
-}
-
-.brand-inner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-  padding: 40px;
-}
-
-.brand-logo {
-  width: 64px;
-  height: 64px;
-  object-fit: contain;
-  filter: drop-shadow(0 4px 16px rgba(0, 102, 204,0.3));
-}
-
-.brand-name {
-  font-size: 28px;
-  font-weight: 900;
-  letter-spacing: 0.12em;
-  color: var(--primary-light);
-  margin: 0;
-  text-shadow: 0 2px 12px rgba(0, 102, 204,0.25);
-}
-
-.brand-tagline {
-  font-size: 14px;
-  color: var(--text-muted);
-  margin: 0;
-  font-weight: 600;
-}
-
-.brand-features {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 24px;
-}
-
-.feature-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 13px;
-  color: var(--text-muted);
-  font-weight: 600;
-}
-
-.feature-icon {
-  font-size: 16px;
-}
-
-.auth-card-wrap {
-  width: 480px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-  background: var(--desktop-bg);
-}
-
-.auth-card {
-  width: 100%;
-  max-width: 380px;
-}
-</style>