RZGY/src/renderer/components/LoginPage.vue

<template>
  <div class="x-scol login_back_group" style="overflow-x: hidden">
    <TopPage></TopPage>
    <el-row :gutter="24" class="x-scol all-height" v-show="registerFlag">
      <el-col :span="7">
        <div class>
          <div class>
            <div class="block">&nbsp;</div>
          </div>
        </div>
      </el-col>
      <el-col :span="10" v-show="true">
        <div>
          <el-row :gutter="24" class="bor">
            <el-row :gutter="24">
              <el-col
                :span="24"
                class="login-middle-bg"
                style="padding-left: 0px; padding-right: 0px"
              >
                <el-col
                  :span="24"
                  style="padding-left: 0px; padding-right: 0px; border-radius: 12px"
                >
                </el-col>
                <el-col :span="24" style="margin-top: 30px">
                  <el-row :span="24">
                    <el-col :span="4">&nbsp;</el-col>
                    <el-col :span="16">
                      <div class="padding-logo center-logo" style="margin-top: 30px">
                        <el-select
                          :popper-append-to-body="false"
                          class="login_select"
                          style="width: 100%"
                          v-model="userType"
                          placeholder="请选择登录类型"
                        >
                          <el-option label="普通用户" value="1"></el-option>
                          <el-option label="管理员" value="2"></el-option>
                        </el-select>
                      </div>
                    </el-col>
                    <el-col :span="4">&nbsp;</el-col>
                  </el-row>
                  <el-row :span="24" style="margin-top: 30px">
                    <el-col :span="4">&nbsp;</el-col>
                    <el-col :span="16">
                      <div class="padding-logo center-logo">
                        <el-input
                          placeholder="请输入编号"
                          v-model="account"
                          clearable
                        ></el-input>
                      </div>
                    </el-col>
                    <el-col :span="4">&nbsp;</el-col>
                  </el-row>
                  <el-row :span="24" style="margin-top: 30px">
                    <el-col :span="4">&nbsp;</el-col>
                    <el-col :span="16">
                      <div class="padding-logo center-logo">
                        <el-input
                          placeholder="请输入密码"
                          v-model="password"
                          show-password
                        ></el-input>
                      </div>
                    </el-col>
                    <el-col :span="4">&nbsp;</el-col>
                  </el-row>
                  <el-row :span="24" style="margin-top: 5px; margin-bottom: 10px">
                    <el-col :span="4">&nbsp;</el-col>
                    <el-col :span="16" v-show="userType === '1'">
                      <div @click="registerFlag = false">
                        <span class="registerButton">没有账号？点击注册</span>
                      </div>
                    </el-col>
                    <el-col :span="4">&nbsp;</el-col>
                  </el-row>
                  <el-row :span="24" style="margin-top: 30px">
                    <el-col :span="4">&nbsp;</el-col>
                    <el-col :span="16">
                      <div
                        class="padding-logo center-logo login_button"
                        @click="userLoginV2"
                      >
                        <span type="primary" class="loginBu">登录</span>
                      </div>
                    </el-col>
                    <el-col :span="4">&nbsp;</el-col>
                  </el-row>
                </el-col>
              </el-col>
              <el-col :span="3">&nbsp;</el-col>
            </el-row>
          </el-row>
        </div>
      </el-col>
      <el-col :span="7">
        <div class>
          <div class>
            <div class="block">&nbsp;</div>
          </div>
        </div>
      </el-col>

      <!-- <el-footer class="buttLlo">Copyright© 北京决明科技有限公司</el-footer> -->
      <el-footer class="buttLlo">Copyright© 2024</el-footer>
    </el-row>
    <div class="registerTop" v-show="!registerFlag">
      <div class="registerDes">
        <div class="registerIcon"></div>

        <div class="registerFont">&nbsp;&nbsp;注册账号</div>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :inline="true"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="registerContent">
          <div class="registerVertical">
            <div class="registerTitle">昵称</div>
            <el-form-item label="" class="registerInput" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入昵称"></el-input>
            </el-form-item>
          </div>
          <div class="registerVertical">
            <div class="registerTitle">编号</div>
            <el-form-item label="" class="registerInput" prop="num">
              <el-input v-model="ruleForm.num" placeholder="请输入编号"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="registerContent">
          <div class="registerVertical">
            <div class="registerTitle">年龄</div>
            <el-form-item label="" class="registerInput" prop="age">
              <el-input v-model="ruleForm.age" placeholder="请输入年龄"></el-input>
            </el-form-item>
          </div>
          <div class="registerVertical">
            <div class="registerTitle">单位</div>
            <el-form-item label="" class="registerInput" prop="unit">
              <el-input v-model="ruleForm.unit" placeholder="请输入单位"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="registerContent">
          <div class="registerVertical">
            <div class="registerTitle">性别</div>
            <el-form-item label="" class="registerInput" prop="sex">
              <el-select style="width: 100%" v-model="ruleForm.sex" placeholder="请选择">
                <el-option label="女" value="0"></el-option>
                <el-option label="男" value="1"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="" prop="sex">
              <el-radio-group v-model="ruleForm.sex">
                <el-radio label="男" value="1"></el-radio>
                <el-radio label="女" value="0"></el-radio>
              </el-radio-group>
            </el-form-item> -->
          </div>
          <div class="registerVertical">
            <div class="registerTitle">婚恋情况</div>
            <el-form-item label="" prop="marriageSituation">
              <el-select
                style="width: 100%"
                v-model="ruleForm.marriageSituation"
                placeholder="请选择"
              >
                <el-option label="已婚" value="0"></el-option>
                <el-option label="未婚" value="1"></el-option>
                <el-option label="离异" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="registerContent">
          <div class="registerVertical">
            <div class="registerTitle">密码</div>
            <el-form-item label="" prop="userPassword">
              <el-input
                show-password
                placeholder="请输入密码"
                v-model="ruleForm.userPassword"
                type="password"
              ></el-input>
            </el-form-item>
          </div>
          <div class="registerVertical">
            <div class="registerTitle">确认密码</div>
            <el-form-item label="" prop="userRePassword">
              <el-input
                show-password
                placeholder="请输入确认密码"
                v-model="ruleForm.userRePassword"
                type="password"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="registerContent">
          <div class="registerRow">
            <el-button class="registerLoginCancle" @click="handleClose">取 消</el-button>
            <el-button class="registerLoginCancle" @click="resetForm('ruleForm')"
              >重 置</el-button
            >
          </div>
          <div class="registerRowLogin">
            <el-button
              type="primary"
              class="registerRowLoginButton"
              style="margin-right: 10px"
              @click="submitFormV2('ruleForm')"
              >确 定</el-button
            >
          </div>
        </div>
      </el-form>
    </div>
    <el-dialog
      title="注册账号"
      :before-close="handleClose"
      :visible.sync="centerDialogVisible"
      width="70%"
      center
    >
      <span>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编号" prop="num">
                <el-input v-model="ruleForm.num"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="ruleForm.age"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位" prop="unit">
                <el-input v-model="ruleForm.unit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="ruleForm.sex">
                  <el-radio label="男" value="1"></el-radio>
                  <el-radio label="女" value="0"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码" prop="userPassword">
                <el-input v-model="ruleForm.userPassword" type="password"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="确认密码" prop="userRePassword">
                <el-input v-model="ruleForm.userRePassword" type="password"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="login_back_group1">
              <el-form-item label="婚恋情况" prop="marriageSituation">
                <el-select
                  style="width: 100%"
                  v-model="ruleForm.marriageSituation"
                  placeholder="婚恋情况"
                >
                  <el-option label="已婚" value="0"></el-option>
                  <el-option label="未婚" value="1"></el-option>
                  <el-option label="离异" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button @click="resetForm('ruleForm')">重 置</el-button>
        <el-button type="primary" @click="submitFormV2('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import sq3 from "sqlite3";
