diff --git a/.env.development b/.env.development
index 1a77d53..f173e70 100644
--- a/.env.development
+++ b/.env.development
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 智能工厂MES系统
+VUE_APP_TITLE = 机加大师
 
 # 开发环境配置
 ENV = 'development'
diff --git a/.env.production b/.env.production
index 94172dc..fc4438e 100644
--- a/.env.production
+++ b/.env.production
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 智能工厂MES系统
+VUE_APP_TITLE = 机加大师
 
 # 生产环境配置
 ENV = 'production'
diff --git a/.env.staging b/.env.staging
index a046e68..282bbca 100644
--- a/.env.staging
+++ b/.env.staging
@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = 智能工厂MES系统
+VUE_APP_TITLE = 机加大师
 
 NODE_ENV = production
 
diff --git a/public/favicon.ico b/public/favicon.ico
index e3b55f3..a58c261 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
index a45582f..596873b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
-    <title>智能工厂MES系统</title>
+    <title>机加大师</title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>
     html,
diff --git a/src/assets/images/login_bg.jpg b/src/assets/images/login_bg.jpg
new file mode 100644
index 0000000..5fbda7d
Binary files /dev/null and b/src/assets/images/login_bg.jpg differ
diff --git a/src/assets/images/login_title.png b/src/assets/images/login_title.png
new file mode 100644
index 0000000..89504ee
Binary files /dev/null and b/src/assets/images/login_title.png differ
diff --git a/src/assets/images/logo-b.png b/src/assets/images/logo-b.png
new file mode 100644
index 0000000..34438bf
Binary files /dev/null and b/src/assets/images/logo-b.png differ
diff --git a/src/assets/images/logo-small.png b/src/assets/images/logo-small.png
new file mode 100644
index 0000000..4129678
Binary files /dev/null and b/src/assets/images/logo-small.png differ
diff --git a/src/assets/images/logo_white.png b/src/assets/images/logo_white.png
new file mode 100644
index 0000000..60430ff
Binary files /dev/null and b/src/assets/images/logo_white.png differ
diff --git a/src/assets/images/shoujitianchong.png b/src/assets/images/shoujitianchong.png
new file mode 100644
index 0000000..ab1a4a4
Binary files /dev/null and b/src/assets/images/shoujitianchong.png differ
diff --git a/src/assets/logo/favicon.png b/src/assets/logo/favicon.png
index e3b55f3..a58c261 100644
Binary files a/src/assets/logo/favicon.png and b/src/assets/logo/favicon.png differ
diff --git a/src/components/Footer/index.vue b/src/components/Footer/index.vue
new file mode 100644
index 0000000..1bc3101
--- /dev/null
+++ b/src/components/Footer/index.vue
@@ -0,0 +1,316 @@
+<template>
+  <!--导航栏页-->
+  <div class="footer">
+    <div class="footer_right">
+      <a class="it" href="https://beian.miit.gov.cn" target="_blank"
+        >苏ICP备2021009988号-6
+      </a>
+    </div>
+    <!--  -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Nav",
+  data() {
+    return {
+      // isCollapse:true
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.footer {
+  background: rgba(0, 0, 0, 0.6);
+  position: fixed;
+  height: 5%;
+  bottom: 0;
+  width: 100%;
+  margin-bottom: 0px;
+  justify-content: space-between;
+  .foot_content {
+    padding-left: 11.5%;
+    padding-right: 11.5%;
+    height: 360px;
+    color: #fff;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 77%;
+
+    // div {
+    //   height: 200px;
+    //   width: 30%;
+    // }
+    .about_us {
+      height: 200px;
+      width: 30%;
+
+      .title {
+        height: 0.8rem;
+        font-size: 0.327rem;
+      }
+      .border {
+        height: 2px;
+        display: flex;
+        justify-content: flex-start;
+        .red {
+          border-bottom: 2px solid #00a0dc;
+          width: 64px;
+          height: 100%;
+        }
+        .gray {
+          border-bottom: 1px solid #707070;
+          // width: 308px;
+          flex: 1;
+          height: 100%;
+        }
+      }
+      .info {
+        margin-top: 0.39rem;
+        opacity: 0.7;
+        font-size: 0.218rem;
+        line-height: 0.51rem;
+        padding-left: 0.2rem;
+        padding-right: 0.2rem;
+      }
+    }
+    .customer_service {
+      height: 200px;
+      width: 30%;
+      .title {
+        height: 0.8rem;
+        font-size: 0.327rem;
+      }
+      .border {
+        height: 2px;
+        display: flex;
+        justify-content: flex-start;
+        .red {
+          border-bottom: 2px solid #00a0dc;
+          width: 64px;
+          height: 100%;
+        }
+        .gray {
+          border-bottom: 1px solid #707070;
+          flex: 1;
+          height: 100%;
+        }
+      }
+      .list {
+        padding-left: 0.2rem;
+        padding-right: 0.2rem;
+        opacity: 0.7;
+        font-size: 0.188rem;
+        height: 80px;
+        line-height: 0.5rem;
+        border-bottom: 1px solid #707070;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        div {
+          height: auto;
+          width: auto;
+        }
+        div:hover {
+          cursor: pointer; //鼠标变手
+        }
+      }
+    }
+    .follow_us {
+      height: 200px;
+      width: 30%;
+      .title {
+        height: 0.8rem;
+        font-size: 0.327rem;
+      }
+      .border {
+        height: 2px;
+        display: flex;
+        justify-content: flex-start;
+        .red {
+          border-bottom: 2px solid #00a0dc;
+          width: 64px;
+          height: 100%;
+        }
+        .gray {
+          border-bottom: 1px solid #707070;
+          flex: 1;
+          height: 100%;
+        }
+      }
+      .secCode {
+        width: 100%;
+        margin: 20px;
+        display: flex;
+        div {
+          text-align: center;
+          padding: 5px;
+          width: 40%;
+          p {
+            padding: 3px;
+            opacity: 0.7;
+            font-size: 0.188rem;
+          }
+        }
+      }
+    }
+    .contact_us {
+      height: 200px;
+      width: 30%;
+      .title {
+        height: 0.8rem;
+        font-size: 0.327rem;
+      }
+      .border {
+        height: 2px;
+        display: flex;
+        justify-content: flex-start;
+        .red {
+          border-bottom: 2px solid #00a0dc;
+          width: 64px;
+          height: 100%;
+        }
+        .gray {
+          border-bottom: 1px solid #707070;
+          flex: 1;
+          height: 100%;
+        }
+      }
+      .address {
+        opacity: 0.7;
+        font-size: 0.188rem;
+        line-height: 0.36rem;
+        height: 50px;
+        padding-left: 0.2rem;
+        padding-right: 0.2rem;
+      }
+      .tel {
+        margin-top: 0.22rem;
+        opacity: 0.7;
+        font-size: 0.188rem;
+        line-height: 0.36rem;
+        height: 35px;
+        padding-left: 0.2rem;
+        padding-right: 0.2rem;
+      }
+      .qq {
+        opacity: 0.7;
+        font-size: 0.188rem;
+        line-height: 0.36rem;
+        height: 35px;
+        padding-left: 0.2rem;
+        padding-right: 0.2rem;
+      }
+      .email {
+        opacity: 0.7;
+        font-size: 0.188rem;
+        line-height: 0.36rem;
+        height: 35px;
+        padding-left: 0.2rem;
+        padding-right: 0.2rem;
+      }
+    }
+  }
+  .footer_right {
+    position: relative;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #000;
+    // opacity: 0.7;
+    font-size: 14px;
+    a {
+      text-decoration: none;
+      color: #fff;
+      cursor: pointer;
+      display: inline-block;
+    }
+    .it {
+    }
+    .aggrement {
+      display: inline-block;
+    }
+  }
+}
+@media (max-width: 768px) {
+  .footer {
+    flex-direction: column;
+    padding-top: 50px !important;
+    height: auto !important;
+    .foot_content {
+      flex-direction: column !important;
+      height: auto !important;
+      .contact_us,
+      .customer_service,
+      .follow_us {
+        font-size: 14px !important;
+        width: 100% !important;
+        .address {
+          line-height: 20px !important;
+        }
+      }
+      .contact_us {
+        .title {
+          margin-bottom: 10px !important;
+          font-size: 16px !important;
+        }
+        .tel {
+          margin-top: 20px !important;
+        }
+        .tel,
+        .qq,
+        .email,
+        .address {
+          font-size: 14px !important;
+        }
+      }
+      .customer_service {
+        .title {
+          margin-top: 15px !important;
+          margin-bottom: 10px !important;
+          font-size: 16px !important;
+        }
+        .list {
+          div {
+            font-size: 14px !important;
+          }
+        }
+      }
+      .follow_us {
+        margin-top: 20px !important;
+        .title {
+          margin-bottom: 10px !important;
+          font-size: 16px !important;
+        }
+        .secCode p {
+          font-size: 14px !important;
+        }
+      }
+    }
+    .footer_right {
+      position: relative;
+      flex-direction: column;
+      padding-bottom: 20px !important;
+    }
+    .it {
+      text-align: center !important;
+      font-size: 14px !important;
+    }
+    .aggrement {
+      font-size: 14px !important;
+    }
+    .privacyPolicy {
+      font-size: 14px !important;
+    }
+  }
+}
+</style>
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index 861ab32..cba7ae7 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,22 +1,17 @@
 <template>
-  <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
+  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <img src="../../../assets/images/logo-b.png" class="sidebar-logo-small">
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+        <img src="../../../assets/images/logo-small.png" class="sidebar-logo">
       </router-link>
     </transition>
   </div>
 </template>
 
 <script>
-import logoImg from '@/assets/logo/favicon.png'
-import variables from '@/assets/styles/variables.scss'
-
 export default {
   name: 'SidebarLogo',
   props: {
@@ -25,18 +20,10 @@ export default {
       required: true
     }
   },
-  computed: {
-    variables() {
-      return variables;
-    },
-    sideTheme() {
-      return this.$store.state.settings.sideTheme
-    }
-  },
   data() {
     return {
-      title: '智能工厂MES系统',
-      logo: logoImg
+      title: 'Vue Element Admin',
+      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
     }
   }
 }
@@ -54,10 +41,11 @@ export default {
 
 .sidebar-logo-container {
   position: relative;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  background: #2b2f3a;
+  width: 85%;
+  margin-left: 5px;
+  height: 62px;
+  line-height: 62px;
+  background: #FFFFFF;
   text-align: center;
   overflow: hidden;
 
@@ -66,12 +54,19 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      width: 100%;
+      height: 100%;
       vertical-align: middle;
       margin-right: 12px;
     }
 
+    & .sidebar-logo-small{
+      width: 100%;
+      height: 70%;
+      vertical-align: middle;
+      margin-right: 0px;
+    }
+
     & .sidebar-title {
       display: inline-block;
       margin: 0;
diff --git a/src/views/login.vue b/src/views/login.vue
index e94415b..4f20ad2 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,119 +1,264 @@
 <template>
-  <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">智能工厂MES系统</h3>
-      <el-form-item prop="username">
-        <el-input
-          v-model="loginForm.username"
-          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" v-if="captchaOnOff">
-        <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" class="login-code-img"/>
-        </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <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>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
-        </div>
-      </el-form-item>
-    </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">      
-      <span @click="toIPC">苏ICP备2021009988号-6</span>
+  <div class="login-container ng-scope">
+    <div class="login-wrap">
+      <div class="bg-opacity">
+        <div class="logo" />
+        <div class="title" />
+      </div>
+      <el-card class="card-container">
+        <el-tabs type="card" :tab-position="tabPosition" style="height: 350px">
+          <el-tab-pane>
+            <span slot="label" style="width: 248px"
+              ><i class="el-icon-user" /> 账号登录</span
+            >
+            <el-form
+              ref="loginForm"
+              :model="loginForm"
+              :rules="loginRules"
+              class="login-form"
+              autocomplete="on"
+              label-position="left"
+            >
+              <div class="title-container">
+                <h1 class="title">登录</h1>
+              </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="on"
+                />
+              </el-form-item>
+              <el-tooltip
+                v-model="capsTooltip"
+                content="密码明文查看"
+                placement="right"
+                manual
+              >
+                <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"
+                    autocomplete="on"
+                    @keyup.native="checkCapslock"
+                    @blur="capsTooltip = false"
+                  />
+                  <span class="show-pwd" @click="showPwd">
+                    <svg-icon
+                      :icon-class="
+                        passwordType === 'password' ? 'eye' : 'eye-open'
+                      "
+                    />
+                  </span>
+                </el-form-item>
+              </el-tooltip>
+              <el-checkbox
+                v-model="loginForm.rememberMe"
+                style="margin: 0px 76px 0px -155px"
+                >记住密码</el-checkbox
+              >
+              <el-button type="primary" @click.native.prevent="handleLogin"
+                >登 录</el-button
+              >
+
+              <!-- <span style="font-size:13px;cursor:pointer;color:#9b9ea0;text-decoration:none;position: absolute;right:20px;padding-top:20px;" @click="forgetPwd">忘记密码</span> -->
+              <!-- <el-row>
+                <el-col :span="24" style="text-align:right;margin-top:-20px"><span style="font-size:13px;cursor:pointer;color:#9b9ea0;text-decoration:none" @click="forgetPwd">忘记密码</span></el-col>
+              </el-row> -->
+            </el-form>
+          </el-tab-pane>
+          <el-tab-pane>
+            <span slot="label" style="width: 249px"
+              ><i class="el-icon-phone" /> 手机号登录</span
+            >
+            <el-form
+              ref="loginPhoneForm"
+              :model="loginPhoneForm"
+              :rules="loginPhoneRules"
+              class="login-form"
+              autocomplete="on"
+              label-position="left"
+            >
+              <div class="title-container">
+                <h1 class="title">登录</h1>
+              </div>
+              <el-form-item prop="username">
+                <span class="svg-container">
+                  <img
+                    src="@/assets/images/shoujitianchong.png"
+                    class="svgImg"
+                  />
+                </span>
+                <el-input
+                  ref="phone"
+                  v-model="loginPhoneForm.phone"
+                  placeholder="请输入手机号码"
+                  name="phone"
+                  type="text"
+                  tabindex="1"
+                  auto-complete="on"
+                />
+              </el-form-item>
+              <el-tooltip
+                v-model="capsTooltip"
+                content="密码明文查看"
+                placement="right"
+                manual
+              >
+                <el-form-item prop="password">
+                  <span class="svg-container">
+                    <svg-icon icon-class="password" />
+                  </span>
+                  <el-input
+                    :key="passwordType"
+                    ref="password"
+                    v-model="loginPhoneForm.password"
+                    :type="passwordType"
+                    placeholder="请填写密码"
+                    name="password"
+                    tabindex="2"
+                    autocomplete="on"
+                    @keyup.native="checkCapslock"
+                    @blur="capsTooltip = false"
+                  />
+                  <span class="show-pwd" @click="showPwd">
+                    <svg-icon
+                      :icon-class="
+                        passwordType === 'password' ? 'eye' : 'eye-open'
+                      "
+                    />
+                  </span>
+                </el-form-item>
+              </el-tooltip>
+              <el-checkbox
+                v-model="loginForm.rememberMe"
+                style="margin: 0px 76px 0px -155px"
+                >记住密码</el-checkbox
+              >
+              <el-button type="primary" @click.native.prevent="phoneLogin()"
+                >登 录</el-button
+              >
+
+              <!-- <span style="font-size:13px;cursor:pointer;color:#9b9ea0;text-decoration:none;position: absolute;right:20px;padding-top:20px;" @click="forgetPwd">忘记密码</span> -->
+
+              <!-- <el-row>
+                <el-col :span="24" style="text-align:right;margin-top:-20px">
+                  <span style="font-size:13px;cursor:pointer;color:#9b9ea0;text-decoration:none" @click="forgetPwd">忘记密码</span></el-col>
+              </el-row> -->
+            </el-form>
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
     </div>
+    <el-dialog
+      title="忘记密码"
+      :visible.sync="dialogVisible"
+      width="30%"
+      append-to-body
+      center
+    >
+      <p>机构员工遗失密码，请联系本机构管理员进行密码重置；</p>
+      <p>
+        机构管理员遗失密码，请联系平台客服，QQ：2546125360，并提供相关身份证明材料。
+      </p>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+    <Footer />
   </div>
 </template>
 
 <script>
+import Footer from "@/components/Footer";
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
 
 export default {
+  components: { Footer },
   name: "Login",
   data() {
     return {
-      codeUrl: "",
       loginForm: {
-        username: "admin",
-        password: "admin123",
+        username: "",
+        password: "",
         rememberMe: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
+      loginPhoneForm: {
+        phone: "",
+        password: "",
+      },
+      tabPosition: "",
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+          { required: true, trigger: "blur", message: "请输入用户名称" },
         ],
-        password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
-        ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        password: [{ required: true, trigger: "blur", message: "请录入密码" }],
       },
+      loginPhoneRules: {
+        phone: [{ required: true, trigger: "blur", message: "请输入手机号码" }],
+        password: [{ required: true, trigger: "blur", message: "请录入密码" }],
+      },
+      passwordType: "password",
+      capsTooltip: false,
       loading: false,
-      // 验证码开关
-      captchaOnOff: false,
-      // 注册开关
-      register: false,
-      redirect: undefined
+      redirect: undefined,
+      otherQuery: {},
+      dialogVisible: false,
     };
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   created() {
     this.getCode();
     this.getCookie();
   },
+  mounted() {
+    if (this.loginForm.username === "") {
+      this.$refs.username.focus();
+    } else if (this.loginForm.password === "") {
+      this.$refs.password.focus();
+    }
+    window.addEventListener("keydown", this.keyDown); //监听回车事件
+  },
+  destroyed() {
+    window.removeEventListener("keydown", this.keyDown, false); //销毁回车事件，如果不销毁，在其他页面敲回车也会执行回车登录操作。
+  },
   methods: {
-    toIPC(){
-      window.open("https://beian.miit.gov.cn/","_blank");
+    toIPC() {
+      window.open("https://beian.miit.gov.cn/", "_blank");
     },
     getCode() {
-      getCodeImg().then(res => {
-        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
+      getCodeImg().then((res) => {
+        this.captchaOnOff =
+          res.captchaOnOff === undefined ? true : res.captchaOnOff;
         if (this.captchaOnOff) {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.loginForm.uuid = res.uuid;
@@ -123,100 +268,344 @@ export default {
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       };
     },
+    checkCapslock(e) {
+      const { key } = e;
+      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
+    },
+    showPwd() {
+      if (this.passwordType === "password") {
+        this.passwordType = "";
+      } else {
+        this.passwordType = "password";
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus();
+      });
+    },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
             Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
-            Cookies.remove('rememberMe');
+            Cookies.remove("rememberMe");
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaOnOff) {
-              this.getCode();
-            }
-          });
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaOnOff) {
+                this.getCode();
+              }
+            });
         }
       });
-    }
-  }
+    },
+    phoneLogin() {
+      // this.$refs.loginPhoneForm.validate((valid) => {
+      //   if (valid) {
+      //     this.loading = true;
+      //     this.$store
+      //       .dispatch("user/phoneLogin", this.loginPhoneForm)
+      //       .then(() => {
+      //         debugger;
+      //         this.$router.push({ path: "/", query: this.otherQuery });
+      //         this.loading = false;
+      //       })
+      //       .catch(() => {
+      //         this.loading = false;
+      //       });
+      //   } else {
+      //     console.log("error submit!!");
+      //     return false;
+      //   }
+      // });
+    },
+  },
 };
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
-.login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
-   background-size:100% 100%;
-}
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
+<style lang="scss">
+$bg: #fff;
+$light_gray: #000;
+$cursor: #858585;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+    line-height: 44px;
+  }
 }
 
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
+/* reset element-ui css */
+.login-container {
   .el-input {
-    height: 38px;
+    display: inline-block;
+    height: 44px;
+    width: 85%;
+
     input {
-      height: 38px;
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 6px 5px 12px 15px;
+      border-bottom: 1px solid #e0e0e0;
+      color: $light_gray;
+      height: 44px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
     }
   }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    // background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: rgb(29, 27, 27);
+$light_gray: #eee;
+
+.login-container {
+  height: 65%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: url("../../src/assets/images/login_bg.jpg") no-repeat center;
+  background-size: 100%;
+  content: "";
+  z-index: 0;
+
+  .bg-opacity {
+    padding-bottom: 10px;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  .logo {
+    position: relative;
+    width: 25%;
+    height: 140px;
+    margin: 0 auto 20px;
+    background: url("../../src/assets/images/logo_white.png") no-repeat center;
+    background-size: 100% 100%;
+  }
+  .logo:after {
+    position: absolute;
+    content: "";
+    left: -15%;
+    bottom: 0;
+    height: 1px;
+    width: 129%;
+    border-bottom: 1px solid #fff;
+  }
+  .logo + .title {
+    width: 666px;
+    height: 44px;
+    margin: 0 auto;
+    background: url("../../src/assets/images/login_title.png") no-repeat center;
+    background-size: 100% 100%;
+    color: white;
+    // font-size: 24px;
+    // letter-spacing: 4px
+  }
+  .login-content {
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .card-container {
+    width: 500px;
+    margin: 0 auto;
+    padding: 0 auto;
+  }
+  .el-card {
+    // padding: 5px 10px 0px 0px;
+    padding: 0px;
+  }
+  ::v-deep .el-card__body {
+    padding: 0px !important;
+    .el-tabs__item {
+      width: 250px;
+    }
+  }
+  .login-form {
+    display: block;
+    position: relative;
+    width: 520px;
+    max-width: 100%;
+    padding: 0px 15px;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .svg-container {
+    padding: 0px 0px 6px 5px;
+    margin-bottom: -10px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+    .svgImg {
+      width: 1em;
+      height: 1em;
+      vertical-align: -0.16em;
+      fill: currentColor;
+      overflow: hidden;
+    }
+  }
+
+  .title-container {
+    .title {
+      color: #7e7e7e;
+      text-align: center;
+      letter-spacing: -0.05em;
+      line-height: 20px;
+      font-weight: 500;
+      font-family: "Helvetica Neue", Helvetica, "PingFang SC",
+        "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+      margin-bottom: 10px;
+    }
+    h1.title:before,
+    h1.title:after {
+      content: "";
+      height: 1px;
+      position: absolute;
+      top: 37px;
+      width: 35%;
+    }
+    h1.title:before {
+      background: rgb(126, 126, 126);
+      background: -moz-linear-gradient(
+        to left,
+        rgba(126, 126, 126, 1) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
+      background: -webkit-linear-gradient(
+        to left,
+        rgba(126, 126, 126, 1) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
+      background: -moz-linear-gradient(
+        to left,
+        rgba(126, 126, 126, 1) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
+      background: -ms-linear-gradient(
+        to left,
+        rgba(126, 126, 126, 1) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
+      background: linear-gradient(
+        to left,
+        rgba(126, 126, 126, 1) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
+      left: 0px;
+    }
+    h1.title:after {
+      background: rgb(126, 126, 126);
+      background: -moz-linear-gradient(
+        to right,
+        rgba(126, 126, 126, 1) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
+      background: -webkit-linear-gradient(
+        to right,
+        rgba(126, 126, 126, 1) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
+      background: -moz-linear-gradient(
+        to right,
+        rgba(126, 126, 126, 1) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
+      background: -ms-linear-gradient(
+        to right,
+        rgba(126, 126, 126, 1) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
+      background: linear-gradient(
+        to right,
+        rgba(126, 126, 126, 1) 0%,
+        rgba(255, 255, 255, 1) 100%
+      );
+      right: 0px;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 3px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .thirdparty-button {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+  }
+
+  @media only screen and (max-width: 470px) {
+    .thirdparty-button {
+      display: none;
+    }
+  }
+
+  .login-wrap {
+    position: absolute;
+    top: 70%;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 418px;
+    text-align: center;
+    transform: translate(0, -50%);
   }
 }
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
-}
-.login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
-.el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
-}
-.login-code-img {
-  height: 38px;
-}
 </style>
diff --git a/vue.config.js b/vue.config.js
index e52128e..dac1167 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require("compression-webpack-plugin");
 
-const name = "智能工厂MES系统"; // 网页标题
+const name = "机加大师"; // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80; // 端口