diff --git a/index.html b/index.html
index 030a6ff51bfc6f6adcc472f6d8c02db92ce947a8..4a56ecab078ff50f355bb4e39b965fa0fbc4ff8f 100644
--- a/index.html
+++ b/index.html
@@ -9,5 +9,7 @@
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
+
+    
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..2de991ebb3811be811ff68b5bc2d1599f25ed68c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,13 +4,13 @@ import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+  <!-- <header> -->
+    <!-- <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> -->
 
-    <div class="wrapper">
+    <!-- <div class="wrapper">
       <HelloWorld msg="You did it!" />
-    </div>
-  </header>
+    </div> -->
+  <!-- </header> -->
 
   <main>
     <TheWelcome />
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
index d3d2e7acc8a9deeb26e48169ee3cbc64d2b54f2f..5d74d0469e32a462c56f1755c87841fef26fbd85 100644
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -9,76 +9,8 @@ import SupportIcon from './icons/IconSupport.vue'
 
 <template>
   <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a target="_blank" href="https://vuejs.org/">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
-    setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
-    your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank"
-      >Cypress Component Testing</a
-    >.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
-    <a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
-    <a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and
-    <a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
-    resources, we suggest paying
-    <a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
-    a visit.
+    
   </WelcomeItem>
 
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
-    <a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
-    You should also subscribe to
-    <a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
-    <a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
-  </WelcomeItem>
+ 
 </template>
diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue
index ba0def33c0e523d8c82426d76d76c39b482b21e0..91a790001ec650cc1b40ad14165786a57710991d 100644
--- a/src/components/WelcomeItem.vue
+++ b/src/components/WelcomeItem.vue
@@ -1,86 +1,223 @@
 <template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
+  <div class="container">
+        <div class="from-box">
+            <!-- 注册 -->
+            <div class="register-box hidden">
+                <h1>register</h1>
+                <input type="text" placeholder="用户名" id="reg_user">
+                <input type="number" placeholder="手机号" id="reg_phone" >
+                <input type="password" placeholder="密码">
+                <input type="password" placeholder="确认密码">
+                <button id="reg_submit">注册</button>
+            </div>
+            <!-- 登录 -->
+            <div class="login-box">
+                <h1>login</h1>
+                <input type="text" placeholder="用户名">
+                <input type="password" placeholder="密码">
+                <button>登录</button>
+            </div>
+        </div>
+        <div class="con-box left">
+                    
+            <img src="./img/1.png" alt="">
+            <p>已有账号</p>
+            <button id="login">去登录</button>
+        </div>
+        <div class="con-box right">
+            
+            <img src="./img/1.png" alt="">
+            <p>没有账号?</p>
+            <button id="register">去注册</button>
+        </div>
     </div>
-  </div>
 </template>
 
 <style scoped>
-.item {
-  margin-top: 2rem;
+*{
+  /* 初始化 */
+  padding: 0;
+  margin: 0;
+}
+
+html,body{
+  /* 100%的窗口高度 */
+  height: 100vh;
+  /* 弹性布局 水平+垂直居中 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 渐变背景 */
+  background: linear-gradient(200deg,#f3e7e9,#e3eeff);
+  -ms-overflow-style: none; 
+  
+}
+
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+.container{
+  background-color: #fff;
+  width: 650px;
+  height: 415px;
+  /* 阴影 */
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
+  /* 相对定位 */
+  position: relative;
+}
+.from-box{
+  /* 绝对定位 */
+  position: absolute;
+  top: -10%;
+  left: 5%;
+  background-color: #d3b7d8;
+  width: 320px;
+  height: 500px;
+  border-radius: 5px;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+   /* 弹性布局 水平+垂直居中 */
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   z-index: 2;
+   /* 动画过渡 加速之后 减速 */
+   transition: 0.5s ease-in-out;
+}
+
+.register-box,.login-box{
+  /* 弹性布局 垂直排列 */
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+.hidden{
+  display: none;
+  transition: 0.5s;
+}
+
+h1{
+  text-align: center;
+  margin-bottom: 25px;
+  /* 大写字母 */
+  text-transform: uppercase;
+  color: #fff;
+  /* 字间距 */
+  letter-spacing: 5px;
+}
+
+input{
+  background-color: transparent;
+  width: 70%;
+  color: #fff;
+  border: none;
+  /* 下边框样式 */
+  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+  padding: 10px 0;
+  text-indent: 10px;
+  margin: 8px 0;
+  font-size: 14px;
+  /* 字间距 */    
+  letter-spacing: 2px;
+}
+input::placeholder{
+  color: #fff;
+}
+
+input:focus{
+  color: #a262ad;
+  outline: none;
+  border-bottom: 1px solid #a262ad80;
+  transition: 0.5s;
+}
+input:focus::placeholder{
+  opacity: 0;
 }
 
-.details {
-  flex: 1;
-  margin-left: 1rem;
+.from-box button{
+  width: 70%;
+  margin-top: 35px;
+  background-color: #f6f6f6;
+  outline: none;
+  border-radius: 8px;
+  padding: 13px;
+  color: #a262ad;
+  letter-spacing: 2px;
+  border: none;
+  cursor: pointer;
 }
 
-i {
+.from-box button:hover{
+  background-color: #a262ad;
+  color: #f6f6f6;
+  transition: background-color 0.5s ease;
+}
+
+.con-box{
+  width: 50%;
+  /* 弹性布局 垂直排列 居中 */
   display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  /* 绝对定位 */
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.con-box.left{
+  left: -2%;
+}
+
+.con-box.right{
+  right: -2%;
+}
+
+.con-box h2{
+  color: #8e9aaf;
+  font-size: 25px;
+  font-weight: bold;
+  letter-spacing: 3px;
+  text-align: center;
+  margin-bottom: 4px;
+}
+
+.con-box p{
+  font-size: 12px;
+  letter-spacing: 2px;
+  color: #8e9aaf;
+  text-align: center;
 }
+.con-box span{
+  color: #d3b7d8;
+}
+
+.con-box img{
+  width: 150px;
+  height: 150px;
+  opacity: 0.9;
+  margin: 40px 0;
+}
+
+.con-box button{
+  margin-top: 3%;
+  background-color: #fff;
+  color: #a262ad;
+  border: 1px solid #d3b7d8;
+  padding: 6px 10px;
+  letter-spacing: 1px;
+  outline: none;
+  /* 鼠标放上变小手 */
+  cursor: pointer;
+}
+.con-box button:hover{
+  background-color: #a262ad;
+  color: #f6f6f6;
+}
+
 </style>
+
+