const fs = require("fs");
export default {
  data() {
    var checkUserRePassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else {
        if (value.length >= 6 && value.length <= 18) {
          if (value == this.ruleForm.userPassword) {
            callback();
          } else {
            return callback(new Error("两次输入密码不同"));
          }
        } else {
          return callback(new Error("长度大于等于6且小于等于18"));
        }
      }
    };
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("不能为空"));
      } else {
        callback();
      }
    };
    var checkNum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("编号不能为空"));
      } else if (value.length > 20) {
        return callback(new Error("编号不能超过20位"));
      } else {
        callback();
      }
    };
    var checkUnit = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("单位不能为空"));
      } else {
        callback();
      }
    };
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      } else {
        callback();
      }
    };
    var checkUserPassword = (rule, value, callback) => {
      console.log(!value);
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else {
        if (value.length >= 6 && value.length <= 18) {
          return callback();
        } else {
          return callback(new Error("长度大于等于6且小于等于18"));
        }
      }
    };
    return {
      centerDialogVisible: false,
      src: require("../assets/bg.jpg"),
      srcLogo: require("../assets/logo1.png"),
      //注册页面是否显示
      registerFlag: true,
      userType: "1",
      password: "",
      account: "",
      dirpath: "",
      ruleForm: {
        name: "",
        num: "",
        sex: "男",
        type: 1,
        createTime: "",
        unit: "",
        age: "",
        userPassword: "",
        userRePassword: "",
        marriageSituation: "0", //已婚0  未婚  1  离异 2
      },
      rules: {
        name: [
          {
            validator: checkName,
            required: true,
            message: "请填写昵称",
            trigger: "blur",
          },
        ],
        num: [
          {
            validator: checkNum,
            required: true,
            message: "请填写编号",
            trigger: "blur",
          },
        ],
        unit: [
          {
            validator: checkUnit,
            required: true,
            message: "请填写单位",
            trigger: "blur",
          },
        ],
        age: [
          {
            validator: checkAge,
            required: true,
            message: "请填写年龄",
            trigger: "blur",
          },
        ],
        userPassword: [
          {
            validator: checkUserPassword,
            required: true,

            trigger: "blur",
          },
        ],
        userRePassword: [
          {
            validator: checkUserRePassword,
            required: true,

            trigger: "blur",
          },
        ],
        marriageSituation: [
          { required: true, message: "请填写婚恋情况", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.$root.smartNum = 0;
    this.$root.topPageFlag = false;

    this.dirpath = "C:\\DataPilot";
    // fs.exists(this.dirpath, function (exists) {
    //   // var that = this;

    //   if (!exists) {
    //     fs.mkdirSync("C:\\DataPilot");
    //   }
    // });
    // setTimeout(this.creatUserDb, 200);
    // 创建数据库文件
    // this.creatUserDb();
    // 回车事件点击登录
    var that = this;
    // document.onkeydown = function(e) {
    //   if (e.code == "Enter") {
    //     //做点击回车后的事件，回车的键值是enter
    //     // console.log("点击回车了");
    //     //调用登录按钮
    //     that.userLogin();
    //   }
    // };
    //---------------------更改global文件
  },
  methods: {
    handleClose() {
      this.resetForm("ruleForm");
      this.registerFlag = true;
      this.centerDialogVisible = false;
    },
    // 创建用户表
    creatUserDb() {
      const sqlite3 = sq3.verbose();
      const db = new sqlite3.Database("C:\\DataPilot\\DataPilot.sqlite");
      db.serialize(() => {
        // db.run(
        //   "CREATE TABLE IF NOT EXISTS userInfo(id integer primary key,name varchar(20))"
        // );
        db.run(
          "CREATE TABLE IF NOT EXISTS userLogin(id integer primary key,account varchar(30),password varchar(30))",
          function () {
            db.all("select count(*) from userLogin", function (err, res) {
              let a = res[0]["count(*)"];
              if (a == 0 || a == "0") {
                // 插入数据
                db.run("insert into userLogin values(NULL,'admin','123456')");
              }
            });

            // db.run("insert into userLogin values(NULL,'admin','123456')");
          }
        );
        // 在执行一个创建表的动作
        db.run(
          "CREATE TABLE IF NOT EXISTS t_user_record(id  INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,user_name  varchar(100),num  varchar(100),sex  varchar(4),flag  varchar(50),test_date  varchar(50),file_name  varchar(80),test_result  TEXT,type  TEXT,name  varchar(100),img  TEXT,test_record  TEXT,test_records  TEXT)",
          function () {
            // db.all("select count(*) from userLogin", function(err, res) {
            //   let a = res[0]["count(*)"];
            //   if (a == 0 || a == "0") {
            //     //插入数据
            //     db.run("insert into userLogin values(NULL,'admin','123456')");
            //   }
            // });
            // db.run("insert into userLogin values(NULL,'admin','123456')");
          }
        );
        //创建一个用户表
        db.run(
          `CREATE TABLE
IF NOT EXISTS t_user_table (
	id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
	name varchar (100),
	num varchar (100),
	sex varchar (4),
	type varchar (4),
	creatTime varchar (100),
	unit varchar (100),
	age varchar (10),
  userPassword varchar (50),
  userRePassword varchar (50),
	extone text,
	exttwo text,
	extthree text
)`,
          function (err, res) {
            if (err) {
            } else {
              let sql = `INSERT INTO t_user_table VALUES (1, '管理员', '000000', 1, 2, '2021-12-23', '医院', 22, 123456, 123456, NULL, NULL, NULL);`;
              db.run(sql, function (err, res) {
                if (err) {
                } else {
                }
              });
            }
            //表创建成功后进行入库一条数据
          }
        );
      });
    },
    userLogin() {
      // this.$router.push({ path: "/landingPage/ConsolePage" });

      var that = this;
      const sqlite3 = sq3.verbose();

      const db = new sqlite3.Database("C:\\DataPilot\\DataPilot.sqlite");
      if (that.account == null || that.account == "") {
        that.$message.error("账号不能为空");
        return;
      }
      if (that.password == null || that.password == "") {
        that.$message.error("密码不能为空");
        return;
      }
      let sql = `select* from t_user_table where num ='${that.account}' AND  userPassword='${that.password}' AND type='${that.userType}'`;

      db.all(sql, function (err, res) {
        if (err) {
          that.$message.error("登陆失败");
        } else {
          if (res.length > 0) {
            //当type等于1时跳转到测试页面
            if (that.userType == "1") {
              sessionStorage.setItem("num", that.account);
              sessionStorage.setItem("pass", this.$md5(that.password));
              sessionStorage.setItem("userType", "1");
              that.$router.push({
                path: "/mainTable",
              });
            }
            //当type等于2时跳转到我的测试页面
            if (that.userType == "2") {
              // sessionStorage.setItem("num", that.account);
              sessionStorage.setItem("num", that.account);
              sessionStorage.setItem("pass", this.$md5(that.password));
              sessionStorage.setItem("userType", "2");
              that.$router.push({ path: "/mainTable" });
            }
          } else {
            that.$message.error("编号或密码错误");
          }
        }
      });
    },
    submitForm(formName) {
      var that = this;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          const sqlite3 = sq3.verbose();
          const db = new sqlite3.Database("C:\\DataPilot\\DataPilot.sqlite");
          let sqlSelect = `select* from t_user_table where num='${that.ruleForm.num}'`;
          db.all(sqlSelect, function (err, res) {
            if (err) {
            } else {
              if (res.length == 0) {
                //开始存储数据库
                let time = that.creatTi();
                let sex = "";
                if (that.ruleForm.sex === "男") {
                  sex = "1";
                } else {
                  sex = "0";
                }
                db.run(
                  `insert into t_user_table values(NULL,'${that.ruleForm.name}','${that.ruleForm.num}','${sex}','1',
                  '${time}','${that.ruleForm.unit}','${that.ruleForm.age}','${that.ruleForm.userPassword}','${that.ruleForm.userRePassword}',NULL,NULL,NULL)`,
                  function (err, res) {
                    if (err) {
                      that.$message.error("注册失败");
                    } else {
                      that.$message({
                        showClose: true,
                        message: "恭喜你，注册成功",
                        type: "success",
                      });
                    }
                  }
                );
              } else {
                that.$message.error("编号已重复");
              }
            }
          });

          //验证通过的话，先判断当前num是否有重复的
        } else {
          return false;
        }
      });
    },

    //注册和查重接口
    submitFormV2(formName) {
      var that = this;

      that.$refs[formName].validate((valid) => {
        if (valid) {
          //调用注册接口，先调用编号查询重接口
          that.$http.post(
            `v1/user/register`,
            {
              userName: that.ruleForm.name, //用户名
              identifier: that.ruleForm.num, //用户编号
              age: that.ruleForm.age, //年龄
              gender: that.formateSex(that.ruleForm.sex), //性别
              password: that.$md5(that.ruleForm.userPassword), //密码
              rePassword: that.$md5(that.ruleForm.userRePassword), //确认密码
              profession: that.ruleForm.unit, //职业
              role: that.userType === "1" ? 0 : 1, //角色
              marriageSituation: that.ruleForm.marriageSituation, //是否婚恋
            },
            (res) => {
              if (res.data.code == 200) {
                that.centerDialogVisible = false;
                that.$message({
                  message: "注册成功",
                  type: "success",
                  duration: 800,
                });
                that.userRegisterLoginV2(
                  that.ruleForm.num,
                  that.ruleForm.userPassword,
                  that.userType
                );
                //注册成功后需要调用登录接口
                that.resetForm("ruleForm");
                // this.$message.success("注册成功");
              } else {
                this.$message.error("访问服务器失败！");
              }
            }
          );
        } else {
          return false;
        }
      });
    },
    userRegisterLoginV2(account, password, userType) {
      let that = this;
      that.$http.post(
        `v1/user/login`,
        {
          identifier: account,
          password: that.$md5(password),
          role: parseInt(userType) - 1,
        },
        (res) => {
          if (res.data.code == 200) {
            sessionStorage.setItem("token", res.data.data.token);
            if (that.userType == "1") {
              sessionStorage.setItem("name", res.data.data.userEntry.userName);
              sessionStorage.setItem("num", account);
              sessionStorage.setItem("pass", that.$md5(password));
              sessionStorage.setItem("userType", "1");
              sessionStorage.setItem("isMarried", res.data.data.marriageSituation);
              // that.$router.push({
              //   path: "/mainTable",
              // });
              that.$router.push({
                path: "/menu/animation",
                query: { url: "swfk" },
              });
            }
            //当type等于2时跳转到我的测试页面

            if (that.userType == "2") {
              // sessionStorage.setItem("num", that.account);
              sessionStorage.setItem("name", res.data.data.userEntry.userName);
              sessionStorage.setItem("num", that.account);
              sessionStorage.setItem("pass", that.$md5(that.password));
              sessionStorage.setItem("userType", "2");
              // that.$router.push({ path: "/mainTable" });
              //menu/manageElectrical
              that.$router.push({
                path: "/menu/manageElectrical",
                query: { url: "yhfk" },
              });
              sessionStorage.setItem("defaultUrl", '/menu/manageElectrical');
            }
          } else {
            this.$message.error("访问服务器失败！");
          }
        }
      );
    },

    userLoginV2() {
      let that = this;
      if (that.account === "" || that.account === null) {
        this.$message.error("编号不能为空");
        return;
      }
      if (that.password === "" || that.password === null) {
        this.$message.error("密码不能为空");
        return;
      }
      that.$http.post(
        `v1/user/login`,
        {
          identifier: that.account,
          password: that.$md5(that.password),
          role: parseInt(that.userType) - 1,
        },
        (res) => {
          if (res.data.code == 200) {
            sessionStorage.setItem("token", res.data.data.token);
            if (that.userType == "1") {
              sessionStorage.setItem("name", res.data.data.userEntry.userName);
              sessionStorage.setItem("num", that.account);
              sessionStorage.setItem("pass", that.$md5(that.password));
              sessionStorage.setItem("userType", "1");
              sessionStorage.setItem("isMarried", res.data.data.marriageSituation);
              // that.$router.push({
              //   path: "/mainTable",
              // });
              // '/menu/animation', 'swfk'
              // path: url, query: { url: val } }
              that.$router.push({
                path: "/menu/animation",
                query: { url: "swfk" },
              });
            }
            //当type等于2时跳转到我的测试页面

            if (that.userType == "2") {
              // sessionStorage.setItem("num", that.account);
              sessionStorage.setItem("name", res.data.data.userEntry.userName);
              sessionStorage.setItem("num", that.account);
              sessionStorage.setItem("pass", that.$md5(that.password));
              sessionStorage.setItem("userType", "2");
              // /menu/manageElectrical', 'yhfk
              // that.$router.push({ path: "/mainTable" });
              that.$router.push({
                path: "/menu/manageElectrical",
                query: { url: "yhfk" },
              });
              sessionStorage.setItem("defaultUrl", '/menu/manageElectrical');
            }
          } else {
            this.$message.error("访问服务器失败！");
          }
        }
      );
    },
    formateSex(val) {
      if (val === "男") {
        return 1;
      } else {
        return 0;
      }
    },
    //尝试调用统一接口
    logi() {
      this.$http.get(
        `category/getCognizeCategoryList?institutionNo=${this.institutionNo}&gId=${this.gId}`,
        {},
        (msg) => {}
      );

      // this.$http.post(
      //   `result/${this.scale_flag}`,
      //   {
      //     scale_result: this.scale_result,
      //     testPlanId: this.testPlanId,
      //     userId: sessionStorage.getItem("b80bb7740288fda1f201890375a60c8f"),
      //   },
      //   (res) => {
      //     this.next_and_last_button = false;
      //     if (res.code == 200) {
      //       this.showResult = true;
      //       this.resultJson = res.data;
      //     } else {
      //       this.$message.error("访问服务器失败！");
      //     }
      //   }
      // );
    },
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // userTypeFun(){

    // },
    //创建时间
    creatTi() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let day = date.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day;
    },
  },
};
</script>
<style>
.el-select-dropdown__item.selected {
  color: #3f66dd !important;
  font-weight: 500 !important;
}
.el-select-dropdown__item {
  color: #3f66dd !important;
}

