自适应2

ZZJ

2021-12-16 dff9fb32c1bac52d378a6d196f670b92610c01d3

 src/pages/login/App.vue

@@ -1,577 +1,577 @@
<template>
  <!-- <div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">
    <div class="web-site">
      <a href="http://www.smartai.com" target="_blank">www.smartai.com</a>
    </div>

    <lang-select class="lang-select"/>
    <licence />
    <div class="right-bg" style>
      <particle-network />
    </div>
    <div class="left-bg">
      <div class="login-logo">
        <img src="/images/login-logo.png" alt width="105px" height="105px" />
      </div>
      <div class="login-com">
        <span>{{ $t('login.company') }}</span>
      </div>
      <div class="login-form">
        <el-form
          :model="user"
          status-icon
          :rules="nullRule"
          :validate-on-rule-change="false"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="loginName">
            <el-input v-model="user.loginName" style="width:280px" :placeholder="$t('placeholder.enterUsername')">
              <i slot="prefix" class="iconfont iconyonghu1"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              show-password
              @keyup.enter.native="systemLogin()"
              v-model="user.password"
              autocomplete="off"
              style="width:280px"
              :placeholder="$t('placeholder.enterPassword')"
            >
              <i slot="prefix" class="iconfont iconmima"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">{{ $t('button.login') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <p class="gradient-text gradient-text-one">
        ——
        <b>SmartAI</b> {{ $t('login.aios') }} ——
      </p>
      <p
        class="gradient-text gradient-text-one"
        style="letter-spacing: 1.8px;font-size:15px;"
      >V1.0.0</p>
    </div>
  </div> -->
  <div class="login">
    <div class="title">
      <div class="en">{{ data.title_firstLine }}</div>
      <div class="ch">{{ data.title_secondLine }}</div>
    </div>

    <div class="left_footer">
      <img class="logo" src="/apps/loginData/LOGO.png" alt="" />
      <div class="web">{{ data.website }}</div>
    </div>

    <div
      class="login-form"
      :style="{ background: backgroundColor }"
      :class="{ empty: !user.loginName && !user.password }"
    >
      <img class="logo" src="/apps/loginData/leftImg.png" alt="" />

      <el-form
        :model="user"
        status-icon
        :rules="nullRule"
        :validate-on-rule-change="false"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="loginName">
          <el-input
            v-model="user.loginName"
            :placeholder="$t('placeholder.enterUsername')"
          >
            <i slot="prefix" class="iconfont icon">&#xe7e5;</i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            show-password
            @keyup.enter.native="systemLogin()"
            v-model="user.password"
            autocomplete="off"
            :placeholder="$t('placeholder.enterPassword')"
          >
            <i slot="prefix" class="iconfont icon">&#xe7e4;</i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button ref="submit" type="warning" @click="systemLogin()">{{
            $t("button.login")
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { tologin, getLoginUserData, getServerName } from "./api.ts";
import ParticleNetwork from "./ParticleNetwork";
import Licence from "@/components/licence";
import LangSelect from "@/components/langSelect";
import { getMenuListData } from "@/api/utils";
import loginData from "../../../public/apps/loginData/login.json";

