diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..36598a0a90d19615ea06424d098cfe10b051338b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,9 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
 
-<template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
 
-  <main>
-    <TheWelcome />
-  </main>
+<template>
+  <router-view />
 </template>
 
 <style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
 </style>
diff --git a/src/assets/base.css b/src/assets/base.css
index 71dc55a3cb5a72589496743a327c738ead3e1c83..80a516fe27ec290cbb88c8d5ff7cb52f28fd8b56 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -61,6 +61,7 @@
 
 body {
   min-height: 100vh;
+  padding: 0;
   color: var(--color-text);
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;
diff --git a/src/assets/girl.jpg b/src/assets/girl.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a5ff6a2923c85183c96ed82c363a20a0a187a1b5
Binary files /dev/null and b/src/assets/girl.jpg differ
diff --git a/src/assets/main.css b/src/assets/main.css
index c133f9156b43080992482c4805bb9d6ad813c187..7d3d09b0be8d51d490dde43195eea7c1e634bc3a 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,35 +1,5 @@
 @import "./base.css";
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
   font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 1b8faac1521345513353e96050dd24d94610d432..0000000000000000000000000000000000000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
diff --git a/src/components/TextPenetration.vue b/src/components/TextPenetration.vue
new file mode 100644
index 0000000000000000000000000000000000000000..be0b12935738bd5d896a6d894daeb9620d4cca11
--- /dev/null
+++ b/src/components/TextPenetration.vue
@@ -0,0 +1,39 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="textPenetration">
+      <div class="modal">
+        <h1>ABCDEFGHIJKLMN</h1>
+      </div>
+  </div>
+</template>
+
+<style scoped>
+.textPenetration{
+  --bg: url('../assets/girl.jpg') no-repeat center;
+  width: 100%;
+  height: 100vh;
+  background: var(--bg);
+  background-size: cover;
+}
+.modal{
+  background: rgba(0, 0, 0, .7);
+  width: 100%;
+  height: 100%;
+}
+.modal h1{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10vw;
+  -webkit-text-stroke: 1px #fff;
+  background: var(--bg);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 90e6400b4d8ad8aba0c1caa53874eb4b81380648..585d58a63a0b8f0bdea279629485dd1f61cff186 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-
+import router from './router'
 import './assets/main.css'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..58c340beb317042424adbffb5aad8cab9d902041
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,25 @@
+import { createWebHistory, createRouter } from 'vue-router'
+import TextPenetration from '../components/TextPenetration.vue'  // 文字穿透效果
+
+export const constantRoutes = [
+    {
+      path: '/login',
+      component: () => TextPenetration,
+      hidden: true
+    },
+]
+
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: constantRoutes,
+    scrollBehavior(to, from, savedPosition) {
+      if (savedPosition) {
+        return savedPosition
+      } else {
+        return { top: 0 }
+      }
+    },
+  });
+  
+  export default router;
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 4ad898dec614e030adad5e4f80523145bce56245..f5a3eb64c43f8f71121e3360713d75e41b80230f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,10 +1,24 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
     host: true
   },
-  plugins: [vue()]
+  plugins: [vue()],
+  return: {
+    resolve: {
+      // https://cn.vitejs.dev/config/#resolve-alias
+      alias: {
+        // 设置路径
+        '~': path.resolve('./'),
+        // 设置别名
+        '@': path.resolve('./src')
+      },
+      // https://cn.vitejs.dev/config/#resolve-extensions
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+    }
+  }
 })