diff --git a/src/assets/pictures/background.png b/src/assets/pictures/background.png
new file mode 100644
index 00000000..88cd2c17
Binary files /dev/null and b/src/assets/pictures/background.png differ
diff --git a/src/assets/pictures/welcome.png b/src/assets/pictures/welcome.png
new file mode 100644
index 00000000..36ef4302
Binary files /dev/null and b/src/assets/pictures/welcome.png differ
diff --git a/src/assets/pictures/yanzheng.png b/src/assets/pictures/yanzheng.png
new file mode 100644
index 00000000..76265615
Binary files /dev/null and b/src/assets/pictures/yanzheng.png differ
diff --git a/src/views/Main.vue b/src/views/Main.vue
index e99685b3..35a0271b 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -1,20 +1,6 @@
 <template>
-   
-  <div class="common-layout">
-    <el-container>
-      <el-header><heade/></el-header>
-      <el-container>
-        <!-- <el-aside width="250px">aa</el-aside> -->
-        <!-- <el-main style="padding: 0px">
-          <background/>
-        </el-main> -->
-        <!-- <el-aside width="250px">aa</el-aside> -->
-        <router-view></router-view>
-      </el-container>
-    </el-container>
-  
-  </div>
-       
+   <heade/>
+ <div></div>      
           
     
     
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index c3b9539e..9df35389 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -1,9 +1,381 @@
 <template>
