diff --git a/README.md b/README.md
index a16e854..f5665a0 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 # view-ui-project-vite
 This project build for Vue3, Vue-router, Vuex, ViewUIPlus and Vite.
 ## Install
@@ -42,3 +43,7 @@ npm run lint:fix
 - This project exposes environment variables on `import.meta.env` object.
 - Different modes (development/staging/production) correspond to different environment files (.env.*).
 - .env file is always included, duplicate variables are overwritten by the specific mode file (.env.*).
+=======
+# jty
+
+>>>>>>> 8f9bf5ff9937c1920b62a1c5c3de013610b8c391
diff --git a/logo.png b/logo.png
new file mode 100644
index 0000000..ac20dd4
Binary files /dev/null and b/logo.png differ
diff --git a/package-lock.json b/package-lock.json
index 09c017c..3387292 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
         "less": "^4.0.0",
         "less-loader": "^10.2.0",
         "mockjs": "^1.1.0",
-        "vite": "^2.9.5",
+        "vite": "^2.9.18",
         "vite-plugin-html": "^3.2.0"
       },
       "engines": {
@@ -4160,15 +4160,15 @@
       }
     },
     "node_modules/vite": {
-      "version": "2.9.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz",
-      "integrity": "sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==",
+      "version": "2.9.18",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.18.tgz",
+      "integrity": "sha512-sAOqI5wNM9QvSEE70W3UGMdT8cyEn0+PmJMTFvTB8wB0YbYUWw3gUbY62AOyrXosGieF2htmeLATvNxpv/zNyQ==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.14.27",
         "postcss": "^8.4.13",
         "resolve": "^1.22.0",
-        "rollup": "^2.59.0"
+        "rollup": ">=2.59.0 <2.78.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -7484,16 +7484,16 @@
       }
     },
     "vite": {
-      "version": "2.9.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.9.tgz",
-      "integrity": "sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==",
+      "version": "2.9.18",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.18.tgz",
+      "integrity": "sha512-sAOqI5wNM9QvSEE70W3UGMdT8cyEn0+PmJMTFvTB8wB0YbYUWw3gUbY62AOyrXosGieF2htmeLATvNxpv/zNyQ==",
       "dev": true,
       "requires": {
         "esbuild": "^0.14.27",
         "fsevents": "~2.3.2",
         "postcss": "^8.4.13",
         "resolve": "^1.22.0",
-        "rollup": "^2.59.0"
+        "rollup": ">=2.59.0 <2.78.0"
       }
     },
     "vite-plugin-html": {
diff --git a/package.json b/package.json
index f9513d1..3ec27f0 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "less": "^4.0.0",
     "less-loader": "^10.2.0",
     "mockjs": "^1.1.0",
-    "vite": "^2.9.5",
+    "vite": "^2.9.18",
     "vite-plugin-html": "^3.2.0"
   },
   "engines": {
diff --git a/src/App.vue b/src/App.vue
index 4cf4ec4..732e801 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,19 @@
 <template>
-  <router-view/>
+  <div id="app">
+    <MyComponent />
+  </div>
 </template>
 
 <script>
+import MyComponent from './components/MainPage.vue';
+
 export default {
-  name: 'App'
-}
+  components: {
+    MyComponent
+  }
+};
 </script>
