1

YM

2024-07-17 d5f572496c5fb12fec2fe346b847bf58331299c9

 src/pages/Register/Register.vue

@@ -1,381 +1,454 @@
<template>
   <view class="container flex flex-center" style="align-items: flex-start;">
      <view class="repository relative">
         <view class="Ttop flex flex-center flex-wrap" style="flex-direction: column;">
            <view class=""></view>
            <view class="" ref="Rtop">
               <text class="login"></text>
               <text
                  style="font-size: .36rem;letter-spacing: 4rpx;vertical-align: middle;font-family: cursive;font-weight: bold;">中国医学人物知识库</text>
            </view>
            <view></view>
         </view>
         <!-- 注册用户 v-if="isRegister"-->
         <el-card>
            <view class="LoginTop"
               style="display: flex; justify-content: space-between;margin-bottom: .47rem;align-items: center;">
               <!-- <view class="" style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户注册</view> -->
               <view class="LoginBg"></view>
               <view class="" @click="BacktoLogin"
                  style="cursor: pointer;font-size: .14rem;color: #244A7B;font-weight: normal;">
                  已有账号？返回登录
               </view>
            </view>
            <el-form :hide-required-asterisk="true" ref="formLogin" label-position="right" :rules="rules"
               :model="registerData">
               <el-form-item label="登录账号" prop="loginID">
                  <el-input v-model="registerData.loginID" placeholder="由字母或数字组合3-15个字符组成"></el-input>
               </el-form-item>
               <el-form-item label="登录密码" prop="pass">
                  <el-input type="password" v-model="registerData.pass"
                     placeholder="字母、数字或特殊符号组成(6-10)个字符"></el-input>
               </el-form-item>
               <el-form-item label="确认密码" prop="checkPass">
                  <el-input type="password" v-model="registerData.checkPass" placeholder="必须与密码一致"></el-input>
               </el-form-item>
               <el-form-item label="手机/邮箱" prop="cellphoneORmailbox">
                  <el-input v-model="registerData.cellphoneORmailbox" placeholder="请填写正确的手机或电子邮箱地址"></el-input>
               </el-form-item>
               <el-form-item label="验证码" prop="verifyCode">
                  <view class="verifyCode relative">
                     <el-input v-model="registerData.verifyCode" placeholder="请输入验证码"></el-input>
                     <view @click="verifyCodeClick" class="yzm"
                        style="position: absolute;right: 0%;top: 0%;color: #244A7B;font-size: .14rem;font-weight: 500;">
                        获取验证码</view>
                  </view>
               </el-form-item>
               <el-form-item class="btn" style="margin-bottom: .09rem;">
                  <el-button class="font-family"
                     style="margin-top: .22rem; font-weight:900;font-size: .3rem; width: 100%;background-color:#244A7B;color: #fff;padding: .16rem;"
                     size="medium" @click="Login('formLogin')">注册</el-button>
               </el-form-item>
               <view class="asdf"
                  style="font-size: .12rem;color: #9E9E9E;font-weight: 500; text-align: center;line-height: normal;margin-bottom: .19rem;">
                  用户注册即代表同意 <span class="cursor" @click="termOfServiceClick(1)">《服务条款》</span> 和<span
                     class="cursor" @click="termOfServiceClick(2)">《用户隐私保护和个人信息条款》</span>
               </view>
            </el-form>
         </el-card>
      </view>
      <view class="hua"></view>
      <!-- 底部人物背景图左侧 -->
      <view class="fff"></view>
      <!-- 底部花的背景图右侧 -->
      <view class="rrr"></view>

      <Footer1 />
   </view>
  <view class="container flex flex-center" style="align-items: flex-start">
    <view class="repository relative">
      <view
        class="Ttop flex flex-center flex-wrap"
        style="flex-direction: column"
      >
        <view></view>
        <view ref="Rtop">
          <text class="login"></text>
          <text
            style="
              font-size: 0.36rem;
              letter-spacing: 4rpx;
              vertical-align: middle;
              font-family: cursive;
              font-weight: bold;
            "
            >中国历代医学人物知识库</text
          >
        </view>
        <view></view>
      </view>
      <!-- 注册用户 v-if="isRegister"-->
      <el-card>
        <view
          class="LoginTop"
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.47rem;
            align-items: center;
          "
        >
          <!-- <view  style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户注册</view> -->
          <view class="LoginBg"></view>
          <view
            @click="BacktoLogin"
            style="
              cursor: pointer;
              font-size: 0.14rem;
              color: #244a7b;
              font-weight: normal;
            "
          >
            已有账号？返回登录
          </view>
        </view>
        <el-form
          :hide-required-asterisk="true"
          ref="formLogin"
          label-position="right"
          :rules="rules"
          :model="registerData"
        >
          <el-form-item label="登录账号" prop="loginID">
            <el-input
              v-model="registerData.loginID"
              placeholder="由字母或数字组合3-15个字符组成"
            ></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="pass">
            <el-input
              type="password"
              v-model="registerData.pass"
              placeholder="字母、数字或特殊符号组成(6-10)个字符"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="registerData.checkPass"
              placeholder="必须与密码一致"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号/邮箱" prop="cellphoneORmailbox">
            <el-input
              v-model="registerData.cellphoneORmailbox"
              placeholder="请填写手机号/邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="verifyCode">
            <view class="verifyCode relative">
              <el-input
                v-model="registerData.verifyCode"
                placeholder="请输入验证码"
              ></el-input>
              <view
                @click="verifyCodeClick"
                class="yzm"
                style="
                  position: absolute;
                  right: 0%;
                  top: 0%;
                  color: #244a7b;
                  font-size: 0.14rem;
                  font-weight: 500;
                "
              >
                {{
                  countdown > 0 ? `${countdown}秒后重新获取` : "获取验证码"
                }}</view
              >
            </view>
          </el-form-item>
          <el-form-item class="btn" style="margin-bottom: 0.09rem">
            <el-button
              class="font-family"
              style="
                margin-top: 0.22rem;
                font-weight: 900;
                font-size: 0.3rem;
                width: 100%;
                background-color: #244a7b;
                color: #fff;
                padding: 0.16rem;
              "
              size="medium"
              @click="Login('formLogin')"
              >注册</el-button
            >
          </el-form-item>
          <view
            class="asdf"
            style="
              font-size: 0.12rem;
              color: #9e9e9e;
              font-weight: 500;
              text-align: center;
              line-height: normal;
              margin-bottom: 0.19rem;
            "
          >
            <el-checkbox v-model="checked" style="margin-right: 0.06rem;"></el-checkbox>
            用户注册即代表同意
            <span
              class="cursor"
              style="color: #244a7b"
              @click="termOfServiceClick(1)"
              >《服务条款》</span
            >
            和<span
              class="cursor"
              style="color: #244a7b"
              @click="termOfServiceClick(2)"
              >《用户隐私保护和个人信息条款》</span
            >
          </view>
        </el-form>
      </el-card>
    </view>
    <view class="hua"></view>
    <!-- 底部人物背景图左侧 -->
    <view class="fff"></view>
    <!-- 底部花的背景图右侧 -->
    <view class="rrr"></view>
    <Footer1 />
  </view>
