登录界面美化

web/src/view/login/login.vue

@@ -204,7 +204,7 @@ export default {
 
 #userLayout.user-layout-wrapper {
   height: 100%;
-
+  position: relative;
   &.mobile {
     .container {
       .main {
@@ -220,15 +220,12 @@ export default {
     background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
     background-size: 100%;
     padding: 110px 0 144px;
-    position: relative;
-
     a {
       text-decoration: none;
     }
 
     .top {
       text-align: center;
-
       .header {
         height: 44px;
         line-height: 44px;
@@ -278,7 +275,7 @@ export default {
       padding: 0 16px;
       margin: 120px 0 24px;
       text-align: center;
-
+      bottom: 100px;
       .links {
         margin-bottom: 8px;
         font-size: 14px;

web/src/view/login/register.vue

@@ -1,24 +1,48 @@
 <template>
-  <el-container class="login-register-box">
-    <vue-particle-line></vue-particle-line>
-    <el-main class="login-box">
-      <h1 class="title-1">
-        <img class="logo" :src="require('@/assets/logo.png')">
-      </h1>
-      <el-form :model="registerForm" :rules="rules" ref="registerForm">
-        <el-form-item prop="username">
-          <el-input placeholder="请输入用户名" v-model="registerForm.username"></el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input
-            :type="lock==='lock'?'password':'text'"
-            placeholder="请输入密码"
-            v-model="registerForm.password"
-          >
-            <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="rePassword">
+  <div id="userLayout" class="user-layout-wrapper">
+    <div class="container">
+      <div class="top">
+        <div class="desc">
+          <img class="logo_login" src="@/assets/logo_login.png" alt="" />
+        </div>
+        <div class="header">
+          <a href="/">
+            <!-- <img src="~@/assets/logo.png" class="logo" alt="logo" /> -->
+            <span class="title">Gin-Vue-Admin</span>
+          </a>
+        </div>
+      </div>
+      <div class="main">
+        <el-form
+          :model="registerForm"
+          :rules="rules"
+          ref="registerForm"
+          @keyup.enter.native="submitForm"
+        >
+          <el-form-item prop="username">
+            <el-input
+              placeholder="请输入用户名"
+              v-model="registerForm.username"
+            >
+            <i
+                class="el-input__icon el-icon-user"
+                slot="suffix"
+              ></i></el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              :type="lock === 'lock' ? 'password' : 'text'"
+              placeholder="请输入密码"
+              v-model="registerForm.password"
+            >
+              <i
+                :class="'el-input__icon el-icon-' + lock"
+                @click="changeLock"
+                slot="suffix"
+              ></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="rePassword" style="position:relative">
           <el-input
             :type="lock==='lock'?'password':'text'"
             placeholder="请再次输入密码"
@@ -27,12 +51,36 @@
             <i :class="'el-input__icon el-icon-' + lock" @click="changeLock" slot="suffix"></i>
           </el-input>
         </el-form-item>
-        <el-form-item>
-          <el-button @click="submitForm" style="width:100%">注 册</el-button>
-        </el-form-item>
-      </el-form>
-    </el-main>
-  </el-container>
+        
+          <el-form-item>
+            <el-button type="primary" @click="submitForm" style="width:100%"
+              >注 册</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="footer">
+        <div class="links">
+          <a href="http://doc.henrongyi.top/"
+            ><img src="@/assets/docs.png" class="link-icon"
+          /></a>
+          <a href="https://www.yuque.com/flipped-aurora/"
+            ><img src="@/assets/yuque.png" class="link-icon"
+          /></a>
+          <a href="https://github.com/flipped-aurora/gin-vue-admin"
+            ><img src="@/assets/github.png" class="link-icon"
+          /></a>
+          <a href="https://space.bilibili.com/322210472"
+            ><img src="@/assets/video.png" class="link-icon"
+          /></a>
+        </div>
+        <div class="copyright">
+          Copyright &copy; 2020 💖flipped-aurora
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -110,18 +158,131 @@ export default {
 
 <style scoped lang="scss">
 .login-register-box {
-  background: #fff;
   height: 100vh;
   .login-box {
     width: 40vw;
     position: absolute;
     left: 50%;
     margin-left: -22vw;
-    top:5vh;
-    .logo{
+    top: 5vh;
+    .logo {
       height: 35vh;
       width: 35vh;
     }
   }
 }
+
+.link-icon {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 10px;
+}
+
+.vPic {
+  width: 33%;
+  height: 38px;
+  float: right !important;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+
+.logo_login {
+  width: 100px;
+}
+
+#userLayout.user-layout-wrapper {
+  height: 100%;
+  position: relative;
+  &.mobile {
+    .container {
+      .main {
+        max-width: 368px;
+        width: 98%;
+      }
+    }
+  }
+
+  .container {
+    width: 100%;
+    min-height: 100%;
+    background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
+    background-size: 100%;
+    padding: 110px 0 144px;
+    a {
+      text-decoration: none;
+    }
+
+    .top {
+      text-align: center;
+      .header {
+        height: 44px;
+        line-height: 44px;
+        margin-bottom: 30px;
+        .badge {
+          position: absolute;
+          display: inline-block;
+          line-height: 1;
+          vertical-align: middle;
+          margin-left: -12px;
+          margin-top: -10px;
+          opacity: 0.8;
+        }
+
+        .logo {
+          height: 44px;
+          vertical-align: top;
+          margin-right: 16px;
+          border-style: none;
+        }
+
+        .title {
+          font-size: 33px;
+          color: rgba(0, 0, 0, 0.85);
+          font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
+          font-weight: 600;
+          position: relative;
+          top: 2px;
+        }
+      }
+      .desc {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.45);
+        margin-top: 12px;
+      }
+    }
+
+    .main {
+      min-width: 260px;
+      width: 368px;
+      margin: 0 auto;
+    }
+
+    .footer {
+      position: absolute;
+      width: 100%;
+      padding: 0 16px;
+      margin: 120px 0 24px;
+      text-align: center;
+      bottom: 100px;
+      .links {
+        margin-bottom: 8px;
+        font-size: 14px;
+        a {
+          color: rgba(0, 0, 0, 0.45);
+          transition: all 0.3s;
+          &:not(:last-child) {
+            margin-right: 80px;
+          }
+        }
+      }
+      .copyright {
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 14px;
+      }
+    }
+  }
+}
 </style>