feat(player): 完善 H5 投注端与 API 演示数据

- 球赛/串关/优胜冠军、赛事详情、历史投注与个人资料编辑
- 固定顶栏、公告与底栏，仅内容区滚动
- 底部导航与站点 favicon 使用 logo，登录页精简
- API 种子、冠军盘与历史注单增强

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/player/src/views/LoginView.vue

@@ -3,16 +3,24 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '../stores/auth';
+import RobotVerify from '../components/RobotVerify.vue';
+import loginBg from '../assets/images/h5bg.png';
 
 const { t } = useI18n();
 const auth = useAuthStore();
 const router = useRouter();
+const captchaRef = ref<InstanceType<typeof RobotVerify> | null>(null);
 const username = ref('player1');
 const password = ref('Player@123');
 const error = ref('');
 const loading = ref(false);
 
 async function submit() {
+  if (!captchaRef.value?.validate()) {
+    error.value = t('auth.captcha_wrong');
+    captchaRef.value?.refresh();
+    return;
+  }
   loading.value = true;
   error.value = '';
   try {
@@ -27,15 +35,15 @@ async function submit() {
 </script>
 
 <template>
-  <div class="login-page">
-    <img src="/logo.png" alt="TheBet365" class="logo" />
-    <form @submit.prevent="submit" class="login-form">
+  <div class="login-page" :style="{ backgroundImage: `url(${loginBg})` }">
+    <form @submit.prevent="submit" class="login-form ps-gold-frame">
       <label>{{ t('auth.username') }}</label>
-      <input v-model="username" required />
+      <input v-model="username" class="ps-gold-input" required />
       <label>{{ t('auth.password') }}</label>
-      <input v-model="password" type="password" required />
+      <input v-model="password" class="ps-gold-input" type="password" required />
+      <RobotVerify ref="captchaRef" />
       <p v-if="error" class="error">{{ error }}</p>
-      <button type="submit" class="btn-primary" :disabled="loading">
+      <button type="submit" class="btn-login btn-gold-outline" :disabled="loading">
         {{ t('auth.login') }}
       </button>
     </form>
@@ -44,11 +52,53 @@ async function submit() {
 
 <style scoped>
 .login-page {
-  min-height: 100vh; display: flex; flex-direction: column;
-  align-items: center; justify-content: center; padding: 24px;
+  height: 100%;
+  min-height: 100dvh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 34vh 20px max(28px, env(safe-area-inset-bottom));
+  background-color: var(--tertiary);
+  background-size: cover;
+  background-position: center top;
+  background-repeat: no-repeat;
+}
+
+.login-form {
+  width: 100%;
+  max-width: 340px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+}
+
+label {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.btn-login {
+  margin-top: 4px;
+  padding: 10px 14px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+}
+
+.btn-login:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.error {
+  color: var(--danger);
+  font-size: 13px;
+  font-weight: 600;
 }
-.logo { height: 80px; width: auto; margin-bottom: 32px; }
-.login-form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 12px; }
-label { font-size: 13px; color: var(--text-muted); }
-.error { color: var(--danger); font-size: 13px; }
 </style>