</template>

<script>
   import {
      getaddLogin,getverifyCode
   } from '@/api/index.js'
   import {
      nextTick
   } from "vue";
   import Footer1 from '@/components/footer/footer.vue'
   export default {
      components: {
         Footer1
      },
      data() {
         // 密码
         var validatePass = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('请输入密码'));
            } else {
               if (this.registerData.checkPass !== '') {
                  this.$nextTick(() => {
                     this.$refs.formLogin.validateField('checkPass');
                  });
               }
               callback();
            }
         };
         // 确认密码
         var validatePass2 = (rule, value, callback) => {
            if (value === '') {
               callback(new Error('请再次输入密码'));
            } else if (value !== this.registerData.pass) {
               callback(new Error('两次输入密码不一致!'));
            } else {
               callback();
            }
         };
         return {
            // 用户注册
            isRegister: false,
            // 用户登录
            isLogin: true,
            // 修改密码
            isAmendPass: false,
            // 重置密码
            isResetPass: false,
            // 注册用户账号的校验
            rules: {
               loginID: [{
                  required: true,
                  message: '请输入登录账号',
                  trigger: 'blur'
               }],
               pass: [{
                     required: true,
                     message: '请输入密码',
                     trigger: 'blur'
                  },
                  {
                     min: 6,
                     max: 12,
                     message: '密码长度在 6 到 12 个字符',
                     trigger: 'blur'
                  },
                  {
                     validator: validatePass,
                     trigger: 'blur'
                  }
               ],
               checkPass: [{
                  validator: validatePass2,
                  trigger: 'blur'
               }],
               cellphoneORmailbox: [{
                     required: true,
                     message: '请输入手机号或邮箱',
                     trigger: 'blur'
                  },
                  {
                     validator: this.validateContact,
                     trigger: 'blur'
                  }
               ],
               verifyCode: [{
                     required: true,
                     message: '请输入验证码',
                     trigger: 'blur'
                  },
                  {
                     validator: (rule, value, callback) => this.validateVerificationCode(rule, value,
                        callback),
                     trigger: 'blur'
                  }
               ]
            },
            // 登录注册框
            loginTrue: true,
            Rtop1: 0,
            value: 'sdfdsf',
            // 注册用户对应的数据
            registerData: {
               loginID: '',
               pass: '',
               checkPass: '',
               cellphoneORmailbox: '',
               verifyCode: ''
            },
            // 登录用户账号
            loginData: {
               // 账号
               loginID: '',
               pass: ''
            },
            // 重置密码
            resetDataPass: {
               cellphoneORmailbox: '',
               verifyCode: "",
               newPass: "",
               checkPass: ""
            },
            // 修改密码
            amendDataPass: {
               loginID: '',
               originalPass: "",
               newPass: "",
               checkPass: ""
            },
            // 书籍数据
            listData: [{
                  name: '历代医家传记库',
                  id: 1,
               }, {
                  name: '世医医家库',
                  id: 2,
               }, {
                  name: '医学学术流派',
                  id: 3,
               }, {
                  name: '中国地域医谱',
                  id: 4,
               }, {
                  name: '中国医事制度',
                  id: 5,
               },
import { getaddLogin, getverifyCode } from "@/api/index.js";
import { encryptAES } from "@/utils/Crypto.js";
import { nextTick } from "vue";
import Footer1 from "@/components/footer/footer.vue";
export default {
  components: {
    Footer1
  },
  data() {
    // 密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerData.checkPass !== "") {
          this.$nextTick(() => {
            this.$refs.formLogin.validateField("checkPass");
          });
        }
        callback();
      }
    };
    // 确认密码
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerData.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      //验证码倒计时
      countdown: 0,
      // 用户注册
      isRegister: false,
      // 用户登录
      isLogin: true,
      // 修改密码
      isAmendPass: false,
      // 重置密码
      isResetPass: false,
      // 注册用户账号的校验
      rules: {
        loginID: [
          {
            required: true,
            message: "请输入登录账号",
            trigger: "blur"
          },
          {
            pattern: /^[a-zA-Z0-9]{3,15}$/,
            message: "请输入3-15个字符的字母或数字",
            trigger: "blur"
          } // 自定义校验规则，使用正则表达式
        ],
        pass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 10,
            message: "密码长度在 6 到 12 个字符",
            trigger: "blur"
          },
          {
            validator: validatePass,
            trigger: "blur"
          }
        ],
        checkPass: [
          {
            validator: validatePass2,
            trigger: "blur"
          }
        ],
        cellphoneORmailbox: [
          {
            required: true,
            message: "请输入手机号/邮箱",
            trigger: "blur"
          },
          {
            validator: this.validateContact,
            trigger: "blur"
          }
        ],
        verifyCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }
        ]
      },
      // 登录注册框
      loginTrue: true,
      Rtop1: 0,
      value: "sdfdsf",
      // 注册用户对应的数据
      registerData: {
        loginID: "",
        pass: "",
        checkPass: "",
        cellphoneORmailbox: null,
        verifyCode: ""
      },
      // 登录用户账号
      loginData: {
        // 账号
        loginID: "",
        pass: ""
      },
      // 重置密码
      resetDataPass: {
        cellphoneORmailbox: null,
        verifyCode: "",
        newPass: "",
        checkPass: ""
      },
      // 修改密码
      amendDataPass: {
        loginID: "",
        originalPass: "",
        newPass: "",
        checkPass: ""
      },
      // 书籍数据
      listData: [
        {
          name: "历代人物",
          id: 1
        },
        {
          name: "家学传承",
          id: 2
        },
        {
          name: "学术流派",
          id: 6
        },
        {
          name: "学术图谱",
          id: 3
        },
        {
          name: "地域图谱",
          id: 4
        },
        // {
        //   name: "中医医事制度",
        //   id: 5
        // }
      ],
      checked: false
    };
  },
  onLoad() {
    uni.getSystemInfo({
      success: function (info) {
        // console.log('屏幕的宽度：' + info.windowWidth);
        // console.log('屏幕的高度：' + info.windowHeight);
      }
    });
  },
  mounted() {
    this.getElementWidth();
  },
  methods: {
    // 服务条款
    termOfServiceClick(number) {
      if (number == 1) {
        window.open(`#/pages/userAgreement/userAgreement?type=1`);
      } else if (number == 2) {
        window.open(`#/pages/userAgreement/userAgreement?type=2`);
      }
    },
    // 已有账号？返回登录
    BacktoLogin() {
      uni.redirectTo({
        url: "/pages/Login/Login"
      });
    },
    // 获取验证码
    async verifyCodeClick() {
      if (!this.registerData.cellphoneORmailbox) {
        this.$message({
          message: "请输入手机！",
          type: "warning"
        });

            ]
         }
      },
      onLoad() {
         uni.getSystemInfo({
            success: function(info) {
               // console.log('屏幕的宽度：' + info.windowWidth);
               // console.log('屏幕的高度：' + info.windowHeight);
            }
         });
      },
      mounted() {
         this.getElementWidth();
      },
      methods: {
         // 服务条款
         termOfServiceClick(number) {
            // console.log(number);
            if (number == 1) {
               console.log('服务条款');
               uni.navigateTo({
                  url:'/pages/userAgreement/userAgreement'
               })
            } else if (number == 2) {
               uni.navigateTo({
                  url:'/pages/userAgreement/userAgreement'
               })
               console.log('用户隐私保护和个人信息条款');
            }
         },
         // 已有账号？返回登录
         BacktoLogin() {
            uni.redirectTo({
               url: '/pages/Login/Login'
            })
         },
         // 获取验证码
         async verifyCodeClick() {
            let Obj = {
               communicateParam: this.registerData.cellphoneORmailbox,
            }
            let code = await getverifyCode(Obj)
            console.log(code);
            console.log('获取验证码');
         },
         // 列表项跳转
         listDataClick(item) {
            console.log(item);
            // 在当前页面设置全局变量
            // uni.setStorageSync('globalData', { id: 123, name: 'example' });
            if (item.id == 1) {
               uni.navigateTo({
                  url: '/pages/repository/repository?id=' + item.id
               })
            } else if (item.id == 2) {
               console.log(item.name);
               // uni.navigateTo({
               //    url:'/pages/repository/repository?id='+item.id
               // })
            } else if (item.id == 3) {
               uni.navigateTo({
                  url: '/pages/dataDisplay/dataDisplay?id=' + item.id
               })
            } else if (item.id == 4) {
               uni.navigateTo({
                  url: '/pages/territory/territory?id=' + item.id
               })
            } else if (item.id == 5) {
               uni.navigateTo({
                  url: '/pages/TcmSystem/TcmSystem?id=' + item.id
               })
            }
         },
         // 验证码校验
         validateVerificationCode(rule, value, callback) {
            if (value !== '123456') {
               callback(new Error('验证码错误'));
            } else {
               callback();
            }
         },
         // 手机号/或者邮箱
         validateContact(rule, value, callback) {
            const regPhone = /^1[3456789]\d{9}$/;
            const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if (regPhone.test(value) || regEmail.test(value)) {
               callback(); // 校验通过
            } else {
               callback(new Error('请输入正确的手机号或邮箱')); // 校验失败
            }
         },
         getElementWidth() {
            this.$nextTick(() => {
               var width = this.$refs.Rtop.$el.clientWidth;
               this.Rtop1 = width + 50;
               console.log('Element width:', width);
            })
         },
         // 用户注册
         async Login(formName) {
            let Obj = {
               // username: this.registerData.loginID,
               // password: this.registerData.pass,
               communicateParam: this.registerData.cellphoneORmailbox,
               // verifyCode: this.registerData.verifyCode,
               // "username": "bbbcccccc",
               // "password": "EmgTXx6Iz/QrbL5nrP0h2g==",
               // "communicateParam": "eacpjls@foxmails.com",
               // "verifyCode": "LE5GVP"

            }
            // uni.request({
            //    url: 'http://icmm.test.xyinde.com/api/account/register',
            //    method: 'POST',
            //    data: Obj,
            //    success: (res) => {
            //       console.log(res.data);
            //       // this.text = 'request success';
            //    }
            // })
            // console.log(Obj, '用户登录的登录按钮');
				
            // let res = await getaddLogin(Obj)
            // console.log('sdfdsfs', res);
            // this.$refs[formName].validate((valid) => {
            //    if (valid) {
            //       alert('submit!成功');
            //       uni.navigateTo({
            //          url: '/pages/Login/Login'
            //       })
            //    } else {
            //       console.log('error submit!!失败');
            //       return false;
            //    }
            // });
         },
      }
   }
        return false;
      }
      if (this.countdown > 0) {
        return;
      }
      let Obj = {
        communicateParam: this.registerData.cellphoneORmailbox
      };
      this.countdown = 60;
      const intervalId = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown -= 1;
        } else {
          clearInterval(intervalId);
        }
      }, 1000);
      let code = await getverifyCode(Obj);
    },
    // 手机号/或者邮箱
    validateContact(rule, value, callback) {
      const regPhone = /^1[0-9]{10}$/;
      const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (regPhone.test(value) || regEmail.test(value)) {
        callback(); // 校验通过
      } else {
        callback(new Error("请输入正确的手机号")); // 校验失败
      }
    },
    getElementWidth() {
      this.$nextTick(() => {
        var width = this.$refs.Rtop.$el.clientWidth;
        this.Rtop1 = width + 50;
      });
    },
    // 用户注册
    async Login(formName) {
      if(!this.checked) {
        this.$message({
          message: '请勾选同意服务条款、用户隐私保护和个人信息条款',
          type: 'warning'
        });
        return false;
      }
      let Obj = {
        username: this.registerData.loginID,
        password: encryptAES(this.registerData.pass),
        communicateParam: this.registerData.cellphoneORmailbox,
        verifyCode: this.registerData.verifyCode
      };
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await getaddLogin(Obj).then((res) => {
            if (res.success == true) {
              this.$message.success("注册成功");
              uni.navigateTo({
                url: "/pages/Login/Login"
              });
            } else {
              this.$message.error(res.errorText);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
   @media screen and (max-width:1366px) {
      ::v-deep .el-card {
         top: 50% !important;
      }
@media screen and (max-width: 1366px) {
  ::v-deep .el-card {
    top: 50% !important;
  }

      ::v-deep .el-input__inner {
         height: .44rem;
      }
  ::v-deep .el-input__inner {
    height: 0.44rem;
  }

      ::v-deep .el-card {
         padding: .2rem 0 !important;
      }
  ::v-deep .el-card {
    padding: 0.2rem 0 !important;
  }

      .LoginBg {
         margin: 0 !important;
      }
  .LoginBg {
    margin: 0 !important;
  }

      .hua {
         height: 5rem !important;
      }
   }
  .hua {
    height: 5rem !important;
  }
}

   @media screen and (min-width:1366px) and (max-width:1920px) {

      /* ::v-deep .el-card__body {
@media screen and (min-width: 1366px) and (max-width: 1920px) {
  /* ::v-deep .el-card__body {
         padding: 0 .58rem !important;
      }

@@ -398,69 +471,68 @@
      .hua {
         height: 5rem !important;
      } */
      .LoginBg {
         margin: 0 !important;
         height: .3rem !important;
      }
  .LoginBg {
    margin: 0 !important;
    height: 0.3rem !important;
  }

      ::v-deep .el-card {
         top: 70% !important;
         padding: 0 !important;
      }
  ::v-deep .el-card {
    top: 70% !important;
    padding: 0 !important;
  }

      ::v-deep .el-card__body {
         padding: .25rem .5rem !important;
      }
  ::v-deep .el-card__body {
    padding: 0.25rem 0.5rem !important;
  }

      ::v-deep .el-form {
         padding-left: .1rem !important;
      }
  ::v-deep .el-form {
    padding-left: 0.1rem !important;
  }

      ::v-deep .el-form-item__error {
         font-size: .13rem !important;
      }
  ::v-deep .el-form-item__error {
    font-size: 0.13rem !important;
  }

      ::v-deep .el-input__inner {
         height: .35rem !important;
      }
  ::v-deep .el-input__inner {
    height: 0.35rem !important;
  }

      .hua {
         height: 5rem !important;
      }
  .hua {
    height: 5rem !important;
  }

      .LoginTop {
         margin-bottom: .25rem !important;
      }
  .LoginTop {
    margin-bottom: 0.25rem !important;
  }

      .yzm {
         top: 15% !important;
      }
  .yzm {
    top: 15% !important;
  }

      .fff {
         width: 2.4rem !important;
         height: 4rem !important;
      }
  .fff {
    width: 2.4rem !important;
    height: 4rem !important;
  }

      .rrr {
         width: 2rem !important;
         height: 2.5rem !important;
      }
  .rrr {
    width: 2rem !important;
    height: 2.5rem !important;
  }

      .btn ::v-deep .el-button {
         margin-top: 0.2rem !important;
         /*       font-size: 0.2rem !important;
  .btn ::v-deep .el-button {
    margin-top: 0.2rem !important;
    /*       font-size: 0.2rem !important;
            width: 100%;
            padding: 0.12rem !important; */
      }
  }

      .asdf {
         margin-bottom: .1rem !important;
      }
   }
  .asdf {
    margin-bottom: 0.1rem !important;
  }
}

   @media screen and (min-width: 1920px) and (max-width:2560px) {

      /*       ::v-deep .el-card {
@media screen and (min-width: 1920px) and (max-width: 2560px) {
  /*       ::v-deep .el-card {
         top: 80% !important;
      }

@@ -537,129 +609,128 @@
      ::v-deep .el-input__inner {
         height: .35rem !important;
      } */
      .LoginBg {
         margin: 0 !important;
         height: .3rem !important;
      }
  .LoginBg {
    margin: 0 !important;
    height: 0.3rem !important;
  }

      ::v-deep .el-card {
         top: 70% !important;
         padding: 0 !important;
      }
  ::v-deep .el-card {
    top: 70% !important;
    padding: 0 !important;
  }

      ::v-deep .el-card__body {
         padding: .25rem .5rem !important;
      }
  ::v-deep .el-card__body {
    padding: 0.25rem 0.5rem !important;
  }

      ::v-deep .el-form {
         padding-left: .1rem !important;
      }
  ::v-deep .el-form {
    padding-left: 0.1rem !important;
  }

      ::v-deep .el-form-item__error {
         font-size: .13rem !important;
      }
  ::v-deep .el-form-item__error {
    font-size: 0.13rem !important;
  }

      ::v-deep .el-input__inner {
         height: .35rem !important;
      }
  ::v-deep .el-input__inner {
    height: 0.35rem !important;
  }

      .hua {
         height: 5rem !important;
      }
  .hua {
    height: 5rem !important;
  }

      .LoginTop {
         margin-bottom: .25rem !important;
      }
  .LoginTop {
    margin-bottom: 0.25rem !important;
  }

      .yzm {
         top: 15% !important;
      }
  .yzm {
    top: 15% !important;
  }

      .fff {
         width: 2.4rem !important;
         height: 4rem !important;
      }
  .fff {
    width: 2.4rem !important;
    height: 4rem !important;
  }

      .rrr {
         width: 2rem !important;
         height: 2.5rem !important;
      }
  .rrr {
    width: 2rem !important;
    height: 2.5rem !important;
  }

      .btn ::v-deep .el-button {
         margin-top: 0.2rem !important;
         /*       font-size: 0.2rem !important;
  .btn ::v-deep .el-button {
    margin-top: 0.2rem !important;
    /*       font-size: 0.2rem !important;
            width: 100%;
            padding: 0.12rem !important; */
      }
  }

      .asdf {
         margin-bottom: .1rem !important;
      }
   }
  .asdf {
    margin-bottom: 0.1rem !important;
  }
}

   @media screen and (min-width:2560px)and (max-width:3840px) {
      .LoginBg {
         margin: 0 !important;
         height: .3rem !important;
      }
@media screen and (min-width: 2560px) and (max-width: 3840px) {
  .LoginBg {
    margin: 0 !important;
    height: 0.3rem !important;
  }

      ::v-deep .el-card {
         top: 70% !important;
         padding: 0 !important;
      }
  ::v-deep .el-card {
    top: 70% !important;
    padding: 0 !important;
  }

      ::v-deep .el-card__body {
         padding: .25rem .5rem !important;
      }
  ::v-deep .el-card__body {
    padding: 0.25rem 0.5rem !important;
  }

      ::v-deep .el-form {
         padding-left: .1rem !important;
      }
  ::v-deep .el-form {
    padding-left: 0.1rem !important;
  }

      ::v-deep .el-form-item__error {
         font-size: .13rem !important;
      }
  ::v-deep .el-form-item__error {
    font-size: 0.13rem !important;
  }

      ::v-deep .el-input__inner {
         height: .35rem !important;
      }
  ::v-deep .el-input__inner {
    height: 0.35rem !important;
  }

      .hua {
         height: 5rem !important;
      }
  .hua {
    height: 5rem !important;
  }

      .LoginTop {
         margin-bottom: .25rem !important;
      }
  .LoginTop {
    margin-bottom: 0.25rem !important;
  }

      .yzm {
         top: 15% !important;
      }
  .yzm {
    top: 15% !important;
  }

      .fff {
         width: 2.4rem !important;
         height: 4rem !important;
      }
  .fff {
    width: 2.4rem !important;
    height: 4rem !important;
  }

      .rrr {
         width: 2rem !important;
         height: 2.5rem !important;
      }
  .rrr {
    width: 2rem !important;
    height: 2.5rem !important;
  }

      .btn ::v-deep .el-button {
         margin-top: 0.2rem !important;
         /*       font-size: 0.2rem !important;
  .btn ::v-deep .el-button {
    margin-top: 0.2rem !important;
    /*       font-size: 0.2rem !important;
            width: 100%;
            padding: 0.12rem !important; */
      }
  }

      .asdf {
         margin-bottom: .1rem !important;
      }
  .asdf {
    margin-bottom: 0.1rem !important;
  }
}

   }

   /* @media screen and (max-width: 1366px){
/* @media screen and (max-width: 1366px){
      ::v-deep .el-card{
         top: 60% !important;
      }
@@ -674,9 +745,9 @@
      
      
   } */
   /* 
/* 
   在屏幕宽度超过 1440px 时的样式设置 */
   /* @media screen and (min-width: 1441px) {
/* @media screen and (min-width: 1441px) {
      ::v-deep .el-card {
         top: 80% !important;
      }
@@ -704,209 +775,195 @@
      }
   } */