.el-divider--horizontal {
  display: block;
  height: 0.1px !important;
  width: 100%;
  margin: 24px 0;
}
.pagin_class {
  margin-bottom: 30px;
}
</style>
<style scoped>
.login_back_group >>> .el-select-dropdown {
  background-color: #ffffff !important;
  border: 0px;
}
.login_back_group >>> .el-select-dropdown__item.hover {
  background-color: #ffffff !important;
  /* color:#08c8cd !important; */
}

/*
/* 直接调用css，保证隐藏滚动条的同时还可以继续通过滚轮向下翻 */
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
.loginBu {
  color: #ffffff;
}
.bor {
  margin-top: 30%;
}
.lo {
  background: #ffffff;
  box-shadow: 5px 5px 5px #cccccc;
  padding-bottom: 4rem;
  padding-top: 2rem;
  border-radius: 1rem;
}
.fontLo {
  font-size: 2rem;
  font-weight: 500;
}
.buttLlo {
  color: #ffffff;
  text-align: center;
  left: 0px;
  right: 0px;
  font-size: 14px;
  bottom: 0px;
  position: fixed;
}
.registerButton {
  padding-top: 1rem;
  cursor: pointer;
  color: #ffffff;
  display: block;
  text-align: right;
  font-size: 10px;
  border-radius: 0;
}
.login_back_group {
  width: 100vw;
  height: 100vh;

  background: url(../assets/newImage/login_bg.png) no-repeat;
  background-size: cover;
}

