diff --git a/src/assets/imgs/login-bkg.png b/src/assets/imgs/login-bkg.png
new file mode 100644
index 0000000..8d1190f
Binary files /dev/null and b/src/assets/imgs/login-bkg.png differ
diff --git a/src/assets/imgs/login-img1.png b/src/assets/imgs/login-img1.png
new file mode 100644
index 0000000..9c03ff4
Binary files /dev/null and b/src/assets/imgs/login-img1.png differ
diff --git a/src/assets/imgs/login-title.png b/src/assets/imgs/login-title.png
new file mode 100644
index 0000000..c178069
Binary files /dev/null and b/src/assets/imgs/login-title.png differ
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index be03803..e326d23 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,266 +1,369 @@
 <template>
   <div class="login-container" v-if="showLogin">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
-      label-position="left">
-
+    <div ref="formContainer" class="form-container">
       <div class="title-container">
-        <h3 class="title">内控业务管理系统</h3>
+        <img :src="require('@/assets/imgs/login-title.png')" alt="" />
       </div>
 
-      <el-form-item prop="username">
-        <span class="svg-container">
-          <svg-icon icon-class="user" />
-        </span>
-        <el-input ref="username" v-model="loginForm.username" placeholder="请输入账号" name="username" type="text"
-          tabindex="1" auto-complete="off" />
-      </el-form-item>
+      <div
+        style="
+          display: flex;
+          justify-content: space-between;
+          padding: 0 41px 0 104px;
+          margin-top: 57px;
+        "
+      >
+        <div class="left">
+          <img :src="require('@/assets/imgs/login-img1.png')" alt="" />
+        </div>
+        <div class="right">
+          <el-form
+            ref="loginForm"
+            :model="loginForm"
+            :rules="loginRules"
+            class="login-form"
+            auto-complete="on"
+            label-position="left"
+          >
+            <el-form-item class="form-item" prop="username">
+              <span class="svg-container">
+                <svg-icon icon-class="user" />
+              </span>
+              <el-input
+                ref="username"
+                v-model="loginForm.username"
+                placeholder="请输入账号"
+                name="username"
+                type="text"
+                tabindex="1"
+                auto-complete="off"
+              />
+            </el-form-item>
 
-      <el-form-item prop="password">
-        <span class="svg-container">
-          <svg-icon icon-class="password" />
-        </span>
-        <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
-          placeholder="请输入密码" name="password" tabindex="2" auto-complete="off" @keyup.enter.native="handleLogin" />
-        <!-- <span class="show-pwd" @click="showPwd">
-          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-        </span> -->
-      </el-form-item>
+            <el-form-item class="form-item" prop="password">
+              <span class="svg-container">
+                <svg-icon icon-class="password" />
+              </span>
+              <el-input
+                :key="passwordType"
+                ref="password"
+                v-model="loginForm.password"
+                :type="passwordType"
+                placeholder="请输入密码"
+                name="password"
+                tabindex="2"
+                auto-complete="off"
+                @keyup.enter.native="handleLogin"
+              />
+            </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
-        @click.native.prevent="handleLogin">登录</el-button>
+            <el-checkbox size="large" style="margin-top: 18px;zoom: 1.3;" v-model="isRemember">记住密码</el-checkbox>
 
-    </el-form>
+            <el-button
+              :loading="loading"
+              type="primary"
+              round
+              style="
+                margin-top: 35px;
+                font-size: 18px;
+                letter-spacing: 3px;
+                border-radius: 50px;
+                height: 50px;
+                width: 100%;
+                background-color: #3d7af6;
+                filter: drop-shadow(0px 4px 9px rgba(72, 93, 237, 0.63));
+              "
+              @click.native.prevent="handleLogin"
+              >登录</el-button
+            >
+          </el-form>
+        </div>
+      </div>
+    </div>
   </div>
   <div v-else class="login-container-w"></div>
 </template>
 
 <script>