-    登录
-</template>
+    <div class="base">
+      <!-- 注册登录界面 -->
+     <div  class="loginAndRegist">
+          <!--登录表单-->
+          <div  class="loginArea">
+              <transition
+                      name="animate__animated animate__bounce"
+                      enter-active-class="animate__fadeInUp"
+                      leave-active-class="animate__zoomOut"
+                      appear
+              >
+              <!-- 标语 -->
+              <div v-show="isShow" class="title">
+                  登录
+              </div>
+              </transition>
+              <transition
+                      name="animate__animated animate__bounce"
+                      enter-active-class="animate__fadeInUp"
+                      leave-active-class="animate__zoomOut"
+                      appear
+              >
+              <!-- 密码框和用户名框 -->
+              <div v-show="isShow" class="pwdArea">
+                 <div style="flex: 1;justify-content: center;display: flex;align-items: center">
+                  用&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;&nbsp;&nbsp;
+                     <el-input class="username" v-model="loginUser.name" style="width: 185px;"  placeholder="请输入用户名"></el-input>
+                 </div>
+                  <div style="flex: 1;justify-content: center;display: flex;align-items: center">
+                      密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;
+                      <el-input placeholder="请输入密码"  v-model="loginUser.password" style="width: 185px" show-password></el-input>
+                  </div>
+                  <div style="flex: 1;justify-content: center;display: flex;align-items: center">
+                      验&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;
+                      <el-input placeholder="请输入验证码"  v-model="loginUser.password" style="width: 125px" show-password></el-input>
+                      <img src="../../assets/pictures/yanzheng.png" style="width: 60px" alt="假验证码" />
+                    
+                  </div>
+              </div>
+              </transition>
+              <transition
+                      name="animate__animated animate__bounce"
+                      enter-active-class="animate__fadeInUp"
+                      leave-active-class="animate__zoomOut"
+                      appear
+              >
+              <!-- 登录注册按钮 -->
+              <div v-show="isShow" class="btnArea">
+                  <el-button 
+                  type="success" 
+                  round 
+                  style="background-color: #E44B9D; letter-spacing: 5px; height: 40px; width: 100px; font-size: 14px;" 
+                  @click="UserLogin">
+                  登录
+              </el-button>
+              </div>
+              </transition>
+          </div>
+          <!-- 注册表单 -->
+          <div class="registArea">
+              <transition
+                      name="animate__animated animate__bounce"
+                      enter-active-class="animate__fadeInUp"
+                      leave-active-class="animate__zoomOut"
+                      appear
+              >
+              <!--  注册表头-->
+              <div v-show="!isShow" class="rigestTitle">
+                  注册
+              </div>
+              </transition>
+              <transition
+                      name="animate__animated animate__bounce"
+                      enter-active-class="animate__fadeInUp"
+                      leave-active-class="animate__zoomOut"
+                      appear
+              >
+  <!--            注册表单-->
+              <div  v-show="!isShow" class="registForm">
+                  <div style="flex: 1;display: flex;justify-content: center;align-items: center">
+                      用&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;&nbsp;名:
+                      <el-input
+                              placeholder="请输入用户名"
+                              v-model="regUser.regUsername"
+                              style="width: 165px;margin-left: 10px"
+                              clearable
+                      >
+                      </el-input>
+                  </div>
+                  <div style="flex: 1;display: flex;justify-content: center;align-items: center">
+                      密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:
+                      <el-input placeholder="请输入密码" style="width: 165px;margin-left: 10px" v-model="regUser.regPwd" show-password></el-input>
+                  </div>
+                  <div style="flex: 1;display: flex;justify-content: center;align-items: center;">
+                      确&nbsp;认&nbsp;密&nbsp;码:
+                      <el-input placeholder="请再次输入密码" style="width: 165px;margin-left: 10px" v-model="regUser.regRePwd" show-password></el-input>
+                  </div>
+                  <div style="flex: 1;display: flex;align-items: center">
+                    验&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;码:
+                    <el-input placeholder="请输入验证码"  v-model="loginUser.password" style="width: 105px;margin-left: 10px" show-password></el-input>
+                    <img src="../../assets/pictures/yanzheng.png" style="width: 60px" alt="假验证码" />
+                  </div>
+              </div>
+              </transition>
+              <transition
+                      name="animate__animated animate__bounce"
+                      enter-active-class="animate__fadeInUp"
+                      leave-active-class="animate__zoomOut"
+                      appear
+              >
+  <!--            注册按钮-->
+              <div  v-show="!isShow" class="registBtn">
+                  <el-button type="success" round style="background-color: #E44B9D;letter-spacing: 5px ;height: 40px; width: 100px; font-size: 14px" @click="userRegister">注册</el-button>
+              </div>
+              </transition>
+          </div>
+          <!-- 信息展示界面 -->
+           <div id="aaa" class="showInfo"
+                :style="{
+               borderTopRightRadius:styleObj.bordertoprightradius,
+               borderBottomRightRadius:styleObj.borderbottomrightradius,
+               borderTopLeftRadius:styleObj.bordertopleftradius,
+               borderBottomLeftRadius:styleObj.borderbottomleftradius,
+               right:styleObj.rightDis
+              }"
+                ref="showInfoView">
+  
+               <transition
+                       name="animate__animated animate__bounce"
+                       enter-active-class="animate__fadeInUp"
+                       leave-active-class="animate__zoomOut"
+                       appear
+               >
+              <!-- 没有用户输入用户名或者找不到用户名的时候 -->
+              <div v-show="isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
+               <!-- 欢迎语 -->
+                   <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #E44B9D;font-weight: bold">
+                   欢迎你加入恋爱森林！
+                   </div>
+              <!-- 欢迎图片 -->
+                   <div style="flex: 2">
+                       <el-button type="success"  style="background-color:#E44B9D;border: 1px solid #ffffff; height: 40px; width: 180px; font-size: 14px" round @click="changeToRegiest">还没有账户？点击注册</el-button>
+                   </div>
+             </div>
+               </transition>
+             <!-- 用户输入用户名时展示头像以及姓名 -->
+  <!--           <div>-->
+  
+  <!--           </div>-->
+               <transition
+                       name="animate__animated animate__bounce"
+                       enter-active-class="animate__fadeInUp"
+                       leave-active-class="animate__zoomOut"
+                       appear
+               >
+             <!-- 用户注册的时候展示信息 -->
+             <div v-show="!isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
+                 <!-- 欢迎语 -->
+                 <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #E44B9D;font-weight: bold">
+                     欢迎注册
+                 </div>
+                 <!-- 欢迎图片 -->
+                 <div style="flex: 2">
+                     <el-button type="success"  style="background-color:#E44B9D;border: 1px solid #ffffff;height: 40px; width: 180px; font-size: 14px" round @click="changeToLogin">已有账户？点击登录</el-button>
+                 </div>
+             </div>
+               </transition>
+          </div>
+     </div>
+     
+    </div>
+  </template>
+  <style>
+    /* @import '../assets/css/Login.css' */
+    .base{
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-image: url("../../assets/pictures/background.png");
+        background-size: 100%;
+    }
+    .loginAndRegist{
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        right:6%;
+        top:35%;
+        
+        
+    }
+    .loginArea{
+        background-color: rgba(255,255,255,0.8);
+        opacity: 0.8;
+        border-top-left-radius: 15px;
+        border-bottom-left-radius: 15px;
+        height: 400px;
+        width: 400px;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        overflow: hidden;
+    }
+    .registArea{
+        opacity: 0.8;
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+        height: 400px;
+        width: 400px;
+        background-color: rgba(255,255,255,0.8);
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content:center ;
+        align-items: center;
+    }
+    .showInfo{
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+        position: absolute;
+        height: 400px;
+        width: 400px;
+        z-index:2;
+        top: 0;
+        right: 0;
+        background-image: url("../../assets/pictures/welcome.png");
+        background-size: 90%;
+    }
+    .showInfo:hover{
+        background-size: 100%;
+        background-position: -50px -50px;
+    }
+    .title{
+        width: 80%;
+        flex:1;
+        border-bottom: 1px solid #E44B9D;
+        display: flex;
+        align-items: center;
+        color: #E44B9D;
+        font-weight: bold;
+        font-size: 24px;
+        display: flex;
+        justify-content: center;
+    }
+    #aaa{
+        transition: 0.3s linear;
+    }
+    .pwdArea{
+        width: 100%;
+        flex:2;
+        display: flex;
+        flex-direction: column;
+        color: #E44B9D;
+        font-size: 20px;
+        font-weight: bold;
+    }
+    .pwdArea input{
+        height: 30px;
+        border-radius:15px ;
+        padding-left: 10px;
+        font-size: 13px;
+        border: 3px solid #EAF2FF;
+        
+        
+    }
+    .pwdArea input:focus{
+
+        border: 2px solid #E44B9D;
+    }
+        .btnArea{
+            flex:1;
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .rigestTitle{
+            width: 70%;
+            flex: 1;
+            color: #E44B9D;
+            font-weight: bold;
+            font-size: 24px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-bottom: 1px solid #E44B9D;
+        }
+        .registForm{
+            flex: 2;
+            display: flex;
+            flex-direction: column;
+            color: #E44B9D;
+            font-size: 20px;
+            font-weight: bold;
+        }
+    
+        .registForm input{
+        outline: none;
+        height: 30px;
+        border-radius:13px ;
+        padding-left: 10px;
+        font-size: 12px;
+        border: 1px solid gray;
+        }
+    .registForm input:focus{
+        border: 2px solid #E44B9D;
+    }
+    #elselect:focus{
+        border: 2px solid #E44B9D;
+    }
+        .registBtn{
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    
+    
+    </style>
+
+
 <script>
+    import 'animate.css';
+    // eslint-disable-next-line no-unused-vars
+    import {Axios as request} from "axios";
 export default {
-    name: 'loginIndex', // 添加组件名称
-    // 其他组件选项
+
+    name:'loginIndex',
+    data(){
+        return{
+            //看看用不用转成用户对象
+            loginUser:{
+                name:"",
+                password:""
+            },
+
+            admins:{},
+            ////看看用不用转成用户对象
+            regUser:{
+                regUsername:'',
+                regRePwd:'',
+                regPwd:'',
+                selectValue:"",
+            },
+            styleObj:{
+                bordertoprightradius:'15px',
+                borderbottomrightradius: '15px',
+                bordertopleftradius:'0px',
+                borderbottomleftradius:'0px',
+                rightDis:'0px'
+            },
+            isShow:true
+        }
+    },
+    methods:{
+        changeToRegiest(){
+            this.styleObj.bordertoprightradius= '0px'
+            this.styleObj.borderbottomrightradius='0px'
+            this.styleObj.bordertopleftradius='15px'
+            this.styleObj.borderbottomleftradius='15px'
+            this.styleObj.rightDis='50%'
+            this.isShow = !this.isShow
+        },
+        changeToLogin(){
+            this.styleObj.bordertoprightradius= '15px'
+            this.styleObj.borderbottomrightradius='15px'
+            this.styleObj.bordertopleftradius='0px'
+            this.styleObj.borderbottomleftradius='0px'
+            this.styleObj.rightDis='0px'
+            this.isShow = !this.isShow
+        },
+        
+         },
 }
+
+
 </script>
\ No newline at end of file