+
+<style>
+/* 你可以在这里添加全局样式 */
+</style>
\ No newline at end of file
diff --git a/src/components/Demo.vue b/src/components/Demo.vue
deleted file mode 100644
index e8d5d03..0000000
--- a/src/components/Demo.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div class="demo">
-    <Button type="primary" @click="handleClick">Welcome!</Button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Demo',
-  setup() {
-  },
-  methods: {
-    handleClick() {
-      this.$Message.info('Welcome to View UI Plus Demo!')
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .demo{
-    color: lightcoral;
-    font-size: @font-size;
-    text-align: center;
-    margin: 300px 0 0 0;
-  }
-</style>
diff --git a/src/components/Login.vue b/src/components/Login.vue
new file mode 100644
index 0000000..cc50461
--- /dev/null
+++ b/src/components/Login.vue
@@ -0,0 +1,93 @@
+<template>
+    <div class="gradient-1">
+      <transition name="fade">
+        <div class="container">
+        <div class="demo-login">
+        <Login @on-submit="handleSubmit">
+          <h3>用户登录</h3>
+          <br>
+            <UserName name="username" />
+            <Password name="password" />
+            <div class="demo-auto-login">
+                <Checkbox v-model="autoLogin" size="large">自动登录</Checkbox>
+                <a>忘记密码</a>
+            </div>
+            <Submit/>
+            <br>
+            <a href="" class="another">换种方式登录</a>
+        </Login>
+        </div>
+      </div>
+      </transition>
+    </div>
+  </template>
+  
+  <script setup>
+    const autoLogin  = true;
+    const anim = 0;
+    async function handleSubmit(valid, {username, password}){
+      if (valid) {
+        const user = {
+          name : $this.username,
+          password : $this.password
+        }
+        const res = await axios.post('https://localhost:8080/Login',user)
+          .then(response => {
+            //成功就跳转主页
+          })
+          .catch(error => {
+            //失败就提醒出错
+            this.$Message.info('error');
+          })
+          console.log(res);
+          
+      }
+    };
+    
+  </script>
+  
+  <style>
+  html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    position: relative;
+  }
+  
+  .gradient-1 {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+    background: linear-gradient(45deg, #FFBBFF, #FFD7BE);
+  }
+  .container{
+    height: 400px;
+    width: 300px;
+    border: pink solid 1px;
+    border-radius: 10px;
+    background-color: white;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .demo-login{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 250px;
+        
+    }
+  .demo-auto-login{
+        margin-bottom: 24px;
+        text-align: left;
+    }
+  .demo-auto-login a{
+        float: right;
+    }
+  h3{
+    color: #2d8cf0;
+  }
+  
+  </style>
\ No newline at end of file
diff --git a/src/components/MainPage.vue b/src/components/MainPage.vue
new file mode 100644
index 0000000..1bf3c91
--- /dev/null
+++ b/src/components/MainPage.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="gradient-1">
+        <div class="headArea">
+            <div class="haBody">
+                <div class="haBody-1">
+                    <h1>
+                        <a href="" class="logo">
+                            <img src="../logo1.png" alt="">
+                        </a>
+                    </h1>
+                </div>
+                <div class="haBody-2"></div>
+                <div class="haBody-3"></div>
+                <div class="haBody-4"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+</script>
+
+<style>
+  .gradient-1 {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+    background: linear-gradient(45deg, #FFBBFF, #FFD7BE);
+  }
+  .headArea {
+    height: 50px;
+    width: 100%;
+    background-color: white;
+    display: flex;         /* 使用 Flexbox 布局 */
+    justify-content: center; /* 水平居中 */
+    align-items: center;   /* 垂直居中 */
+  }
+  .haBody{
+    display: flex;
+    width: 75%;
+    height: 100%;
+    background-color: lightblue;
+  }
+  .haBody-1{
+    display: flex;
+    background-image: url();
+    width: 100px;
+    height: 50px;
+    background-color: green;
+  }
+  .haBody-2{
+    display: flex;
+    width: 100px;
+    height: 50px;
+    background-color: blue;
+  }
+  .haBody-3{
+    display: flex;
+    width: 100px;
+    height: 50px;
+    background-color: red;
+  }
+  .haBody-4{
+    display: flex;
+    width: 100px;
+    height: 50px;
+    background-color: yellow;
+  }
+  .logo{
+    text-decoration: none;
+
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/PhoneLogin.vue b/src/components/PhoneLogin.vue
new file mode 100644
index 0000000..93be214
--- /dev/null
+++ b/src/components/PhoneLogin.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="demo-login">
+        <Login @on-submit="handleSubmit">
+            <Mobile name="mobile" />
+            <Captcha name="captcha" :field="['mobile']" @on-get-captcha="handleGetCaptcha" />
+            <Submit />
+        </Login>
+    </div>
+</template>
+<script>
+    export default {
+        methods: {
+            handleSubmit (valid, { mobile, captcha }) {
+                if (valid) {
+                    this.$Modal.info({
+                        title: '输入的内容如下：',
+                        content: 'mobile: ' + mobile + ' | captcha: ' + captcha
+                    });
+                }
+            },
+            handleGetCaptcha () {
+                this.$Message.info('获取验证码');
+            }
+        }
+    }
+</script>
+<style>
+    .demo-login{
+        width: 400px !important;
+        margin: 0 auto;
+    }
+</style>
diff --git a/src/logo1.png b/src/logo1.png
new file mode 100644
index 0000000..ceccef1
Binary files /dev/null and b/src/logo1.png differ
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9b5f381..bc7f5d0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -3,12 +3,12 @@
 </template>
 
 <script>
-import Demo from '@/components/Demo'
+import Login from '@/components/Login.vue'
 
 export default {
   name: 'Home',
   components: {
-    Demo
+    Login
   },
   setup() {
   },
diff --git a/test.txt b/test.txt
new file mode 100644
index 0000000..1314e9a
--- /dev/null
+++ b/test.txt
@@ -0,0 +1 @@
+sout this is a test