export default {
  name: "login-pgae",
  metaInfo: {
    title: "登录页",
  },
  components: {
    //  ParticleNetwork,
    // Licence,
    //  LangSelect
  },
  computed: {
    rules() {
      return {
        loginName: [
          {
            required: true,
            message: this.$t("placeholder.enterUsername"),
            trigger: "change",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("placeholder.enterPassword"),
            trigger: "change",
          },
        ],
      };
    },
  },
  data: () => ({
    data: {},
    serverTitle: "",
    user: {
      loginName: "",
      password: "",
      rememberMe: false,
    },
    nullRule: {},

    loading: "",
    vLoading: false,
    currentHeight: 1057,
    currentWidth: 1920,
    backgroundColor: "",
    backgroundList: [
      "#2A2344",
      "#342344",
      "#000000",
      "#233044",
      "#0B252E",
      "#150051",
      "#110040",
    ],
  }),
  created() {
    this.getServerName();
    this.getScreenHeight();
    this.data = loginData;
    this.backgroundColor =
      this.backgroundList[
        Math.floor(Math.random() * this.backgroundList.length)
      ];
  },
  mounted() {
    // 自动登录接口
    this.loginRobot();
  },
  watch: {},
  beforeDestroy() {
    window.onresize = null;
  },
  methods: {
    loginRobot() {
      // 解析路由参数，并缓存
      let user = this.getQueryVariable("username");
      let passwd = this.getQueryVariable("password");
      if (user.length && passwd.length) {
        sessionStorage.setItem(
          "autoLogin",
          JSON.stringify({ username: user, passwd: passwd })
        );

        this.user.loginName = user;
        this.user.password = passwd;
        this.systemLogin();
        return;
      }

      // 登陆超时后的重新登陆
      let sessionInfo = sessionStorage.getItem("autoLogin");
      if (sessionInfo) {
        let authority = JSON.parse(sessionInfo);
        this.user.loginName = authority.username;
        this.user.password = authority.passwd;
        this.systemLogin();
      }
    },
    systemLogin() {
      this.nullRule = this.rules;
      this.$nextTick(() => {
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            this.loading = this.$loading({
              lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            this.testLogin();
          } else {
            this.nullRule = {};
          }
        });
        this.nullRule = {};
      });
    },
    async testLogin() {
      // location.assign("/view/desktop/")
      tologin({ username: this.user.loginName, password: this.user.password })
        .then((json) => {
          const loginedInfo = {
            access_token: json.token_type + " " + json.access_token,
            refresh_token: json.refresh_token,
          };
          sessionStorage.setItem("expires_in", json.expires_in);
          sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo));
          this.loading.close();
          this.getLoginUserData();
        })
        .catch((err) => {
          this.loading.close();
          this.$notify({
            title: "提示",
            type: "error",
            message: err.msg,
          });
          this.$refs.pwd.focus();
        });
    },
    async getLoginUserData() {
      let res = await getLoginUserData();
      if (res.success) {
        sessionStorage.setItem("userInfo", JSON.stringify(res.data));
        this.$notify.success("登录成功！");
        // 获取权限
        await this.getMenuList();
        location.assign("/view/desktop/");
        return res.data;
      } else {
        this.$notify.error("登录失败！");
      }
    },

    getScreenHeight() {
      this.currentHeight = document.documentElement.clientHeight;
      this.currentWidth = document.documentElement.clientWidth;
      window.onresize = () => {
        this.currentHeight = document.documentElement.clientHeight;
        this.currentWidth = document.documentElement.clientWidth;
        this.$forceUpdate();
      };
    },
    async getServerName() {
      let res = await getServerName();
      if (res && res.success) {
        this.serverTitle = res.data.serverName;
        window.document.title = res.data.serverName
          ? res.data.serverName
          : "SmartAI";
        sessionStorage.setItem("title", res.data.serverName);
      }
    },
    async getMenuList() {
      let results = await getMenuListData({});
      if (results && results.success) {
        /* 存储权限 */
        let buttonAuthoritys = results.data;
        if (results && results.length && this.$route.query.is_login) {
          this.$router.replace(results[0].url);
        }
        sessionStorage.setItem(
          "buttonAuthoritys",
          "," + buttonAuthoritys + ","
        );
        sessionStorage.setItem("menuInfo", JSON.stringify(results));
      } else {
        this.$toast({
          type: "error",
          message: "菜单获取失败",
        });
      }
    },
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    },
  },
};
</script>
<style lang="scss">
html,
body,
.login {
  height: 100%;
  min-width: 1200px;
  min-height: 680px;
  position: relative;
  background-image: url("/apps/loginData/background.png");

  .title {
    position: absolute;
    top: 40%;
    left: 15.6%;
    color: #fff;
    text-align: center;

    .en {
      font-size: 120px;
    }

    .ch {
      font-size: 48px;
      letter-spacing: 9px;
    }
  }

  .left_footer {
    position: absolute;
    display: flex;
    justify-content: start;
    align-items: center;
    left: 18.6%;
    bottom: 40px;

    .logo {
      width: 136px;
      margin-right: 30px;
    }

    .web {
      font-size: 24px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.7);
    }
  }

  .login-form {
    position: absolute;
    width: 40%;
    height: 92.5%;
    right: 3.75%;
    top: 3.75%;
    padding: 0 90px;
    box-sizing: border-box;

    background: #2a2344;
    opacity: 0.95;
    box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.25);
    border-radius: 56px;
    overflow: hidden;

    .logo {
      width: 100%;
      margin-top: 13%;
      margin-bottom: 20px;
    }

    .el-form {
      width: 100%;
    }

    .el-form-item {
      background: rgba(0, 0, 0, 0);
    }

    .el-form-item:nth-child(2) {
      margin-top: 10%;
      margin-bottom: 13%;
    }

    .el-button {
      width: 100%;
      height: 60px;
      background: #4e94ff;
      border-radius: 30px;
      border: none;
    }

    .el-input {
      width: 100%;
      background: rgba(0, 0, 0, 0);
    }

    input {
      width: 100%;
      height: 56px;
      background: rgba(255, 255, 255, 0.1) !important;
      border: 1px solid #4e94ff;
      box-sizing: border-box;
      border-radius: 28px;
      color: #fff;
      caret-color: #fff; //光标颜色
      padding-left: 100px;
      padding-right: 50px;
      font-weight: 700;
    }

    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
      -webkit-text-fill-color: #ededed !important;
      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
      background-color: transparent;
      background-image: none;
      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }

    .el-form-item__error {
      top: 110%;
      left: 80px;
    }

    .icon {
      font-size: 32px;
      color: rgb(80, 151, 255);
    }

    .el-input__prefix {
      padding: 0 20px;
      height: 40px;
      left: 5px;
      top: 8px;
      border-right: 1px solid #4e94ff;
    }

    .el-input__suffix {
      right: 20px;
    }

    .el-icon-circle-close {
      display: none;
    }
  }

  .login-form.empty {
    input {
      border-color: #999;
      color: #bbb;
    }

    .el-button {
      background-color: #999;
      color: #fff;
    }

    .icon {
      color: #fff;
    }

    .el-input__prefix {
      border-color: #d4d6d9;
    }
  }
}

