feat login page

src/page/login/index.vue

@@ -1,50 +1,51 @@
 <template>
-  <div
-    class="login-container"
-    @keyup.enter.native="handleLogin">
-
+  <div class="login-container"
+       @keyup.enter.native="handleLogin">
     <div class="login-weaper  animated bounceInDown">
-      <div class="login-left">
+      <!-- <div class="login-left">
         <div class="login-time">
           {{ time }}
         </div>
-        <img
-          class="img"
-          src="/img/logo.png"
-          alt="">
+        <img class="img"
+             src="/img/logo.png"
+             alt="">
         <p class="title">{{ website.infoTitle }}</p>
         <p>v 3.2.0</p>
+      </div> -->
+      <div class="login-logo">
+        <img src="/img/logo.png"
+             alt="">
       </div>
+      <p class="login-tip">{{ website.infoTitle}} v 3.2.0</p>
       <div class="login-border">
         <div class="login-main">
           <h4 class="login-title">
-            <el-select
-              v-model="active"
-              class="login-select animated fadeIn"
-              placeholder="点击请选择租户"
-              @change="handleCommand">
-              <el-option v-for="tenant in tenantList" :key="tenant.id" :label="tenant.name" :value="tenant.id"/>
+            <el-select v-model="active"
+                       class="login-select animated fadeIn"
+                       placeholder="点击请选择租户"
+                       @change="handleCommand">
+              <el-option v-for="tenant in tenantList"
+                         :key="tenant.id"
+                         :label="tenant.name"
+                         :value="tenant.id" />
             </el-select>
           </h4>
-          <userLogin v-if="activeName==='user'"/>
-          <codeLogin v-else-if="activeName==='code'"/>
-          <thirdLogin v-else-if="activeName==='third'"/>
+          <userLogin v-if="activeName==='user'" />
+          <codeLogin v-else-if="activeName==='code'" />
+          <thirdLogin v-else-if="activeName==='third'" />
           <div class="login-menu">
-            <a
-              href="#"
-              @click.stop="activeName='user'">账号密码</a>
-            <a
-              href="#"
-              @click.stop="activeName='code'">手机号登录</a>
-            <a
-              href="#"
-              @click.stop="activeName='third'">第三方登录</a>
+            <a href="#"
+               @click.stop="activeName='user'">账号密码</a>
+            <a href="#"
+               @click.stop="activeName='code'">手机号登录</a>
+            <a href="#"
+               @click.stop="activeName='third'">第三方登录</a>
           </div>
         </div>
 
       </div>
     </div>
-    <top-color v-show="false"/>
+    <top-color v-show="false" />
   </div>
 </template>
 <script>
@@ -65,7 +66,7 @@ export default {
     thirdLogin,
     topColor
   },
