login页面init页面美化

login页面init页面美化

web/package-lock.json

@@ -9200,6 +9200,7 @@
         "yallist"
       ],
       "dev": true,
+      "hasInstallScript": true,
       "optional": true,
       "dependencies": {
         "nan": "^2.12.1",
@@ -9210,12 +9211,14 @@
       "version": "1.1.1",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fsevents/node_modules/ansi-regex": {
       "version": "2.1.1",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=0.10.0"
@@ -9225,12 +9228,14 @@
       "version": "1.2.0",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fsevents/node_modules/are-we-there-yet": {
       "version": "1.1.5",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "delegates": "^1.0.0",
@@ -9241,12 +9246,14 @@
       "version": "1.0.0",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fsevents/node_modules/brace-expansion": {
       "version": "1.1.11",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -9257,12 +9264,14 @@
       "version": "1.1.1",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fsevents/node_modules/code-point-at": {
       "version": "1.1.0",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=0.10.0"
@@ -9272,24 +9281,28 @@
       "version": "0.0.1",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fsevents/node_modules/console-control-strings": {
       "version": "1.1.0",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fsevents/node_modules/core-util-is": {
       "version": "1.0.2",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fsevents/node_modules/debug": {
       "version": "4.1.1",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "ms": "^2.1.1"
@@ -9299,6 +9312,7 @@
       "version": "0.6.0",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=4.0.0"
@@ -9308,12 +9322,14 @@
       "version": "1.0.0",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fsevents/node_modules/detect-libc": {
       "version": "1.0.3",
       "dev": true,
       "inBundle": true,
+      "license": "Apache-2.0",
       "optional": true,
       "bin": {
         "detect-libc": "bin/detect-libc.js"
@@ -9326,6 +9342,7 @@
       "version": "1.2.5",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "minipass": "^2.2.1"
@@ -9335,12 +9352,14 @@
       "version": "1.0.0",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fsevents/node_modules/gauge": {
       "version": "2.7.4",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "aproba": "^1.0.3",
@@ -9357,6 +9376,7 @@
       "version": "7.1.3",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
@@ -9374,12 +9394,14 @@
       "version": "2.0.1",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fsevents/node_modules/iconv-lite": {
       "version": "0.4.24",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3"
@@ -9392,6 +9414,7 @@
       "version": "3.0.1",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "minimatch": "^3.0.4"
@@ -9401,6 +9424,7 @@
       "version": "1.0.6",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "once": "^1.3.0",
@@ -9411,12 +9435,14 @@
       "version": "2.0.3",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fsevents/node_modules/ini": {
       "version": "1.3.5",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "engines": {
         "node": "*"
@@ -9426,6 +9452,7 @@
       "version": "1.0.0",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "number-is-nan": "^1.0.0"
@@ -9438,12 +9465,14 @@
       "version": "1.0.0",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fsevents/node_modules/minimatch": {
       "version": "3.0.4",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -9456,12 +9485,14 @@
       "version": "0.0.8",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fsevents/node_modules/minipass": {
       "version": "2.3.5",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "safe-buffer": "^5.1.2",
@@ -9472,6 +9503,7 @@
       "version": "1.2.1",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "minipass": "^2.2.1"
@@ -9481,6 +9513,7 @@
       "version": "0.5.1",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "minimist": "0.0.8"
@@ -9493,12 +9526,14 @@
       "version": "2.1.1",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fsevents/node_modules/needle": {
       "version": "2.3.0",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "debug": "^4.1.0",
@@ -9516,6 +9551,7 @@
       "version": "0.12.0",
       "dev": true,
       "inBundle": true,
+      "license": "BSD-3-Clause",
       "optional": true,
       "dependencies": {
         "detect-libc": "^1.0.2",
@@ -9537,6 +9573,7 @@
       "version": "4.0.1",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "abbrev": "1",
@@ -9550,12 +9587,14 @@
       "version": "1.0.6",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fsevents/node_modules/npm-packlist": {
       "version": "1.4.1",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "ignore-walk": "^3.0.1",
@@ -9566,6 +9605,7 @@
       "version": "4.1.2",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "are-we-there-yet": "~1.1.2",
@@ -9578,6 +9618,7 @@
       "version": "1.0.1",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=0.10.0"
@@ -9587,6 +9628,7 @@
       "version": "4.1.1",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=0.10.0"
@@ -9596,6 +9638,7 @@
       "version": "1.4.0",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "wrappy": "1"
@@ -9605,6 +9648,7 @@
       "version": "1.0.2",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=0.10.0"
@@ -9614,6 +9658,7 @@
       "version": "1.0.2",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=0.10.0"
@@ -9623,6 +9668,7 @@
       "version": "0.1.5",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "os-homedir": "^1.0.0",
@@ -9633,6 +9679,7 @@
       "version": "1.0.1",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=0.10.0"
@@ -9642,12 +9689,14 @@
       "version": "2.0.0",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fsevents/node_modules/rc": {
       "version": "1.2.8",
       "dev": true,
       "inBundle": true,
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
       "optional": true,
       "dependencies": {
         "deep-extend": "^0.6.0",
@@ -9663,12 +9712,14 @@
       "version": "1.2.0",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fsevents/node_modules/readable-stream": {
       "version": "2.3.6",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
@@ -9684,6 +9735,7 @@
       "version": "2.6.3",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "glob": "^7.1.3"
@@ -9696,24 +9748,28 @@
       "version": "5.1.2",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fsevents/node_modules/safer-buffer": {
       "version": "2.1.2",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fsevents/node_modules/sax": {
       "version": "1.2.4",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fsevents/node_modules/semver": {
       "version": "5.7.0",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "bin": {
         "semver": "bin/semver"
@@ -9723,18 +9779,21 @@
       "version": "2.0.0",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fsevents/node_modules/signal-exit": {
       "version": "3.0.2",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fsevents/node_modules/string_decoder": {
       "version": "1.1.1",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "safe-buffer": "~5.1.0"
@@ -9744,6 +9803,7 @@
       "version": "1.0.2",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "code-point-at": "^1.0.0",
@@ -9758,6 +9818,7 @@
       "version": "3.0.1",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "ansi-regex": "^2.0.0"
@@ -9770,6 +9831,7 @@
       "version": "2.0.1",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=0.10.0"
@@ -9779,6 +9841,7 @@
       "version": "4.4.8",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "chownr": "^1.1.1",
@@ -9797,12 +9860,14 @@
       "version": "1.0.2",
       "dev": true,
       "inBundle": true,
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fsevents/node_modules/wide-align": {
       "version": "1.1.3",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "string-width": "^1.0.2 || 2"
@@ -9812,12 +9877,14 @@
       "version": "1.0.2",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fsevents/node_modules/yallist": {
       "version": "3.0.3",
       "dev": true,
       "inBundle": true,
+      "license": "ISC",
       "optional": true
     },
     "node_modules/fstream": {
@@ -12550,6 +12617,7 @@
       "resolved": "https://registry.npm.taobao.org/node-sass/download/node-sass-4.14.1.tgz?cache=0&sync_timestamp=1588635768384&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-sass%2Fdownload%2Fnode-sass-4.14.1.tgz",
       "integrity": "sha1-mch+wu+3BH7WOPtMnbfzpC4iF7U=",
       "dev": true,
+      "hasInstallScript": true,
       "dependencies": {
         "async-foreach": "^0.1.3",
         "chalk": "^1.1.1",

web/src/assets/login_background.svg

+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 1400 800">
+
+  <rect x="1300" y="400" rx="40" ry="40" width="150" height="150" stroke="rgb(129, 201, 149)" fill="rgb(129, 201, 149)">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 1450 550" to="360 1450 550" repeatCount="indefinite"/>
+  </rect>
+
+  <path d="M 100 350 A 150 150 0 1 1 400 350 Q400 370 380 370 L 250 370 L 120 370 Q100 370 100 350" fill="#a2b3ff">
+    <animateMotion path="M 800 -200 L 800 -300 L 800 -200" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 210 530 ; -30 210 530 ; 0 210 530" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <circle cx="150" cy="150" r="180" stroke="#85FFBD" fill="#85FFBD">
+    <animateMotion path="M 0 0 L 40 20 Z" dur="5s" repeatCount="indefinite"/>
+  </circle>
+
+  <!-- 三角形 -->
+  <path d="M 165 580 L 270 580 Q275 578 270 570 L 223 483 Q220 480 217 483 L 165 570 Q160 578 165 580"  fill="#a2b3ff">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="0 210 530" to="360 210 530" repeatCount="indefinite"/>
+  </path>
+
+<!--  <circle cx="1200" cy="600" r="30" stroke="rgb(241, 243, 244)" fill="rgb(241, 243, 244)">-->
+<!--    <animateMotion path="M 0 0 L -20 40 Z" dur="9s" repeatCount="indefinite"/>-->
+<!--  </circle>-->
+
+  <path d="M 100 350 A 40 40 0 1 1 180 350 L 180 430 A 40 40 0 1 1 100 430 Z" fill="#3054EB">
+    <animateMotion path="M 140 390 L 180 360 L 140 390" dur="20s" begin="0s" repeatCount="indefinite"/>
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="30s" type="rotate" values="0 140 390; -60 140 390; 0 140 390" keyTimes="0 ; 0.5 ; 1" repeatCount="indefinite"/>
+  </path>
+
+  <rect x="400" y="600" rx="40" ry="40" width="100" height="100" stroke="rgb(129, 201, 149)" fill="#3054EB">
+    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="35s" type="rotate" from="-30 550 750" to="330 550 750" repeatCount="indefinite"/>
+  </rect>
+</svg>
\ No newline at end of file

web/src/router/index.js

@@ -18,12 +18,12 @@ const baseRouters = [
   {
     path: '/init',
     name: 'Init',
-    component: () => import('@/view/init/init')
+    component: () => import('@/view/init/index')
   },
   {
     path: '/login',
     name: 'Login',
-    component: () => import('@/view/login/login')
+    component: () => import('@/view/login/index')
   }
 ]
 

web/src/style/newLogin.scss

+#userLayout{
+  margin: 0;
+  padding: 0;
+  background-image: url("~@/assets/login_background.svg");
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .login_panle{
+    position: absolute;
+    top: 3vh;
+    left: 2vw;
+    width: 96vw;
+    height: 94vh;
+    background-color: rgba(255,255,255,.8);
+    backdrop-filter: blur(5px);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    .login_panle_right{
+      background-image: url("~@/assets/login_left.svg");
+      background-size: cover;
+      width: 40%;
+      height: 60%;
+      float: right !important;
+    }
+    .login_panle_form{
+      width: 420px;
+      background-color: #fff;
+      padding: 40px 40px 40px 40px;
+      border-radius: 10px;
+      box-shadow: 2px 3px 7px  rgba(0,0,0,.2);
+      .login_panle_form_title{
+
+        display: flex;
+        align-items: center;
+        margin: 30px 0;
+
+        .login_panle_form_title_logo{
+          width: 90px;
+          height: 72px;
+        }
+        .login_panle_form_title_p{
+          font-size: 40px;
+
+          padding-left: 20px ;
+        }
+      }
+      .vPic {
+        width: 33%;
+        height: 38px;
+        float: right !important;
+        background: #ccc;
+        img {
+          cursor: pointer;
+          vertical-align: middle;
+        }
+      }
+    }
+    .login_panle_foot{
+      position: absolute;
+      bottom: 20px;
+      .links{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .link-icon{
+          width: 30px;
+          height: 30px;
+        }
+      }
+      .copyright{
+        color: #777777;
+        margin-top: 5px;
+      }
+    }
+  }
+}
+//小屏幕不显示右侧，将登陆框居中
+@media (max-width: 750px) {
+  .login_panle_right{
+    display: none;
+  }
+  .login_panle{
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+  }
+  .login_panle_form{
+    width: 100%;
+  }
+}
+
+/*
+  powerBy : bypanghu@163.com
+*/
\ No newline at end of file

web/src/view/init/index.vue

+<template>
+  <div class="init_page">
+    <div class="init_page_panle">
+      <div v-if="hello < 2" id="hello" :class="[hello < 1 ? 'slide-in-fwd-top' : 'slide-out-right']" class="hello  " @click="showNext">
+        <div>
+          <div class="hello_title">GIN-VUE-ADMIN</div>
+          <p class="in-two a-fadeinT">您需要初始化您的数据库并且填充初始数据</p>
+          <p class="init_p">点击进入初始化</p>
+        </div>
+      </div>
+      <div v-if="hello > 0 " :class="[(hello > 0 && !out)? 'slide-in-left' : '' , out ? 'slide-out-right' : '']" class=" form">
+        <el-form ref="form" :model="form" label-width="100px">
+          <el-form-item label="数据库类型">
+            <el-select v-model="form.sqlType" disabled placeholder="请选择">
+              <el-option key="mysql" label="mysql(目前只支持mysql)" value="mysql" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="host">
+            <el-input v-model="form.host" placeholder="请输入数据库链接" />
+          </el-form-item>
+          <el-form-item label="port">
+            <el-input v-model="form.port" placeholder="请输入数据库端口" />
+          </el-form-item>
+          <el-form-item label="userName">
+            <el-input v-model="form.userName" placeholder="请输入数据库用户名" />
+          </el-form-item>
+          <el-form-item label="password">
+            <el-input
+              v-model="form.password"
+              placeholder="请输入数据库密码（没有则为空）"
+            />
+          </el-form-item>
+          <el-form-item label="dbName">
+            <el-input v-model="form.dbName" placeholder="请输入数据库名称" />
+          </el-form-item>
+          <el-form-item>
+            <div style="text-align: right">
+              <el-button type="primary" @click="onSubmit">立即初始化</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { initDB } from '@/api/initdb'
+export default {
+  name: 'Init',
+  data() {
+    return {
+      hello: 0,
+      out: false,
+      form: {
+        sqlType: 'mysql',
+        host: '127.0.0.1',
+        port: '3306',
+        userName: 'root',
+        password: '',
+        dbName: 'gva'
+      }
+    }
+  },
+  created() {
+    // setInterval(() => {
+    //   if (this.hello < 3) {
+    //     this.hello = this.hello + 1
+    //   }
+    // }, 2000)
+  },
+  methods: {
+    showNext() {
+      this.hello = this.hello + 1
+      console.log(this.hello)
+    },
+    async onSubmit() {
+      this.out = true
+      const loading = this.$loading({
+        lock: true,
+        text: '正在初始化数据库，请稍候',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      try {
+        const res = await initDB(this.form)
+        if (res.code === 0) {
+          this.$message({
+            type: 'success',
+            message: res.msg
+          })
+          this.$router.push({ name: 'Login' })
+        }
+        loading.close()
+      } catch (err) {
+        loading.close()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.init_page{
+  margin: 0;
+  padding: 0;
+  background-image: url("~@/assets/login_background.svg");
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  .init_page_panle{
+    position: absolute;
+    top: 3vh;
+    left: 2vw;
+    width: 96vw;
+    height: 94vh;
+    background-color: rgba(255,255,255,.8);
+    backdrop-filter: blur(5px);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    .hello{
+      position: absolute;
+      z-index: 2;
+      text-align: center;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      .hello_title{
+        font-size: 32px;
+        line-height: 98px;
+      }
+      .in-two{
+        font-size: 22px;
+      }
+      .init_p{
+        margin-top: 20px;
+        color: #777777;
+      }
+    }
+    .form{
+      position: absolute;
+      z-index: 3;
+      margin-top: 60px;
+      width: 600px;
+      height: auto;
+      padding: 20px;
+      border-radius: 6px;
+    }
+  }
+}
+
+.slide-in-fwd-top {
+  -webkit-animation: slide-in-fwd-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  animation: slide-in-fwd-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+.slide-out-right {
+  -webkit-animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+  animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+}
+.slide-in-left {
+  -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+@-webkit-keyframes slide-in-fwd-top {
+  0% {
+    -webkit-transform: translateZ(-1400px) translateY(-800px);
+    transform: translateZ(-1400px) translateY(-800px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateZ(0) translateY(0);
+    transform: translateZ(0) translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slide-in-fwd-top {
+  0% {
+    -webkit-transform: translateZ(-1400px) translateY(-800px);
+    transform: translateZ(-1400px) translateY(-800px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateZ(0) translateY(0);
+    transform: translateZ(0) translateY(0);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes slide-out-right {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateX(1000px);
+    transform: translateX(1000px);
+    opacity: 0;
+  }
+}
+@keyframes slide-out-right {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateX(1000px);
+    transform: translateX(1000px);
+    opacity: 0;
+  }
+}
+@-webkit-keyframes slide-in-left {
+  0% {
+    -webkit-transform: translateX(-1000px);
+    transform: translateX(-1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes slide-in-left {
+  0% {
+    -webkit-transform: translateX(-1000px);
+    transform: translateX(-1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@media (max-width: 750px) {
+  .form{
+    width: 94vw !important;
+    padding: 0;
+  }
+}
+
+</style>

web/src/view/login/index.vue

+<template>
+  <div id="userLayout">
+    <div class="login_panle">
+      <div class="login_panle_form">
+        <div class="login_panle_form_title">
+          <img class="login_panle_form_title_logo" src="@/assets/logo_login.png" alt=""><p class="login_panle_form_title_p">GIN-VUE-ADMIN</p>
+        </div>
+        <el-form
+          ref="loginForm"
+          :model="loginForm"
+          :rules="rules"
+          @keyup.enter.native="submitForm"
+        >
+          <el-form-item prop="username">
+            <el-input v-model="loginForm.username" placeholder="请输入用户名">
+              <i slot="suffix" class="el-input__icon el-icon-user" />
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              v-model="loginForm.password"
+              :type="lock === 'lock' ? 'password' : 'text'"
+              placeholder="请输入密码"
+            >
+              <i
+                slot="suffix"
+                :class="'el-input__icon el-icon-' + lock"
+                @click="changeLock"
+              />
+            </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="picPath"
+                width="100%"
+                height="100%"
+                alt="请输入验证码"
+                @click="loginVerify()"
+              >
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              style="width: 100%"
+              @click="submitForm"
+            >登 录</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="login_panle_right" />
+      <div class="login_panle_foot">
+        <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; {{ curYear }} 💖 flipped-aurora</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+import { captcha } from '@/api/user'
+export default {
+  name: 'Login',
+  data() {
+    const checkUsername = (rule, value, callback) => {
+      if (value.length < 5) {
+        return callback(new Error('请输入正确的用户名'))
+      } else {
+        callback()
+      }
+    }
+    const checkPassword = (rule, value, callback) => {
+      if (value.length < 6) {
+        return callback(new Error('请输入正确的密码'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      curYear: 0,
+      lock: 'lock',
+      loginForm: {
+        username: 'admin',
+        password: '123456',
+        captcha: '',
+        captchaId: ''
+      },
+      rules: {
+        username: [{ validator: checkUsername, trigger: 'blur' }],
+        password: [{ validator: checkPassword, trigger: 'blur' }]
+      },
+      logVerify: '',
+      picPath: ''
+    }
+  },
+  created() {
+    this.loginVerify()
+    this.curYear = new Date().getFullYear()
+  },
+  methods: {
+    ...mapActions('user', ['LoginIn']),
+    async login() {
+      return await this.LoginIn(this.loginForm)
+    },
+    async submitForm() {
+      this.$refs.loginForm.validate(async(v) => {
+        if (v) {
+          const flag = await this.login()
+          if (!flag) {
+            this.loginVerify()
+          }
+        } else {
+          this.$message({
+            type: 'error',
+            message: '请正确填写登录信息',
+            showClose: true
+          })
+          this.loginVerify()
+          return false
+        }
+      })
+    },
+    changeLock() {
+      this.lock = this.lock === 'lock' ? 'unlock' : 'lock'
+    },
+    loginVerify() {
+      captcha({}).then((ele) => {
+        this.picPath = ele.data.picPath
+        this.loginForm.captchaId = ele.data.captchaId
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/newLogin.scss";
+</style>