新登录页

src/page/login/index.vue

@@ -1,57 +1,60 @@
 <template>
-  <div class="login-container"
-       ref="login"
-       @keyup.enter.native="handleLogin">
-    <top-color v-show="false"></top-color>
-    <div class="login-weaper animated bounceInDown">
-      <div class="login-left">
-        <div class="login-time">
-          {{time}}
-        </div>
-        <p class="title">
-          <!-- {{ $t('login.info') }} -->
-        </p>
-        <div style="font-size: 15px">
-          <!-- <span>----------------------------------------------</span>
-          <br>
-          <span>管理租户编号：000000</span>
-          <br>
-          <span>超级管理员账号: admin / admin</span>
-          <br>
-          <span>人事账号: hr / hr</span>
-          <br>
-          <span>经理账号: manager / manager</span>
-          <br>
-          <span>老板账号: boss / boss</span>
-          <br>
-          <span>----------------------------------------------</span>
-          <br>
-          <span>普通租户编号：详见租户管理模块</span>
-          <br>
-          <span>租户管理员账号: admin / admin</span>
-          <br>
-          <span>----------------------------------------------</span> -->
-        </div>
-      <!--<img class="img" src="/img/logo.png" alt="">-->
+  <div class="login-body">
+      <div class="left-pic-container">
+          <div class="left-pic-content">
+              <div class="dt small-logo">
+                  <div class="cons">
+                      <img src="/img/login/bim.png" alt="" class="logos">
+                      <img src="/img/login/s1.png" alt="" class="shadow1">
+                  </div>
+              </div>
+              <div class="ds small-logo">
+                  <div class="cons">
+                      <img src="/img/login/gis.png" alt="" class="logos">
+                      <img src="/img/login/s1.png" alt="" class="shadow1">
+                  </div>
+              </div>
+              <div class="cc small-logo">
+                  <div class="cons">
+                      <img src="/img/login/bd.png" alt="" class="logos">
+                      <img src="/img/login/s1.png" alt="" class="shadow1">
+                  </div>
+              </div>
+              <div class="rp small-logo">
+                  <div class="cons">
+                      <img src="/img/login/ca.png" alt="" class="logos">
+                      <img src="/img/login/s1.png" alt="" class="shadow1">
+                  </div>
+              </div>
+              <div class="cube1">
+                  <div class="cons">
+                      <img src="/img/login/cube1.png" alt="" class="cubes">
+                      <img src="/img/login/s2.png" alt="" class="shadow2">
+                  </div>
+              </div>
+              <div class="cube2">
+                  <div class="cons">
+                      <img src="/img/login/cube2.png" alt="" class="cubes">
+                      <img src="/img/login/s3.png" alt="" class="shadow3">
+                  </div>
+              </div>
+              <div class="logo">
+                  <a href="http://hczc.hcxxy.com/" target="_blank">
+                      <div class="a-cons"/>
+                  </a>
+              </div>
+          </div>
       </div>
-      <div class="login-border">
-        <div class="login-main">
-          <h4 class="login-title">
-            {{ $t('login.title') }}{{website.title}}
-            <top-lang></top-lang>
-          </h4>
-          <userLogin v-if="activeName==='user'"></userLogin>
-          <codeLogin v-else-if="activeName==='code'"></codeLogin>
-          <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
-          <div class="login-menu">
-            <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
-            <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
-            <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>
+      <div class="right-container">
+          <div class="right-title">系统后管平台</div>
+          <div class="sign-list">
+              <h1 class="font-lg" style="margin-top:0">登录</h1>
+              <userLogin></userLogin>
+              <div class="remember-password">
+                <el-checkbox v-model="checkbox" label="记住密码"/>
+              </div>
           </div>
-        </div>
-
       </div>
-    </div>
   </div>
 </template>
 <script>
@@ -83,7 +86,9 @@
           source: "",
           code: "",
           state: "",