-  data() {
+  data () {
     return {
       tenantList: [],
       time: '',
@@ -76,7 +77,7 @@ export default {
   },
   watch: {
     $route: {
-      handler() {
+      handler () {
         const params = this.$route.query
         if (this.validatenull(params.state) && this.validatenull(params.code)) return
 
@@ -93,13 +94,13 @@ export default {
             loading.close()
             this.$router.push({ path: this.tagWel.value })
           }).catch(() => {
-          loading.close()
-        })
+            loading.close()
+          })
       },
       immediate: true
     }
   },
-  created() {
+  created () {
     this.watermark()
     this.getTenantList()
     this.active = getStore({ name: 'tenantId' })
@@ -108,19 +109,19 @@ export default {
       this.getTime()
     }, 1000)
   },
-  mounted() {
+  mounted () {
   },
   computed: {
     ...mapGetters(['website', 'tagWel'])
   },
   methods: {
-    handleCommand(command) {
+    handleCommand (command) {
       setStore({ name: 'tenantId', content: command })
     },
-    getTime() {
+    getTime () {
       this.time = dateFormat(new Date())
     },
-    getTenantList() {
+    getTenantList () {
       request({
         url: '/admin/tenant/list',
         method: 'get'
@@ -128,7 +129,7 @@ export default {
         this.tenantList = response.data.data
       })
     },
-    watermark() {
+    watermark () {
       const text = ''
       const canvas = document.createElement('canvas')
       canvas.width = '500'
@@ -162,193 +163,223 @@ export default {
 </script>
 
 <style lang="scss">
-  .login-container {
-    display: flex;
-    align-items: center;
-    position: relative;
+.login-container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  background-color: #fbfbfb;
+  animation: animate-cloud 20s linear infinite;
+}
+
+.login-tip {
+  color: #409eff;
+  text-align: center;
+  font-weight: 700;
+  font-size: 16px;
+}
+.login-logo {
+  overflow: hidden;
+  width: 110px;
+  height: 110px;
+  margin: -50px auto 20px auto;
+  border-radius: 50%;
+  -webkit-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.07);
+  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.07);
+  padding: 10px;
+  background-color: #fff;
+  z-index: 1;
+  position: relative;
+  box-sizing: border-box;
+  padding: 20px;
+  img {
     width: 100%;
-    height: 100%;
-    margin: 0 auto;
-    background: url("/img/bg/cloud.jpg") 0 bottom repeat-x #049ec4;
-    animation: animate-cloud 20s linear infinite;
   }
+}
+.login-weaper {
+  position: relative;
+  margin: 0 auto;
+  width: 380px;
+  padding: 0 40px;
+  box-sizing: border-box;
+  box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
+  background-color: #fff;
+  border-radius: 3px;
+}
 
-  .login-weaper {
-    margin: 0 auto;
-    width: 1000px;
-    box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
-  }
+.login-left,
+.login-border {
+  padding: 20px 0 40px 0;
+  position: relative;
+  align-items: center;
+  display: flex;
+}
 
-  .login-left,
-  .login-border {
-    position: relative;
-    min-height: 500px;
-    align-items: center;
-    display: flex;
-  }
+.login-left {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  justify-content: center;
+  flex-direction: column;
+  background-color: #409eff;
+  color: #fff;
+  float: left;
+  width: 50%;
+  position: relative;
+}
 
-  .login-left {
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-    justify-content: center;
-    flex-direction: column;
-    background-color: #409EFF;
-    color: #fff;
-    float: left;
-    width: 50%;
-    position: relative;
-  }
+.login-left .img {
+  width: 140px;
+}
 
-  .login-left .img {
-    width: 140px;
-  }
+.login-time {
+  position: absolute;
+  left: 25px;
+  top: 25px;
+  width: 100%;
+  color: #fff;
+  font-weight: 200;
+  opacity: 0.9;
+  font-size: 18px;
+  overflow: hidden;
+}
 
-  .login-time {
-    position: absolute;
-    left: 25px;
-    top: 25px;
-    width: 100%;
-    color: #fff;
-    font-weight: 200;
-    opacity: 0.9;
-    font-size: 18px;
-    overflow: hidden;
-  }
+.login-left .title {
+  margin-top: 60px;
+  text-align: center;
+  color: #fff;
+  font-weight: 300;
+  letter-spacing: 2px;
+  font-size: 25px;
+}
 
-  .login-left .title {
-    margin-top: 60px;
-    text-align: center;
-    color: #fff;
-    font-weight: 300;
-    letter-spacing: 2px;
-    font-size: 25px;
-  }
+.login-border {
+  border-left: none;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  color: #fff;
+  background-color: #fff;
+  width: 100%;
+  float: left;
+  box-sizing: border-box;
+}
 
-  .login-border {
-    border-left: none;
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-    color: #fff;
-    background-color: #fff;
-    width: 50%;
-    float: left;
-    box-sizing: border-box;
-  }
+.login-main {
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+}
 
-  .login-main {
-    margin: 0 auto;
-    width: 65%;
-    box-sizing: border-box;
-  }
+.login-main > h3 {
+  margin-bottom: 20px;
+}
 
-  .login-main > h3 {
-    margin-bottom: 20px;
-  }
+.login-main > p {
+  color: #76838f;
+}
 
-  .login-main > p {
-    color: #76838f;
-  }
+.login-title {
+  color: #333;
+  margin-bottom: 30px;
+  font-weight: 500;
+  font-size: 22px;
+  text-align: center;
+  letter-spacing: 4px;
+}
 
-  .login-title {
+.login-select {
+  input {
     color: #333;
-    margin-bottom: 40px;
-    font-weight: 500;
-    font-size: 22px;
+    font-size: 14px;
+    font-weight: 400;
+    border: none;
     text-align: center;
-    letter-spacing: 4px;
   }
+}
 
-  .login-select {
-    input {
-      color: #333;
-      font-size: 18px;
-      font-weight: 400;
-      border: none;
-      text-align: center;
-    }
+.login-menu {
+  margin-top: 40px;
+  width: 100%;
+  text-align: center;
+
+  a {
+    color: #409eff;
+    font-weight: 700;
+    font-size: 12px;
+    margin: 0px 8px;
   }
+}
 
-  .login-menu {
-    margin-top: 40px;
-    width: 100%;
-    text-align: center;
+.login-submit {
+  width: 100%;
+  height: 45px;
+  font-size: 18px;
+  letter-spacing: 5px;
+  text-indent: 5px;
+  font-weight: 300;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: 30px;
+  font-family: "neo";
+  transition: 0.25s;
+}
 
-    a {
-      color: #999;
-      font-size: 12px;
-      margin: 0px 8px;
-    }
+.login-form {
+  margin: 10px 0;
+
+  i {
+    color: #409eff;
   }
 
-  .login-submit {
+  .el-form-item__content {
     width: 100%;
-    height: 45px;
-    border: 1px solid #409eff;
-    background: none;
-    font-size: 18px;
-    letter-spacing: 2px;
-    font-weight: 300;
-    color: #409eff;
-    cursor: pointer;
-    margin-top: 30px;
-    font-family: "neo";
-    transition: 0.25s;
   }
 
-  .login-form {
-    margin: 10px 0;
+  .el-form-item {
+    margin-bottom: 12px;
+  }
 
-    i {
+  .el-input {
+    input {
+      padding-bottom: 10px;
+      text-indent: 15px;
+      background: transparent;
+      border: none;
+      border-radius: 0;
       color: #333;
+      border-bottom: 1px solid rgb(235, 237, 242);
     }
 
-    .el-form-item__content {
-      width: 100%;
-    }
-
-    .el-form-item {
-      margin-bottom: 12px;
-    }
-
-    .el-input {
-      input {
-        padding-bottom: 10px;
-        text-indent: 5px;
-        background: transparent;
-        border: none;
-        border-radius: 0;
-        color: #333;
-        border-bottom: 1px solid rgb(235, 237, 242);
-      }
-
-      .el-input__prefix {
-        i {
-          padding: 0 5px;
-          font-size: 16px !important;
-        }
+    .el-input__prefix {
+      i {
+        padding: 0 5px;
+        font-weight: 600;
+        font-size: 18px !important;
       }
     }
   }
+}
 
-  .login-code {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    margin: 0 0 0 10px;
-  }
+.login-code {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  margin: 0 0 0 10px;
+}
 
-  .login-code-img {
-    margin-top: 2px;
-    width: 100px;
-    height: 38px;
-    background-color: #fdfdfd;
-    border: 1px solid #f0f0f0;
-    color: #333;
-    font-size: 14px;
-    font-weight: bold;
-    letter-spacing: 5px;
-    line-height: 38px;
-    text-indent: 5px;
-    text-align: center;
-  }
+.login-code-img {
+  margin-top: 2px;
+  width: 100px;
+  height: 38px;
+  background-color: #fdfdfd;
+  border: 1px solid #f0f0f0;
+  color: #333;
+  font-size: 14px;
+  font-weight: bold;
+  letter-spacing: 5px;
+  line-height: 38px;
+  text-indent: 5px;
+  text-align: center;
+}
 </style>