diff --git a/src/assets/images/login/bg-dl.png b/src/assets/images/login/bg-dl.png
new file mode 100644
index 0000000..557d0a8
Binary files /dev/null and b/src/assets/images/login/bg-dl.png differ
diff --git a/src/assets/images/login/logo.png b/src/assets/images/login/logo.png
new file mode 100644
index 0000000..3e7dacb
Binary files /dev/null and b/src/assets/images/login/logo.png differ
diff --git a/src/assets/styles/element-variables.scss b/src/assets/styles/element-variables.scss
index 7bf3006..fa18a7e 100644
--- a/src/assets/styles/element-variables.scss
+++ b/src/assets/styles/element-variables.scss
@@ -1,7 +1,8 @@
 
 
 
-$--color-primary: #1890ff;
+// $--color-primary: #1890ff;
+$--color-primary: #33a1fa;
 $--color-success: #13ce66;
 $--color-warning: #FFBA00;
 $--color-danger: #ff4949;
diff --git a/src/assets/styles/login.scss b/src/assets/styles/login.scss
new file mode 100644
index 0000000..2370862
--- /dev/null
+++ b/src/assets/styles/login.scss
@@ -0,0 +1,80 @@
+  .login {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+    background-size: cover;
+  }
+  .login_bg{
+    width: 1287px;
+    height: 100%;
+    background: url(../assets/images/login/bg-dl.png) no-repeat left top;
+    background-size: cover;
+  }
+  // .title {
+  //   margin: 0 auto 30px auto;
+  //   text-align: center;
+  //   color: #707070;
+  // }
+  .login_cont{
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+  }
+  .login_logo{
+    display: block;
+    width: 173px;
+    height: 33px;
+    margin: 0 auto 34px auto;
+  }
+  .login_form {
+    background: #ffffff;
+    width: 340px;
+    padding: 0 25px;
+    .el-input {
+      font-size: 14px;
+      height: 40px;
+      input {
+        height: 40px;
+      }
+    }
+    // .input-icon{
+    //   height: 39px;width: 14px;margin-left: 2px;
+    // }
+  }
+  .auth_code{
+    position: relative;
+    .login-code {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 33%;
+      display: inline-block;
+      height: 40px;
+      img{
+        cursor: pointer;
+        vertical-align:middle
+      }
+      span{
+        position: relative;
+        display: block;
+        width: 100%;
+        font-size: 12px;
+        text-align: center;
+        line-height: 40px;
+        color: #33a1fa;
+        cursor: pointer;
+        &:before {
+          content: "";
+          position: absolute;
+          left: 2px;
+          top: 50%;
+          width: 1px;
+          height: 18px;
+          margin-top: -9px;
+          background-color: #e2e6ee;
+        }
+      }
+    }
+  }
diff --git a/src/views/forgetPassword.vue b/src/views/forgetPassword.vue
index 5a8e7c8..7ff2af6 100644
--- a/src/views/forgetPassword.vue
+++ b/src/views/forgetPassword.vue
@@ -1,51 +1,30 @@
 <template>
-  <div class="login" :style="'background-image:url('+ Background +');'">
-    <el-form ref="modifyForm" :model="modifyForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
-      <h3 class="title">
-        多媒体信息发布平台-忘记密码
-      </h3>
-      <el-form-item prop="phone">
-        <el-input v-model="modifyForm.phone" type="text" auto-complete="off" placeholder="手机号">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code">
-        <el-input v-model="modifyForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleModify">
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <el-button :disable="disabledSendCode" :type="disabledSendCode==false?'primary':'info'" size="medium" style="width:100%;" @click="countdown()">
-            {{ verification }}
+  <div class="login">
+    <div class="login_bg" />
+    <div class="login_cont">
+      <el-form ref="modifyForm" :model="modifyForm" :rules="loginRules" label-position="left" label-width="0px" class="login_form">
+        <img src="../assets/images/login/logo.png" class="login_logo" alt="">
+        <el-form-item prop="phone"><el-input v-model="modifyForm.phone" type="text" auto-complete="off" placeholder="请输入手机号" /></el-form-item>
+        <el-form-item prop="code" class="auth_code">
+          <el-input v-model="modifyForm.code" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="handleModify" />
+          <div class="login-code">
+            <span @click="countdown()">{{ verification }}</span>
+          </div>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input v-model="modifyForm.password" type="password" auto-complete="off" placeholder="请输入新密码" @keyup.enter.native="handleModify" />
+        </el-form-item>
+        <el-form-item prop="confirmPassword" class="confirm_password">
+          <el-input v-model="modifyForm.confirmPassword" type="password" auto-complete="off" placeholder="请确认新密码" @keyup.enter.native="handleModify" />
+        </el-form-item>
+        <el-form-item class="login_btn">
+          <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleModify">
+            <span v-if="!loading">确定修改</span>
+            <span v-else>修改密码中...</span>
           </el-button>