.login-middle-bg {
  /* background: #2f406e; */
  border-radius: 12px;
}
.login_middle_title {
  color: #ffffff;
  font-size: 14px;
}
.login_line_heigth {
  line-height: 45px;
}
.login_middle_title_img {
  margin-top: 15px;
}
.login_title_title_middle {
  background: #405182;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.login_title_title_middle_i {
  text-align: right;
}
.login_back_group >>> .login_select {
  background: #1d55ff !important;
  /* color:#1D55FF ; */

  /* border-radius: 4px; */
}
.login_back_group >>> .el-input--suffix .el-input__inner {
  padding-right: 0px;
  background: #ffffff;
  color: #1d55ff;
  border-radius: 4px !important;
}

.login_back_group >>> .el-input__inner::placeholder {
  padding-right: 0px;
  background: #ffffff;
  color: #1d55ff;
  opacity: 0.5;
}
.login_back_group >>> .el-input__inner {
  border: 1px solid #ffffff !important;
  border-radius: 0px;
}

.login_back_group1 >>> .el-input--suffix .el-input__inner {
  padding-right: 0px;
  background: #ffffff;
}
.login_button {
  cursor: pointer;
  background: #1d55ff;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
}

.registerTop {
  width: 60%;
  margin-left: 20%;
  margin-top: 13%;
}
.registerIcon {
  width: 6px;
  height: 28px;
  background: #ffffff;
}
.registerFont {
  font-size: 28px;
  color: #ffffff;
}
.registerDes {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.registerContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.registerVertical {
  display: flex;
  flex-direction: column;
  align-items: left;
}
.registerTitle {
  margin-bottom: 6px;
  font-size: 16px;
  color: #ffffff;
}
.registerVertical >>> .el-input__inner {
  width: 320px;
  border-radius: 4px;
}

.registerRow {
  width: 320px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.registerRowLogin {
  width: 320px;
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
}
.registerRowLoginButton {
  background-color: #1d55ff;
  width: 120px;
  border: 0px;
  border-radius: 4px;
}
.registerRowLoginButton:hover {
  background-color: #1d55ff;
  width: 120px;
  border: 0px;
  border-radius: 4px;
}
.registerRowLoginButton:active {
  background-color: #1d55ff;
  width: 120px;
  border: 0px;
  border-radius: 4px;
}
.registerRowLoginButton:focus {
  background-color: #1d55ff;
  width: 120px;
  border: 0px;
  border-radius: 4px;
}

.registerLoginCancle {
  background-color: #ffffff;
  color: #1d55ff;
  width: 120px;
  border: 0px;
  border-radius: 4px;
  width: 120px;
  border: 0px;
  border-radius: 4px;
}
.registerLoginCancle:hover {
  background-color: #ffffff;
  color: #1d55ff;
  width: 120px;
  border: 0px;
  border-radius: 4px;
  width: 120px;
  border: 0px;
  border-radius: 4px;
}
.registerLoginCancle:active {
  background-color: #ffffff;
  color: #1d55ff;
  width: 120px;
  border: 0px;
  border-radius: 4px;
  width: 120px;
  border: 0px;
  border-radius: 4px;
}
.registerLoginCancle:focus {
  background-color: #ffffff;
  color: #1d55ff;
  width: 120px;
  border: 0px;
  border-radius: 4px;
  width: 120px;
  border: 0px;
  border-radius: 4px;
}
.registerInput >>> .el-input__inner {
  color: #1d55ff;
}
</style>