版本信息页面

node_modules/.package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "untitled2",
-  "version": "0.0.0",
+  "version": "V.1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -54,6 +54,7 @@
       "resolved": "https://registry.npmmirror.com/@babel/core/-/core-7.27.1.tgz",
       "integrity": "sha512-IaaGWsQqfsQWVLqMn9OB92MNN7zukfVA4s7KKAI0KfrrDsZ0yhi5uV4baBuLuN7n3vsZpwP8asPPcVwApxvjBQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -839,6 +840,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001716",
         "electron-to-chromium": "^1.5.149",
@@ -1286,6 +1288,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -2046,6 +2049,18 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/marked": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.0.tgz",
+      "integrity": "sha512-KkDYEWEEiYJw/KC+DVm1zzlpMQSMIu6YRltkcCvwheCp8HWPXCk9JwOmHJKBlGfzcpzcIt6x3sMnTsRm/51oDg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -2308,6 +2323,7 @@
       "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.40.1.tgz",
       "integrity": "sha512-C5VvvgCCyfyotVITIAv+4efVytl5F7wt+/I2i9q9GZcEXW9BP52YYOXC58igUi+LFZVHukErIIqQSWwv/M3WRw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.7"
       },
@@ -2576,6 +2592,7 @@
       "resolved": "https://registry.npmmirror.com/vite/-/vite-6.3.4.tgz",
       "integrity": "sha512-BiReIiMS2fyFqbqNT/Qqt4CVITDU9M9vE+DKcVAsB+ZV0wvTKd+3hMbkpxz1b+NmEDMegpVbisKiAZOnvO92Sw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -2733,6 +2750,7 @@
       "version": "3.5.13",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.5.13.tgz",
       "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.13",
         "@vue/compiler-sfc": "3.5.13",

node_modules/.vite/deps/_metadata.json