.LoginBg {
  width: 1.2rem;
  height: 0.37rem;
  background: url(@/static/image/用户注册.png) no-repeat 0 0;
  background-size: 100% 100%;
  /* border: 10px solid red; */
}

   .LoginBg {
      width: 1.2rem;
      height: .37rem;
      background: url(@/static/image/用户注册.png) no-repeat 0 0;
      background-size: 100% 100%;
      /* border: 10px solid red; */
::v-deep .el-card {
  border-radius: 0;
  width: 5.42rem;
  /* height: 5.65rem; */
  position: absolute;
  top: 80%;
}

   }
::v-deep .el-card__body {
  padding: 0.175rem 0.58rem;
}

.btn >>> .el-form-item__content {
  margin-left: 0 !important;
}

   ::v-deep .el-card {
      border-radius: 0;
      width: 5.42rem;
      /* height: 5.65rem; */
      position: absolute;
      top: 80%;
   }
::v-deep .el-form-item__content {
  margin-left: 0 !important;
  flex: 1;
}

   ::v-deep .el-card__body {
      padding: .175rem .58rem;
   }
::v-deep .el-input__inner {
  border: none;
  border-bottom: 1px solid #2d476a;
  border-radius: 0;
  padding: 0;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.14rem;
}

   .btn>>>.el-form-item__content {
      margin-left: 0 !important;
::v-deep .el-form-item__error {
  /* display: none; */
  font-size: 0.12rem;
}

   }