// .right-bg {
//   position: fixed;
//   top: 0;
//   left: 0;
//   background-image: url("/images/login-net.png");

//   width: 100%;
//   height: 100%;
//   min-width: 1000px;
//   z-index: -10;
//   zoom: 1;
//   background-color: #fff;
//   background-repeat: no-repeat;
//   background-size: cover;
//   -webkit-background-size: cover;
//   -o-background-size: cover;
//   background-position: center 0;
// }
// .web-site {
//   position: absolute;
//   top: 55px;
//   left: 41px;
//   font-family: PingFangSC-Medium;
//   font-size: 20px;
//   color: #6170e1;
//   letter-spacing: 6.15px;
// }
// .lang-select {
//   float: right;
//   color: white !important;
//   font-size: 14px;
//   margin: 13px;
//   cursor: pointer;
// }
// .left-bg {
//   position: absolute;
//   top: 29%;
//   right: 18%;
//   width: 390px;
//   height: 426px;
//   background: rgba(146, 208, 255, 0.23);
//   border-radius: 4px;
//   text-align: center;
//   .login-logo {
//     margin-top: -53px;
//   }

//   .login-com {
//     font-family: PingFangSC-Medium;
//     font-size: 22px;
//     color: #ffffff;
//     letter-spacing: 0.44px;
//     margin: 15px;
//   }
//   .login-form {
//     margin: 40px 10px;
//   }
//   .gradient-text {
//     line-height: 36px;
//     font-size: 17px;
//     font-family: -webkit-pictograph;
//     font-weight: bolder;
//     position: relative;
//     b {
//       font-size: 20px;
//     }
//   }
//   .gradient-text-one {
//     background-image: linear-gradient(to right, #51feff 5%, #ff8725 100%);
//     -webkit-background-clip: text;
//     -webkit-text-fill-color: transparent;
//   }

//   .el-input__prefix {
//     left: 8px;
//   }

