saas_pc/src/components/login/index.vue

<template>
  <div id="">
    <div class="loginDialog">
      <el-dialog
        title=""
        width="675px"
        :visible.sync="dialogVisible"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
      >
        <div class="login_box">
          <img class="left" src="@/assets/new1/dlgg.png" alt="" />
          <div class="right">
            <el-form
              v-show="
                activeName == 'generalLogin' ||
                activeName == 'quickLogin' ||
                activeName == 'wxLogin'
              "
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              ><el-tabs stretch v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="普通登录" name="generalLogin">
                  <template v-if="activeName == 'generalLogin'">
                    <el-form-item
                      label=""
                      prop="account"
                      style="margin-top: 20px"
                    >
                      <el-input
                        clearable
                        class="input_300"
                        placeholder="手机号码/身份证号"
                        v-model="ruleForm.account"
                      ></el-input> </el-form-item
                    ><el-form-item label="" prop="pwd">
                      <el-input
                        clearable
                        class="input_300"
                        show-password
                        placeholder="密码"
                        v-model="ruleForm.pwd"
                      ></el-input>
                    </el-form-item>
                    <div class="find_res">
                      <span @click="signIn">立即注册</span>
                      <span @click="forget">找回密码</span>
                    </div>
                    <el-button
                      class="submit"
                      type="primary"
                      :loading="islogin"
                      round
                      @click="login"
                      >登录</el-button
                    >
                    <div
                      v-if="false"
                      class="wx_login"
                      @click="login_open"
                    ></div>
                  </template>
                </el-tab-pane>
                <el-tab-pane label="手机快速登录" name="quickLogin">
                  <template v-if="activeName == 'quickLogin'">
                    <el-form-item label="" prop="tel" style="margin-top: 20px">
                      <el-input
                        clearable
                        class="input_300"
                        placeholder="手机号码"
                        v-model="ruleForm.tel"
                      ></el-input> </el-form-item
                    ><el-form-item label="" prop="code">
                      <el-input
                        clearable
                        class="input_300"
                        placeholder="短信验证码"
                        v-model="ruleForm.code"
                      >
                        <template slot="append"
                          ><span class="getCode" @click="loginSmsForm">{{
                            registerCountDown == 0
                              ? "获取验证码"
                              : `${registerCountDown}秒重新获取`
                          }}</span></template
                        ></el-input
                      >
                    </el-form-item>
                    <drag-verify
                      v-if="showHk"
                      style="margin: 0 auto 10px"
                      :width="300"
                      ref="dragVerify"
                      handlerBg="#8ec6e9"
                      :isPassing.sync="isPassing"
                      text="请按住滑块拖动以完成验证"
                      successText="验证通过"
                      handlerIcon="el-icon-d-arrow-right"
                      successIcon="el-icon-circle-check"
                      @passcallback="passcallback"
                    >
                      <i
                        v-show="!isPassing"
                        slot="textBefore"
                        class="el-icon-lock"
                      ></i>
                    </drag-verify>
                    <div class="find_res">
                      <span @click="signIn">立即注册</span>
                      <span @click="forget">找回密码</span>
                    </div>
                    <el-button
                      class="submit"
                      type="primary"
                      :loading="islogin"
                      round
                      @click="login"
                      >登录</el-button
                    >
                    <div
                      v-if="false"
                      class="wx_login"
                      @click="login_open"
                    ></div>
                  </template>
                </el-tab-pane>
                <!-- <el-tab-pane label="微信登录" name="wxLogin">
                <div class="dis_flex">
                  <img
                    :src="
                      imgUrl && !scanningStatus
                        ? imgUrl
                        : require('@/assets/qrcode.png')
                    "
                    alt=""
                  />
                  <p v-if="scanningStatus" style="color: red">小程序已扫码</p>
                  <p class="headerTitle">使用微信扫一扫快捷登录</p>
                  <p class="clickFuncStyle">
                    扫描即表示同意<br /><span @click="innerVisibleOpenFunc(1)"
                      >《用户使用协议》</span
                    >及<span @click="innerVisibleOpenFunc(2)"
                      >《个人信息保护政策》</span
                    >
                  </p>
                </div>
              </el-tab-pane> -->
              </el-tabs></el-form
            >
            <el-form
              v-show="activeName == 'signIn' || activeName == 'forget'"
              :model="bindForm"
              :rules="binds"
              ref="bindForm"
              label-width="100px"
              class="demo-ruleForm"
              ><el-tabs stretch v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="账号注册" name="signIn">
                  <template v-if="activeName == 'signIn'">
                    <el-form-item label="" prop="tel" style="margin-top: 20px">
                      <el-input
                        clearable
                        class="input_300"
                        placeholder="手机号码"
                        v-model="bindForm.tel"
                      ></el-input> </el-form-item
                    ><el-form-item label="" prop="code">
                      <el-input
                        clearable
                        class="input_300"
                        placeholder="短信验证码"
                        v-model="bindForm.code"
                      >
                        <template slot="append"
                          ><span class="getCode" @click="loginSmsForm">{{
                            registerCountDown == 0
                              ? "获取验证码"
                              : `${registerCountDown}秒重新获取`
                          }}</span></template
                        ></el-input
                      > </el-form-item
                    ><drag-verify
                      v-if="showHk"
                      style="margin: 0 auto 10px"
                      :width="300"
                      ref="dragVerify"
                      handlerBg="#8ec6e9"
                      :isPassing.sync="isPassing"
                      text="请按住滑块拖动以完成验证"
                      successText="验证通过"
                      handlerIcon="el-icon-d-arrow-right"
                      successIcon="el-icon-circle-check"
                      @passcallback="passcallback"
                    >
                      <i
                        v-show="!isPassing"
                        slot="textBefore"
                        class="el-icon-lock"
                      ></i> </drag-verify
                    ><el-form-item label="" prop="pwd">
                      <el-input
                        clearable
                        class="input_300"
                        show-password
                        placeholder="设置密码"
                        v-model="bindForm.pwd"
                      ></el-input>
                    </el-form-item>
                    <el-form-item prop="idcard" style="margin-bottom: 10px">
                      <el-input
                        class="input_300"
                        placeholder="身份证号码"
                        v-model="bindForm.idcard"
                        maxlength="18"
                      >
                      </el-input
                    ></el-form-item>
                    <el-form-item
                      prop="read"
                      style="margin-bottom: 0px; margin-top: 6px"
                    >
                      <div
                        class="find_res"
                        style="margin-bottom: 0px; height: 24px"
                      >
                        <el-checkbox v-model="bindForm.read"
                          >我已认真阅读并同意</el-checkbox
                        >
                        <span @click="activeName = 'generalLogin'"
                          >前往登录</span
                        >
                      </div>
                    </el-form-item>
                    <p
                      class="clickFuncStyle"
                      style="margin-top: 20px"
                      v-if="$store.state.TENANT_NANE == '867735392558919680'"
                    >
                      <span @click="innerVisibleOpenFunc(1)"
                        >《用户使用协议》</span
                      >及<span @click="innerVisibleOpenFunc(2)"
                        >《个人信息保护政策》</span
                      >
                    </p>
                    <el-button
                      class="submit"
                      type="primary"
                      :loading="islogin"
                      round
                      @click="register"
                      >注册</el-button
                    >
                  </template>
                </el-tab-pane>
                <el-tab-pane label="找回密码" name="forget"
                  ><template v-if="activeName == 'forget'">
                    <el-form-item label="" prop="tel" style="margin-top: 20px">
                      <el-input
                        clearable
                        class="input_300"
                        placeholder="手机号码"
                        v-model="bindForm.tel"
                      ></el-input> </el-form-item
                    ><el-form-item label="" prop="code">
                      <el-input
                        clearable
                        class="input_300"
                        placeholder="短信验证码"
                        v-model="bindForm.code"
                      >
                        <template slot="append"
                          ><span class="getCode" @click="loginSmsForm">{{
                            registerCountDown == 0
                              ? "获取验证码"
                              : `${registerCountDown}秒重新获取`
                          }}</span></template
                        ></el-input
                      > </el-form-item
                    ><drag-verify
                      v-if="showHk"
                      style="margin: 0 auto 10px"
                      :width="300"
                      ref="dragVerify"
                      handlerBg="#8ec6e9"
                      :isPassing.sync="isPassing"
                      text="请按住滑块拖动以完成验证"
                      successText="验证通过"
                      handlerIcon="el-icon-d-arrow-right"
                      successIcon="el-icon-circle-check"
                      @passcallback="passcallback"
                    >
                      <i
                        v-show="!isPassing"
                        slot="textBefore"
                        class="el-icon-lock"
                      ></i> </drag-verify
                    ><el-form-item label="" prop="pwd">
                      <el-input
                        clearable
                        class="input_300"
                        show-password
                        placeholder="设置密码"
                        v-model="bindForm.pwd"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="pwdAgain">
                      <el-input
                        clearable
                        class="input_300"
                        show-password
                        placeholder="再次输入密码"
                        v-model="bindForm.pwdAgain"
                      ></el-input>
                    </el-form-item>
                    <div class="find_res">
                      <span @click="activeName = 'generalLogin'">前往登录</span>
                    </div>
                    <el-button
                      class="submit"
                      type="primary"
                      :loading="islogin"
                      round
                      @click="forgetFunc"
                      >确定</el-button
                    >
                  </template></el-tab-pane
                ></el-tabs
              >
            </el-form>
          </div>
          <i class="close_btn el-icon-circle-close" @click="closeTang"></i>
        </div>
      </el-dialog>
    </div>
    <!-- 检查是否有二建班级10天过期提示弹窗 -->
    <div>
      <el-dialog
        class="dialogBox"
        width="430px"
        :visible.sync="checkDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :modal-append-to-body="false"
        :show-close="false"
      >
        <template>
          <div style="color: #000; display: flex">
            <div
              class="el-icon-warning"
              style="color: #f59a23; margin: 8px 5px 0 0"
            ></div>
            <div>
              尊敬的用户：您购买的课程
              <span v-for="item, index in checkTwoClassList" :key="index">
               【{{ item.gradeName }}】班级有效期还剩 {{
                $tools.GetRTime(item.classEndTime) > 0
                  ? $tools.GetRTime(item.classEndTime)
                  : 0
                }}天，请在
                {{
                  $tools.timestampToTime(item.classEndTime, true, true)
                }}前完成学习及考试，到期未完成学时清零，需重新学习。<br>
              </span>
            </div>
          </div>
          <div style="margin-left: 15px">
            <el-button
              class="btn"
              type="primary"
              @click="$router.push('/person-center/my-course')"
              size="small"
              >进入学习</el-button
            >
            <el-button
              class="btn"
              plain
              size="small"
              @click="checkDialogVisible = false"
              >取 消</el-button
            >
          </div>
        </template>
      </el-dialog>
    </div>
    <agree ref="agree"></agree>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import agree from "./agree.vue";
