<template>
  <div class="login_backg">
    <div class="login_all">
      <div class="headercontainer">
        <div class="center-logo" style="width: 100%">
          <img class="logo" src="@/assets/image/img_logo.png" alt />
        </div>
      </div>
      <el-card v-show="active == 'login'" class="box-card login">
        <div slot="header" class="clearfix"></div>
        <el-form
          :model="form"
          ref="form1"
          @submit.native.prevent
          class="login_forms"
        >
          <el-form-item>
            <p class="item_p">账号</p>
            <el-input
              v-model.trim="form.userid"
              autofocus="autofocus"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <p class="item_p">密码</p>
            <el-input
              type="password"
              v-model.trim="form.password"
              placeholder="请输入密码"
            >
              <!-- <span
                slot="suffix"
                :title="visible ? '显示密码' : '隐藏密码'"
                @click="changePass()"
                style="cursor: pointer"
                :class="visible ? 'eye_dis' : 'eye'"
              ></span> -->
            </el-input>
          </el-form-item>
        </el-form>
        <el-form
          :model="yzms"
          :rules="yzmRules"
          ref="yzms"
          class="demo-ruleForm"
        >
          <el-form-item
            prop="yzm"
            class="yzm"
            :class="ruleFormIcon.yzm ? '' : 'icon_show'"
          >
            <el-input
              v-model.trim="yzms.yzm"
              placeholder="请输入验证码"
            ></el-input>
            <img
              class="yzm_img"
              title="看不清？换一张"
              :src="imgSrc"
              @click="getImg()"
            />
          </el-form-item>
        </el-form>
        <el-form>
          <el-form-item class="rembme">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn_sub sub1"
              type="primary"
              @click.prevent="login_remember_info()"
              >登 录</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button class="btn_sub sub2" @click.prevent="register">
              还没有账户？立即注册&nbsp;&nbsp;
              <i class="el-icon-arrow-right"></i>
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card v-show="active == 'register'" class="box-card login">
        <div slot="header" class="clearfix"></div>
        <div class="register_step">
          <el-steps :active="registerActive" align-center>
            <el-step title="个人信息"></el-step>
            <el-step title="业务系统信息"></el-step>
          </el-steps>
        </div>
        <div v-show="registerActive == 0">
          <el-form
            :model="ruleForm_0"
            :rules="rules_0"
            ref="ruleForm_0"
            class="demo-ruleForm"
          >
            <el-form-item
              prop="userid1"
              :class="ruleFormIcon.userid1 ? '' : 'icon_show'"
            >
              <p class="item_p">账号</p>
              <el-input
                v-model.trim="ruleForm_0.userid1"
                autocomplete="new-password"
                placeholder="为字母、数字、下划线或其组合"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="password1"
              :class="ruleFormIcon.password1 ? '' : 'icon_show'"
            >
              <p class="item_p">登录密码</p>
              <el-input
                v-model.trim="ruleForm_0.password1"
                autocomplete="new-password"
                type="password"
                placeholder="密码为大小写字母及数字组合，不少于6位"
              >
                <!-- <span
                  slot="suffix"
                  :title="pwdCheck ? '隐藏密码' : '显示密码'"
                  :class="pwdCheck ? 'eye' : 'eye_dis'"
                  @click="pwdCheck = !pwdCheck"
                ></span> -->
              </el-input>
            </el-form-item>
            <el-form-item
              prop="truePassword"
              :class="ruleFormIcon.truePassword ? '' : 'icon_show'"
            >
              <p class="item_p">确认密码</p>
              <el-input
                autocomplete="new-password"
                v-model.trim="ruleForm_0.truePassword"
                type="password"
                placeholder="请确认密码"
              >
                <!-- <span
                  slot="suffix"
                  :title="truePwdCheck ? '隐藏密码' : '显示密码'"
                  :class="truePwdCheck ? 'eye' : 'eye_dis'"
                  @click="truePwdCheck = !truePwdCheck"
                ></span> -->
              </el-input>
            </el-form-item>
            <el-form-item
              prop="cname"
              :class="ruleFormIcon.cname ? '' : 'icon_show'"
            >
              <p class="item_p">昵称</p>
              <el-input
                v-model.trim="ruleForm_0.cname"
                placeholder="给自己取个昵称吧"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="registerActive == 1">
          <el-form
            :model="ruleForm_1"
            :rules="rules_1"
            ref="ruleForm_1"
            class="demo-ruleForm"
          >
            <el-form-item
              prop="businessSystemName"
              :class="ruleFormIcon.businessSystemName ? '' : 'icon_show'"
            >
              <p class="item_p">业务系统名</p>
              <el-input
                v-model.trim="ruleForm_1.businessSystemName"
                placeholder="例：机关事务大数据平台"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="domainName"
              :class="ruleFormIcon.domainName ? '' : 'icon_show'"
            >
              <p class="item_p">域名</p>
              <el-input
                v-model.trim="ruleForm_1.domainName"
                placeholder="填写业务系统的域名"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <p class="item_p">IP（白名单）</p>
              <div class="ip_block">
                <div
                  v-for="(item, index) in ruleForm_1.ip_white"
                  :key="index"
                  class="ip_item"
                >
                  {{ item }}
                  <i class="el-icon-close ip_del" @click="delIp(index)"></i>
                </div>
                <el-input
                  v-if="whiteAddShow"
                  class="ip_input"
                  v-model="newIpWhite"
                  @keyup.enter.native="watchKeyboardWhite"
                ></el-input>
                <el-button
                  class="add_ip"
                  @click="addIp('white')"
                  icon="el-icon-plus"
                  >增加</el-button
                >
              </div>
            </el-form-item>
            <el-form-item
              prop="organization"
              :class="ruleFormIcon.organization ? '' : 'icon_show'"
            >
              <p class="item_p">用户组织机构</p>
              <el-select v-model="ruleForm_1.organization" placeholder="请选择">
                <el-option
                  v-for="item in organizationOptions"
                  :key="item.department_id"
                  :label="item.department_name"
                  :value="item.department_id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="registerActive == 1">
          <el-form
            :model="yzms"
            :rules="yzmRules"
            ref="yzms"
            class="demo-ruleForm"
          >
            <el-form-item
              prop="yzm"
              :class="ruleFormIcon.yzm ? 'yzm' : 'yzm icon_show'"
            >
              <p class="item_p">验证码</p>
              <el-input
                v-model.trim="yzms.yzm"
                placeholder="请输入验证码"
              ></el-input>
              <s-identify
                class="yzm_img"
                :identifyCode="identifyCode"
                @click.native="refreshCode()"
              ></s-identify>
            </el-form-item>
          </el-form>
        </div>
        <el-form class="demo-ruleForm">
          <el-form-item>
            <el-button
              v-if="registerActive == 1"
              class="btn_sub sub1"
              type="primary"
              @click.prevent="submitForm()"
              >完成注册</el-button
            >
            <el-button
              v-else
              class="btn_sub sub1"
              type="primary"
              @click.prevent="nextStep()"
              >下一步</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              v-if="registerActive == 0"
              class="btn_sub sub2"
              @click.prevent="login"
            >
              <i class="el-icon-arrow-left"></i>&nbsp;&nbsp;登录已有账号
            </el-button>
            <el-button v-else class="btn_sub sub2" @click.prevent="previous">
              <i class="el-icon-arrow-left"></i>&nbsp;&nbsp;上一步
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <div v-if="active == 'login'" class="footer_message">
        登录即代表您已同意
        <span class="footer_message_bg"
          >《BD-aPaaS平台用户协议与隐私政策》</span
        >
      </div>
    </div>
  </div>