//   .el-form-item__error {
//     left: 54px;
//   }
// }
</style>
<template>

  <!-- <div class v-loading="vLoading" :style="`width: ${currentWidth}px;height:${currentHeight}px`">

    <div class="web-site">

      <a href="http://www.smartai.com" target="_blank">www.smartai.com</a>

    </div>



    <lang-select class="lang-select"/>

    <licence />

    <div class="right-bg" style>

      <particle-network />

    </div>

    <div class="left-bg">

      <div class="login-logo">

        <img src="/images/login-logo.png" alt width="105px" height="105px" />

      </div>

      <div class="login-com">

        <span>{{ $t('login.company') }}</span>

      </div>

      <div class="login-form">

        <el-form

          :model="user"

          status-icon

          :rules="nullRule"

          :validate-on-rule-change="false"

          ref="ruleForm"

          class="demo-ruleForm"

        >

          <el-form-item prop="loginName">

            <el-input v-model="user.loginName" style="width:280px" :placeholder="$t('placeholder.enterUsername')">

              <i slot="prefix" class="iconfont iconyonghu1"></i>

            </el-input>

          </el-form-item>

          <el-form-item prop="password">

            <el-input

              show-password

              @keyup.enter.native="systemLogin()"

              v-model="user.password"

              autocomplete="off"

              style="width:280px"

              :placeholder="$t('placeholder.enterPassword')"

            >

              <i slot="prefix" class="iconfont iconmima"></i>

            </el-input>

          </el-form-item>

          <el-form-item>

            <el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">{{ $t('button.login') }}</el-button>

          </el-form-item>

        </el-form>

      </div>

      <p class="gradient-text gradient-text-one">

        ——

        <b>SmartAI</b> {{ $t('login.aios') }} ——

      </p>

      <p

        class="gradient-text gradient-text-one"

        style="letter-spacing: 1.8px;font-size:15px;"

      >V1.0.0</p>

    </div>

  </div> -->

  <div class="login">

    <div class="title">

      <div class="en">{{ data.title_firstLine }}</div>

      <div class="ch">{{ data.title_secondLine }}</div>

    </div>



    <div class="left_footer">

      <img class="logo" src="/apps/loginData/LOGO.png" alt="" />

      <div class="web">{{ data.website }}</div>

    </div>



    <div

      class="login-form"

      :style="{ background: backgroundColor }"

      :class="{ empty: !user.loginName || !user.password }"

    >

      <img class="logo" src="/apps/loginData/leftImg.png" alt="" />



      <el-form

        :model="user"

        status-icon

        :rules="nullRule"

        :validate-on-rule-change="false"

        ref="ruleForm"

        class="demo-ruleForm"

      >

        <el-form-item prop="loginName">

          <el-input

            v-model="user.loginName"

            :placeholder="$t('placeholder.enterUsername')"

          >

            <i slot="prefix" class="iconfont icon">&#xe7e5;</i>

          </el-input>

        </el-form-item>

        <el-form-item prop="password">

          <el-input

            show-password

            @keyup.enter.native="systemLogin()"

            v-model="user.password"

            autocomplete="off"

            :placeholder="$t('placeholder.enterPassword')"

          >

            <i slot="prefix" class="iconfont icon">&#xe7e4;</i>

          </el-input>

        </el-form-item>

        <el-form-item>

          <el-button ref="submit" type="warning" @click="systemLogin()">{{

            $t("button.login")

          }}</el-button>

        </el-form-item>

      </el-form>

    </div>

  </div>

</template>



<script>

import { tologin, getLoginUserData, getServerName } from "./api.ts";

import ParticleNetwork from "./ParticleNetwork";

import Licence from "@/components/licence";

import LangSelect from "@/components/langSelect";

import { getMenuListData } from "@/api/utils";

import loginData from "../../../public/apps/loginData/login.json";