-  import {
-    validUsername
-  } from '@/utils/validate'
-
-  export default {
-    name: 'Login',
-    data() {
-      const validateUsername = (rule, value, callback) => {
-        if (false) {
-          callback(new Error('请正确输入登录名'))
-        } else {
-          callback()
-        }
+import drawMixin from "@/views/login/mixin/drawMixin";
+import { validUsername } from "@/utils/validate";
+import Cookies from "js-cookie";
+export default {
+  mixins: [drawMixin],
+  name: "Login",
+  data() {
+    const validateUsername = (rule, value, callback) => {
+      if (false) {
+        callback(new Error("请正确输入登录名"));
+      } else {
+        callback();
       }
-      const validatePassword = (rule, value, callback) => {
-        if (false) {
-          callback(new Error('请正确输入密码'))
-        } else {
-          callback()
-        }
+    };
+    const validatePassword = (rule, value, callback) => {
+      if (false) {
+        callback(new Error("请正确输入密码"));
+      } else {
+        callback();
       }
-      return {
-        showLogin: false,
-        loginForm: {
-          username: '',
-          password: ''
-        },
-        loginRules: {
-          username: [{
+    };
+    return {
+      isRemember: false,
+      showLogin: false,
+      loginForm: {
+        username: "",
+        password: "",
+      },
+      loginRules: {
+        username: [
+          {
             required: true,
-            trigger: 'blur',
-            validator: validateUsername
-          }],
-          password: [{
+            trigger: "blur",
+            validator: validateUsername,
+          },
+        ],
+        password: [
+          {
             required: true,
-            trigger: 'blur',
-            validator: validatePassword
-          }]
-        },
-        loading: false,
-        passwordType: 'password',
-        redirect: undefined
-      }
-    },
-    beforeCreate() {
-
-    },
-    created() {
-      var query = this.$route.query;
-      if (query.tp) {
-        this.showLogin = false;
-      } else {
-        this.showLogin = true;
-      }
-      if (query.token && query.userid && query.tp) {
-        this.loading = true
-        this.$store.dispatch('user/loginskip', {
+            trigger: "blur",
+            validator: validatePassword,
+          },
+        ],
+      },
+      loading: false,
+      passwordType: "password",
+      redirect: undefined,
+    };
+  },
+  beforeCreate() {},
+  created() {
+    var query = this.$route.query;
+    if (query.tp) {
+      this.showLogin = false;
+    } else {
+      this.showLogin = true;
+    }
+    if (query.token && query.userid && query.tp) {
+      this.loading = true;
+      this.$store
+        .dispatch("user/loginskip", {
           token: query.token,
-          tp: query.tp
-        }).then(() => {
+          tp: query.tp,
+        })
+        .then(() => {
           this.$router.push({
-            path: "/"
-          })
-          this.loading = false
-        }).catch((error) => {
-          console.log(error)
-          this.loading = false
+            path: "/",
+          });
+          this.loading = false;
         })
+        .catch((error) => {
+          console.log(error);
+          this.loading = false;
+        });
+    }
+
+    let lgifStr = Cookies.get('lgif')
+    if (lgifStr) {
+      try {
+        this.isRemember = true;
+        this.loginForm = JSON.parse(window.atob(lgifStr))
+      } catch (e) {
+        this.loginForm = {
+          username: "",
+          password: "",
+        }
       }
+
+    }
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
     },
-    watch: {
-      $route: {
-        handler: function(route) {
-          this.redirect = route.query && route.query.redirect
-        },
-        immediate: true
+  },
+  methods: {
+    showPwd() {
+      if (this.passwordType === "password") {
+        this.passwordType = "";
+      } else {
+        this.passwordType = "password";
       }
+      this.$nextTick(() => {
+        this.$refs.password.focus();
+      });
     },
-    methods: {
-      showPwd() {
-        if (this.passwordType === 'password') {
-          this.passwordType = ''
-        } else {
-          this.passwordType = 'password'
-        }
-        this.$nextTick(() => {
-          this.$refs.password.focus()
-        })
-      },
-      handleLogin() {
-        this.$refs.loginForm.validate(valid => {
-          if (valid) {
-            this.loading = true
-            this.$store.dispatch('user/login', this.loginForm).then(() => {
-              console.log(this.redirect)
+    handleLogin() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          this.$store
+            .dispatch("user/login", this.loginForm)
+            .then(() => {
+              console.log(this.redirect);
+              if (this.isRemember) {
+                Cookies.set('lgif',window.btoa(JSON.stringify(this.loginForm)))
+              } else {
+                Cookies.remove('lgif')
+              }
               this.$router.push({
-                path: this.redirect || '/'
-              })
-              this.loading = false
-            }).catch(() => {
-              this.loading = false
+                path: this.redirect || "/",
+              });
+              this.loading = false;
             })
-          } else {
-            console.log('error submit!!')
-            return false
-          }
-        })
-      }
-    }
-  }
+            .catch(() => {
+              this.loading = false;
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-  /* 修复input 背景不协调 和光标变色 */
-  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-  $bg:#283443;
-  $light_gray:#fff;
-  $cursor: #fff;
+$bg: #283443;
+$light_gray: #fff;
+$cursor: #fff;
 
-  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
-    .login-container .el-input input {
-      color: $cursor;
-    }
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
   }
+}
 
-  /* reset element-ui css */
-  .login-container {
-    .el-input {
-      display: inline-block;
-      height: 47px;
-      width: 85%;
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 70%;
 
-      input {
-        background: transparent;
-        border: 0px;
-        -webkit-appearance: none;
-        border-radius: 0px;
-        padding: 12px 5px 12px 15px;
-        color: $light_gray;
-        height: 47px;
-        caret-color: $cursor;
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: #666;
+      height: 47px;
+      caret-color: $cursor;
 
-        &:-webkit-autofill {
-          box-shadow: 0 0 0px 1000px $bg inset !important;
-          -webkit-text-fill-color: $cursor !important;
-        }
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
       }
     }
+  }
 
-    .el-form-item {
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      background: rgba(0, 0, 0, 0.1);
-      border-radius: 5px;
-      color: #454545;
-    }
+  .el-form-item {
+    color: #0003;
+    font-size: 16px;
+    line-height: 24px;
+    border-radius: 6px;
+    background-color: #ffffff;
+    border: 1px solid #d9d9d9;
   }
+}
 </style>
 
 <style lang="scss" scoped>
-  $bg:#2d3a4b;
-  $dark_gray:#889aa4;
-  $light_gray:#eee;
+::v-deep .el-checkbox__inner {}
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
 
-  .login-container-w {
-    min-height: 100%;
-    width: 100%;
-    background-color: #ffffff;
-    overflow: hidden;
-  }
+.login-container-w {
+  min-height: 100%;
+  width: 100%;
+  background-color: #ffffff;
+  overflow: hidden;
+}
 
-  .login-container {
-    min-height: 100%;
-    width: 100%;
-    background-color: $bg;
-    overflow: hidden;
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  background: url("../../assets/imgs/login-bkg.png") no-repeat;
+  background-size: cover;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    .login-form {
-      position: relative;
-      width: 520px;
-      max-width: 100%;
-      padding: 160px 35px 0;
-      margin: 0 auto;
-      overflow: hidden;
-    }
 
-    .tips {
-      font-size: 14px;
-      color: #fff;
-      margin-bottom: 10px;
+  .form-container {
+    width: 930px;
+    max-width: 100vw;
+    background: #fff;
+    border-radius: 14px;
+    padding-bottom: 53px;
+    filter: drop-shadow(0px 5px 24.5px rgba(74, 113, 240, 0.23));
 
-      span {
-        &:first-of-type {
-          margin-right: 16px;
-        }
-      }
-    }
 
-    .svg-container {
-      padding: 6px 5px 6px 15px;
-      color: $dark_gray;
-      vertical-align: middle;
-      width: 30px;
-      display: inline-block;
+    .left {
+      img {
+        width: 310px;
+      }
     }
+  }
 
-    .title-container {
-      position: relative;
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
 
-      .title {
-        font-size: 26px;
-        color: $light_gray;
-        margin: 0px auto 40px auto;
-        text-align: center;
-        font-weight: bold;
+    span {
+      &:first-of-type {
+        margin-right: 16px;
       }
     }
+  }
+
+  .form-item {
+    width: 361px;
+    height: 51px;
 
-    .show-pwd {
-      position: absolute;
-      right: 10px;
-      top: 7px;
-      font-size: 16px;
-      color: $dark_gray;
-      cursor: pointer;
-      user-select: none;
+    margin-bottom: 0;
+
+  }
+  .svg-container {
+    padding: 6px 0;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 25px;
+    display: inline-block;
+
+    margin-left: 15px;
+  }
+
+  .title-container {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    margin-top: 85px;
+    img {
+      width: 754px;
     }
   }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+}
+.form-item + .form-item {
+  margin-top: 18px;
+}
 </style>
diff --git a/src/views/login/mixin/drawMixin.js b/src/views/login/mixin/drawMixin.js
new file mode 100644
index 0000000..3f4d227
--- /dev/null
+++ b/src/views/login/mixin/drawMixin.js
@@ -0,0 +1,57 @@
+// 屏幕适配 mixin 函数
+
+// * 默认缩放值
+const scale = {
+  width: '1',
+  height: '1',
+}
+
+// * 设计稿尺寸（px）
+const baseWidth = 1920
+const baseHeight = 1080
+
+// * 需保持的比例（默认1.77778）
+const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+
+export default {
+  data() {
+    return {
+      // * 定时函数
+      drawTiming: null
+    }
+  },
+  mounted () {
+    this.calcRate()
+    window.addEventListener('resize', this.resize)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.resize)
+  },
+  methods: {
+    calcRate () {
+      const appRef = this.$refs["formContainer"]
+      if (!appRef) return
+      // 当前宽高比
+      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
+      if (appRef) {
+        if (currentRate > baseProportion) {
+          // 表示更宽
+          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
+          scale.height = (window.innerHeight / baseHeight).toFixed(5)
+          appRef.style.transform = `scale(${scale.width}, ${scale.height})`
+        } else {
+          // 表示更高
+          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
+          scale.width = (window.innerWidth / baseWidth).toFixed(5)
+          appRef.style.transform = `scale(${scale.width}, ${scale.height})`
+        }
+      }
+    },
+    resize () {
+      clearTimeout(this.drawTiming)
+      this.drawTiming = setTimeout(() => {
+        this.calcRate()
+      }, 200)
+    }
+  },
+}