-        }
+        },
+
+        checkbox:false,
       };
     },
     watch: {
@@ -138,5 +143,388 @@
 </script>
 
 <style lang="scss">
-  @import "@/styles/login.scss";
+  .login-body {
+    position: relative;
+    background-color: #F0FBFF;
+    width: 100%;
+    height: 100vh;
+    padding: 50px 0;
+    min-height: 730px;
+    .left-logo {
+        position: absolute;
+        left: 30px;
+        top: 30px;
+        user-select: none;
+        img {
+            height: 50px;
+        }
+    }
+    .left-pic-container {
+        position: absolute;
+        width: 750px;
+        left: 10%;
+        top: 50%;
+        height: 630px;
+        margin-top: -315px;
+        .left-pic-content {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            background-image: url("/img/login/bg.png");
+            background-repeat: no-repeat;
+            background-size: 100%;
+            background-position: center;
+            .small-logo {
+                width: 110px;
+                position: absolute;
+                .cons {
+                    height: 160px;
+                    overflow: hidden;
+                }
+                .logos {
+                    width: 100%;
+                    margin-top: 30px;
+                }
+                .shadow1 {
+                    width: 64px;
+                    position: absolute;
+                    left: 44%;
+                    transform: translateX(-50%);
+                    bottom: -16px;
+                }
+            }
+            .cons {
+                position: relative;
+            }
+            .dt {
+                left: 166px;
+                top: 86px;
+                .logos {
+                    animation: logoAnimate 4s 0.2s infinite alternate forwards;
+                }
+                .shadow1 {
+                    animation: logoShadowAnimate 4s 0.2s infinite alternate forwards;
+                }
+            }
+            .ds {
+                right: 176px;
+                top: 54px;
+                .logos {
+                    animation: logoAnimate 2.2s infinite alternate;
+                }
+                .shadow1 {
+                    animation: logoShadowAnimate 2.2s infinite alternate;
+                }
+            }
+            .cc {
+                right: 72px;
+                bottom: 160px;
+                .logos {
+                    animation: logoAnimate 2.5s 0.5s infinite alternate;
+                }
+                .shadow1 {
+                    animation: logoShadowAnimate 2.5s 0.5s infinite alternate;
+                }
+            }
+            .rp {
+                left: 290px;
+                bottom: 76px;
+                .logos {
+                    animation: logoAnimate 3s 0.9s infinite alternate;
+                }
+                .shadow1 {
+                    animation: logoShadowAnimate 3s 0.9s infinite alternate;
+                }
+            }
+            .cubes {
+                display: block;
+                width: 100%;
+            }
+            .cube1 {
+                width: 48px;
+                right: 60px;
+                top: 180px;
+                position: absolute;
+                .cons {
+                    height: 108px;
+                    position: relative;
+                    overflow: hidden;
+                    .cubes {
+                        animation: cube1LogoAnimate 2s infinite alternate;
+                    }
+                    .shadow2 {
+                        position: absolute;
+                        width: 56px;
+                        left: 48%;
+                        transform: translateX(-50%);
+                        bottom: -16px;
+                        animation: cube1ShadowAnimate 2s infinite alternate;
+                    }
+                }
+            }
+            .cube2 {
+                position: absolute;
+                width: 56px;
+                left: 130px;
+                bottom: 190px;
+                .cons {
+                    position: relative;
+                    height: 126px;
+                    overflow: hidden;
+                    .cubes {
+                        animation: cube2LogoAnimate 2s 0.3s infinite alternate;
+                    }
+                    .shadow3 {
+                        position: absolute;
+                        width: 64px;
+                        left: 48%;
+                        transform: translateX(-50%);
+                        bottom: -16px;
+                        animation: cube2ShadowAnimate 2s 0.3s infinite alternate;
+                    }
+                }
+            }
+            .logo {
+                right: 260px;
+                top: 190px;
+                width: 150px;
+                position: absolute;
+                height: 160px;
+                cursor: pointer;
+                .a-cons {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+    }
+    .right-container {
+        right: 18.667%;
+        position: absolute;
+        background: #ffffff;
+        border-radius: 16px;
+        transform: translateY(-50%);
+        padding: 50px;
+        width: 92%;
+        top: 50%;
+        max-width: 470px;
+        margin: 0 auto;
+        box-shadow: 0 21.2px 31.8px 0 rgba(26,26,26,0.12);
+        .sign-list {
+            position: relative;
+            h1 {
+                font-size: 40px;
+                line-height: 48px;
+                margin-bottom: 32px;
+            }
+            .title-tab {
+                overflow: hidden;
+                padding-bottom: 16px;
+                div {
+                    float: left;
+                    line-height: 32px;
+                    font-size: 20px;
+                    color: #8C8889;
+                    transition: 0.3s;
+                    position: relative;
+                    padding-top: 16px;
+                    margin-left: 32px;
+                    user-select: none;
+                    &::before {
+                        content: '';
+                        width: 0;
+                        height: 2px;
+                        position: absolute;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        bottom: 0;
+                        background: #1ECC95;
+                        border-radius: 3px;
+                        transition: 0.3s;
+                    }
+                    &:first-child {
+                        margin-left: 0;
+                    }
+                    &:not(.active) {
+                        cursor: pointer;
+                    }
+                    &.active {
+                        color: #353030;
+                        font-weight: bold;
+                        &::before {
+                            width: 100%;
+                        }
+                    }
+                }
+            }
+            .form-box {
+                position: relative;
+                .el-input--large {
+                    --el-input-height: 48px;
+                    --el-input-border-radius: 8px;
+                    font-size: 16px;
+                    .el-input__wrapper {
+                        padding: 1px 16px;
+                    }
+                }
+                .clickable-text {
+                    color: #686565;
+                    cursor: pointer;
+                    transition: 0.2s;
+                    font-size: 14px;
+                    &:hover {
+                        color: #1ECC95
+                    }
+                }
+                .el-button--large {
+                    --el-button-size: 48px;
+                    height: 48px;
+                    padding: 12px 19px;
+                    font-size: 16px;
+                    border: 0;
+                    border-radius: 6px;
+                    background: linear-gradient(90deg,#1fd4af, #1ecc95 100%);
+                }
+            }
+        }
+    }
+}
+
+.right-title{
+  font-size: 45px;
+  position: absolute;
+  top:-80px;
+  font-weight: bold;
+}
+
+.login-submit {
+  width: 100%;
+  height: 45px;
+  border: 1px solid #1ECC95;
+  background: none;
+  font-size: 18px;
+  letter-spacing: 2px;
+  font-weight: 300;
+  color: #FFF;
+  cursor: pointer;
+  margin-top: 60px;
+  font-family: "neo";
+  transition: 0.25s;
+  background: #1ECC95;
+  border-color: #1ECC95;
+}
+.login-submit.el-button--primary:hover {
+    background: #1ECC95;
+    border-color: #1ECC95;
+    color: #FFF;
+}
+
+.remember-password{
+  position: relative;
+  top:-130px;
+
+  .el-checkbox__input.is-checked .el-checkbox__inner{
+    background-color: #1ECC95;
+    border-color: #1ECC95;
+  }
+  .el-checkbox__input.is-checked+.el-checkbox__label{
+    color: #1ECC95;
+  }
+}
+
+.login-form{
+  div.el-form-item:first-child{
+    display: none;
+  }
+
+  .el-input--small .el-input__inner{
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+  }
+
+  .el-input__prefix{
+    top: 5px;
+  }
+
+  [class^="icon-"]{
+    font-size: 20px !important;
+  }
+
+  .el-input__icon{
+    font-size: 16px !important;
+  }
+}
+
+
+//动画效果
+@keyframes logoAnimate {
+    25% {
+        -webkit-transform: translateY(0);
+        -moz-transform: translateY(0);
+        -ms-transform: translateY(0);
+        -o-transform: translateY(0);
+        transform: translateY(0);
+    }
+    100% {
+        -webkit-transform: translateY(-30px);
+        -moz-transform: translateY(-30px);
+        -ms-transform: translateY(-30px);
+        -o-transform: translateY(-30px);
+        transform: translateY(-30px);
+    }
+}
+@keyframes logoShadowAnimate {
+    25% {
+        width: 64px;
+        margin-bottom: 0;
+    }
+    100% {
+        width: 30px;
+        margin-bottom: 20px;
+    }
+}
+@keyframes cube1LogoAnimate {
+    0% {
+        -webkit-transform: translateY(0);
+        -moz-transform: translateY(0);
+        -ms-transform: translateY(0);
+        -o-transform: translateY(0);
+        transform: translateY(0);
+    }
+    100% {
+        -webkit-transform: translateY(30px);
+        -moz-transform: translateY(30px);
+        -ms-transform: translateY(30px);
+        -o-transform: translateY(30px);
+        transform: translateY(30px);
+    }
+}
+@keyframes cube1ShadowAnimate {
+    0% {
+        width: 20px;
+        margin-bottom: 20px;
+    }
+    100% {
+        width: 56px;
+    }
+}
+@keyframes cube2LogoAnimate {
+    0% {
+        margin-top: 30px;
+    }
+    100% {
+        margin-top: 0;
+    }
+}
+@keyframes cube2ShadowAnimate {
+    0% {
+        width: 64px;
+    }
+    100% {
+        width: 30px;
+        margin-bottom: 20px;
+    }
+}
+
 </style>

src/page/login/index_bak.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="login-container"
+       ref="login"
+       @keyup.enter.native="handleLogin">
+    <top-color v-show="false"></top-color>
+    <div class="login-weaper animated bounceInDown">
+      <div class="login-left">
+        <div class="login-time">
+          {{time}}
+        </div>
+        <p class="title">
+          <!-- {{ $t('login.info') }} -->
+        </p>
+        <div style="font-size: 15px">
+          <!-- <span>----------------------------------------------</span>
+          <br>
+          <span>管理租户编号：000000</span>
+          <br>
+          <span>超级管理员账号: admin / admin</span>
+          <br>
+          <span>人事账号: hr / hr</span>
+          <br>
+          <span>经理账号: manager / manager</span>
+          <br>
+          <span>老板账号: boss / boss</span>
+          <br>
+          <span>----------------------------------------------</span>
+          <br>
+          <span>普通租户编号：详见租户管理模块</span>
+          <br>
+          <span>租户管理员账号: admin / admin</span>
+          <br>
+          <span>----------------------------------------------</span> -->
+        </div>
+      <!--<img class="img" src="/img/logo.png" alt="">-->
+      </div>
+      <div class="login-border">
+        <div class="login-main">
+          <h4 class="login-title">
+            {{ $t('login.title') }}{{website.title}}
+            <top-lang></top-lang>
+          </h4>
+          <userLogin v-if="activeName==='user'"></userLogin>
+          <codeLogin v-else-if="activeName==='code'"></codeLogin>
+          <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
+          <div class="login-menu">
+            <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
+            <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
+            <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import userLogin from "./userlogin";
+  import codeLogin from "./codelogin";
+  import thirdLogin from "./thirdlogin";
+  import {mapGetters} from "vuex";
+  import {dateFormat} from "@/util/date";
+  import {validatenull} from "@/util/validate";
+  import topLang from "@/page/index/top/top-lang";
+  import topColor from "@/page/index/top/top-color";
+  import {getQueryString, getTopUrl} from "@/util/util";
+
+  export default {
+    name: "login",
+    components: {
+      userLogin,
+      codeLogin,
+      thirdLogin,
+      topLang,
+      topColor
+    },
+    data() {
+      return {
+        time: "",
+        activeName: "user",
+        socialForm: {
+          tenantId: "000000",
+          source: "",
+          code: "",
+          state: "",
+        }
+      };
+    },
+    watch: {
+      $route() {
+        this.handleLogin();
+      }
+    },
+    created() {
+      this.handleLogin();
+      this.getTime();
+    },
+    mounted() {
+    },
+    computed: {
+      ...mapGetters(["website", "tagWel"])
+    },
+    props: [],
+    methods: {
+      getTime() {
+        setInterval(() => {
+          this.time = dateFormat(new Date());
+        }, 1000);
+      },
+      handleLogin() {
+        const topUrl = getTopUrl();
+        const redirectUrl = "/oauth/redirect/";
+        this.socialForm.source = getQueryString("source");
+        this.socialForm.code = getQueryString("code");
+        this.socialForm.state = getQueryString("state");
+        if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
+          let source = topUrl.split("?")[0];
+          source = source.split(redirectUrl)[1];
+          this.socialForm.source = source;
+        }
+        if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
+          const loading = this.$loading({
+            lock: true,
+            text: '第三方系统登录中,请稍后。。。',
+            spinner: "el-icon-loading"
+          });
+          this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
+            window.location.href = topUrl.split(redirectUrl)[0];
+            this.$router.push({path: this.tagWel.value});
+            loading.close();
+          }).catch(() => {
+            loading.close();
+          });
+        }
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+  @import "@/styles/login.scss";
+</style>