export default {

  name: "login-pgae",

  metaInfo: {

    title: "登录页",

  },

  components: {

    //  ParticleNetwork,

    // Licence,

    //  LangSelect

  },

  computed: {

    rules() {

      return {

        loginName: [

          {

            required: true,

            message: this.$t("placeholder.enterUsername"),

            trigger: "change",

          },

        ],

        password: [

          {

            required: true,

            message: this.$t("placeholder.enterPassword"),

            trigger: "change",

          },

        ],

      };

    },

  },

  data: () => ({

    data: {},

    serverTitle: "",

    user: {

      loginName: "",

      password: "",

      rememberMe: false,

    },

    nullRule: {},



    loading: "",

    vLoading: false,

    currentHeight: 1057,

    currentWidth: 1920,

    backgroundColor: "",

    backgroundList: [

      "#2A2344",

      "#342344",

      "#000000",

      "#233044",

      "#0B252E",

      "#150051",

      "#110040",

    ],

  }),

  created() {

    this.getServerName();

    this.getScreenHeight();

    this.data = loginData;

    this.backgroundColor =

      this.backgroundList[

        Math.floor(Math.random() * this.backgroundList.length)

      ];

  },

  mounted() {

    // 自动登录接口

    this.loginRobot();

  },

  watch: {},

  beforeDestroy() {

    window.onresize = null;

  },

  methods: {

    loginRobot() {

      // 解析路由参数，并缓存

      let user = this.getQueryVariable("username");

      let passwd = this.getQueryVariable("password");

      if (user.length && passwd.length) {

        sessionStorage.setItem(

          "autoLogin",

          JSON.stringify({ username: user, passwd: passwd })

        );



        this.user.loginName = user;

        this.user.password = passwd;

        this.systemLogin();

        return;

      }



      // 登陆超时后的重新登陆

      let sessionInfo = sessionStorage.getItem("autoLogin");

      if (sessionInfo) {

        let authority = JSON.parse(sessionInfo);

        this.user.loginName = authority.username;

        this.user.password = authority.passwd;

        this.systemLogin();

      }

    },

    systemLogin() {

      this.nullRule = this.rules;

      this.$nextTick(() => {

        this.$refs["ruleForm"].validate((valid) => {

          if (valid) {

            this.loading = this.$loading({

              lock: true,

              text: "Loading",

              spinner: "el-icon-loading",

              background: "rgba(0, 0, 0, 0.7)",

            });

            this.testLogin();

          } else {

            this.nullRule = {};

          }

        });

        this.nullRule = {};

      });

    },

    async testLogin() {

      // location.assign("/view/desktop/")

      tologin({ username: this.user.loginName, password: this.user.password })

        .then((json) => {

          const loginedInfo = {

            access_token: json.token_type + " " + json.access_token,

            refresh_token: json.refresh_token,

          };

          sessionStorage.setItem("expires_in", json.expires_in);

          sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo));

          this.loading.close();

          this.getLoginUserData();

        })

        .catch((err) => {

          this.loading.close();

          this.$notify({

            title: "提示",

            type: "error",

            message: err.msg,

          });

          this.$refs.pwd.focus();

        });

    },

    async getLoginUserData() {

      let res = await getLoginUserData();

      if (res.success) {

        sessionStorage.setItem("userInfo", JSON.stringify(res.data));

        this.$notify.success("登录成功！");

        // 获取权限

        await this.getMenuList();

        location.assign("/view/desktop/");

        return res.data;

      } else {

        this.$notify.error("登录失败！");

      }

    },



    getScreenHeight() {

      this.currentHeight = document.documentElement.clientHeight;

      this.currentWidth = document.documentElement.clientWidth;

      window.onresize = () => {

        this.currentHeight = document.documentElement.clientHeight;

        this.currentWidth = document.documentElement.clientWidth;

        this.$forceUpdate();

      };

    },

    async getServerName() {

      let res = await getServerName();

      if (res && res.success) {

        this.serverTitle = res.data.serverName;

        window.document.title = res.data.serverName

          ? res.data.serverName

          : "SmartAI";

        sessionStorage.setItem("title", res.data.serverName);

      }

    },

    async getMenuList() {

      let results = await getMenuListData({});

      if (results && results.success) {

        /* 存储权限 */

        let buttonAuthoritys = results.data;

        if (results && results.length && this.$route.query.is_login) {

          this.$router.replace(results[0].url);

        }

        sessionStorage.setItem(

          "buttonAuthoritys",

          "," + buttonAuthoritys + ","

        );

        sessionStorage.setItem("menuInfo", JSON.stringify(results));

      } else {

        this.$toast({

          type: "error",

          message: "菜单获取失败",

        });

      }

    },

    getQueryVariable(variable) {

      var query = window.location.search.substring(1);

      var vars = query.split("&");

      for (var i = 0; i < vars.length; i++) {

        var pair = vars[i].split("=");

        if (pair[0] == variable) {

          return pair[1];

        }

      }

      return false;

    },

  },

};

</script>

<style lang="scss">

html,

body,

