diff --git a/web/public/favicon.ico b/web/public/favicon.ico
index 771c5ceca1682268fd28ab71930b398dda8e8a4e..c49f9b34ff098867d96f29e57b1b6fecfe5bf17c 100644
Binary files a/web/public/favicon.ico and b/web/public/favicon.ico differ
diff --git a/web/src/App.vue b/web/src/App.vue
index 69f7532eda73bf12d8996038df58dceb2b78b1e6..b79771fea1d9379e1fcd32106abc283806acdf92 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -18,5 +18,6 @@ export default {
 #app {
   background: #eee;
   height: 100vh;
+  overflow: hidden;
 }
 </style>
diff --git a/web/src/assets/background.svg b/web/src/assets/background.svg
new file mode 100644
index 0000000000000000000000000000000000000000..89c25976468e10e541efc0da486b945b68b86690
--- /dev/null
+++ b/web/src/assets/background.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="1361px" height="609px" viewBox="0 0 1361 609" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 21</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Ant-Design-Pro-3.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="账户密码登录-校验" transform="translate(-79.000000, -82.000000)">
+            <g id="Group-21" transform="translate(77.000000, 73.000000)">
+                <g id="Group-18" opacity="0.8" transform="translate(74.901416, 569.699158) rotate(-7.000000) translate(-74.901416, -569.699158) translate(4.901416, 525.199158)">
+                    <ellipse id="Oval-11" fill="#CFDAE6" opacity="0.25" cx="63.5748792" cy="32.468367" rx="21.7830479" ry="21.766008"></ellipse>
+                    <ellipse id="Oval-3" fill="#CFDAE6" opacity="0.599999964" cx="5.98746479" cy="13.8668601" rx="5.2173913" ry="5.21330997"></ellipse>
+                    <path d="M38.1354514,88.3520215 C43.8984227,88.3520215 48.570234,83.6838647 48.570234,77.9254015 C48.570234,72.1669383 43.8984227,67.4987816 38.1354514,67.4987816 C32.3724801,67.4987816 27.7006688,72.1669383 27.7006688,77.9254015 C27.7006688,83.6838647 32.3724801,88.3520215 38.1354514,88.3520215 Z" id="Oval-3-Copy" fill="#CFDAE6" opacity="0.45"></path>
+                    <path d="M64.2775582,33.1704963 L119.185836,16.5654915" id="Path-12" stroke="#CFDAE6" stroke-width="1.73913043" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M42.1431708,26.5002681 L7.71190162,14.5640702" id="Path-16" stroke="#E0B4B7" stroke-width="0.702678964" opacity="0.7" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
+                    <path d="M63.9262187,33.521561 L43.6721326,69.3250951" id="Path-15" stroke="#BACAD9" stroke-width="0.702678964" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
+                    <g id="Group-17" transform="translate(126.850922, 13.543654) rotate(30.000000) translate(-126.850922, -13.543654) translate(117.285705, 4.381889)" fill="#CFDAE6">
+                        <ellipse id="Oval-4" opacity="0.45" cx="9.13482653" cy="9.12768076" rx="9.13482653" ry="9.12768076"></ellipse>
+                        <path d="M18.2696531,18.2553615 C18.2696531,13.2142826 14.1798519,9.12768076 9.13482653,9.12768076 C4.08980114,9.12768076 0,13.2142826 0,18.2553615 L18.2696531,18.2553615 Z" id="Oval-4" transform="translate(9.134827, 13.691521) scale(-1, -1) translate(-9.134827, -13.691521) "></path>
+                    </g>
+                </g>
+                <g id="Group-14" transform="translate(216.294700, 123.725600) rotate(-5.000000) translate(-216.294700, -123.725600) translate(106.294700, 35.225600)">
+                    <ellipse id="Oval-2" fill="#CFDAE6" opacity="0.25" cx="29.1176471" cy="29.1402439" rx="29.1176471" ry="29.1402439"></ellipse>
+                    <ellipse id="Oval-2" fill="#CFDAE6" opacity="0.3" cx="29.1176471" cy="29.1402439" rx="21.5686275" ry="21.5853659"></ellipse>
+                    <ellipse id="Oval-2-Copy" stroke="#CFDAE6" opacity="0.4" cx="179.019608" cy="138.146341" rx="23.7254902" ry="23.7439024"></ellipse>
+                    <ellipse id="Oval-2" fill="#BACAD9" opacity="0.5" cx="29.1176471" cy="29.1402439" rx="10.7843137" ry="10.7926829"></ellipse>
+                    <path d="M29.1176471,39.9329268 L29.1176471,18.347561 C23.1616351,18.347561 18.3333333,23.1796097 18.3333333,29.1402439 C18.3333333,35.1008781 23.1616351,39.9329268 29.1176471,39.9329268 Z" id="Oval-2" fill="#BACAD9"></path>
+                    <g id="Group-9" opacity="0.45" transform="translate(172.000000, 131.000000)" fill="#E6A1A6">
+                        <ellipse id="Oval-2-Copy-2" cx="7.01960784" cy="7.14634146" rx="6.47058824" ry="6.47560976"></ellipse>
+                        <path d="M0.549019608,13.6219512 C4.12262681,13.6219512 7.01960784,10.722722 7.01960784,7.14634146 C7.01960784,3.56996095 4.12262681,0.670731707 0.549019608,0.670731707 L0.549019608,13.6219512 Z" id="Oval-2-Copy-2" transform="translate(3.784314, 7.146341) scale(-1, 1) translate(-3.784314, -7.146341) "></path>
+                    </g>
+                    <ellipse id="Oval-10" fill="#CFDAE6" cx="218.382353" cy="138.685976" rx="1.61764706" ry="1.61890244"></ellipse>
+                    <ellipse id="Oval-10-Copy-2" fill="#E0B4B7" opacity="0.35" cx="179.558824" cy="175.381098" rx="1.61764706" ry="1.61890244"></ellipse>
+                    <ellipse id="Oval-10-Copy" fill="#E0B4B7" opacity="0.35" cx="180.098039" cy="102.530488" rx="2.15686275" ry="2.15853659"></ellipse>
+                    <path d="M28.9985381,29.9671598 L171.151018,132.876024" id="Path-11" stroke="#CFDAE6" opacity="0.8"></path>
+                </g>
+                <g id="Group-10" opacity="0.799999952" transform="translate(1054.100635, 36.659317) rotate(-11.000000) translate(-1054.100635, -36.659317) translate(1026.600635, 4.659317)">
+                    <ellipse id="Oval-7" stroke="#CFDAE6" stroke-width="0.941176471" cx="43.8135593" cy="32" rx="11.1864407" ry="11.2941176"></ellipse>
+                    <g id="Group-12" transform="translate(34.596774, 23.111111)" fill="#BACAD9">
+                        <ellipse id="Oval-7" opacity="0.45" cx="9.18534718" cy="8.88888889" rx="8.47457627" ry="8.55614973"></ellipse>
+                        <path d="M9.18534718,17.4450386 C13.8657264,17.4450386 17.6599235,13.6143199 17.6599235,8.88888889 C17.6599235,4.16345787 13.8657264,0.332739156 9.18534718,0.332739156 L9.18534718,17.4450386 Z" id="Oval-7"></path>
+                    </g>
+                    <path d="M34.6597385,24.809694 L5.71666084,4.76878945" id="Path-2" stroke="#CFDAE6" stroke-width="0.941176471"></path>
+                    <ellipse id="Oval" stroke="#CFDAE6" stroke-width="0.941176471" cx="3.26271186" cy="3.29411765" rx="3.26271186" ry="3.29411765"></ellipse>
+                    <ellipse id="Oval-Copy" fill="#F7E1AD" cx="2.79661017" cy="61.1764706" rx="2.79661017" ry="2.82352941"></ellipse>
+                    <path d="M34.6312443,39.2922712 L5.06366663,59.785082" id="Path-10" stroke="#CFDAE6" stroke-width="0.941176471"></path>
+                </g>
+                <g id="Group-19" opacity="0.33" transform="translate(1282.537219, 446.502867) rotate(-10.000000) translate(-1282.537219, -446.502867) translate(1142.537219, 327.502867)">
+                    <g id="Group-17" transform="translate(141.333539, 104.502742) rotate(275.000000) translate(-141.333539, -104.502742) translate(129.333539, 92.502742)" fill="#BACAD9">
+                        <circle id="Oval-4" opacity="0.45" cx="11.6666667" cy="11.6666667" r="11.6666667"></circle>
+                        <path d="M23.3333333,23.3333333 C23.3333333,16.8900113 18.1099887,11.6666667 11.6666667,11.6666667 C5.22334459,11.6666667 0,16.8900113 0,23.3333333 L23.3333333,23.3333333 Z" id="Oval-4" transform="translate(11.666667, 17.500000) scale(-1, -1) translate(-11.666667, -17.500000) "></path>
+                    </g>
+                    <circle id="Oval-5-Copy-6" fill="#CFDAE6" cx="201.833333" cy="87.5" r="5.83333333"></circle>
+                    <path d="M143.5,88.8126685 L155.070501,17.6038544" id="Path-17" stroke="#BACAD9" stroke-width="1.16666667"></path>
+                    <path d="M17.5,37.3333333 L127.466252,97.6449735" id="Path-18" stroke="#BACAD9" stroke-width="1.16666667"></path>
+                    <polyline id="Path-19" stroke="#CFDAE6" stroke-width="1.16666667" points="143.902597 120.302281 174.935455 231.571342 38.5 147.510847 126.366941 110.833333"></polyline>
+                    <path d="M159.833333,99.7453842 L195.416667,89.25" id="Path-20" stroke="#E0B4B7" stroke-width="1.16666667" opacity="0.6"></path>
+                    <path d="M205.333333,82.1372105 L238.719406,36.1666667" id="Path-24" stroke="#BACAD9" stroke-width="1.16666667"></path>
+                    <path d="M266.723424,132.231988 L207.083333,90.4166667" id="Path-25" stroke="#CFDAE6" stroke-width="1.16666667"></path>
+                    <circle id="Oval-5" fill="#C1D1E0" cx="156.916667" cy="8.75" r="8.75"></circle>
+                    <circle id="Oval-5-Copy-3" fill="#C1D1E0" cx="39.0833333" cy="148.75" r="5.25"></circle>
+                    <circle id="Oval-5-Copy-2" fill-opacity="0.6" fill="#D1DEED" cx="8.75" cy="33.25" r="8.75"></circle>
+                    <circle id="Oval-5-Copy-4" fill-opacity="0.6" fill="#D1DEED" cx="243.833333" cy="30.3333333" r="5.83333333"></circle>
+                    <circle id="Oval-5-Copy-5" fill="#E0B4B7" cx="175.583333" cy="232.75" r="5.25"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/web/src/assets/docs.png b/web/src/assets/docs.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb98d6e099fe941de1bd09a8c08a767b219222fa
Binary files /dev/null and b/web/src/assets/docs.png differ
diff --git a/web/src/assets/github.png b/web/src/assets/github.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1d200ed1ad07d3cd7e17ffb7fc8cd23e8fe97d1
Binary files /dev/null and b/web/src/assets/github.png differ
diff --git a/web/src/assets/logo_login.png b/web/src/assets/logo_login.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bf64df8b8270ca9bf0b3eb87cc57656ae4dd612
Binary files /dev/null and b/web/src/assets/logo_login.png differ
diff --git a/web/src/assets/video.png b/web/src/assets/video.png
new file mode 100644
index 0000000000000000000000000000000000000000..af4d35f4d81bd3c156936bdb250124d9824ddf93
Binary files /dev/null and b/web/src/assets/video.png differ
diff --git a/web/src/assets/yuque.png b/web/src/assets/yuque.png
new file mode 100644
index 0000000000000000000000000000000000000000..98a2adabd01f8cea8745d1212904b45afad9e4af
Binary files /dev/null and b/web/src/assets/yuque.png differ
diff --git a/web/src/style/main.scss b/web/src/style/main.scss
index 09bfe405da353a60ea4cac3036963279fdd733a9..dad2c040bf02c41d666199e57707b0ca81d7165a 100644
--- a/web/src/style/main.scss
+++ b/web/src/style/main.scss
@@ -664,11 +664,6 @@ li {
     }
 }
 