-        </div>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input v-model="modifyForm.password" type="password" auto-complete="off" placeholder="新密码" @keyup.enter.native="handleModify">
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="confirmPassword">
-        <el-input v-model="modifyForm.confirmPassword" type="password" auto-complete="off" placeholder="确认密码" @keyup.enter.native="handleModify">
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item style="width:100%;">
-        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleModify">
-          <span v-if="!loading">确定修改</span>
-          <span v-else>修改密码中...</span>
-        </el-button>
-      </el-form-item>
-      <el-form-item style="width:100%;">
-        <el-button :loading="loading" size="medium" style="width:100%;">
-          <span @click="toLogin()">登 录</span>
-        </el-button>
-      </el-form-item>
-    </el-form>
-    <!--  底部  -->
-    <div v-if="$store.state.settings.showFooter" id="el-login-footer">
-      <span v-html="$store.state.settings.footerTxt" />
-      <span> ⋅ </span>
-      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
+        </el-form-item>
+        <div class="to_login_btn"><span @click="toLogin()">立即登录</span></div>
+      </el-form>
     </div>
   </div>
 </template>
@@ -79,7 +58,7 @@ export default {
     }
     const validatePass2 = (rule, value, callback) => {
       if (value === '') {
-        callback(new Error('请再次输入密码'))
+        callback(new Error('请确认新密码'))
       } else if (value !== this.modifyForm.password) {
         callback(new Error('两次输入密码不一致!'))
       } else {
@@ -116,11 +95,9 @@ export default {
       immediate: true
     }
   },
-  created() {
-  },
+  created() {},
   methods: {
-    getAuthCode() {
-    },
+    getAuthCode() {},
     countdown() {
       if (this.disabledSendCode) {
         return
@@ -160,13 +137,16 @@ export default {
         // }
         if (valid) {
           this.loading = true
-          this.$store.dispatch('Login', params).then(() => {
-            this.loading = false
-            this.$router.push({ path: this.redirect || '/' })
-          }).catch(() => {
-            this.loading = false
-            this.getCode()
-          })
+          this.$store
+            .dispatch('Login', params)
+            .then(() => {
+              this.loading = false
+              this.$router.push({ path: this.redirect || '/' })
+            })
+            .catch(() => {
+              this.loading = false
+              this.getCode()
+            })
         } else {
           console.log('error submit!!')
           return false
@@ -176,48 +156,51 @@ export default {
   }
 }
 </script>
-
 <style rel="stylesheet/scss" lang="scss">
-  .login {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    background-size: cover;
+@import '~@/assets/styles/login.scss';
+</style>
+<style lang="scss" scoped>
+::v-deep .el-form-item {
+  margin-bottom: 20px;
+}
+::v-deep .confirm_password {
+  margin-bottom: 43px;
+}
+::v-deep .el-form-item--small .el-form-item__error {
+  padding-top: 4px;
+}
+.login_btn {
+  ::v-deep .el-button--medium {
+    width: 100%;
+    height: 40px;
+    font-size: 16px;
   }
-  .title {
-    margin: 0 auto 30px auto;
+}
+.to_login_btn {
+  position: relative;
+  span {
+    display: block;
+    font-size: 16px;
+    color: #33a1fa;
     text-align: center;
-    color: #707070;
-  }
-
-  .login-form {
-    border-radius: 6px;
-    background: #ffffff;
-    width: 385px;
-    padding: 25px 25px 5px 25px;
-    .el-input {
-      height: 38px;
-      input {
-        height: 38px;
-      }
+    cursor: pointer;
+    &:before,
+    &:after {
+      content: '';
+      width: 110px;
+      height: 1px;
+      background-color: #e2e6ee;
     }
-    .input-icon{
-      height: 39px;width: 14px;margin-left: 2px;
+    &:before {
+      position: absolute;
+      left: 0;
+      top: 50%;
     }
-  }
-  .login-code {
-    width: 33%;
-    display: inline-block;
-    height: 38px;
-    float: right;
-    .el-button--medium{
-      font-size: 12px;
-      padding: 10px;
-    }
-    img{
-      cursor: pointer;
-      vertical-align:middle
+    &:after {
+      position: absolute;
+      right: 0;
+      top: 50%;
     }
   }
+}
 </style>
diff --git a/src/views/login.vue b/src/views/login.vue
index 787389d..8eeb4bf 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,55 +1,40 @@
 <template>
-  <div class="login" :style="'background-image:url('+ Background +');'">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
-      <h3 class="title">
-        多媒体信息发布平台
-      </h3>
-      <el-form-item prop="phone">
-        <el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="手机号">
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code">
-        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode">
+  <div class="login">
+    <div class="login_bg" />
+    <div class="login_cont">
+      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login_form">
+        <img src="../assets/images/login/logo.png" class="login_logo" alt="">
+        <el-form-item prop="phone"><el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="请输入手机号" /></el-form-item>
+        <el-form-item prop="password">
+          <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin" />
+        </el-form-item>
+        <el-form-item prop="code" class="auth_code">
+          <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" @keyup.enter.native="handleLogin" />
+          <div class="login-code"><img :src="codeUrl" @click="getCode"></div>
+        </el-form-item>
+        <el-form-item prop="agree" class="login_checked login_agree" style="line-height: 0;">
+          <el-checkbox v-model="loginForm.agree">
+            我已阅读并同意
+            <span>用户隐私政策</span>
+          </el-checkbox>
+        </el-form-item>
+        <el-form-item class="login_btn">
+          <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin">
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+        </el-form-item>
+        <div class="login_bottom">
+          <el-checkbox v-model="loginForm.rememberMe" class="login_checked">记住密码</el-checkbox>
+          <span class="forget_btn" @click="toForgetPassword()">忘记密码？</span>
         </div>
-      </el-form-item>
-      <el-form-item prop="agree" class="login_checked" style="line-height: 0;">
-        <el-checkbox v-model="loginForm.agree">
-          我已阅读并同意用户隐私政策
-        </el-checkbox>
-      </el-form-item>
-      <el-form-item style="width:100%;">
-        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-      </el-form-item>
-      <div class="login_bottom">
-        <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;" class="login_checked">
-          记住密码
-        </el-checkbox>
-        <span @click="toForgetPassword()">忘记密码</span>
-      </div>
-    </el-form>
-    <!--  底部  -->
-    <div v-if="$store.state.settings.showFooter" id="el-login-footer">
-      <span v-html="$store.state.settings.footerTxt" />
-      <span> ⋅ </span>
-      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
+      </el-form>
     </div>
   </div>
 </template>
 
 <script>
+// 15902734788
 import { encrypt } from '@/utils/rsaEncrypt'
 import { isvalidPhone } from '@/utils/validate'
 import Config from '@/settings'
@@ -74,8 +59,8 @@ export default {
       codeUrl: '',
       cookiePass: '',
       loginForm: {
-        phone: '15902734788',
-        password: '123456',
+        phone: '',
+        password: '',
         rememberMe: false,
         code: '',
         uuid: '',
@@ -155,13 +140,16 @@ export default {
             Cookies.remove('password')
             Cookies.remove('rememberMe')
           }
-          this.$store.dispatch('Login', user).then(() => {
-            this.loading = false
-            this.$router.push({ path: this.redirect || '/' })
-          }).catch(() => {
-            this.loading = false
-            this.getCode()
-          })
+          this.$store
+            .dispatch('Login', user)
+            .then(() => {
+              this.loading = false
+              this.$router.push({ path: this.redirect || '/' })
+            })
+            .catch(() => {
+              this.loading = false
+              this.getCode()
+            })
         } else {
           console.log('error submit!!')
           return false
@@ -183,67 +171,51 @@ export default {
   }
 }
 </script>
-
-<style rel="stylesheet/scss" lang="scss">
-  .login {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    background-size: cover;
-  }
-  .title {
-    margin: 0 auto 30px auto;
-    text-align: center;
-    color: #707070;
+<style lang="scss" scoped>
+::v-deep .el-form-item {
+  margin-bottom: 20px;
+}
+::v-deep .el-form-item--small .el-form-item__error {
+  padding-top: 4px;
+}
+.login_btn {
+  ::v-deep .el-button--medium {
+    width: 100%;
+    height: 40px;
+    font-size: 16px;
   }
-
-  .login-form {
-    border-radius: 6px;
-    background: #ffffff;
-    width: 385px;
-    padding: 25px 25px 5px 25px;
-    .el-input {
-      height: 38px;
-      input {
-        height: 38px;
-      }
-    }
-    .input-icon{
-      height: 39px;width: 14px;margin-left: 2px;
+}
+</style>
+<style rel="stylesheet/scss" lang="scss">
+@import '~@/assets/styles/login.scss';
+.login_checked {
+  .el-checkbox__label {
+    font-size: 12px;
+    span {
+      color: #33a1fa;
     }
   }
-  .login-tip {
-    font-size: 13px;
-    text-align: center;
-    color: #bfbfbf;
-  }
-  .login-code {
-    width: 33%;
-    display: inline-block;
-    height: 38px;
-    float: right;
-    img{
-      cursor: pointer;
-      vertical-align:middle
-    }
+  .el-form-item__content {
+    line-height: 0;
   }
-
-  .login_checked{
-    .el-checkbox__label{
-      font-size: 12px;
-    }
-    .el-form-item__content{
-      line-height: 0;
-    }
+}
+.login_agree.el-form-item {
+  margin-bottom: 30px;
+}
+.login_bottom {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #606266;
+  align-items: center;
+  line-height: 18px;
+  .el-checkbox__input {
+    margin-top: 2px;
   }
-  .login_bottom{
-    display: flex;
-    justify-content: space-between;
-    font-size: 12px;
-    color: #606266;
-    span{
-      cursor: pointer;
-    }
+  .forget_btn {
+    font-size: 14px;
+    color: #33a1fa;
+    cursor: pointer;
   }
+}
 </style>