.login {

  height: 100%;

  min-width: 1200px;

  min-height: 680px;

  position: relative;

  background-image: url("/apps/loginData/background.png");



  .title {

    position: absolute;

    top: 40%;

    left: 15.6%;

    color: #fff;

    text-align: center;



    .en {

      font-size: 120px;

    }



    .ch {

      font-size: 48px;

      letter-spacing: 9px;

    }

  }



  .left_footer {

    position: absolute;

    display: flex;

    justify-content: start;

    align-items: center;

    left: 18.6%;

    bottom: 40px;



    .logo {

      width: 136px;

      margin-right: 30px;

    }



    .web {

      font-size: 24px;

      font-weight: 700;

      color: rgba(255, 255, 255, 0.7);

    }

  }



  .login-form {

    position: absolute;

    width: 40%;

    height: 92.5%;

    right: 3.75%;

    top: 3.75%;

    padding: 0 90px;

    box-sizing: border-box;



    background: #2a2344;

    opacity: 0.95;

    box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.25);

    border-radius: 56px;

    overflow: hidden;



    .logo {

      width: 100%;

      margin-top: 13%;

      margin-bottom: 20px;

    }



    .el-form {

      width: 100%;

    }



    .el-form-item {

      background: rgba(0, 0, 0, 0);

    }



    .el-form-item:nth-child(2) {

      margin-top: 10%;

      margin-bottom: 13%;

    }



    .el-button {

      width: 100%;

      height: 60px;

      background: #4e94ff;

      border-radius: 30px;

      border: none;

    }



    .el-input {

      width: 100%;

      background: rgba(0, 0, 0, 0);

    }



    input {

      width: 100%;

      height: 56px;

      background: rgba(255, 255, 255, 0.1) !important;

      border: 1px solid #4e94ff;

      box-sizing: border-box;

      border-radius: 28px;

      color: #fff;

      caret-color: #fff; //光标颜色

      padding-left: 100px;

      padding-right: 50px;

      font-weight: 700;

    }



    input:-webkit-autofill,

    textarea:-webkit-autofill,

    select:-webkit-autofill {

      -webkit-text-fill-color: #ededed !important;

      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;

      background-color: transparent;

      background-image: none;

      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间

    }



    .el-form-item__error {

      top: 110%;

      left: 80px;

    }



    .icon {

      font-size: 32px;

      color: rgb(80, 151, 255);

    }



    .el-input__prefix {

      padding: 0 20px;

      height: 40px;

      left: 5px;

      top: 8px;

      border-right: 1px solid #4e94ff;

    }



    .el-input__suffix {

      right: 20px;

    }



    .el-icon-circle-close {

      display: none;

    }

  }



  .login-form.empty {

    input {

      border-color: #999;

      color: #bbb;

    }



    .el-button {

      background-color: #999;

      color: #fff;

    }



    .icon {

      color: #fff;

    }



    .el-input__prefix {

      border-color: #d4d6d9;

    }

  }

}



// .right-bg {

//   position: fixed;

//   top: 0;

//   left: 0;

//   background-image: url("/images/login-net.png");



//   width: 100%;

//   height: 100%;

//   min-width: 1000px;

//   z-index: -10;

//   zoom: 1;

//   background-color: #fff;

//   background-repeat: no-repeat;

//   background-size: cover;

//   -webkit-background-size: cover;

//   -o-background-size: cover;

//   background-position: center 0;

// }

// .web-site {

//   position: absolute;

//   top: 55px;

//   left: 41px;

//   font-family: PingFangSC-Medium;

//   font-size: 20px;

//   color: #6170e1;

//   letter-spacing: 6.15px;

// }

// .lang-select {

//   float: right;

//   color: white !important;

//   font-size: 14px;

//   margin: 13px;

//   cursor: pointer;

// }

// .left-bg {

//   position: absolute;

//   top: 29%;

//   right: 18%;

//   width: 390px;

//   height: 426px;

//   background: rgba(146, 208, 255, 0.23);

//   border-radius: 4px;

//   text-align: center;

//   .login-logo {

//     margin-top: -53px;

//   }



//   .login-com {

//     font-family: PingFangSC-Medium;

//     font-size: 22px;

//     color: #ffffff;

//     letter-spacing: 0.44px;

//     margin: 15px;

//   }

//   .login-form {

//     margin: 40px 10px;

//   }

//   .gradient-text {

//     line-height: 36px;

//     font-size: 17px;

//     font-family: -webkit-pictograph;

//     font-weight: bolder;

//     position: relative;

//     b {

//       font-size: 20px;

//     }

//   }

//   .gradient-text-one {

//     background-image: linear-gradient(to right, #51feff 5%, #ff8725 100%);

//     -webkit-background-clip: text;

//     -webkit-text-fill-color: transparent;

//   }



//   .el-input__prefix {

//     left: 8px;

//   }



//   .el-form-item__error {

//     left: 54px;

//   }

// }

</style>