export default {
  components: { agree },
  data() {
    const pwdAgainCheck = async (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请再次输入新密码"));
      } else if (this.bindForm.pwd != this.bindForm.pwdAgain) {
        return callback(new Error("两次输入密码不一致！"));
      } else {
        callback();
      }
    };
    const validatorTel = (rule, value, callback) => {
      var reg = /^1[3456789][0-9]{9}$/;
      if (!reg.test(value)) {
        return callback(new Error("请输入正确手机号码"));
      } else {
        callback();
      }
    };
    var validateAccept = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请勾选服务协议"));
      } else {
        callback();
      }
    };
    const validateRegisAccept = (rule, value, callback) => {
      let _IDRe18 =
        /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
      let _IDre15 =
        /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/;
      if (!_IDRe18.test(value) && !_IDre15.test(value)) {
        return callback(new Error("请输入正确身份证号码"));
      } else {
        callback();
      }
    };
    return {
      checkTwoClassList: {}, // 检查是否有二建班级10天过期
      checkDialogVisible: false, // 检查是否有二建班级10天过期
      showHk: false, // 是否展示滑块  点击登录按钮是 设置为true 同时隐藏登录按钮
      isPassing: false, // 滑块状态
      checked: false,
      islogin: false,
      imgUrl: "",
      scanningStatus: false, //扫码状态
      interValTime: null,
      interValupdate: null,
      scanCode: "",
      dialogVisible: false,
      activeName: "generalLogin",
      ruleForm: {},
      bindForm: {
        read: false,
      },
      registerCountDown: 0,
      getRegisterCodeLock: false,
      registerCountDownTimer: null,
      rules: {
        account: [
          { required: true, trigger: "blur", message: "请输入手机号/身份证号" },
        ],
        pwd: [{ required: true, trigger: "blur", message: "请输入密码" }],
        tel: [
          { required: true, trigger: "blur", message: "请输入手机号" },
          { validator: validatorTel, trigger: "blur" },
        ],
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
      },
      binds: {
        tel: [{ validator: validatorTel, trigger: "blur" }],
        pwd: [
          { required: true, trigger: "blur", message: "请输入密码" },
          { min: 8, max: 10, message: "要求长度8-10位", trigger: "blur" },
        ],
        pwdAgain: [
          {
            required: true,
            validator: pwdAgainCheck,
            trigger: "blur",
          },
        ],
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
        idcard: [{ validator: validateRegisAccept, trigger: "blur" }],
        read: [
          {
            required: true,
            trigger: ["blur", "change"],
            validator: validateAccept,
          },
        ],
      },
    };
  },
  beforeDestroy() {
    this.closeFunc();
    console.log("销毁");
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  watch: {
    activeName() {
      this.showHk = false;
      this.isPassing = false;
    },
  },
  methods: {
    ...mapMutations(["setUserInfo", "setCurrentRouter"]),
    closeTang() {
      this.closeFunc();
      this.dialogVisible = false;
    },
    forgetFunc() {
      this.$refs.bindForm.validate((valid) => {
        if (valid) {
          this.islogin = true;
          const { tel, code, pwd, pwdAgain } = this.bindForm;
          this.$request
            .forgetUser({ tel, code, pwd, pwdAgain })
            .then((res) => {
              this.islogin = false;
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.$refs.bindForm.resetFields();
            })
            .catch((err) => {
              this.islogin = false;
              this.$message.warning(err.msg);
            });
        }
      });
    },

    /**
     * 注册
     */
    registerFunc() {
      this.$refs.bindForm.validate((valid) => {
        if (valid) {
          this.islogin = true;
          const { tel, code, pwd, idcard } = this.bindForm;
          this.$request
            .registerUser({ tel, code, pwd, idcard })
            .then((res) => {
              //自动登录
              this.autoLogin();
            })
            .catch((err) => {
              this.islogin = false;
              this.$message.warning(err.msg);
            });
        }
      });
    },
    /**
     * 注册后自动登录并跳转绑定身份信息
     */
    autoLogin() {
      let loginForm = JSON.parse(JSON.stringify(this.bindForm));
      var account = loginForm.tel;
      var pwd = this.$tools.encryptor(loginForm.pwd);
      this.$request
        .login({
          account,
          pwd,
        })
        .then((res) => {
          localStorage.setItem("user_account", res.data.user_account);
          localStorage.setItem("token", res.data.token);
          this.$tools.setUuid(new Date().valueOf() + "");
          this.getInfo();
          this.islogin = false;
        })
        .catch((err) => {
          this.islogin = false;
          this.$message({
            message: err.msg,
            type: "error",
          });
        });
    },
    //注册
    signIn() {
      this.activeName = "signIn";
    },
    forget() {
      this.activeName = "forget";
    },
    register() {
      this.$refs.bindForm.validate((valid) => {
        if (valid) {
          this.registerFunc();
        }
      });
    },
    login() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.islogin = true;
          let loginForm = null;
          const A = JSON.parse(JSON.stringify(this.ruleForm));
          switch (this.activeName) {
            case "generalLogin":
              loginForm = {
                account: A.account,
                pwd: this.$tools.encryptor(A.pwd),
              };
              break;
            case "quickLogin":
              loginForm = {
                tel: A.tel,
                code: A.code,
              };
              break;

            default:
              break;
          }
          if (!loginForm) {
            this.$message({
              message: "异常错误，请联系管理员",
              type: "error",
            });
            return;
          }
          this.$request[
            this.activeName == "generalLogin" ? "login" : "loginSms"
          ](loginForm)
            .then((res) => {
              localStorage.setItem("user_account", res.data.user_account);
              localStorage.setItem("token", res.data.token);
              this.$tools.setUuid(new Date().valueOf() + "");
              this.getInfo();
            })
            .catch((err) => {
              this.islogin = false;
              this.$message({
                message: err.msg,
                type: "error",
              });
            });
        }
      });
    },
    /**
     * 查看协议
     */
    innerVisibleOpenFunc(int) {
      this.$refs.agree.openBox(int, true);
    },
    /**
     * 更新二维码
     */
    updateQRcode() {
      this.$request.pc_login_url().then((res) => {
        if (res.code === 200) {
          this.imgUrl = res.data.urlBase64;
          this.scanCode = res.data.scanCode;
        } else {
          this.imgUrl = "";
        }
      });
    },
    /**
     * 获取用户登录信息
     */
    getInfo() {
      this.$request
        .getInfo({ fromPlat: 2 })
        .then((res) => {
          this.$store.commit("setUserInfo", res.data);
          this.$message.success("登录成功");
          this.closeFunc();
          this.checkTenClassGradeUser(); // 登陆成功后检查二建剩余时间
          this.dialogVisible = false;
        })
        .catch((err) => {
          this.islogin = false;
          this.$message({
            message: err.msg,
            type: "error",
          });
        });
    },
    /**
     * 更新登入状态
     */
    updateBackApi() {
      this.$request
        .check_login_url({
          scanCode: this.scanCode,
        })
        .then((res) => {
          this.backData(res);
          this.scanningStatus = false;
        })
        .catch((err) => {
          if (err.msg === "小程序已扫码" && this.interValTime !== null) {
            clearInterval(this.interValTime);
            this.interValTime = null;
            this.scanningStatus = true;
          } else if (err.msg === "暂未登录" && !this.interValTime) {
            this.interValTime = setInterval(() => {
              this.updateQRcode();
            }, 60000);
            this.scanningStatus = false;
          }
        });
    },
    /**
     * 组件返回数据
     */
    async backData(res) {
      localStorage.setItem("user_account", res.data.user_account);
      localStorage.setItem("token", res.data.token);
      this.$tools.setUuid(new Date().valueOf() + "");
      this.getInfo();
    },
    /**
     * 关闭方法合集
     */
    closeFunc() {
      clearInterval(this.interValTime);
      clearInterval(this.interValupdate);
      this.interValTime = null;
      this.interValupdate = null;
      this.islogin = false;
      this.scanCode = "";
      this.checkDialogVisible = false;
    },
    login_open() {
      this.activeName = "wxLogin";
      this.updateQRcode();
      this.interValTime = setInterval(() => {
        this.updateQRcode();
      }, 60000);
      this.interValupdate = setInterval(() => {
        this.updateBackApi();
      }, 3000);
    },
    handleClick(e) {
      if (e.name == "wxLogin") {
        this.updateQRcode();
        this.interValTime = setInterval(() => {
          this.updateQRcode();
        }, 60000);
        this.interValupdate = setInterval(() => {
          this.updateBackApi();
        }, 3000);
      } else {
        if (
          this.activeName == "generalLogin" ||
          this.activeName == "quickLogin"
        ) {
          this.$nextTick(() => {
            this.$refs.ruleForm.clearValidate();
          });
        }
        if (this.activeName == "signIn" || this.activeName == "forget") {
          this.$nextTick(() => {
            this.$refs.bindForm.clearValidate();
          });
        }
        this.closeFunc();
      }
    },
    loginSmsForm() {
      this.$refs[
        this.activeName == "quickLogin" ? "ruleForm" : "bindForm"
      ].validateField("tel", (valid) => {
        if (!valid) {
          if (this.registerCountDown == 0) {
            if (this.getRegisterCodeLock) {
              return;
            }
            this.showHk = true;
          }
        }
      });
    },
    // 滑块完成函数
    passcallback() {
      this.$message.success("校验成功");
      setTimeout(() => {
        this.showHk = false;
        this.isPassing = false;
        this.loginSmsFormBack();
      }, 500);
    },
    /**
     * 获取验证码
     */
    loginSmsFormBack() {
      var self = this;
      this.getRegisterCodeLock = true;
      this.$request[
        this.activeName == "quickLogin"
          ? "getLoginSms"
          : this.activeName == "signIn"
          ? "getRegisterSms"
          : "getRegisterSmsforget"
      ]({
        tel: this[this.activeName == "quickLogin" ? "ruleForm" : "bindForm"]
          .tel,
      })
        .then((res) => {
          this.getRegisterCodeLock = false;
          this.$message({
            message: `验证码已发送`,
            type: "success",
          });
          this.registerCountDown = 60;
          this.registerCountDownTimer = setInterval(() => {
            self.registerCountDown--;
            if (self.registerCountDown == 0) {
              clearInterval(self.registerCountDownTimer);
            }
          }, 1000);
        })
        .catch((err) => {
          this.$message({
            message: err.msg,
            type: "error",
          });
          this.getRegisterCodeLock = false;
        });
    },
    openBox() {
      this.islogin = false;
      this.activeName = "generalLogin";
      this.dialogVisible = true;
    },
    // 检查是否有二建班级15天过期
    checkTenClassGradeUser() {
      this.$request
        .checkTenClassGradeUser()
        .then((res) => {
          if (res.data && res.data.length > 0) {
            let ary = JSON.parse(localStorage.getItem("loaclCheckClass")) || []
            let orderGoodsIds = []
            if (ary && ary.length > 0) {
              ary.forEach(i => {
                if (i.userId == this.userInfo.userId) {
                  orderGoodsIds = i.orderGoodsIds || []
                }
              })
              this.checkTwoClassList = res.data.filter(i => orderGoodsIds.indexOf(i.orderGoodsId.toString()) == -1 )
            } else {
              this.checkTwoClassList = res.data
            }
            this.checkDialogVisible = true;
            if (!this.checkTwoClassList.length) this.checkDialogVisible = false;
          }
          
        })
        .catch(() => {
          this.checkDialogVisible = false;
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.dialogBox {
  line-height: 30px;
  /deep/ .el-dialog__header {
    display: none;
  }
  /deep/ .el-dialog {
    transform: all 0.1s, 0.3s ease 0.1s;
    line-height: 30px;
    border-radius: 15px;
    .btn {
      margin-top: 15px;
      width: 100px;
      border-radius: 8px;
    }
  }
}
.loginDialog {
  /deep/ .el-dialog {
    background: transparent;
  }
  .dis_flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    img {
      width: 184px;
      height: 184px;
    }
    .headerTitle {
      margin: 34px 0px;
      font-size: 18px;
      font-weight: bold;
      color: #000;
    }
  }
  .clickFuncStyle {
    text-align: center;
    margin-bottom: 10px;
    span {
      user-select: none;
      color: rgb(0, 122, 255);
      cursor: pointer;
    }
  }
  .getCode {
    cursor: pointer;
    user-select: none;
    color: #409eff;
  }
  /deep/ .el-input-group__append {
    background-color: #fff;
  }
  .el-tab-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .find_res {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    margin-bottom: 20px;
    user-select: none;
    & > span {
      cursor: pointer;
      &:hover {
        color: #409eff;
      }
    }
  }
  .submit {
    width: 300px;
    background-color: rgb(0, 122, 255);
    &:hover {
      background-color: rgb(51, 149, 255);
    }
  }
  /deep/ .el-form-item__content {
    margin-left: 0px !important;
  }
  .input_300 {
    width: 300px;
  }
  /deep/ .el-dialog__header {
    display: none;
  }

  /deep/ .el-dialog__body {
    padding: 0;
  }
  .login_box {
    border-radius: 8px;
    position: relative;
    width: 675px;
    height: 450px;
    display: flex;
    align-items: center;
    background-color: #fff;
    .left {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
      flex-shrink: 0;
      width: 225px;
      height: 100%;
    }
    .right {
      flex: 1;
      height: 100%;
    }
  }
  .close_btn {
    position: absolute;
    left: 101%;
    top: -27px;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    user-select: none;
  }
  .wx_login {
    cursor: pointer;
    margin: 30px auto 0px;
    width: 48px;
    height: 48px;
    background: url("../../assets/new1/wechat.png") no-repeat center center;
    background-size: contain;
    &:hover {
      background: url("../../assets/new1/wechat2.png") no-repeat center center;
      background-size: contain;
    }
  }
  /deep/ .el-tabs__item {
    height: 50px;
    line-height: 50px;
  }
  /deep/ .el-tabs__item {
    padding: 0px !important;
  }
}
</style>