::v-deep .input.invalid:focus {
  border-color: #2d476a !important;
}

   ::v-deep .el-form-item__content {
      margin-left: 0 !important;
      flex: 1;
   }
::v-deep .el-input__inner:invalid {
  border-color: #2d476a !important;
}

   ::v-deep .el-input__inner {
      border: none;
      border-bottom: 1px solid #2d476a;
      border-radius: 0;
      padding: 0;
      height: .4rem;
      line-height: .4rem;
      font-size: .14rem;
   }
::v-deep .el-form-item__label {
  min-width: 0.8rem;
  padding: 0;
  color: #244a7b;
  font-size: 0.14rem;
  font-weight: 500;
  margin-right: 0.1rem;
  display: flex;
  align-items: center;
  text-align: right;
}

   ::v-deep .el-form-item__error {
      /* display: none; */
      font-size: .12rem;
   }
::v-deep .el-form-item {
  margin-bottom: 0.22rem;
  display: flex;
}

   ::v-deep .input.invalid:focus {
      border-color: #2d476a !important;
   }
.ss1 {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 40rpx;
  height: 40rpx;
  background-size: 100% 100%;
}

   ::v-deep .el-input__inner:invalid {
      border-color: #2d476a !important;
   }
.s1 {
  background-image: url(@/static/image/search.png);
}