@@ -1,58 +1,64 @@
 {
-  "hash": "caa31cd8",
+  "hash": "f6d37eef",
-  "configHash": "8bd3ff55",
+  "configHash": "4eee8ee7",
-  "lockfileHash": "296e7a14",
+  "lockfileHash": "17b35e94",
-  "browserHash": "748422e9",
+  "browserHash": "38da36af",
   "optimized": {
     "axios": {
       "src": "../../axios/index.js",
       "file": "axios.js",
-      "fileHash": "17dc0739",
+      "fileHash": "a5a07628",
-      "needsInterop": false
-    },
-    "jszip": {
-      "src": "../../jszip/dist/jszip.min.js",
-      "file": "jszip.js",
-      "fileHash": "73a56b11",
-      "needsInterop": true
-    },
-    "mitt": {
-      "src": "../../mitt/dist/mitt.mjs",
-      "file": "mitt.js",
-      "fileHash": "72a77428",
-      "needsInterop": false
-    },
-    "vue": {
-      "src": "../../vue/dist/vue.runtime.esm-bundler.js",
-      "file": "vue.js",
-      "fileHash": "dd9d6977",
-      "needsInterop": false
-    },
-    "vue-router": {
-      "src": "../../vue-router/dist/vue-router.mjs",
-      "file": "vue-router.js",
-      "fileHash": "1b493d5a",
-      "needsInterop": false
-    },
-    "xlsx": {
-      "src": "../../xlsx/xlsx.mjs",
-      "file": "xlsx.js",
-      "fileHash": "e65d0089",
       "needsInterop": false
     },
     "d3": {
       "src": "../../d3/src/index.js",
       "file": "d3.js",
-      "fileHash": "89f27bc8",
+      "fileHash": "828cdd5e",
+      "needsInterop": false
+    },
+    "jszip": {
+      "src": "../../jszip/dist/jszip.min.js",
+      "file": "jszip.js",
+      "fileHash": "c0e06a93",
+      "needsInterop": true
+    },
+    "mitt": {
+      "src": "../../mitt/dist/mitt.mjs",
+      "file": "mitt.js",
+      "fileHash": "8e22dbfe",
+      "needsInterop": false
+    },
+    "vue": {
+      "src": "../../vue/dist/vue.runtime.esm-bundler.js",
+      "file": "vue.js",
+      "fileHash": "7a7fc2f0",
+      "needsInterop": false
+    },
+    "vue-router": {
+      "src": "../../vue-router/dist/vue-router.mjs",
+      "file": "vue-router.js",
+      "fileHash": "58c64081",
+      "needsInterop": false
+    },
+    "xlsx": {
+      "src": "../../xlsx/xlsx.mjs",
+      "file": "xlsx.js",
+      "fileHash": "d95fb4c8",
+      "needsInterop": false
+    },
+    "marked": {
+      "src": "../../marked/lib/marked.esm.js",
+      "file": "marked.js",
+      "fileHash": "a5f98500",
       "needsInterop": false
     }
   },
   "chunks": {
-    "chunk-U3LI7FBV": {
+    "chunk-YBGSFZ7G": {
-      "file": "chunk-U3LI7FBV.js"
+      "file": "chunk-YBGSFZ7G.js"
     },
-    "chunk-5FUTL2UF": {
+    "chunk-FM7WUVZV": {
-      "file": "chunk-5FUTL2UF.js"
+      "file": "chunk-FM7WUVZV.js"
     }
   }
 }

node_modules/.vite/deps/axios.js

@@ -1,6 +1,6 @@
 import {
   __export
-} from "./chunk-5FUTL2UF.js";
+} from "./chunk-FM7WUVZV.js";
 
 // node_modules/axios/lib/helpers/bind.js
 function bind(fn, thisArg) {

node_modules/.vite/deps/chunk-5FUTL2UF.js

@@ -1,21 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-var __commonJS = (cb, mod) => function __require2() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-export {
-  __require,
-  __commonJS,
-  __export
-};

node_modules/.vite/deps/chunk-5FUTL2UF.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

node_modules/.vite/deps/jszip.js

@@ -1,7 +1,7 @@
 import {
   __commonJS,
   __require
-} from "./chunk-5FUTL2UF.js";
+} from "./chunk-FM7WUVZV.js";
 
 // node_modules/jszip/dist/jszip.min.js
 var require_jszip_min = __commonJS({

node_modules/.vite/deps/mitt.js

@@ -1,4 +1,4 @@
-import "./chunk-5FUTL2UF.js";
+import "./chunk-FM7WUVZV.js";
 
 // node_modules/mitt/dist/mitt.mjs
 function mitt_default(n) {

node_modules/.vite/deps/vue-router.js

@@ -16,8 +16,8 @@ import {
   unref,
   watch,
   watchEffect
-} from "./chunk-U3LI7FBV.js";
+} from "./chunk-YBGSFZ7G.js";
-import "./chunk-5FUTL2UF.js";
+import "./chunk-FM7WUVZV.js";
 
 // node_modules/@vue/devtools-api/lib/esm/env.js
 function getDevtoolsGlobalHook() {

node_modules/.vite/deps/vue.js

@@ -168,8 +168,8 @@ import {
   withMemo,
   withModifiers,
   withScopeId
-} from "./chunk-U3LI7FBV.js";
+} from "./chunk-YBGSFZ7G.js";
-import "./chunk-5FUTL2UF.js";
+import "./chunk-FM7WUVZV.js";
 export {
   BaseTransition,
   BaseTransitionPropsValidators,

node_modules/.vite/deps/xlsx.js

@@ -1,4 +1,4 @@
-import "./chunk-5FUTL2UF.js";
+import "./chunk-FM7WUVZV.js";
 
 // node_modules/xlsx/xlsx.mjs
 var XLSX = {};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "untitled2",
-  "version": "V.1.0.0",
+  "version": "V.1.0.1",
   "private": true,
   "type": "module",
   "scripts": {

src/assets/version.md

@@ -6,6 +6,11 @@
 
 ------
 ### 前端
+
+## v.1.0.1
+1、谢谢你gemini3 pro，改了下赛事样式
+
+
 ## v.1.0.0
 
 1、添加版本信息页面

src/views/competition/Competition.vue

@@ -34,6 +34,7 @@
         </div>
         <select v-model="filterStatus" @change="handleFilter" class="filter-select">
           <option value="all">全部状态</option>
+          <option value="prepare">筹备中</option>
           <option value="ongoing">进行中</option>
           <option value="finished">已结束</option>
         </select>
@@ -49,57 +50,60 @@
       </button>
     </div>
 
-    <div class="table-container" :class="{ 'loading': isLoading }">
+    <!-- 加载状态 -->
-      <table class="competition-table">
+    <div v-if="isLoading" class="loading-container">
-        <thead>
+      <div class="loading-spinner"></div>
-          <tr>
+      <p>正在加载赛程数据...</p>
-            <th>序号</th>
+    </div>
-            <th>赛程名称</th>
-            <th>开始时间</th>
-            <th>结束时间</th>
-            <th>状态</th>
-            <th>组织者</th>
-            <th>QQ号</th>
-            <th>赛制类型</th>
-            <th>操作</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(competition, index) in filteredCompetitions" 
-              :key="index" 
-              class="competition-row"
-              @click="handleView(competition)">
-            <td>{{ index + 1 }}</td>
-            <td class="competition-name">{{ competition.name }}</td>
-            <td>{{ formatDate(competition.start_time) }}</td>
-            <td>{{ formatDate(competition.end_time) }}</td>
-            <td>
-              <span :class="['status-tag', competition.status]">
-                {{ competition.status === 'prepare' ? '筹备中' : 
-                   competition.status === 'starting' ? '进行中' : '已结束' }}
-              </span>
-            </td>
-            <td>{{ competition.organizer }}</td>
-            <td>{{ competition.qq_code }}</td>
-            <td>{{ competition.format === 'single' ? '单败淘汰' : 
-                   competition.format === 'double' ? '双败淘汰' : '积分赛' }}</td>
-            <td class="action-cell">
-              <button class="action-btn view" @click.stop="handleSignUp(competition)" :disabled="competition.status === 'finish'">
-                报名
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
 
-      <!-- 加载状态 -->
+    <!-- 赛程卡片网格 -->
-      <div v-if="isLoading" class="loading-overlay">
+    <div v-else class="competition-grid">
-        <i class="fas fa-spinner fa-spin"></i>
+      <div 
-        <span>加载中...</span>
+        v-for="(competition, index) in filteredCompetitions" 
+        :key="index" 
+        class="competition-card"
+        @click="handleView(competition)"
+      >
+        <div class="card-header">
+          <div class="status-badge" :class="competition.status">
+            {{ getStatusText(competition.status) }}
+          </div>
+          <div class="format-badge">{{ competition.format === 'single' ? '单败' : competition.format === 'double' ? '双败' : '积分' }}</div>
+        </div>
+        
+        <div class="card-body">
+          <h3 class="competition-title">{{ competition.name }}</h3>
+          
+          <div class="info-row">
+            <i class="fas fa-user-tie"></i>
+            <span>主办方：{{ competition.organizer }}</span>
+          </div>
+          
+          <div class="info-row">
+            <i class="fab fa-qq"></i>
+            <span>QQ：{{ competition.qq_code }}</span>
+          </div>
+          
+          <div class="info-row time-row">
+            <i class="far fa-calendar-alt"></i>
+            <span>{{ formatDate(competition.start_time) }} - {{ formatDate(competition.end_time) }}</span>
+          </div>
+        </div>
+        
+        <div class="card-footer">
+          <button 
+            class="action-btn view" 
+            @click.stop="handleSignUp(competition)" 
+            :disabled="competition.status === 'finish'"
+            :class="{ 'disabled': competition.status === 'finish' }"
+          >
+            {{ competition.status === 'finish' ? '已结束' : '立即报名' }}
+          </button>
+        </div>
       </div>
-
+      
       <!-- 空状态显示 -->
-      <div v-else-if="filteredCompetitions.length === 0" class="empty-state">
+      <div v-if="filteredCompetitions.length === 0" class="empty-state">
         <i class="fas fa-calendar-times"></i>
         <p>暂无赛程信息</p>
       </div>
@@ -135,9 +139,13 @@ const filteredCompetitions = computed(() => {
 
   // 状态过滤
   if (filterStatus.value !== 'all') {
-    result = result.filter(comp => 
+    if (filterStatus.value === 'ongoing') {
-      filterStatus.value === 'ongoing' ? comp.status === 'starting' : comp.status === 'finish'
+      result = result.filter(comp => comp.status === 'starting')
-    )
+    } else if (filterStatus.value === 'finished') {
+      result = result.filter(comp => comp.status === 'finish')
+    } else if (filterStatus.value === 'prepare') {
+      result = result.filter(comp => comp.status === 'prepare')
+    }
   }
 
   return result
@@ -145,9 +153,19 @@ const filteredCompetitions = computed(() => {
 
 // 方法
 const formatDate = (date) => {
+  if (!date) return ''
   return date.replace(/\//g, '-')
 }
 
+const getStatusText = (status) => {
+  const map = {
+    'prepare': '筹备中',
+    'starting': '进行中',
+    'finish': '已结束'
+  }
+  return map[status] || status
+}
+
 const handleSearch = () => {
   // 搜索时重置过滤
 }
@@ -213,60 +231,74 @@ refreshCompetitions()
 
 <style scoped>
 .competition-page {
-  padding: 16px;
+  padding: 24px;
   max-width: 1400px;
   margin: 0 auto;
+  min-height: 100vh;
+  background-color: #f5f7fa;
 }
 
 .page-header {
-  margin-bottom: 20px;
+  margin-bottom: 24px;
+  text-align: center;
 }
 
 .page-header h1 {
-  font-size: 22px;
+  font-size: 28px;
   color: #1a237e;
-  margin: 0 0 6px 0;
+  margin: 0 0 8px 0;
+  font-weight: 600;
 }
 
 .header-subtitle {
   color: #666;
-  font-size: 13px;
+  font-size: 14px;
 }
 
 .action-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
   flex-wrap: wrap;
-  gap: 12px;
+  gap: 16px;
+  background: white;
+  padding: 16px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
 }
 
 .left-actions,
 .right-actions {
   display: flex;
-  gap: 10px;
+  gap: 12px;
   align-items: center;
   flex-wrap: wrap;
 }
 
 .search-box {
   position: relative;
-  flex-grow: 1;
+  width: 240px;
 }
 
 .search-box input {
-  padding: 6px 10px 6px 28px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 13px;
   width: 100%;
-  max-width: 220px;
+  padding: 8px 12px 8px 32px;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: all 0.3s;
+}
+
+.search-box input:focus {
+  border-color: #409EFF;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+  outline: none;
 }
 
 .search-icon {
   position: absolute;
-  left: 8px;
+  left: 10px;
   top: 50%;
   transform: translateY(-50%);
   color: #999;
@@ -274,215 +306,259 @@ refreshCompetitions()
 }
 
 .filter-select {
-  padding: 6px 10px;
+  padding: 8px 12px;
-  border: 1px solid #ddd;
+  border: 1px solid #e0e0e0;
-  border-radius: 4px;
+  border-radius: 6px;
-  font-size: 13px;
+  font-size: 14px;
   background: white;
-  min-width: 100px;
+  min-width: 120px;
   cursor: pointer;
+  transition: all 0.3s;
+}
+
+.filter-select:focus {
+  border-color: #409EFF;
+  outline: none;
 }
 
 .btn-common {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
+  gap: 6px;
-  padding: 6px 12px;
+  padding: 8px 16px;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
-  border-radius: 4px;
+  border-radius: 6px;
-  border: 1px solid #b6d2ff;
   cursor: pointer;
   transition: all 0.3s ease;
+  border: none;
 }
 
 .btn-gradient {
-  background: linear-gradient(90deg, #71eaeb 0%, #416bdf 100%);
+  background: linear-gradient(135deg, #71eaeb 0%, #416bdf 100%);
   color: white;
-  border: none;
+  box-shadow: 0 4px 12px rgba(65, 107, 223, 0.2);
 }
 
 .btn-gradient:hover {
-  background: linear-gradient(90deg, #416bdf 0%, #71eaeb 100%);
+  background: linear-gradient(135deg, #416bdf 0%, #71eaeb 100%);
   transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(65, 107, 223, 0.3);
 }
 
 .btn-light {
-  background: white;
+  background: #f0f7ff;
   color: #2563eb;
+  border: 1px solid #dbeafe;
 }
 
 .btn-light:hover {
-  background: #f5f7fa;
+  background: #dbeafe;
   border-color: #2563eb;
 }
 
-.table-container {
+/* 网格布局 */
+.competition-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+.competition-card {
   background: white;
-  border-radius: 8px;
+  border-radius: 12px;
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  overflow-x: auto;
+  overflow: hidden;
-  margin-bottom: 20px;
+  transition: all 0.3s ease;
-  position: relative;
+  cursor: pointer;
-  min-height: 200px;
+  border: 1px solid #f0f0f0;
+  display: flex;
+  flex-direction: column;
 }
 
-.competition-table {
+.competition-card:hover {
-  width: 100%;
+  transform: translateY(-4px);
-  min-width: 800px;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
-  border-collapse: collapse;
+  border-color: #e0e0e0;
 }
 
-.competition-table th,
+.card-header {
-.competition-table td {
+  padding: 16px;
-  padding: 12px;
+  display: flex;
-  text-align: left;
+  justify-content: space-between;
-  border-bottom: 1px solid #f0f0f0;
+  align-items: center;
+  border-bottom: 1px solid #f5f5f5;
+  background: #fafafa;
+}
+
+.status-badge {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.status-badge.prepare { background-color: #fff7e6; color: #fa8c16; border: 1px solid #ffd591; }
+.status-badge.starting { background-color: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
+.status-badge.finish { background-color: #f5f5f5; color: #8c8c8c; border: 1px solid #d9d9d9; }
+
+.format-badge {
+  font-size: 12px;
+  color: #666;
+  background: #e6f7ff;
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid #bae7ff;
+}
+
+.card-body {
+  padding: 20px;
+  flex: 1;
+}
+
+.competition-title {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #1a237e;
+  line-height: 1.4;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+  color: #666;
+  font-size: 14px;
+}
+
+.info-row i {
+  width: 16px;
+  text-align: center;
+  color: #909399;
+}
+
+.time-row {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px dashed #f0f0f0;
   font-size: 13px;
 }
 
-.competition-table th {
+.card-footer {
-  background-color: #f8f9fa;
+  padding: 16px;
-  font-weight: 600;
+  border-top: 1px solid #f5f5f5;
-  color: #1a237e;
+  text-align: center;
-}
-
-.competition-row {
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.competition-row:hover {
-  background-color: #f0f7ff;
-  transform: translateY(-1px);
-}
-
-.competition-name {
-  font-weight: 500;
-  color: #1a237e;
-}
-
-.status-tag {
-  display: inline-block;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 11px;
-  font-weight: 500;
-}
-
-.status-tag.prepare { background-color: #e6a23c; color: #fff; }
-.status-tag.starting { background-color: #67c23a; color: #fff; }
-.status-tag.finish { background-color: #909399; color: #fff; }
-
-.action-cell {
-  display: flex;
-  gap: 6px;
 }
 
 .action-btn {
-  padding: 5px 10px;
+  width: 100%;
-  border-radius: 4px;
+  padding: 10px;
+  border-radius: 6px;
   background: linear-gradient(90deg, #71eaeb 0%, #416bdf 100%);
   color: white;
-  font-size: 13px;
+  font-size: 14px;
+  font-weight: 500;
   border: none;
   cursor: pointer;
+  transition: all 0.3s;
+}
+
+.action-btn:hover {
+  opacity: 0.9;
+}
+
+.action-btn.disabled {
+  background: #f5f5f5;
+  color: #999;
+  cursor: not-allowed;
+  background-image: none;
 }
 
 .empty-state {
-  padding: 30px;
+  grid-column: 1 / -1;
+  padding: 60px;
   text-align: center;
-  font-size: 14px;
   color: #909399;
+  background: white;
+  border-radius: 12px;
+}
+
+.empty-state i {
+  font-size: 48px;
+  margin-bottom: 16px;
+  color: #d9d9d9;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px;
+  color: #409EFF;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #409EFF;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 16px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
 .error-message {
   background-color: #fef0f0;
   color: #f56c6c;
-  padding: 10px 14px;
+  padding: 12px 16px;
-  border-radius: 4px;
+  border-radius: 8px;
   display: flex;
-  gap: 8px;
+  align-items: center;
-  font-size: 13px;
+  gap: 10px;
+  margin-bottom: 20px;
+  border: 1px solid #fde2e2;
 }
 
 .retry-btn {
   margin-left: auto;
-  padding: 4px 10px;
+  padding: 4px 12px;
   font-size: 12px;
   background: #f56c6c;
   color: white;
   border: none;
-  border-radius: 3px;
+  border-radius: 4px;
   cursor: pointer;
 }
 
-.loading-overlay {
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(255, 255, 255, 0.8);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  color: #409EFF;
-  font-size: 14px;
-}
-
-.table-container.loading {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-.btn-common:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.action-btn:disabled {
-  background: #e0e0e0 !important;
-  color: #b0b0b0 !important;
-  cursor: not-allowed;
-  border: none;
-  opacity: 1;
-}
-
 @media (max-width: 768px) {
   .competition-page {
-    padding: 12px;
+    padding: 16px;
   }
 
   .action-bar {
     flex-direction: column;
-    gap: 10px;
     align-items: stretch;
   }
 
   .left-actions, .right-actions {
     flex-direction: column;
-    gap: 8px;
     width: 100%;
   }
 
-  .table-container {
+  .search-box {
-    margin: 0 -12px;
-    border-radius: 0;
-  }
-
-  .competition-table th, .competition-table td {
-    padding: 10px;
-    font-size: 12px;
-  }
-
-  .search-box input, .filter-select {
     width: 100%;
-    max-width: 100%;
   }
-
+  
-  .status-tag {
+  .filter-select {
-    font-size: 10px;
+    width: 100%;
-    padding: 2px 5px;
   }
 }
 </style>