diff --git a/src/App.vue b/src/App.vue
index 6b7844c..dc28aea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,50 +1,20 @@
 <script setup lang="ts">
+import '@/components/css/app.css'
 import MyHead from "@/components/MyHead.vue";
 import MyFooter from "@/components/MyFooter.vue";
 </script>
 
 <template>
-  <div class="login">
-    <el-container class="common-layout">
-      <el-header class="header">
-        <MyHead />
-      </el-header>
-      <el-main class="main-content">
-          <RouterView />
-      </el-main>
-      <el-footer class="footer">
-        <MyFooter/>
-      </el-footer>
-    </el-container>
+  <div class="common-layout">
+    <my-head/>
+    <div class="router-view">
+      <RouterView/>
+    </div>
+    <my-footer/>
   </div>
+
 </template>
 
 <style scoped>
-#app {
-  margin: 0px 0px;
-}
-
-*{
-  padding:0px
-}
-
-.login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-size: cover;
-}
-
-.common-layout {
-  min-width: 100vw;
-  min-height: 100vh;
-}
-
-.main-content {
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-}
 
 </style>
diff --git a/src/assets/background.webp b/src/assets/background.webp
new file mode 100644
index 0000000..0284c22
Binary files /dev/null and b/src/assets/background.webp differ
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 6562fca..902d07a 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/components/css/login.css'
 import {reactive, ref} from "vue";
 import {ElMessage, type FormInstance, type FormRules} from "element-plus";
 import type {InternalRuleItem, Value} from "async-validator";
@@ -67,29 +68,21 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model = "registerData">
-      <el-form-item label="账号：" :rules="rules.username" :model="registerData.username" prop="username">
-        <el-input v-model= "registerData.username"/>
-      </el-form-item>
-      <el-form-item label="密码：" :rules="rules.password" :model="registerData.password" prop="password">
-        <el-input v-model= "registerData.password" type="password"/>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="submitForm(loginForm)" style="width: 100%;">登录</el-button>
-      </el-form-item>
-    </el-form>
+<!--    <el-form ref="loginForm" :model = "registerData">-->
+<!--      <el-form-item label="账号：" :rules="rules.username" :model="registerData.username" prop="username">-->
+<!--        <el-input v-model= "registerData.username"/>-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="密码：" :rules="rules.password" :model="registerData.password" prop="password">-->
+<!--        <el-input v-model= "registerData.password" type="password"/>-->
+<!--      </el-form-item>-->
+<!--      <el-form-item>-->
+<!--        <el-button type="primary" @click="submitForm(loginForm)" style="width: 100%;">登录</el-button>-->
+<!--      </el-form-item>-->
+<!--    </el-form>-->
+      登录页面
   </div>
 </template>
 
 <style scoped>
-*{
-  margin: 0;
-  padding: 0;
-}
 
-.login {
-  min-height: 25vh;
-  min-width: 30vw;
-  background: #22b9fa;
-}
 </style>
diff --git a/src/components/MyFooter.vue b/src/components/MyFooter.vue
index 44c41c8..b356a0a 100644
--- a/src/components/MyFooter.vue
+++ b/src/components/MyFooter.vue
@@ -5,13 +5,8 @@
 </template>
 
 <style scoped>
-*{
-  margin: 20px;
-  padding:0px;
-}
-.footer {
-  text-align: center;
-  min-height: 8vh;
-  background-color: green;
-}
-</style>
\ No newline at end of file
+</style>
+
+<script setup lang="ts">
+import '@/components/css/myFooter.css'
+</script>
\ No newline at end of file
diff --git a/src/components/MyHead.vue b/src/components/MyHead.vue
index 0f7dc5c..21d8298 100644
--- a/src/components/MyHead.vue
+++ b/src/components/MyHead.vue
@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+import '@/components/css/myHead.css'
 import {computed} from "vue";
 import {useRoute} from "vue-router";
 
@@ -15,9 +16,6 @@ const isLoginRoute = computed(()=>route.path === '/login');
 
 <style scoped>
 .head {
-  font-size: 30px;
-  text-align: center;
-  background: green;
-  min-height: 7vh;
+
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Test.vue b/src/components/Test.vue
new file mode 100644
index 0000000..097c7ba
--- /dev/null
+++ b/src/components/Test.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+test
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/css/app.css b/src/components/css/app.css
new file mode 100644
index 0000000..0320a5e
--- /dev/null
+++ b/src/components/css/app.css
@@ -0,0 +1,23 @@
+html, body, #app {
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+}
+
+.common-layout {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    width: 100vw;
+    background: url("@/assets/background.webp") center center / cover no-repeat;
+}
+
+.router-view {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1 1 0;
+    /*background: #ebeef5;*/
+}
\ No newline at end of file
diff --git a/src/components/css/login.css b/src/components/css/login.css
new file mode 100644
index 0000000..0243d7d
--- /dev/null
+++ b/src/components/css/login.css
@@ -0,0 +1,35 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+/* 玻璃+边缘羽化 */
+.login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    /* 建议给点内边距和圆角，效果更柔和 */
+    min-width: 20vw;
+    max-width: 40vw;
+
+    min-height: 40vh;
+    max-height: 80vh;
+
+    border-radius: 16px;
+
+    /* 半透明底色——要有透明度，backdrop-filter 才能生效 */
+    background: rgba(255, 255, 255, 0.12);
+
+    /* 背景虚化 + 略微提高饱和度，玻璃质感 */
+    backdrop-filter: blur(16px) saturate(130%);
+    -webkit-backdrop-filter: blur(16px) saturate(130%);
+
+    /* 玻璃边框细线，可选 */
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
+
+    /* 关键：对自身做“羽化”遮罩，让四周渐隐，看起来像边缘被柔化/模糊 */
+    /* 72% 可自行调节，越小羽化范围越大 */
+    mask-image: radial-gradient(100% 100% at 50% 50%, #000 72%, transparent 100%);
+}
diff --git a/src/components/css/myFooter.css b/src/components/css/myFooter.css
new file mode 100644
index 0000000..2c927de
--- /dev/null
+++ b/src/components/css/myFooter.css
@@ -0,0 +1,21 @@
+*{
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+}
+.footer {
+    text-align: center;
+    /*min-height: 100%;*/
+    /*min-width: 100%;*/
+    /* 半透明底色——要有透明度，backdrop-filter 才能生效 */
+    background: rgba(255, 255, 255, 0.12);
+
+    /* 背景虚化 + 略微提高饱和度，玻璃质感 */
+    backdrop-filter: blur(16px) saturate(130%);
+    -webkit-backdrop-filter: blur(16px) saturate(130%);
+
+    /* 玻璃边框细线，可选 */
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
+
+}
\ No newline at end of file
diff --git a/src/components/css/myHead.css b/src/components/css/myHead.css
new file mode 100644
index 0000000..8be089e
--- /dev/null
+++ b/src/components/css/myHead.css
@@ -0,0 +1,23 @@
+*{
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+}
+
+.head {
+    font-size: 30px;
+    text-align: center;
+    /*background: green;*/
+    /*min-height: 7vh;*/
+
+    /* 半透明底色——要有透明度，backdrop-filter 才能生效 */
+    background: rgba(255, 255, 255, 0.12);
+
+    /* 背景虚化 + 略微提高饱和度，玻璃质感 */
+    backdrop-filter: blur(16px) saturate(130%);
+    /*-webkit-backdrop-filter: blur(16px) saturate(130%);*/
+
+    /* 玻璃边框细线，可选 */
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
+}
\ No newline at end of file