</template> 
<script>
import { getCookie, clearCookie, setCookie } from "@/services/cookie.js";
import SIdentify from "@/components/sidentify";
import CryptoJS from "crypto-js"; //加密js
export default {
  components: { SIdentify },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value !== this.ruleForm_0.password1) {
        this.ruleFormIcon.truePassword = false;
        callback(new Error("密码和确认密码不一致"));
      } else {
        this.ruleFormIcon.truePassword = true;
        callback();
      }
    };
    var validateUser = (rule, value, callback) => {
      let reg = new RegExp(/^[a-zA-Z0-9|\-|_|\.]+$/);
      if (value == "") {
        this.ruleFormIcon.userid1 = false;
        callback(new Error("请输入账号"));
      } else if (value.length > 16 || value.length < 3) {
        this.ruleFormIcon.userid1 = false;
        callback(new Error("长度请大于三位且不超过16位"));
      } else if (!reg.test(value)) {
        this.ruleFormIcon.userid1 = false;
        callback(new Error("只支持字母、数字、-、_、."));
      } else {
        let query = {
          value: value,
        };
        this.$api.general
          .validateUser(query)
          .then((response) => {
            if (response.data.success == 1) {
              this.ruleFormIcon.userid1 = true;
              callback();
            } else {
              this.ruleFormIcon.userid1 = false;
              callback(new Error(response.data.errMsg));
            }
          })
          .catch((response) => {
            this.ruleFormIcon.userid1 = false;
            callback(new Error("Network fluctuation"));
          });
      }
    };
    var validatePassword = (rule, value, callback) => {
      let reg = new RegExp(
        /^.*(?=.{6,20})(?=.*\d)(?=.*[A-Z]{1,})(?=.*[a-z]{1,}).*$/
      );
      if (value == "") {
        this.ruleFormIcon.password1 = false;
        callback(new Error("请输入密码"));
      } else if (!reg.test(value)) {
        this.ruleFormIcon.password1 = false;
        callback(new Error("密码包含大小写字母、数字，长度在6位~20位"));
      } else {
        this.ruleFormIcon.password1 = true;
        callback();
      }
    };
    var validateCname = (rule, value, callback) => {
      if (value == "") {
        this.ruleFormIcon.cname = false;
        callback(new Error("请输入昵称"));
      } else if (value.length > 8) {
        this.ruleFormIcon.cname = false;
        callback(new Error("昵称长度请不超过8位"));
      } else {
        this.ruleFormIcon.cname = true;
        callback();
      }
    };
    var validateBusinessSystemName = (rule, value, callback) => {
      if (value == "") {
        this.ruleFormIcon.businessSystemName = false;
        callback(new Error("请输入业务系统名"));
      } else if (value.length > 16) {
        this.ruleFormIcon.businessSystemName = false;
        callback(new Error("业务系统名长度请不超过16位"));
      } else {
        this.ruleFormIcon.businessSystemName = true;
        callback();
      }
    };
    var validateDomainName = (rule, value, callback) => {
      let reg = new RegExp(
        /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/
      );
      if (value == "") {
        this.ruleFormIcon.domainName = false;
        callback(new Error("请输入域名"));
      } else if (value.length > 255) {
        this.ruleFormIcon.domainName = false;
        callback(new Error("域名长度请不超过255位"));
      } else if (!reg.test(value)) {
        this.ruleFormIcon.domainName = false;
        callback(new Error("域名格式不正确"));
      } else {
        this.ruleFormIcon.domainName = true;
        callback();
      }
    };
    var validateOrganization = (rule, value, callback) => {
      if (value == "") {
        this.ruleFormIcon.organization = false;
        callback(new Error("请选择用户组织机构"));
      } else {
        this.ruleFormIcon.organization = true;
        callback();
      }
    };
    var validateYzm = (rule, value, callback) => {
      if (value == "") {
        this.ruleFormIcon.yzm = false;
        this.yzmState = false;
        callback(new Error("请输入验证码"));
      } else {
        // let url = `/iam/api/verifyCaptcha?id=${this.imgId}&value=${value}`;
        this.$api.general
          .validateRandomCode(this.imgId, value)
          .then((response) => {
            if (response.data.success == 1) {
              this.ruleFormIcon.yzm = true;
              this.yzmState = true;
              callback();
            } else {
              this.ruleFormIcon.yzm = false;
              this.yzmState = false;
              callback(new Error(response.data.errMsg));
            }
          })
          .catch(function (response) {});
      }
    };
    return {
      form: {
        userid: "",
        password: "",
      },
      visible: true,
      checked: false,
      active: "login",
      pwdCheck: false,
      truePwdCheck: false,
      ruleForm_0: {
        userid1: "",
        password1: "",
        truePassword: "",
        cname: "",
      },
      ruleForm_1: {
        businessSystemName: "",
        domainName: "",
        ip_white: [],
        organization: "",
      },
      yzms: {
        yzm: "",
      },
      imgSrc: "",
      yzmRules: {
        yzm: [{ validator: validateYzm, trigger: "blur" }],
      },
      yzmState: false,
      ruleFormIcon: {
        userid1: true,
        password1: true,
        truePassword: true,
        cname: true,
        businessSystemName: true,
        yzm: true,
        domainName: true,
        organization: true,
      },
      rules_0: {
        userid1: [{ validator: validateUser, trigger: "blur" }],
        password1: [{ validator: validatePassword, trigger: "blur" }],
        truePassword: [{ validator: validatePass, trigger: "blur" }],
        cname: [{ validator: validateCname, trigger: "blur" }],
      },
      rules_1: {
        businessSystemName: [
          { validator: validateBusinessSystemName, trigger: "blur" },
        ],
        domainName: [{ validator: validateDomainName, trigger: "blur" }],
        organization: [{ validator: validateOrganization, trigger: "change" }],
      },
      imgSrc: "",
      imgId: "",
      registerActive: 0,
      organizationOptions: [],
      identifyCodes: "1234567890",
      identifyCode: "",
      whiteAddShow: "",
      newIpWhite: "",
    };
  },
  mounted() {
    this.init();
  },
  created() {
    if (getCookie("userinfo")) {
      this.checked = true;
      let userinfo = decodeURI(decodeURI(getCookie("userinfo"))).split(",");
      this.form.userid = userinfo[0];
      this.form.password = userinfo[1];
    } else {
      this.checked = false;
    }
    this.getImg();
  },
  methods: {
    init() {
      if (this.$route.params.userid != undefined) {
        this.form.userid = this.$route.params.userid;
        this.form.password = this.$route.params.password;
      }
    },
    //登录请求
    // ?ReturnUrl=/shop/video_service_list/7
    login_request() {
      let self = this;

      if (self.form.userid == "") {
        self.$message({
          message: "请填写用户名",
          type: "error",
        });
      } else if (self.form.password == "") {
        self.$message({
          message: "请填写密码",
          type: "error",
        });
      } else {
        self.$refs["yzms"].validate((volid_yzm) => {
          if (volid_yzm) {
            self.submitLoginForm();
          } else {
            self.$message({
              message: "请完善验证码",
              type: "error",
            });
            self.refreshCode();
          }
        });
      }
    },
    // 提交登录表单
    submitLoginForm() {
      let self = this;
      var psw = CryptoJS.AES.encrypt(
        this.form.password,
        "swuE9cmCZQwrkYRV"
      ).toString();
      let query = {
        userid: this.form.userid,
        password: psw,
      };
      self.$api.general.login(query).then((response) => {
        if (response.data.success == 1) {
          let redirect = self.$route.query.ReturnUrl;
          if (redirect && redirect != "") {
            // redirect = decodeURIComponent(redirect)
            window.location.href = redirect;
          } else {
            self.$api.general.getNowUser().then((response) => {
              if (response.data.success == 1) {
                if (
                  response.data.data.is_admin == 1 ||
                  response.data.data.is_admin == 2
                ) {
                  window.location.href = "/apaas/ui/#/workplace";
                } else {
                  window.location.href = "/apaas/ui/#/services_shop";
                }
              } else {
                self.$message({
                  message: response.data.errMsg,
                  type: "error",
                });
              }
            });
          }
        } else if (response.data.success == 0) {
          self.$message({
            message: response.data.errMsg,
            type: "error",
          });
        }
      });
    },
    login_remember_info() {
      if (this.checked) {
        setCookie(
          "userinfo",
          encodeURI(encodeURI(this.form.userid + "," + this.form.password))
        );
      } else {
        clearCookie("userinfo");
      }
      this.login_request();
    },
    // 获取验证码
    getImg() {
      this.$api.general
        .getrandomCode()
        .then((response) => {
          if (response.data.success == 1) {
            // console.log(response.data.data.captcha);
            this.imgId = response.data.data.id;
            this.imgSrc = response.data.data.captcha;
            // this.$router.push({
            //   path: "/login",
            //   query: {
            //     username: this.ruleForm.username,
            //     password: this.ruleForm.password
            //   }
            // });
          }
        })
        .catch(function (response) {});
    },
    changePass() {
      this.visible = !this.visible;
    },
    register() {
      this.active = "register";
      this.registerActive = 0;
      this.getOrganizations();
      this.refreshCode();
    },
    // get random
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    //验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
    },
    getOrganizations() {
      this.$api.general.getOrganizations().then((response) => {
        if (response.data.success == 1) {
          this.organizationOptions = response.data.data;
        }
      });
    },
    submitForm() {
      let self = this;
      self.$refs["ruleForm_1"].validate((valid, obj) => {
        if (valid) {
          self.$refs["yzms"].validate((volid_yzm, obj_yzm) => {
            if (volid_yzm) {
              self.submitAll();
            } else {
              self.getImg();
            }
          });
        } else {
          self.$message({
            message: "请完善信息",
            type: "error",
          });
        }
      });
    },
    submitAll() {
      let query = {
        user_id: this.ruleForm_0.userid1,
        user_name: this.ruleForm_0.cname,
        password: this.ruleForm_0.password1,
        system_name: this.ruleForm_1.businessSystemName,
        domain_name: this.ruleForm_1.domainName,
        department_id: this.ruleForm_1.organization,
        phone: "",
        email: "",
        state: 0,
        position: "",
        qq: "",
        ip_whitelist: this.ruleForm_1.ip_white,
      };
      this.$api.general.register(query).then((response) => {
        if (response.data.success == 1) {
          // console.log(response.data.data);
          this.$message({
            message: "注册成功",
            type: "success",
          });
          this.login();
          this.form.userid = this.ruleForm_0.userid1;
          this.form.password = this.ruleForm_0.password1;
        } else {
          this.$message({
            message: "注册失败" + response.data.data,
            type: "error",
          });
        }
      });
    },
    delIp(index) {
      this.ruleForm_1.ip_white.splice(index, 1);
    },
    login() {
      this.$refs.ruleForm_1.resetFields();
      this.$refs.ruleForm_0.resetFields();
      this.active = "login";
      this.ruleForm_0.userid1 = "";
      this.ruleForm_0.password1 = "";
      this.ruleForm_0.truePassword = "";
      this.ruleForm_0.cname = "";
      this.ruleForm_1.businessSystemName = "";
      this.ruleForm_1.domainName = "";
      this.$set(this.ruleForm_1, ip_white, []);
      this.ruleForm_1.organization = "";
      this.yzms.yzm = "";
      this.ruleFormIcon.userid1 = true;
      this.ruleFormIcon.password1 = true;
      this.ruleFormIcon.truePassword = true;
      this.ruleFormIcon.cname = true;
      this.ruleFormIcon.businessSystemName = true;
      this.ruleFormIcon.yzm = true;
      this.ruleFormIcon.domainName = true;
      this.ruleFormIcon.organization = true;
    },
    nextStep() {
      this.$refs["ruleForm_0"].validate((valid, obj) => {
        if (valid) {
          this.registerActive = 1;
        }
      });
    },
    previous() {
      this.registerActive = 0;
    },
    addIp(type) {
      this.whiteAddShow
        ? this.$message({
            message: "请按回车完善本次ip填写",
            type: "error",
          })
        : (this.whiteAddShow = true);
    },
    watchKeyboardWhite() {
      let self = this;
      if (self.newIpWhite != "") {
        let reg = new RegExp(
          /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/g
        );
        if (reg.test(self.newIpWhite)) {
          self.ruleForm_1.ip_white.push(self.newIpWhite);
          self.whiteAddShow = false;
          self.newIpWhite = "";
        } else {
          self.$message({
            message: "ip格式错误",
            type: "error",
          });
          self.whiteAddShow = false;
          self.newIpWhite = "";
        }
      }
    },
  },
};
</script>
<style scoped>
.login_backg {
  height: 100vh;
  background: url("~@/assets/image/img_bg.jpg") center center;
  background-size: 100% 100%;
  overflow: auto;
}
.login_all {
  width: 500px;
  height: 100vh;
  margin: 0 auto;
}
.login {
  min-width: 500px;
  font-size: 16px;
  margin-bottom: 100px;
}
.login .el-card__header {
  padding: 10px;
}
.login_head {
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #1a2236;
}
.item_p {
  margin: 0 0 0 10%;
  padding: 0 0 0 15px;
  line-height: 24px;
}
.login .el-form-item {
  margin-bottom: 22px;
}
.warning_icon_div {
  display: inline-block;
  width: 9%;
}
.login .el-input {
  width: 80%;
  margin-left: 10%;
}
.login .el-select {
  width: 80%;
  margin-left: 10%;
}
.login .rembme {
  padding-left: 14%;
  margin-bottom: 10px;
}
.login .el-button {
  width: 80%;
  margin-left: 10%;
  height: 40px;
  border-radius: 20px;
}
.sub1 {
  background-image: linear-gradient(0deg, #d7d7d7 0%, #ffffff 100%),
    linear-gradient(#0f2683, #0f2683);
  background-blend-mode: color-burn, normal;
  box-shadow: 0px 3px 6px 0px #515fe7;
  border: #0f2683 1px solid;
  color: #f4f7fc;
}
.sub2 {
  background-color: #e6ebfe;
  color: #515fe7;
}

.headercontainer {
  max-width: 960px;
  margin: 0;
  padding: 15vh 0 7vh;
  margin-right: auto;
  margin-left: auto;
}

.center-logo {
  /* margin: 8px 0; */
  text-align: center;
}

.el-form--label-top .el-form-item__label {
  padding: 0px;
}

.logo {
  /* width: 275px;
  height: 45px; */
  width: 190px;
  height: 31px;
}
.login_forms {
  margin-top: 20px;
}

.icon_show {
  position: relative;
}
.icon_show::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 34px;
  left: 15px;
  background: url("~@/assets/image/ic_warning.png") no-repeat center center;
}
.eye {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 4px;
  cursor: pointer;
  background: url("~@/assets/image/login_eye.png") no-repeat center center;
}
.eye_dis {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: relative;
  top: 6px;
  cursor: pointer;
  background: url("~@/assets/image/login_eye_dis.png") no-repeat center center;
}
.login .yzm .el-input {
  width: 42%;
  margin-left: 10%;
}
.yzm {
  position: relative;
}
.yzm .yzm_img {
  position: absolute;
  width: 30%;
  margin-left: 5%;
  cursor: pointer;
}
.footer_message {
  width: 500px;
  text-align: center;
  color: #bcc1d0;
  position: fixed;
  bottom: 5vh;
}
.footer_message_bg {
  color: #fff;
  cursor: pointer;
}
.register_step {
  margin-bottom: 20px;
}
.ip_block {
  border-radius: 8px;
  border: solid 1px #e3e5ef;
  background-color: #f7f8f9;
  padding: 10px 0 0 10px;
  line-height: 24px;
  width: calc(80% - 10px);
  margin-left: 10%;
}
.ip_item {
  display: inline-block;
  position: relative;
  background-color: #e6ebfe;
  border-radius: 4px;
  color: #0f2683;
  font-size: 12px;
  line-height: 24px;
  padding: 0 26px 0 8px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.ip_del {
  position: absolute;
  right: 8px;
  top: 6px;
  font-size: 14px;
  color: #6573ae;
  cursor: pointer;
}
.ip_del:hover {
  color: #e56600;
}
.add_ip {
  background-color: #495feb;
  border-radius: 4px !important;
  color: #f8f9fd;
  font-size: 12px;
  line-height: 24px;
  padding: 0 8px !important;
  margin-right: 10px !important;
  margin-bottom: 10px !important;
  width: 60px !important;
  height: 24px !important;
  margin-left: 0 !important;
}
.ip_input {
  width: 110px !important;
  margin-left: 0 !important;
  margin-right: 10px !important;
  margin-bottom: 10px !important;
}
</style>
<style>
.login .yzm .el-input {
  width: 40%;
  margin-left: 10%;
}
.yzm {
  position: relative;
}
.yzm .yzm_img {
  position: absolute;
  width: 30%;
  margin-left: 5%;
  cursor: pointer;
}
.login .el-input__suffix {
  font-size: 20px;
  right: 10px;
}
.login .el-form-item__error {
  left: 14%;
}
.login .el-input__inner {
  height: 40px;
  padding-left: 20px;
  padding-right: 38px;
  border-radius: 8px;
  border: solid 1px #e3e5ef;
  background-color: #f7f8f9;
}
.login .rembme .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #1a2236;
  font-weight: 700;
}
.el-card.login {
  border: 0;
  border-radius: 12px;
}
.login .el-card__header {
  padding: 0;
  height: 10px;
  background-image: linear-gradient(90deg, #ea7d19 0%, #fcce72 100%),
    linear-gradient(#e56600, #e56600);
  background-blend-mode: normal, normal;
}
.register_step .is-process .el-step__icon,
.register_step .is-finish .el-step__icon {
  width: 30px;
  height: 30px;
  background-image: radial-gradient(
    #515fe7 50%,
    #8390ee 50%,
    #8390ee 60%,
    #515fe7 60%,
    #515fe7 100%
  );
  border: 0;
}
.register_step .is-process .el-step__icon-inner,
.register_step .is-finish .el-step__icon-inner {
  color: #fff;
}
.register_step .el-step__icon {
  width: 30px;
  height: 30px;
  background-image: radial-gradient(
    #bcc1d0 50%,
    #e3e5ef 50%,
    #e3e5ef 60%,
    #bcc1d0 60%,
    #bcc1d0 100%
  );
  border: 0;
}
.register_step .el-step__icon-inner {
  color: #e3e5ef;
}
.register_step .el-step__title.is-process,
.register_step .el-step__title.is-finish {
  color: #242c43;
  font-weight: 500;
}
.register_step .el-step__title {
  font-size: 14px;
  color: #bcc1d0;
}
.register_step .el-step.is-horizontal .el-step__line {
  height: 3px;
  top: 14px;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 10%,
    #515fe7 10%,
    #515fe7 50%,
    #e3e5ef 50%,
    #e3e5ef 90%,
    transparent 90%,
    transparent 100%
  );
}
.register_step .el-step.is-horizontal .is-finish .el-step__line {
  height: 3px;
  top: 14px;
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 10%,
    #515fe7 10%,
    #515fe7 90%,
    transparent 90%,
    transparent 100%
  );
}
.login .rembme .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #515fe7;
  border-color: #515fe7;
}
.login .rembme .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #515fe7;
}
.ip_input .el-input__inner {
  border-radius: 4px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 24px;
  height: 24px;
}
</style>