-// el-form
-.el-form {
-    background-color: #fff;
-    padding: 10px 0;
-}
 
 .el-row {
     padding: 10px 0;
diff --git a/web/src/view/login/login.vue b/web/src/view/login/login.vue
index e10d53b99c55038c12fd91822477cdacb6f0bba0..2260049a0a79a36b3ef7a64e61b876e92862ad47 100644
--- a/web/src/view/login/login.vue
+++ b/web/src/view/login/login.vue
@@ -1,57 +1,92 @@
 <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')"
-          alt=""
-          srcset=""
-        />
-      </h1>
-      <el-form :model="loginForm" :rules="rules" ref="loginForm" @keyup.enter.native="submitForm">
-        <el-form-item prop="username">
-          <el-input
-            placeholder="请输入用户名"
-            v-model="loginForm.username"
-          ></el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input
-            :type="lock === 'lock' ? 'password' : 'text'"
-            placeholder="请输入密码"
-            v-model="loginForm.password"
-          >
+  <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="loginForm"
+          :rules="rules"
+          ref="loginForm"
+          @keyup.enter.native="submitForm"
+        >
+          <el-form-item prop="username">
+            <el-input
+              placeholder="请输入用户名"
+              v-model="loginForm.username"
+            >
             <i
-              :class="'el-input__icon el-icon-' + lock"
-              @click="changeLock"
-              slot="suffix"
-            ></i>
-          </el-input>
-        </el-form-item>
-        <el-form-item style="position:relative">
-          <el-input
-            v-model="loginForm.captcha"
-            name="logVerify"
-            placeholder="请输入验证码"
-            maxlength="10"
-          />
-          <img
-            v-if="picPath"
-            :src="path + picPath"
-            alt="请输入验证码"
-            @click="loginVefify()"
-            class="vPic"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="submitForm" style="width:100%">登 录</el-button>
-        </el-form-item>
-      </el-form>
-      <h3 class="title-3 fl-right">测试用户:admin 密码:123456</h3>
-    </el-main>
-  </el-container>
+                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="loginForm.password"
+            >
+              <i
+                :class="'el-input__icon el-icon-' + lock"
+                @click="changeLock"
+                slot="suffix"
+              ></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item style="position:relative">
+            <el-input
+              v-model="loginForm.captcha"
+              name="logVerify"
+              placeholder="请输入验证码"
+              style="width:60%"
+            />
+            <div class="vPic">
+              <img
+                v-if="picPath"
+                :src="path + picPath"
+                alt="请输入验证码"
+                @click="loginVefify()"
+              />
+            </div>
+          </el-form-item>
+          <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>
@@ -79,8 +114,8 @@ export default {
     return {
       lock: "lock",
       loginForm: {
-        username: "",
-        password: "",
+        username: "admin",
+        password: "123456",
         captcha: "",
         captchaId: "",
       },
@@ -132,7 +167,6 @@ export default {
 
 <style scoped lang="scss">
 .login-register-box {
-  background: #fff;
   height: 100vh;
   .login-box {
     width: 40vw;
@@ -145,10 +179,122 @@ export default {
       width: 35vh;
     }
   }
-  .vPic {
-    position: absolute;
-    right: 10px;
-    bottom: 0px; // 适配ie
+}
+
+.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%;
+
+  &.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;
+    position: relative;
+
+    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;
+
+      .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>