.s2 {
  background-image: url(@/static/image/question.png);
}

   ::v-deep .el-form-item__label {
      min-width: .6rem;
      padding: 0;
      color: #244A7B;
      font-size: .14rem;
      font-weight: 500;
      margin-right: .29rem;
      display: flex;
      align-items: center;
      text-align: right;
   }
.s3 {
  background-image: url(@/static/image/question.png);
}

   ::v-deep .el-form-item {
      margin-bottom: .22rem;
      display: flex;
   }
.container {
  background: url(@/static/image/bg1.png);
  width: 100vw;
  height: 100vh;

   .ss1 {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 40rpx;
      height: 40rpx;
      background-size: 100% 100%;
   }
  color: #fff;

   .s1 {
      background-image: url(@/static/image/search.png);
  .repository {
    width: 100% !important;
    /* margin-top: 19px; */
    /* height: 68%; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

   }
    .Ttop {
      margin-top: 0.38rem;
      margin-bottom: 1.22rem;
    }

   .s2 {
      background-image: url(@/static/image/question.png);
   }
    .r-top {
      font-size: 40rpx !important;
      margin: 10rpx 0;
    }
  }
}

   .s3 {
      background-image: url(@/static/image/question.png);
   }
.login {
  width: 0.52rem;
  height: 0.52rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.19rem;
  background: url(@/static/image/logo.png) no-repeat 0 0;
  background-size: 100% 100%;
}

   .container {
      background: url(@/static/image/bg1.png);
      width: 100vw;
      height: 100vh;
.rrr {
  position: absolute;
  right: 0.53rem;
  bottom: 0.36rem;
  width: 2.5rem;
  height: 3.07rem;
  opacity: 1;
  background: url(@/static/image/bg4.png);
  background-size: 100% 100%;
}

      color: #fff;
.hua {
  width: 13.81rem;
  height: 5.965rem;
  position: absolute;
  background: url(@/static/image/bg3.png) no-repeat 0 0;
  background-size: 100% 100%;
}

      .repository {
         width: 100% !important;
         /* margin-top: 19px; */
         /* height: 68%; */
         display: flex;
         flex-direction: column;
         justify-content: space-around;
         align-items: center;
/* 底部人物背景图  */
.fff {
  background: url(@/static/image/bg2.png) no-repeat 0 0;
  background-size: 100% 100%;
  width: 2.74rem;
  height: 4.52rem;
  position: fixed;
  bottom: 0;
  z-index: 9999999999999;
  left: 0;
}

         .Ttop {
            margin-top: .38rem;
            margin-bottom: 1.22rem;
         }
::v-deep .uni-easyinput__content {
  border-radius: 30rpx !important;
  /* height: 52rpx; */
}

         .r-top {
            font-size: 40rpx !important;
            margin: 10rpx 0;
         }
      }
.secretary {
  width: 1300rpx !important;
  height: 50rpx;
  /* height: 80%; */
  /* flex-wrap: wrap; */
  padding: 0 20px;
  text-align: center;

   }
  li {
    background-color: #fff;
    color: black;
    height: 600rpx;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    border: 1rpx solid #fff;
    padding: 50rpx 65rpx;
    /*          padding: 58rpx 128rpx 88rpx; */
    text-align: center;
    background: #ebf4ff;
  }
}

   .login {
      width: .52rem;
      height: .52rem;
      display: inline-block;
      vertical-align: middle;
      margin-right: .19rem;
      background: url(@/static/image/logo.png) no-repeat 0 0;
      background-size: 100% 100%;
   }

   .rrr {
      position: absolute;
      right: .53rem;
      bottom: .36rem;
      width: 2.5rem;
      height: 3.07rem;
      opacity: 1;
      background: url(@/static/image/bg4.png);
      background-size: 100% 100%;
   }

   .hua {
      width: 13.81rem;
      height: 5.965rem;
      position: absolute;
      background: url(@/static/image/bg3.png) no-repeat 0 0;
      background-size: 100% 100%;
   }

   /* 底部人物背景图  */
   .fff {
      background: url(@/static/image/bg2.png) no-repeat 0 0;
      background-size: 100% 100%;
      width: 2.74rem;
      height: 4.52rem;
      position: fixed;
      bottom: 0;
      z-index: 9999999999999;
      left: 0;
   }

   ::v-deep .uni-easyinput__content {
      border-radius: 30rpx !important;
      /* height: 52rpx; */
   }


   .secretary {
      width: 1300rpx !important;
      height: 50rpx;
      /* height: 80%; */
      /* flex-wrap: wrap; */
      padding: 0 20px;
      text-align: center;




      li {
         background-color: #fff;
         color: black;
         height: 600rpx;
         display: flex;
         justify-content: space-between;
         flex-direction: column;
         align-items: center;
         border: 1rpx solid #fff;
         padding: 50rpx 65rpx;
         /*          padding: 58rpx 128rpx 88rpx; */
         text-align: center;
         background: #EBF4FF;
      }
   }



   .Bbottom {
      display: flex;
      justify-content: center;

   }
</style>
.Bbottom {
  display: flex;
  justify-content: center;
}
</style>