diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a893b2a..01646d3 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,19 +1,26 @@
 <script setup>
-import LotteryResults from './components/LotteryResults.vue'
+import Index from './components/index.vue'
 </script>
 
 <template>
   <div class="app">
-    <LotteryResults />
+    <main class="app-main">
+      <Index />
+    </main>
   </div>
 </template>
 
 <style scoped>
 .app {
-  width: 100%;
+  width: 100vw;
   height: 100vh;
-  margin: 0;
   padding: 0;
   overflow: hidden;
 }
+
+.app-main {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 </style>
diff --git a/frontend/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue
deleted file mode 100644
index 546ebbc..0000000
--- a/frontend/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/src/components/LotteryResults.vue b/frontend/src/components/LotteryResults.vue
deleted file mode 100644
index 182de31..0000000
--- a/frontend/src/components/LotteryResults.vue
+++ /dev/null
@@ -1,458 +0,0 @@
-<template>
-  <div class="lottery-container">
-    <!-- 顶部导航栏 -->
-    <header class="lottery-header">
-     
-    </header>
-
-    <!-- 主要内容区域 -->
-    <div class="main-content">
-      <!-- 左侧用户信息面板 -->
-      <aside class="user-panel">
-        <div class="panel-section">
-          <h3>账户信息</h3>
-          <div class="user-info">
-            <div class="info-item">
-              <span class="label">账户:</span>
-              <span class="value">pmk1 (VIP)</span>
-            </div>
-            <div class="info-item">
-              <span class="label">快开码:</span>
-              <span class="value">4701262635</span>
-            </div>
-            <div class="info-item">
-              <span class="label">余额:</span>
-              <span class="value">125.7</span>
-            </div>
-          </div>
-        </div>
-        
-        <div class="panel-section">
-          <h3>开奖明细</h3>
-          <div class="lottery-details">
-            <div class="detail-item">
-              <span class="label">期号:</span>
-              <span class="value">20200114</span>
-            </div>
-            <div class="detail-item">
-              <span class="label">开奖号码:</span>
-              <div class="winning-numbers">
-                <div class="ball red">5</div>
-                <div class="ball green">8</div>
-                <div class="ball blue">7</div>
-                <div class="ball yellow">9</div>
-                <div class="ball purple">2</div>
-                <div class="ball pink">3</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </aside>
-
-      <!-- 右侧开奖结果表格 -->
-      <div class="results-section">
-        <div class="section-header">
-          <div class="header-controls">
-            <div class="filter">
-              <label>期数:</label>
-              <select>
-                <option>1~10</option>
-              </select>
-            </div>
-            <div class="filter">
-              <label>玩法:</label>
-              <select>
-                <option>总和值</option>
-              </select>
-            </div>
-          </div>
-        </div>
-
-        <div class="results-table-container">
-          <table class="results-table">
-            <thead>
-              <tr>
-                <th>期号</th>
-                <th>日期</th>
-                <th>开奖时间</th>
-                <th>开奖号码</th>
-                <th>冠亚和</th>
-                <th>冠亚军</th>
-                <th>2串</th>
-                <th>4串</th>
-                <th>大小</th>
-                <th>龙虎</th>
-                <th>1~5尾</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="result in lotteryResults" :key="result.issue">
-                <td>{{ result.issue }}</td>
-                <td>{{ result.date }}</td>
-                <td>{{ result.time }}</td>
-                <td class="numbers-column">
-                  <div class="ball" v-for="(number, index) in result.numbers" :key="index" :class="getBallColorClass(index)">
-                    {{ number }}
-                  </div>
-                </td>
-                <td>{{ result.sum }}</td>
-                <td>{{ result.firstSecondSum }}</td>
-                <td>{{ result.twoSeries }}</td>
-                <td>{{ result.fourSeries }}</td>
-                <td>{{ result.size }}</td>
-                <td>{{ result.dragonTiger }}</td>
-                <td class="tails-column">
-                  <div class="tail" v-for="(tail, index) in result.tails" :key="index" :class="getTailClass(tail)">
-                    {{ tail }}
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LotteryResults',
-  data() {
-    return {
-      lotteryResults: []
-    }
-  },
-  mounted() {
-    // 页面加载时从后端获取彩票开奖结果数据
-    this.fetchLotteryResults();
-  },
-  methods: {
-    async fetchLotteryResults() {
-      try {
-        const response = await fetch('http://localhost:8080/api/lottery/results');
-        if (response.ok) {
-          this.lotteryResults = await response.json();
-        } else {
-          console.error('获取数据失败:', response.status);
-          // 如果后端没有数据，使用模拟数据
-          this.useMockData();
-        }
-      } catch (error) {
-        console.error('获取数据时发生错误:', error);
-        // 如果连接后端失败，使用模拟数据
-        this.useMockData();
-      }
-    },
-    useMockData() {
-      // 使用模拟数据
-      this.lotteryResults = [
-        {
-          issue: '202001214',
-          date: '2020-01-21',
-          time: '15:10:00',
-          numbers: ['5', '8', '7', '9', '2', '3', '1', '10', '12', '4', '6', '11'],
-          sum: '62',
-          firstSecondSum: '33',
-          twoSeries: '22',
-          fourSeries: '',
-          size: '大',
-          dragonTiger: '龙',
-          tails: ['虎', '龙', '虎', '虎', '龙']
-        },
-        {
-          issue: '202001213',
-          date: '2020-01-21',
-          time: '15:05:00',
-          numbers: ['8', '3', '7', '9', '5', '4', '6', '10', '12', '1', '2', '11'],
-          sum: '67',
-          firstSecondSum: '32',
-          twoSeries: '22',
-          fourSeries: '',
-          size: '大',
-          dragonTiger: '龙',
-          tails: ['虎', '龙', '虎', '虎', '龙']
-        },
-        {
-          issue: '202001212',
-          date: '2020-01-21',
-          time: '15:00:00',
-          numbers: ['2', '8', '10', '11', '9', '12', '5', '3', '7', '4', '6', '1'],
-          sum: '67',
-          firstSecondSum: '32',
-          twoSeries: '22',
-          fourSeries: '',
-          size: '大',
-          dragonTiger: '龙',
-          tails: ['虎', '龙', '虎', '虎', '龙']
-        }
-      ];
-    },
-    getBallColorClass(index) {
-      // 根据号码位置返回不同的颜色类
-      const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'pink', 'orange', 'cyan', 'magenta', 'lime', 'teal', 'indigo'];
-      return colors[index % colors.length];
-    },
-    getTailClass(tail) {
-      // 根据龙虎返回不同的颜色类
-      return tail === '龙' ? 'dragon' : 'tiger';
-    }
-  }
-}
-</script>
-
-<style scoped>
-.lottery-container {
-  font-family: Arial, sans-serif;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-}
-
-/* 顶部导航栏样式 */
-.lottery-header {
-  background-color: #1a73e8;
-  color: white;
-}
-
-.header-top {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 20px;
-}
-
-.logo {
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.nav-tabs {
-  display: flex;
-  gap: 20px;
-}
-
-.tab {
-  padding: 8px 12px;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.tab:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.header-right {
-  display: flex;
-  gap: 10px;
-}
-
-.btn-settings, .btn-exit {
-  background-color: transparent;
-  color: white;
-  border: 1px solid white;
-  padding: 6px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.btn-settings:hover, .btn-exit:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.header-bottom {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 20px;
-  background-color: #1557b0;
-}
-
-.sub-tabs {
-  display: flex;
-  gap: 15px;
-}
-
-.sub-tab {
-  padding: 6px 10px;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.sub-tab:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.sub-tab.active {
-  background-color: rgba(255, 255, 255, 0.3);
-  font-weight: bold;
-}
-
-.btn-settings.small {
-  padding: 4px 8px;
-  font-size: 12px;
-}
-
-/* 主要内容区域 */
-.main-content {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-/* 左侧用户信息面板 */
-.user-panel {
-  width: 200px;
-  background-color: #f5f5f5;
-  border-right: 1px solid #ddd;
-  padding: 15px;
-  overflow-y: auto;
-}
-
-.panel-section {
-  margin-bottom: 20px;
-}
-
-.panel-section h3 {
-  font-size: 14px;
-  font-weight: bold;
-  margin-bottom: 10px;
-  color: #333;
-}
-
-.info-item, .detail-item {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 8px;
-  font-size: 12px;
-}
-
-.label {
-  color: #666;
-}
-
-.value {
-  color: #333;
-  font-weight: bold;
-}
-
-.winning-numbers {
-  display: flex;
-  gap: 5px;
-}
-
-/* 右侧开奖结果表格 */
-.results-section {
-  flex: 1;
-  padding: 15px;
-  overflow-y: auto;
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-}
-
-.section-header h2 {
-  font-size: 18px;
-  font-weight: bold;
-  color: #333;
-}
-
-.header-controls {
-  display: flex;
-  gap: 15px;
-}
-
-.filter {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 12px;
-}
-
-.filter select {
-  padding: 4px 6px;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-}
-
-/* 开奖结果表格 */
-.results-table-container {
-  overflow-x: auto;
-}
-
-.results-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-.results-table th, .results-table td {
-  border: 1px solid #ddd;
-  padding: 8px;
-  text-align: center;
-}
-
-.results-table th {
-  background-color: #f5f5f5;
-  font-weight: bold;
-  color: #333;
-}
-
-.results-table tr:nth-child(even) {
-  background-color: #f9f9f9;
-}
-
-/* 号码球样式 */
-.ball {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  font-size: 10px;
-  font-weight: bold;
-  margin: 1px;
-}
-
-.numbers-column {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.ball.blue { background-color: #1a73e8; }
-.ball.red { background-color: #ea4335; }
-.ball.green { background-color: #34a853; }
-.ball.yellow { background-color: #fbbc05; }
-.ball.purple { background-color: #9c27b0; }
-.ball.pink { background-color: #e91e63; }
-.ball.orange { background-color: #ff9800; }
-.ball.cyan { background-color: #00bcd4; }
-.ball.magenta { background-color: #ff00ff; }
-.ball.lime { background-color: #00ff00; }
-.ball.teal { background-color: #009688; }
-.ball.indigo { background-color: #3f51b5; }
-
-/* 龙虎样式 */
-.tails-column {
-  display: flex;
-  justify-content: center;
-  gap: 5px;
-}
-
-.tail {
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 10px;
-  font-weight: bold;
-}
-
-.tail.dragon { background-color: #ea4335; color: white; }
-.tail.tiger { background-color: #1a73e8; color: white; }
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/UserForm.vue b/frontend/src/components/UserForm.vue
deleted file mode 100644
index a45a254..0000000
--- a/frontend/src/components/UserForm.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div class="user-form">
-    <form @submit.prevent="handleSubmit">
-      <div class="form-group">
-        <label for="name">姓名</label>
-        <input 
-          type="text" 
-          id="name" 
-          v-model="formData.name" 
-          required 
-        >
-      </div>
-      <div class="form-group">
-        <label for="email">邮箱</label>
-        <input 
-          type="email" 
-          id="email" 
-          v-model="formData.email" 
-          required 
-        >
-      </div>
-      <div class="form-group">
-        <label for="password">密码</label>
-        <input 
-          type="password" 
-          id="password" 
-          v-model="formData.password" 
-          :required="!user.id" 
-        >
-      </div>
-      <div class="form-actions">
-        <button type="submit" class="save-btn">保存</button>
-        <button type="button" @click="$emit('cancel')" class="cancel-btn">取消</button>
-      </div>
-    </form>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'UserForm',
-  props: {
-    user: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      formData: { ...this.user }
-    };
-  },
-  watch: {
-    user(newUser) {
-      this.formData = { ...newUser };
-    }
-  },
-  methods: {
-    handleSubmit() {
-      this.$emit('save', this.formData);
-    }
-  }
-};
-</script>
-
-<style scoped>
-.user-form {
-  margin-bottom: 20px;
-}
-
-.form-group {
-  margin-bottom: 15px;
-}
-
-label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-}
-
-input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-
-.form-actions {
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.save-btn, .cancel-btn {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.save-btn {
-  background-color: #4CAF50;
-  color: white;
-}
-
-.cancel-btn {
-  background-color: #f2f2f2;
-  color: #333;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/UserManagement.vue b/frontend/src/components/UserManagement.vue
deleted file mode 100644
index f4831b4..0000000
--- a/frontend/src/components/UserManagement.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-  <div class="user-management">
-    <h2>用户管理</h2>
-    <button @click="showAddForm = true" class="add-btn">添加用户</button>
-    <table class="user-table">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>姓名</th>
-          <th>邮箱</th>
-          <th>操作</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="user in users" :key="user.id">
-          <td>{{ user.id }}</td>
-          <td>{{ user.name }}</td>
-          <td>{{ user.email }}</td>
-          <td>
-            <button @click="editUser(user)" class="edit-btn">编辑</button>
-            <button @click="deleteUser(user.id)" class="delete-btn">删除</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-
-    <!-- 用户表单弹窗 -->
-    <div v-if="showAddForm || editingUser" class="modal-overlay">
-      <div class="modal">
-        <h3>{{ editingUser ? '编辑用户' : '添加用户' }}</h3>
-        <user-form
-          :user="currentUser"
-          @save="saveUser"
-          @cancel="cancelForm"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import UserForm from './UserForm.vue';
-import axios from 'axios';
-
-export default {
-  name: 'UserManagement',
-  components: {
-    UserForm
-  },
-  data() {
-    return {
-      users: [],
-      showAddForm: false,
-      editingUser: null,
-      currentUser: {}
-    };
-  },
-  mounted() {
-    this.fetchUsers();
-  },
-  methods: {
-    fetchUsers() {
-      axios.get('/api/users')
-        .then(response => {
-          this.users = response.data;
-        })
-        .catch(error => {
-          console.error('获取用户列表失败:', error);
-        });
-    },
-    editUser(user) {
-      this.editingUser = true;
-      this.currentUser = { ...user };
-    },
-    deleteUser(userId) {
-      if (confirm('确定要删除这个用户吗？')) {
-        axios.delete(`/api/users/${userId}`)
-          .then(() => {
-            this.fetchUsers();
-          })
-          .catch(error => {
-            console.error('删除用户失败:', error);
-          });
-      }
-    },
-    saveUser(user) {
-      if (this.editingUser) {
-        // 更新用户
-        axios.put(`/api/users/${user.id}`, user)
-          .then(() => {
-            this.fetchUsers();
-            this.cancelForm();
-          })
-          .catch(error => {
-            console.error('更新用户失败:', error);
-          });
-      } else {
-        // 添加用户
-        axios.post('/api/users', user)
-          .then(() => {
-            this.fetchUsers();
-            this.cancelForm();
-          })
-          .catch(error => {
-            console.error('添加用户失败:', error);
-          });
-      }
-    },
-    cancelForm() {
-      this.showAddForm = false;
-      this.editingUser = false;
-      this.currentUser = {};
-    }
-  }
-};
-</script>
-
-<style scoped>
-.user-management {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-.add-btn {
-  margin-bottom: 20px;
-  padding: 8px 16px;
-  background-color: #4CAF50;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.user-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.user-table th, .user-table td {
-  border: 1px solid #ddd;
-  padding: 8px;
-  text-align: left;
-}
-
-.user-table th {
-  background-color: #f2f2f2;
-}
-
-.edit-btn, .delete-btn {
-  padding: 4px 8px;
-  margin-right: 5px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.edit-btn {
-  background-color: #2196F3;
-  color: white;
-}
-
-.delete-btn {
-  background-color: #f44336;
-  color: white;
-}
-
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.modal {
-  background-color: white;
-  padding: 20px;
-  border-radius: 8px;
-  width: 400px;
-  max-width: 90%;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/style.css b/frontend/src/style.css
index f691315..baff01c 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -24,10 +24,9 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  background-color: #f5f5f5;
 }
 
 h1 {
@@ -58,11 +57,18 @@ button:focus-visible {
   padding: 2em;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+
+/* 响应式app容器 */
+@media (max-width: 768px) {
+  #app {
+    padding: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  #app {
+    padding: 0.5rem;
+  }
 }
 
 @media (prefers-color-scheme: light) {