登录注册

杨磊

2024-05-11 2df27fd1fa604fc6b2e5876b1b5e073f9a7f39ab

登录注册

 src/pages/Register/Register.vue

@@ -1,366 +1,465 @@
<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 class=""></view>
        <view class="" 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 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: 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;
            "
          >
            用户注册即代表同意
            <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>
</template>

<script>
    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 {
                // 用户注册
                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: '',
                    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: 3,
        },
        {
          name: "中医地域医谱",
          id: 4,
        },
        {
          name: "中医医事制度",
          id: 5,
        },
      ],
    };
  },
  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("服务条款");
        window.open(`#/pages/userAgreement/userAgreement`);
        // uni.navigateTo({
        //     url: '/pages/userAgreement/userAgreement'
        // })
      } else if (number == 2) {
        window.open(`#/pages/userAgreement/userAgreement`);
        console.log("用户隐私保护和个人信息条款");
      }
    },
    // 已有账号？返回登录
    BacktoLogin() {
      uni.redirectTo({
        url: "/pages/Login/Login",
      });
    },
    // 获取验证码
    async verifyCodeClick() {
      console.log(this.registerData.cellphoneORmailbo, "registerData");
      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('服务条款');
                    window.open(`#/pages/userAgreement/userAgreement`)
                    // uni.navigateTo({
                    //     url: '/pages/userAgreement/userAgreement'
                    // })
                } else if (number == 2) {
                    window.open(`#/pages/userAgreement/userAgreement`)
                    console.log('用户隐私保护和个人信息条款');
                }
            },
            // 已有账号？返回登录
            BacktoLogin() {
                uni.redirectTo({
                    url: '/pages/Login/Login'
                })
            },
            // 获取验证码
            async verifyCodeClick() {
                let Obj = {
                    communicateParam: this.registerData.cellphoneORmailbox,
                }
                console.log(Obj);
                let code = await getverifyCode(Obj)
                console.log(code, '获取验证码');
                // console.log('获取验证码');
            },
            // 验证码校验
            validateVerificationCode(rule, value, callback) {
                if (value !== '123456') {
                    // callback(new Error('验证码错误'));
                    callback()
                } else {
                    callback();
                }
            },
            // 手机号/或者邮箱
            validateContact(rule, value, callback) {
                const regPhone = /^1[0-9]{10}$/;
                const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                console.log(value, regPhone.test(value), regEmail.test(value));
                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) {
                console.log(formName);
                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) {
                        // alert('submit!');
                        console.log('sdfds');
                        await getaddLogin(Obj).then(res => {
                            console.log(res, '注册成功');
                            if(res.success==true){
                                uni.showToast({
                                    title: res.errorText,
                                    icon: 'success'
                                });
                                uni.navigateTo({
                                    url: '/pages/Login/Login'
                                })
                            }else{
                                uni.showToast({
                                    title: res.errorText,
                                    icon: 'error'
                                });
                            }
                        })
                        // encryptAES
                        // 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);

                // console.log(Obj, '用户登录的登录按钮');
    },
    // 手机号/或者邮箱
    validateContact(rule, value, callback) {
      const regPhone = /^1[0-9]{10}$/;
      const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      console.log(value, regPhone.test(value), regEmail.test(value));
      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) {
      console.log(formName);
      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) {
          // alert('submit!');
          console.log("sdfds");
          await getaddLogin(Obj).then((res) => {
            console.log(res, "注册成功");
            if (res.success == true) {
              uni.showToast({
                title: res.errorText,
                icon: "success",
              });
              uni.navigateTo({
                url: "/pages/Login/Login",
              });
            } else {
              uni.showToast({
                title: res.errorText,
                icon: "error",
              });
            }
          });
          // encryptAES
          // uni.navigateTo({
          //     url: '/pages/Login/Login'
          // })
        } else {
          console.log("error submit!!");
          return false;
        }
      });

                // let res = await getaddLogin(Obj)
                // console.log('sdfdsfs', res);
      // console.log(Obj, '用户登录的登录按钮');

            },
        }
    }
      // let res = await getaddLogin(Obj)
      // console.log('sdfdsfs', res);
    },
  },
};
</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;
        }

@@ -383,69 +482,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;
        }

@@ -522,129 +620,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;
        }
@@ -659,9 +756,9 @@
        
        
    } */
    /* 
/* 
    在屏幕宽度超过 1440px 时的样式设置 */
    /* @media screen and (min-width: 1441px) {
/* @media screen and (min-width: 1441px) {
        ::v-deep .el-card {
            top: 80% !important;
        }
@@ -689,209 +786,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.6rem;
  padding: 0;
  color: #244a7b;
  font-size: 0.14rem;
  font-weight: 500;
  margin-right: 0.29rem;
  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>

 src/pages/forgetPass/forgetPass.vue

@@ -1,281 +1,365 @@
<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>
            <!-- 重置密码 -->
            <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="formLogin2" label-position="right" :rules="rules"
                    :model="resetDataPass">
                    <el-form-item label="手机/邮箱" prop="cellphoneORmailbox">
                        <el-input v-model="resetDataPass.cellphoneORmailbox"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="verifyCode">
                        <view class="verifyCode relative">
                            <el-input v-model="resetDataPass.verifyCode"></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 label="新密码" prop="newPass">
                        <el-input type="password" v-model="resetDataPass.newPass"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="checkPass">
                        <el-input type="password" v-model="resetDataPass.checkPass"></el-input>
                    </el-form-item>
                    <el-form-item class="btn">
                        <el-button class="font-family"
                            style="margin-top: 30rpx; font-weight:900;font-size: 30rpx; width: 100%;background-color: #244a7b;color: #fff;padding: 30rpx;"
                            size="medium" @click="Login2('formLogin2')">重置密码</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
  <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: 0.36rem;
              letter-spacing: 4rpx;
              vertical-align: middle;
              font-family: cursive;
              font-weight: bold;
            "
            >中国医学人物知识库</text
          >
        </view>
        <view></view>
      </view>
      <!-- 重置密码 -->
      <el-card>
        <view
          class="LoginTop"
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.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: 0.14rem;
              color: #244a7b;
              font-weight: normal;
            "
          >
            返回登录
          </view>
        </view>
        <el-form
          :hide-required-asterisk="true"
          ref="formLogin2"
          label-position="right"
          :rules="rules"
          :model="resetDataPass"
        >
          <el-form-item label="手机" prop="cellphoneORmailbox">
            <el-input v-model="resetDataPass.cellphoneORmailbox"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="verifyCode">
            <view class="verifyCode relative">
              <el-input v-model="resetDataPass.verifyCode"></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 label="新密码" prop="newPass">
            <el-input
              type="password"
              v-model="resetDataPass.newPass"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="checkPass">
            <el-input
              type="password"
              v-model="resetDataPass.checkPass"
            ></el-input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button
              class="font-family"
              style="
                margin-top: 30rpx;
                font-weight: 900;
                font-size: 30rpx;
                width: 100%;
                background-color: #244a7b;
                color: #fff;
                padding: 30rpx;
              "
              size="medium"
              @click="Login2('formLogin2')"
              >重置密码</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </view>
    <view class="hua"></view>
    <!-- 底部人物背景图左侧 -->
    <view class="fff"></view>
    <!-- 底部花的背景图右侧 -->
    <view class="rrr"></view>

        </view>
        <view class="hua"></view>
        <!-- 底部人物背景图左侧 -->
        <view class="fff"></view>
        <!-- 底部花的背景图右侧 -->
        <view class="rrr"></view>

        <Footer1 />
    </view>
    <Footer1 />
  </view>
</template>

<script>
    import {
        getRestPassword,
        getverifyCode
    } from '@/api/index.js'
    import {
        encryptAES
    } from '@/utils/Crypto.js'
    import {
        nextTick
    } from "vue";
    import Footer1 from '@/components/footer/footer.vue'
    import {
        Message
    } from 'element-ui'
    export default {
        components: {
            Footer1
        },
        data() {
            // 密码
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.resetDataPass.checkPass !== '') {
                        this.$nextTick(() => {
                            this.$refs.formLogin.validateField('checkPass');
                        });
                    }
                    callback();
                }
            };
            // 确认密码
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.resetDataPass.newPass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                // 用户注册
                isRegister: false,
                // 用户登录
                isLogin: true,
                // 修改密码
                isAmendPass: false,
                // 重置密码
                isResetPass: false,
                // 注册用户账号的校验
                rules: {
                    loginID: [{
                        required: true,
                        message: '请输入登录账号',
                        trigger: 'blur'
                    }],
                    newPass: [{
                            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'
                    }]
                },
                // 重置密码
                resetDataPass: {
                    cellphoneORmailbox: '',
                    verifyCode: "",
                    newPass: "",
                    checkPass: ""
                },
            }
        },
        onLoad() {
            uni.getSystemInfo({
                success: function(info) {
                    // console.log('屏幕的宽度：' + info.windowWidth);
                    // console.log('屏幕的高度：' + info.windowHeight);
                }
            });
        },
        mounted() {
            this.getElementWidth();
        },
        methods: {
            // 已有账号？返回登录
            BacktoLogin() {
                uni.redirectTo({
                    url: '/pages/Login/Login'
                })
            },
            // 获取验证码
            async verifyCodeClick() {
                console.log('获取验证码');
                let Obj = {
                    communicateParam: this.resetDataPass.cellphoneORmailbox,
                }
                await getverifyCode(Obj).then(res => {
                    console.log(res, '验证码获取成功');
                })
            },
            // 列表项跳转
            listDataClick(item) {
                console.log(item);
                // 在当前页面设置全局变量
                // uni.setStorageSync('globalData', { id: 123, name: 'example' });
                if (item.id == 1) {
                    uni.navigateTo({
                        url: '/pages/character/detail?id=' + item.id
                    })
                } else if (item.id == 2) {
                    console.log(item.name);
                    // uni.navigateTo({
                    //     url:'/pages/character/detail?id='+item.id
                    // })
                } else if (item.id == 3) {
                    uni.navigateTo({
                        url: '/pages/academicGenres/index?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
                    })
                }
            },
import { getRestPassword, getverifyCode } from "@/api/index.js";
import { encryptAES } from "@/utils/Crypto.js";
import { nextTick } from "vue";
import Footer1 from "@/components/footer/footer.vue";
import { Message } from "element-ui";
export default {
  components: {
    Footer1,
  },
  data() {
    // 密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.resetDataPass.checkPass !== "") {
          this.$nextTick(() => {
            this.$refs.formLogin.validateField("checkPass");
          });
        }
        callback();
      }
    };
    // 确认密码
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.resetDataPass.newPass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      //验证码倒计时
      countdown: 0,
      // 用户注册
      isRegister: false,
      // 用户登录
      isLogin: true,
      // 修改密码
      isAmendPass: false,
      // 重置密码
      isResetPass: false,
      // 注册用户账号的校验
      rules: {
        loginID: [
          {
            required: true,
            message: "请输入登录账号",
            trigger: "blur",
          },
        ],
        newPass: [
          {
            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",
          },
        ],
      },
      // 重置密码
      resetDataPass: {
        cellphoneORmailbox: "",
        verifyCode: "",
        newPass: "",
        checkPass: "",
      },
    };
  },
  onLoad() {
    uni.getSystemInfo({
      success: function (info) {
        // console.log('屏幕的宽度：' + info.windowWidth);
        // console.log('屏幕的高度：' + info.windowHeight);
      },
    });
  },
  mounted() {
    this.getElementWidth();
  },
  methods: {
    // 已有账号？返回登录
    BacktoLogin() {
      uni.redirectTo({
        url: "/pages/Login/Login",
      });
    },
    // 获取验证码
    async verifyCodeClick() {
      if (!this.resetDataPass.cellphoneORmailbox) {
        this.$message({
          message: "请输入手机！",
          type: "warning",
        });

            // 手机号/或者邮箱
            validateContact(rule, value, callback) {
                const regPhone = /^1[0-9]{10}$/;
                const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                console.log(value, regPhone.test(value), regEmail.test(value));
                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);
                })
            },
            // 忘记密码
            Login2(formName) {
                let Obj = {
                    "communicateParam": this.resetDataPass.cellphoneORmailbox, //手机或邮箱
                    "verifyCode": this.resetDataPass.verifyCode, //验证码
                    "newPassword": encryptAES(this.resetDataPass.newPass) //新密码
                }
                console.log(Obj);
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        await getRestPassword(Obj).then(res => {
                            console.log(res, '接口');
                            if (res.success) {
                                console.log('忘记密码的接口拿到数据了');
                                uni.navigateTo({
                                    url: '/pages/Login/Login'
                                })
                            } else {
                                Message.error(res.errorText || '')
                            }
                        })
                        // alert('submit!成功');
                        // uni.redirectTo({
                        //     url: '/pages/Login/Login'
                        // })
                    } else {
                        console.log('error submit!!失败');
                        return false;
                    }
                });
            }
        }
    }
        return false;
      }
      if (this.countdown > 0) {
        return;
      }
      let Obj = {
        communicateParam: this.resetDataPass.cellphoneORmailbox,
      };
      this.countdown = 60;
      const intervalId = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown -= 1;
        } else {
          clearInterval(intervalId);
        }
      }, 1000);
      await getverifyCode(Obj).then((res) => {
        console.log(res, "验证码获取成功");
      });
    },
    // 列表项跳转
    listDataClick(item) {
      console.log(item);
      // 在当前页面设置全局变量
      // uni.setStorageSync('globalData', { id: 123, name: 'example' });
      if (item.id == 1) {
        uni.navigateTo({
          url: "/pages/character/detail?id=" + item.id,
        });
      } else if (item.id == 2) {
        console.log(item.name);
        // uni.navigateTo({
        //     url:'/pages/character/detail?id='+item.id
        // })
      } else if (item.id == 3) {
        uni.navigateTo({
          url: "/pages/academicGenres/index?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,
        });
      }
    },

    // 手机号/或者邮箱
    validateContact(rule, value, callback) {
      const regPhone = /^1[0-9]{10}$/;
      const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      console.log(value, regPhone.test(value), regEmail.test(value));
      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);
      });
    },
    // 忘记密码
    Login2(formName) {
      let Obj = {
        communicateParam: this.resetDataPass.cellphoneORmailbox, //手机或邮箱
        verifyCode: this.resetDataPass.verifyCode, //验证码
        newPassword: encryptAES(this.resetDataPass.newPass), //新密码
      };
      console.log(Obj);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await getRestPassword(Obj).then((res) => {
            console.log(res, "接口");
            if (res.success) {
              console.log("忘记密码的接口拿到数据了");
              uni.navigateTo({
                url: "/pages/Login/Login",
              });
            } else {
              Message.error(res.errorText || "");
            }
          });
          // alert('submit!成功');
          // uni.redirectTo({
          //     url: '/pages/Login/Login'
          // })
          this.$message({
            message: "密码重置成功",
            type: "success",
          });
        } else {
          console.log("error submit!!失败");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
    /* 
/* 
    在屏幕宽度超过 1440px 时的样式设置 */
    /* @media screen and (min-width: 1441px) {
/* @media screen and (min-width: 1441px) {
        ::v-deep .el-card {
            top: 60% !important;
        }
@@ -303,400 +387,386 @@
        }
    }
     */
    @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: 90% !important;
            padding: 0 !important;
        }
  ::v-deep .el-card {
    top: 90% !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;
            font-size: .14rem;
        }
  ::v-deep .el-input__inner {
    height: 0.35rem !important;
    font-size: 0.14rem;
  }

        ::v-deep .el-form-item__label {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-right: .2rem !important;
            width: .7rem;
        }
  ::v-deep .el-form-item__label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0.2rem !important;
    width: 0.7rem;
  }

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

        .LoginTop {
            margin-bottom: .4rem !important;
        }
  .LoginTop {
    margin-bottom: 0.4rem !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;
        }
  .rrr {
    width: 2rem !important;
  }

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

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

            span {
                font-weight: bold !important;
            }
        }
    span {
      font-weight: bold !important;
    }
  }

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

        .LoginBg {
            margin: 0 !important;
            height: .3rem !important;
        }
  .LoginBg {
    margin: 0 !important;
    height: 0.3rem !important;
  }

        ::v-deep .el-card {
            top: 80% !important;
            padding: 0 !important;
        }
  ::v-deep .el-card {
    top: 80% !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) {
  .LoginBg {
    margin: 0 !important;
    height: 0.3rem !important;
  }

    @media screen and (min-width: 1920px) and (max-width:2560px) {
        .LoginBg {
            margin: 0 !important;
            height: .3rem !important;
        }
  ::v-deep .el-card {
    top: 80% !important;
    padding: 0 !important;
  }

        ::v-deep .el-card {
            top: 80% !important;
            padding: 0 !important;
        }
  ::v-deep .el-card__body {
    padding: 0.25rem 0.5rem !important;
  }

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

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

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

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

        .hua {
            height: 5rem !important;
        }
  .LoginTop {
    margin-bottom: 0.25rem !important;
  }

        .LoginTop {
            margin-bottom: .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;
  }
}

    .LoginBg {
        width: 1.2rem;
        height: .37rem;
        background: url(@/static/image/重置密码.png) no-repeat 0 0;
        background-size: 100% 100%;
.LoginBg {
  width: 1.2rem;
  height: 0.37rem;
  background: url(@/static/image/重置密码.png) no-repeat 0 0;
  background-size: 100% 100%;
}

    }
::v-deep .el-card {
  border-radius: 0;
  width: 5.42rem;
  /* height: 5.65rem; */
  position: absolute;
  top: 80%;
}

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

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

    ::v-deep .el-card__body {
        padding: .26rem .58rem;
    }
::v-deep .el-form-item__content {
  margin-left: 0 !important;
  flex: 1;
}

    .btn>>>.el-form-item__content {
        margin-left: 0 !important;
::v-deep .el-input__inner {
  border: none;
  border-bottom: 1px solid #2d476a;
  border-radius: 0;
  padding: 0;
  height: 0.4rem;
  line-height: 0.4rem;
}

    }
::v-deep .el-form-item__error {
  /* display: none; */
}

    ::v-deep .el-form-item__content {
        margin-left: 0 !important;
        flex: 1;
    }
::v-deep .input.invalid:focus {
  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;
    }
::v-deep .el-input__inner:invalid {
  border-color: #2d476a !important;
}

    ::v-deep .el-form-item__error {
        /* display: none; */
    }
::v-deep .el-form-item__label {
  min-width: 0.6rem;
  padding: 0;
  color: #244a7b;
  font-size: 0.14rem;
  font-weight: 500;
  margin-right: 0.29rem;
}

    ::v-deep .input.invalid:focus {
        border-color: #2d476a !important;
    }
::v-deep .el-form-item {
  margin-bottom: 0.22rem;
  display: flex;
}

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

.s1 {
  background-image: url(@/static/image/search.png);
}

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

    ::v-deep .el-form-item {
        margin-bottom: .22rem;
        display: flex;
    }
.s3 {
  background-image: url(@/static/image/question.png);
}

    .ss1 {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 40rpx;
        height: 40rpx;
        background-size: 100% 100%;
    }
.container {
  background: url(@/static/image/bg1.png);
  width: 100vw;
  height: 100vh;

    .s1 {
        background-image: url(@/static/image/search.png);
  color: #fff;

    }
  .repository {
    width: 100% !important;
    /* margin-top: 19px; */
    /* height: 68%; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .s2 {
        background-image: url(@/static/image/question.png);
    }
    .Ttop {
      margin-top: 0.38rem;
      margin-bottom: 1.22rem;
    }

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

    .container {
        background: url(@/static/image/bg1.png);
        width: 100vw;
        height: 100vh;
.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%;
}

        color: #fff;
.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%;
}

        .repository {
            width: 100% !important;
            /* margin-top: 19px; */
            /* height: 68%; */
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
.hua {
  width: 13.81rem;
  height: 5.965rem;
  position: absolute;
  background: url(@/static/image/bg3.png) no-repeat 0 0;
  background-size: 100% 100%;
}

            .Ttop {
                margin-top: .38rem;
                margin-bottom: 1.22rem;
            }
/* 底部人物背景图  */
.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;
}

            .r-top {
                font-size: 40rpx !important;
                margin: 10rpx 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;

    .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%;
    }
  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;
  }
}

    .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>

 src/pages/inherit/index.vue

@@ -10,8 +10,12 @@

    <div class="filterBox font-family">
      <div class="searchBox">
        <input type="text" placeholder="输入姓名/别名/朝代" />
        <button>搜索</button>
        <input
          v-model="keywords"
          type="text"
          placeholder="输入姓名/别名/朝代"
        />
        <button @click="getData">搜索</button>
      </div>
      <div class="dynasty">
        <div style="font-weight: 700; line-height: 0.25rem">筛选朝代</div>
@@ -54,7 +58,7 @@
</template>
<script>
import * as echarts from "echarts";
import { inheritMedicalList } from "@/api/index.js";
import { inheritMedicalList, getDynastyAll } from "@/api/index.js";
export default {
  data() {
    return {
@@ -65,61 +69,70 @@
        {
          name: "唐",
          number: "4910",
          isColor: false
          isColor: false,
        },
        {
          name: "五代",
          number: "494",
          isColor: true
          isColor: true,
        },
        {
          name: "宋",
          number: "51273",
          isColor: false
          isColor: false,
        },
        {
          name: "北宋",
          number: "15",
          isColor: true
          isColor: true,
        },
        {
          name: "南宋",
          number: "4910",
          isColor: false
          isColor: false,
        },
        {
          name: "元",
          number: "299",
          isColor: true
          isColor: true,
        },
        {
          name: "明",
          number: "1830",
          isColor: false
          isColor: false,
        },
        {
          name: "清",
          number: "1000",
          isColor: true
        }
          isColor: true,
        },
      ],
      nodeData: []
      nodeData: [],
      keywords: "",
    };
  },
  onLoad(options) {
    this.idIndex = options.id;
    console.log("optionsoptionsoptions", options.id);
    getDynasty()
  },
  mounted() {
    this.getData();
    this.getDynasty()

  },
  methods: {
    getDynasty() {
      getDynastyAll().then((res) => {
        console.log(res, "getDynastyAll");
      });
    },
    getData() {
      inheritMedicalList({
        keywords: "",
        keywords: this.keywords,
        dynastyId: "",
        searchType: "KEYWORD",
        path: ""
        path: "",
      }).then((res) => {
        console.log(res);
        this.nodeData = res.object.nodeList.map((item) => {
@@ -128,8 +141,8 @@
            itemStyle: {
              color: "#F8E2D7",
              borderColor: "#F3AA78",
              borderWidth: "3"
            }
              borderWidth: "3",
            },
          };
        });
        // 初始化 echarts
@@ -165,14 +178,14 @@

      let option = {
        title: {
          text: [""]
          text: [""],
        },
        backgroundColor: {
          type: "image",
          image: "/static/image/WMBg.png",
          repeat: "repeat-x", // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
          size: "100% 100%", // 背景图片的尺寸，可以是百分比或者像素
          position: "center center" // 背景图片的位置，可以是 top, bottom, middle 或者百分比
          position: "center center", // 背景图片的位置，可以是 top, bottom, middle 或者百分比
        },
        tooltip: {},
        animationDurationUpdate: 1500,
@@ -187,7 +200,7 @@
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
              fontSize: FontSize, // 设置文字大小
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
@@ -202,7 +215,7 @@
                // params.data 是边的数据对象，你可以在这里定义关系名
                // 例如，你可以根据 source 和 target 的名称来定义关系名
                return params.data.relationName; // 如果定义了 relationName 则显示它，否则显示“父子”
              }
              },
            },
            //各个节点
            data: this.nodeData,
@@ -210,17 +223,17 @@
              color: "#000000",
              opacity: 0.9,
              width: 2,
              curveness: 0
              curveness: 0,
            },
            force: {
              // initLayout: 'circular',
              // gravity: 0
              friction: 0.1,
              repulsion: 500,
              edgeLength: 6
            }
          }
        ]
              edgeLength: 6,
            },
          },
        ],
      };
      //进行渲染
      myChart.setOption(option);
@@ -230,15 +243,15 @@
            "/pages/inherit/list?id=" +
            params.data.identifier +
            "&name=" +
            encodeURIComponent(params.data.name)
            encodeURIComponent(params.data.name),
        });
      });
    },
    // 返回按钮
    goBack() {
      this.$router.go(-1);
    }
  }
    },
  },
};
</script>
<style scoped>

 src/pages/knowledgeBase/knowledgeBase.vue

@@ -1,1056 +1,1226 @@
<template>
    <view>
        <!-- 顶部 -->
        <headNav idIndex="0" text="中国医学人物知识库" />
        <!-- 搜索 -->
        <view class="flex  flex-center Search">
            <!-- <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search> -->
            <advancedSearch @onSearch="onSearch" placehold="输入姓名/别名/时期/传主职业搜索" :isAvancedTrue="false" />
            <view class="advancedSea" @click="isAvancedClick" style="color:#244A7B ;cursor: pointer;">高级搜索 ﹀</view>
        </view>
        <!-- 热门搜索 -->
        <view class="flex flex-center hotSearch" style="font-size: 20rpx;margin: 10rpx 0;">
            热门搜索：
            <ul class="flex" style="margin-right: 10rpx;">
                <!-- 
                 <li v-for="item in hot" :key="item.id" @tap="HotClick(item.id)" style="margin: 0 10rpx;"
                     :style="{color:item.bgColor==true?'#5879a4':'#000'}">
                     {{item.name}}
                 </li>-->
                <li v-for="item in hot" @click="hotSearchClick(item)" :key="item.id" class="cursor"
                    style="color: #5879a4;">
                    {{item.name}}
                </li>
            </ul>
        </view>
        <!-- 高级搜索 -->
        <view class="advancedSeaTrue" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: .18rem;">
            <view style="background-color: #fff;padding: 20rpx;" class="advancedSeaTrue1">
                <h3>高级搜索</h3>
                <MyForm @submit="onSubmit" :from="from" />
            </view>
        </view>
        <uni-row class="demo-uni-row zhushuju flex flex-items-start" style="padding: 0 230rpx; ">
            <!-- 左侧 -->
            <view class="fbox2" style="width: 2.6rem;">
                <!-- 职业 -->
                <view class="demo-uni-col zhiye dark box boox"
                    style="width: 2.6rem; margin-bottom: 40rpx;background-color: #fff; border: 2rpx solid #e0e0e0;min-height: 2rem;">
                    <h3>{{profession.title}}</h3>
                    <ul style="margin-top: 10rpx;" :class="{ 'a': activeBox === 'a'?'a':'' }">
                        <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                        <li class="flex"
                            :style="{'background':profession.index === item.tagId ?  '#d6e3f4' :'','borderRadius': profession.index === item.tagId ?  '60rpx' :'',display:index+1>professionIndex?'none':'flex'}"
                            v-for="(item,index) in profession.list" :key="index"
                            style="padding:0 20rpx;line-height: .3rem;height: .3rem;"
                            @click="handInstitCLick(item,'a')">
                            <view class="">{{item.tagName}}</view>
                            <view class="">{{item.count}}</view>
                        </li>
                    </ul>
                    <view v-if="profession.list.length-1 >3" class="flex flex-center ">
                        <view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('a','职业')">
                            {{ activeBox !== 'a' ? '更多  ﹀' : '收起  ︿' }}
                        </view>
                    </view>
                </view>
                <!-- 时期 -->
                <view class="demo-uni-col dark box boox zhongjianleft"
                    style="background-color: #fff;border: 2rpx solid #e0e0e0;"
                    :style="{'marginBottom': isAdvancedSearch ===true ? '0': '40rpx'}">
                    <h3>{{dynasty.title}}</h3>
                    <ul style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
                        <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                        <li class="flex"
                            :style="{'background':dynasty.index === item.dynastyId ?  '#d6e3f4' :'','borderRadius': dynasty.index === item.dynastyId ?  '60rpx' :'',display:index+1>dynastyIndex?'none':'flex'}"
                            v-for="(item,index) in dynasty.list" :key="index" style="padding:0 20rpx;"
                            @click="handInstitCLick(item,'b')">
                            <view class="">{{item.dynastyName}}</view>
                            <view class="">{{item.count}}</view>
                        </li>
                    </ul>
                    <view v-if="dynasty.list.length-1 >3" class="flex flex-center ">
                        <view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('b','时期')">
                            {{ activeBox !== 'b' ? '更多  ﹀' : '收起  ︿' }}
                        </view>
                    </view>
                </view>
                <!-- 来源 -->
                <view v-if="!isAdvancedSearch" class="demo-uni-col dark box boox"
                    style="height: 250rpx;background-color: #fff;border: 2rpx solid #e0e0e0;">
                    <h3>{{source.title}}</h3>
                    <ul class="laiyuan" style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
                        <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                        <li class="flex liClick" v-for="(item,index) in source.list" :key="index"
                            style="padding:0 20rpx;color: #244A7B;" @click="handInstitCLick(item,'c')">
                            <view class="">{{ index+1 + '. '  +item.source}}</view>
                        </li>
                    </ul>
                    <!--     <view class="flex flex-center">
  <view>
    <!-- 顶部 -->
    <headNav idIndex="0" text="中国医学人物知识库" />
    <!-- 搜索 -->
    <view class="flex flex-center Search">
      <!-- <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search> -->
      <advancedSearch
        @onSearch="onSearch"
        placehold="输入姓名/别名/时期/传主职业搜索"
        :isAvancedTrue="false"
        :keyword="keywords"
      />
      <view
        class="advancedSea"
        @click="isAvancedClick"
        style="color: #244a7b; cursor: pointer"
        >高级搜索 ﹀</view
      >
    </view>
    <!-- 热门搜索 -->
    <view
      class="flex flex-center hotSearch"
      style="font-size: 20rpx; margin: 10rpx 0"
    >
      热门搜索：
      <ul class="flex" style="margin-right: 10rpx">
        <li
          v-for="item in hot"
          @click="hotSearchClick(item)"
          :key="item.id"
          class="cursor"
          style="color: #5879a4"
        >
          {{ item.name }}
        </li>
      </ul>
    </view>
    <!-- 高级搜索 -->
    <view
      class="advancedSeaTrue"
      v-if="isAdvancedSearch"
      style="padding: 0 230rpx; margin-bottom: 0.18rem"
    >
      <view
        style="background-color: #fff; padding: 20rpx"
        class="advancedSeaTrue1"
      >
        <h3>高级搜索</h3>
        <MyForm @submit="onSubmit" :from="from" />
      </view>
    </view>
    <uni-row
      class="demo-uni-row zhushuju flex flex-items-start"
      style="padding: 0 230rpx"
    >
      <!-- 左侧 -->
      <view class="fbox2" style="width: 2.6rem">
        <!-- 职业 -->
        <view
          class="demo-uni-col zhiye dark box boox"
          style="
            width: 2.6rem;
            margin-bottom: 40rpx;
            background-color: #fff;
            border: 2rpx solid #e0e0e0;
            min-height: 2rem;
          "
        >
          <h3>{{ profession.title }}</h3>
          <ul
            style="margin-top: 10rpx"
            :class="{ a: activeBox === 'a' ? 'a' : '' }"
          >
            <li
              class="flex"
              :style="{
                background: profession.index === item.tagId ? '#d6e3f4' : '',
                borderRadius: profession.index === item.tagId ? '60rpx' : '',
                display: index + 1 > professionIndex ? 'none' : 'flex',
              }"
              v-for="(item, index) in profession.list"
              :key="index"
              style="padding: 0 20rpx; line-height: 0.3rem; height: 0.3rem"
              @click="handInstitCLick(item, 'a')"
            >
              <view class="">{{ item.tagName }}</view>
              <view class="">{{ item.count }}</view>
            </li>
          </ul>
          <view v-if="profession.list.length - 1 > 3" class="flex flex-center">
            <view
              class="toggleButton"
              style="color: #c1d3ea"
              @click="shrinkClick('a', '职业')"
            >
              {{ activeBox !== "a" ? "更多  ﹀" : "收起  ︿" }}
            </view>
          </view>
        </view>
        <!-- 时期 -->
        <view
          class="demo-uni-col dark box boox zhongjianleft"
          style="background-color: #fff; border: 2rpx solid #e0e0e0"
          :style="{ marginBottom: isAdvancedSearch === true ? '0' : '40rpx' }"
        >
          <h3>{{ dynasty.title }}</h3>
          <ul
            style="margin-top: 10rpx"
            :class="{ b: activeBox === 'b' ? 'b' : '' }"
          >
            <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
            <li
              class="flex"
              :style="{
                background: dynasty.index === item.dynastyId ? '#d6e3f4' : '',
                borderRadius: dynasty.index === item.dynastyId ? '60rpx' : '',
                display: index + 1 > dynastyIndex ? 'none' : 'flex',
              }"
              v-for="(item, index) in dynasty.list"
              :key="index"
              style="padding: 0 20rpx"
              @click="handInstitCLick(item, 'b')"
            >
              <view class="">{{ item.dynastyName }}</view>
              <view class="">{{ item.count }}</view>
            </li>
          </ul>
          <view v-if="dynasty.list.length - 1 > 3" class="flex flex-center">
            <view
              class="toggleButton"
              style="color: #c1d3ea"
              @click="shrinkClick('b', '时期')"
            >
              {{ activeBox !== "b" ? "更多  ﹀" : "收起  ︿" }}
            </view>
          </view>
        </view>
        <!-- 来源 -->
        <view
          v-if="!isAdvancedSearch"
          class="demo-uni-col dark box boox"
          style="
            /* height: 250rpx; */
            background-color: #fff;
            border: 2rpx solid #e0e0e0;
          "
        >
          <h3>{{ source.title }}</h3>
          <ul
            class="laiyuan"
            style="margin-top: 10rpx"
            :class="{ b: activeBox === 'b' ? 'b' : '' }"
          >
            <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
            <li
              class="flex liClick"
              v-for="(item, index) in source.list"
              :key="index"
              style="padding: 0 20rpx; color: #244a7b"
              @click="handInstitCLick(item, 'c')"
            >
              <view class="">{{ index + 1 + ". " + item.source }}</view>
            </li>
          </ul>
          <!--     <view class="flex flex-center">
                            <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')">
                                {{ activeBox !== 'b' ? '更多  ﹀' : '收起  ︿' }}
                            </view>
                        </view> -->
                </view>
            </view>
            <!-- 右侧 -->
            <view class="rightList demo-uni-col light fbox3 relative flex flex-column flex-grow: 1;"
                style="width: 100%; margin-left: .2rem; background-color: #fff;border: 1px solid   #C1D3EA;padding: 10rpx 20rpx;">
                <view class="flex lightTop" style="width: 100%; margin:.1rem 0">
                    <view class="" style="color: #2C2C2C;">共1374条</view>
                    <el-button size="small" @click="exportClick">下载</el-button>
                </view>
                <el-table :data="tableData" class="lightBo" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="110"></el-table-column>
                    <el-table-column prop="personName" label="姓名"></el-table-column>
                    <el-table-column prop="personAlias" label="别名"></el-table-column>
                    <el-table-column prop="gender" label="性别" width="70"></el-table-column>
                    <el-table-column prop="period" label="时期"></el-table-column>
                    <el-table-column prop="birthYear" label="生年" width="130"></el-table-column>
                    <el-table-column prop="deathYear" label="卒年" width="130"></el-table-column>
                    <el-table-column prop="nativePlace" label="籍贯"></el-table-column>
                    <el-table-column prop="socialDistinction" label="社会身份"></el-table-column>
                    <el-table-column prop="official" label="官职"></el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-row class="fenye" style="position: absolute;bottom: .1rem;">
                    <el-pagination class="paging flex" :current-page="CurrentPage" :total="total" :page-size="pageSize"
                        @current-change="CurrentChange" @prev-click="PrevClick" @next-click="NextClick" prev-text="上一页"
                        next-text="下一页" background layout="prev, pager, next">
                    </el-pagination>
                </el-row>
            </view>

        </uni-row>
        <div class="abox"></div>
        <Footer1 />
    </view>
        </view>
      </view>
      <!-- 右侧 -->
      <view
        class="rightList demo-uni-col light fbox3 relative flex flex-column flex-grow: 1;"
        style="
          width: 100%;
          margin-left: 0.2rem;
          background-color: #fff;
          border: 1px solid #c1d3ea;
          padding: 10rpx 20rpx;
        "
      >
        <view class="flex lightTop" style="width: 100%; margin: 0.1rem 0">
          <view class="" style="color: #2c2c2c">共{{ total }}条</view>
          <el-button size="small" @click="exportClick">下载</el-button>
        </view>
        <el-table :data="tableData" class="lightBo" style="width: 100%">
          <el-table-column prop="id" label="序号" width="110"></el-table-column>
          <el-table-column prop="personName" label="姓名"></el-table-column>
          <el-table-column prop="personAlias" label="别名"></el-table-column>
          <el-table-column
            prop="gender"
            label="性别"
            width="70"
          ></el-table-column>
          <el-table-column prop="period" label="时期"></el-table-column>
          <el-table-column
            prop="birthYear"
            label="生年"
            width="130"
          ></el-table-column>
          <el-table-column
            prop="deathYear"
            label="卒年"
            width="130"
          ></el-table-column>
          <el-table-column prop="nativePlace" label="籍贯"></el-table-column>
          <el-table-column
            prop="socialDistinction"
            label="社会身份"
          ></el-table-column>
          <el-table-column prop="official" label="官职"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row class="fenye" style="position: absolute; bottom: 0.1rem">
          <el-pagination
            class="paging flex"
            :current-page="CurrentPage"
            :total="total"
            :page-size="pageSize"
            @current-change="CurrentChange"
            @prev-click="PrevClick"
            @next-click="NextClick"
            prev-text="上一页"
            next-text="下一页"
            background
            layout="prev, pager, next"
          >
          </el-pagination>
        </el-row>
      </view>
    </uni-row>
    <div class="abox"></div>
    <Footer1 />
  </view>
</template>

<script>
    import Footer1 from '@/components/footer/footer'
    import MyForm from '@/components/form/form.vue'
    // 下载需要导入的依赖
    import ExportJsonExcel from "js-export-excel";
    import {
        getPDataStatistics,
        getPDownload,
        getPList,
        getHotSearch
    } from '@/api/index.js'
    export default {
        components: {
            Footer1,
            MyForm
        },
        data() {
            return {
                // 高级搜索显示
                isAdvancedSearch: false,
                // 高级搜索
                from: {
                    from: [{
                            type: 'input',
                            label: '姓名',
                            name: 'name',
                            value: ''
                        },
                        {
                            type: 'input',
                            label: '别名',
                            name: 'alias',
                            value: ''
                        },
                        {
                            type: 'input',
                            label: '籍贯',
                            name: 'nativePlace',
                            value: ''
                        },
                        {
                            type: 'select',
                            label: '职业',
                            value: '',
                            name: 'tagId',
                            options: [{
                                    label: '医家',
                                    value: '1'
                                },
                                {
                                    label: '世家',
                                    value: '2'
                                }
                            ]
                        },
                        {
                            type: 'input',
                            label: '职官',
                            name: 'official',
                            value: ''
                        },
                        {
                            type: 'select',
                            label: '性别',
                            value: '',
                            name: 'genderType',
                            options: [{
                                    label: '未指明',
                                    value: 'UNKNOWN'
                                }, {
                                    label: '男',
                                    value: 'MALE'
                                },
                                {
                                    label: '女',
                                    value: 'WOMAN'
                                }
                            ]
                        },
                        {
                            type: 'input',
                            label: '时期',
                            name: 'dynasty',
                            value: ''
                        },
                        {
                            type: 'input',
                            label: '机构',
                            name: 'institution',
                            value: ''
                        }
                    ]
                },
import Footer1 from "@/components/footer/footer";
import MyForm from "@/components/form/form.vue";
// 下载需要导入的依赖
import ExportJsonExcel from "js-export-excel";
import {
  getPDataStatistics,
  getPDownload,
  getPList,
  getHotSearch,
  getPersonList,
} from "@/api/index.js";
export default {
  components: {
    Footer1,
    MyForm,
  },
  data() {
    return {
      // 高级搜索显示
      isAdvancedSearch: false,
      // 高级搜索
      from: {
        from: [
          {
            type: "input",
            label: "姓名",
            name: "name",
            value: "",
          },
          {
            type: "input",
            label: "别名",
            name: "alias",
            value: "",
          },
          {
            type: "input",
            label: "籍贯",
            name: "nativePlace",
            value: "",
          },
          {
            type: "select",
            label: "职业",
            value: "",
            name: "tagId",
            options: [
              {
                label: "医家",
                value: "1",
              },
              {
                label: "世家",
                value: "2",
              },
            ],
          },
          {
            type: "input",
            label: "职官",
            name: "official",
            value: "",
          },
          {
            type: "select",
            label: "性别",
            value: "",
            name: "genderType",
            options: [
              {
                label: "未指明",
                value: "UNKNOWN",
              },
              {
                label: "男",
                value: "MALE",
              },
              {
                label: "女",
                value: "WOMAN",
              },
            ],
          },
          {
            type: "input",
            label: "时期",
            name: "dynasty",
            value: "",
          },
          {
            type: "input",
            label: "机构",
            name: "institution",
            value: "",
          },
        ],
      },

                // 热门搜索
                hot: [],
                // 职业
                profession: {
                    title: '职业',
                    index: 0,
                    id: 0,
                    list: []
                },
                // 现在多少条职业数据
                professionIndex: 4,
                // 展开和收缩的按钮需要
                activeBox: null,
                // 时期
                dynasty: {
                    title: '时期',
                    id: 0,
                    index: 0,
                    list: []
                },
                // 现在多少条时期数据
                dynastyIndex: 4,
                // 来源
                source: {
                    title: '来源',
                    index: 0,
                    id: 0,
                    list: []
                },
                // 表格的数组
                tableData: [],
                // 分页的总数
                total: 100,
                // 当前页
                CurrentPage: 1,
                // 一页显示多少条数据
                pageSize: 6,
                dataTable: [],
                option: {}
            }
        },
        onLoad(options) {
            this.onSearch({text:options.name})
        },
        mounted() {
            // 修改两次的高度保持一致
            var box1Height = document.querySelector('.fbox2').offsetHeight;
            document.querySelector('.fbox3').style.height = box1Height + (box1Height / 18) + 'px';
            console.log(box1Height, 'box1Height');
            this.getStatistics()
            // 默认先调用搜索一次
            this.onSearch('')
        },
        methods: {
            // ExportJsonExcel实例
            Ture() {
                //   创建ExportJsonExcel实例对象
                let toExcel = new ExportJsonExcel(this.option);
                //   调用保存方法
                toExcel.saveExcel();
            },
            // 下载按钮
            exportClick() {
                const dataList = this.tableData;
                let dataTable = []; //   dataTable代表excel文件中的数据内容
                if (dataList) {
                    for (let i in dataList) {
                        let obj = {
                            序号: dataList[i].id,
                            姓名: dataList[i].personName,
                            别名: dataList[i].personAlias,
                            性别: dataList[i].gender,
                            时期: dataList[i].period,
                            生年: dataList[i].birthYear,
                            卒年: dataList[i].deathYear,
                            籍贯: dataList[i].nativePlace,
                            社会身份: dataList[i].socialDistinction,
                            官职: dataList[i].official,
                        };
      // 热门搜索
      hot: [],
      // 职业
      profession: {
        title: "职业",
        index: 0,
        id: 0,
        list: [],
      },
      // 现在多少条职业数据
      professionIndex: 4,
      // 展开和收缩的按钮需要
      activeBox: null,
      // 时期
      dynasty: {
        title: "时期",
        id: "",
        index: "",
        list: [],
      },
      // 现在多少条时期数据
      dynastyIndex: 4,
      // 来源
      source: {
        title: "来源",
        index: 0,
        id: 0,
        list: [],
      },
      // 表格的数组
      tableData: [],
      // 分页的总数
      total: 100,
      // 当前页
      CurrentPage: 1,
      // 一页显示多少条数据
      pageSize: 10,
      dataTable: [],
      option: {},
      keywords: "",
    };
  },
  onLoad(options) {
    this.onSearch({ text: options.name });
    this.keywords = options.name;
  },
  mounted() {
    // 修改两次的高度保持一致
    var box1Height = document.querySelector(".fbox2").offsetHeight;
    document.querySelector(".fbox3").style.height =
      box1Height + box1Height / 18 + "px";
    console.log(box1Height, "box1Height");
    this.getStatistics();
    // 默认先调用搜索一次
    this.onSearch("");
  },
  methods: {
    // ExportJsonExcel实例
    Ture() {
      //   创建ExportJsonExcel实例对象
      let toExcel = new ExportJsonExcel(this.option);
      //   调用保存方法
      toExcel.saveExcel();
    },
    // 下载按钮
    async exportClick() {
      const dataList = this.tableData;
      let Obj = {
        keywords: "", //搜索框检索
        name: "", //姓名
        alias: "", //别名
        nativePlace: "", //机关
        tagId: null, //职业id
        official: null, //职官
        genderType: null, //性别
        dynasty: null, //朝代id
        dynastyId: null, //朝代id
        institution: null, //机构
        bookId: null, //来源id
        page: 1,
        pageSize: 9999,
      };
      // // 搜索
      await getPersonList(Obj).then((res) => {
        console.log(res);
        // if (res.success) {
        //   console.log(res, "搜索接口");
        //   this.tableData = res.list;
        //   // 总数量
        //   this.total = res.npage.totalCount;
        // }
      });
      let dataTable = []; //   dataTable代表excel文件中的数据内容
      if (dataList) {
        for (let i in dataList) {
          let obj = {
            序号: dataList[i].id,
            姓名: dataList[i].personName,
            别名: dataList[i].personAlias,
            性别: dataList[i].gender,
            时期: dataList[i].period,
            生年: dataList[i].birthYear,
            卒年: dataList[i].deathYear,
            籍贯: dataList[i].nativePlace,
            社会身份: dataList[i].socialDistinction,
            官职: dataList[i].official,
          };

                        dataTable.push(obj); //   设置excel每列获取的数据源
                    }
                }
                this.option.fileName = "中医医学人物知识库"; //excel文件名
                //excel文件数据
                this.option.datas = [{
                    //   excel文件的数据源
                    sheetData: dataTable,
                    //   excel文件sheet的表名
                    sheetName: "sheet",
                    //   excel文件表头名
                    sheetHeader: ["序号", "姓名", "别名", "性别", "别名", "时期", "生年", "卒年", "籍贯", "社会身份", "官职"],
                    //   excel文件列名
                    sheetFilter: ["序号", "姓名", "别名", "性别", "别名", "时期", "生年", "卒年", "籍贯", "社会身份", "官职"],
                    // columnWidths: ['10', '10', '20'] //excel列宽度设置
                }, ];
                this.Ture();
            },
            // 接口
            async getStatistics() {
                // 热门搜索
                await getHotSearch().then(res => {
                    console.log(res, '热门搜索');
                    this.hot = Object.keys(res.object).map(key => {
                        return {
                            id: parseInt(key),
                            name: res.object[key]
                        };
                    })
                })
                // 右侧职业、时期、来源的数据
                await getPDataStatistics().then(res => {
                    console.log(res, '接口成功sdsdfsdsfs');
                    let totalCount1 = res.object.occupationStatistic.details.reduce((total, item) => total +
                        item.count, 0);
                    let totalCount2 = res.object.dynastyStatistic.details.reduce((total, item) => total + item
                        .count, 0);
                    // 职业
                    this.profession.list = [
                        ...res.object.occupationStatistic.details,
                    ]
                    // 高级搜索里面的职业--------------------------------------------------
                    // 找到职业字段在 from 对象中的索引
                    const professionIndex = this.from.from.findIndex(field => field.label === '职业');
                    // 如果找到了职业字段
                    if (professionIndex !== -1) {
                        // 将 profession.list 转换为 options 格式
                        const options = this.profession.list.map(item => ({
                            label: item.tagName,
                            value: item.tagId.toString() // 将 id 转换为字符串，确保与 value 类型一致
                        }));
          dataTable.push(obj); //   设置excel每列获取的数据源
        }
      }
      this.option.fileName = "中医医学人物知识库"; //excel文件名
      //excel文件数据
      this.option.datas = [
        {
          //   excel文件的数据源
          sheetData: dataTable,
          //   excel文件sheet的表名
          sheetName: "sheet",
          //   excel文件表头名
          sheetHeader: [
            "序号",
            "姓名",
            "别名",
            "性别",
            "别名",
            "时期",
            "生年",
            "卒年",
            "籍贯",
            "社会身份",
            "官职",
          ],
          //   excel文件列名
          sheetFilter: [
            "序号",
            "姓名",
            "别名",
            "性别",
            "别名",
            "时期",
            "生年",
            "卒年",
            "籍贯",
            "社会身份",
            "官职",
          ],
          // columnWidths: ['10', '10', '20'] //excel列宽度设置
        },
      ];
      this.Ture();
    },
    // 接口
    async getStatistics() {
      // 热门搜索
      await getHotSearch().then((res) => {
        console.log(res, "热门搜索");
        this.hot = Object.keys(res.object).map((key) => {
          return {
            id: parseInt(key),
            name: res.object[key],
          };
        });
      });
      // 右侧职业、时期、来源的数据
      await getPDataStatistics().then((res) => {
        console.log(res, "接口成功sdsdfsdsfs");
        let totalCount1 = res.object.occupationStatistic.details.reduce(
          (total, item) => total + item.count,
          0
        );
        let totalCount2 = res.object.dynastyStatistic.details.reduce(
          (total, item) => total + item.count,
          0
        );
        // 职业
        this.profession.list = [
          { count: totalCount1, tagName: "全部", tagId: 0 },
          ...res.object.occupationStatistic.details,
        ];
        // 高级搜索里面的职业--------------------------------------------------
        // 找到职业字段在 from 对象中的索引
        const professionIndex = this.from.from.findIndex(
          (field) => field.label === "职业"
        );
        // 如果找到了职业字段
        if (professionIndex !== -1) {
          // 将 profession.list 转换为 options 格式
          const options = this.profession.list.map((item) => ({
            label: item.tagName,
            value: item.tagId.toString(), // 将 id 转换为字符串，确保与 value 类型一致
          }));

                        // 更新职业字段的 options 属性
                        this.$set(this.from.from[professionIndex], 'options', options);
                    }
                    // --------------------------------------------------
                    this.profession.index = this.profession.list[0].tagId
                    // 时期
                    this.dynasty.list = [
                        ...res.object.dynastyStatistic.details
                    ]
                    // 来源
                    this.source.list = res.object.sourceStatistic.details
                    this.source.index = this.source.list[0].bookId
                })
            },
            // 热门搜索
            hotSearchClick(item) {
                this.onSearch({text:item.name})
                console.log(item, '热门搜索');
            },
            // 左侧的机构统计等等按钮
            handInstitCLick(item, name) {
                this.dynasty.id = 0
                this.source.id = 0
                this.profession.id = 0
                this.CurrentPage = 1
                if (name == 'a') {
                    this.profession.index = item.tagId
                    this.profession.id = item.tagId
                    this.CurrentPage = 1
          // 更新职业字段的 options 属性
          this.$set(this.from.from[professionIndex], "options", options);
        }
        // --------------------------------------------------
        this.profession.index = this.profession.list[0].tagId;
        // 时期
        this.dynasty.list = [
          { count: totalCount2, dynastyName: "全部", dynastyId: "" },
          ...res.object.dynastyStatistic.details,
        ];
        // 来源
        this.source.list = res.object.sourceStatistic.details;
        this.source.index = this.source.list[0].bookId;
      });
    },
    // 热门搜索
    hotSearchClick(item) {
      this.onSearch({ text: item.name });
      console.log(item, "热门搜索");
    },
    // 左侧的机构统计等等按钮
    handInstitCLick(item, name) {
      //   this.dynasty.id = 0;
      //   this.source.id = 0;
      //   this.profession.id = 0;
      //   this.CurrentPage = 1;
      if (name == "a") {
        this.profession.index = item.tagId;
        this.profession.id = item.tagId;
        this.CurrentPage = 1;
      } else if (name == "b") {
        this.dynasty.index = item.dynastyId;
        this.dynasty.id = item.dynastyId;
        this.CurrentPage = 1;
        console.log(item);
      } else if (name == "c") {
        this.source.index = item.bookId;
        this.source.id = item.bookId;
        this.CurrentPage = 1;
        console.log("来源");
      }
      this.onSearch("");

                } else if (name == 'b') {
                    this.dynasty.index = item.dynastyId
                    this.dynasty.id = item.dynastyId
                    this.CurrentPage = 1
                    console.log(item);
      console.log(item, name);
    },
    isAvancedClick() {
      this.isAdvancedSearch = !this.isAdvancedSearch;
      this.$nextTick(() => {
        var box1Height = document.querySelector(".fbox").offsetHeight;
        // let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px';
        let box2Height = document.querySelector(".fbox1").offsetHeight;
        console.log(box1Height, box2Height);
        if (box1Height <= box2Height) {
          document.querySelector(".fbox1").style.height = box1Height + "px";
        }
      });
    },
    // 高级搜索
    async onSubmit(val) {
      console.log(val);
      this.profession.index = Number(val.tagId);
      this.profession.id = Number(val.tagId);
      const currentDynasty = this.dynasty.list.find(
        (f) => f.dynastyName == val.dynasty
      );
      if (currentDynasty) {
        this.dynasty.index = currentDynasty.dynastyId;
        this.dynasty.id = currentDynasty.dynastyId;
      }

                } else if (name == 'c') {
                    this.source.index = item.bookId
                    this.source.id = item.bookId
                    this.CurrentPage = 1
                    console.log('来源');
      this.CurrentPage = 1;
      let Obj = {
        keywords: "", //搜索框检索
        name: val.name, //姓名
        alias: val.alias, //别名
        nativePlace: val.nativePlace, //机关
        tagId: val.tagId !== "" ? Number(val.tagId) : null, //职业id
        official: val.official, //职官
        genderType: val.genderType !== "" ? val.genderType : null, //性别
        dynasty: val.dynasty, //朝代id
        dynastyId: this.dynasty.id, //朝代id
        institution: val.institution, //机构
        bookId: null, //来源id
        page: this.CurrentPage,
        pageSize: this.pageSize,
      };
      // // 搜索
      await getPersonList(Obj).then((res) => {
        console.log(res);
        if (res.success) {
          console.log(res, "搜索接口");
          this.tableData = res.list;
          // 总数量
          this.total = res.npage.totalCount;
        }
      });
      console.log(val);
    },
    // 基础搜索
    async onSearch(val) {
      let Obj = {
        keywords: val.text, //搜索框检索
        name: "", //姓名
        alias: "", //别名
        nativePlace: "", //机关
        tagId: this.profession.id, //职业id
        official: "", //职官
        genderType: null, //性别
        dynasty: null, //朝代id
        dynastyId: this.dynasty.id, //朝代id
        institution: "", //机构
        bookId: this.source.id, //来源id
        page: this.CurrentPage,
        pageSize: this.pageSize,
      };
      // // 搜索
      await getPersonList(Obj).then((res) => {
        if (res.success) {
          console.log(res, "搜索接口");
          this.tableData = res.list;
          // 总数量
          this.total = res.npage.totalCount;
        }
      });
      // console.log(val, '士大夫但是');
    },
    // 热门搜索
    HotClick(id) {
      this.hot.forEach((item) => {
        if (item.id === id) {
          console.log(item.id === id);
          item.bgColor = true;
        } else {
          console.log(item.id === id);
          item.bgColor = false;
        }
      });
    },
    // 展开收缩
    shrinkClick(box, name) {
      console.log(box);
      console.log(this.dynasty.list);

                }
                this.onSearch('')


                console.log(item, name);
            },
            isAvancedClick() {
                this.isAdvancedSearch = !this.isAdvancedSearch
                this.$nextTick(() => {
                    var box1Height = document.querySelector('.fbox').offsetHeight;
                    // let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px';
                    let box2Height = document.querySelector('.fbox1').offsetHeight
                    console.log(box1Height, box2Height);
                    if (box1Height <= box2Height) {
                        document.querySelector('.fbox1').style.height = box1Height + 'px';
                    }
                })
            },
            // 高级搜索
            async onSubmit(val) {
                console.log(val);
                this.CurrentPage = 1
                let Obj = {
                    "keywords": '', //搜索框检索
                    "name": val.name, //姓名
                    "alias": val.alias, //别名
                    "nativePlace": val.nativePlace, //机关
                    "tagId": val.tagId !== '' ? val.tagId : null, //职业id
                    "official": val.official, //职官
                    "genderType": val.genderType !== '' ? val.genderType : null, //性别
                    "dynasty": val.dynasty, //朝代id
                    "dynastyId": null, //朝代id
                    "institution": val.institution, //机构
                    "bookId": null, //来源id
                    "page": this.CurrentPage,
                    "pageSize": this.pageSize
                }
                // // 搜索
                await getPList(Obj).then(res => {
                    console.log(res);
                    if (res.success) {
                        console.log(res, '搜索接口');
                        this.tableData = res.list
                        // 总数量
                        this.total = res.npage.totalCount
                    }
                })
                console.log(val);
            },
            // 基础搜索
            async onSearch(val) {
                let Obj = {
                    "keywords": val.text, //搜索框检索
                    "name": "", //姓名
                    "alias": "", //别名
                    "nativePlace": "", //机关
                    "tagId": this.profession.id, //职业id
                    "official": "", //职官
                    "genderType": null, //性别
                    "dynasty": null, //朝代id
                    "dynastyId": this.dynasty.id, //朝代id
                    "institution": "", //机构
                    "bookId": this.source.id, //来源id
                    "page": this.CurrentPage,
                    "pageSize": this.pageSize
                }
                // // 搜索
                await getPList(Obj).then(res => {
                    if (res.success) {
                        console.log(res, '搜索接口');
                        this.tableData = res.list
                        // 总数量
                        this.total = res.npage.totalCount
                    }
                })
                // console.log(val, '士大夫但是');
            },
            // 热门搜索
            HotClick(id) {
                this.hot.forEach(item => {
                    if (item.id === id) {
                        console.log(item.id === id);
                        item.bgColor = true
                    } else {
                        console.log(item.id === id);
                        item.bgColor = false
                    }
                })

            },
            // 展开收缩
            shrinkClick(box, name) {
                console.log(box);
                console.log(this.dynasty.list);

                // this.activeBox = this.activeBox === 'a' ? null : 'a';
                if (name == '职业') {
                    console.log('职业');
                    this.professionIndex = this.professionIndex < this.profession.list.length ? this.profession.list
                        .length : 4;
                    this.dynastyIndex = 4
                    this.activeBox = this.activeBox === 'a' ? null : 'a';
                } else {
                    console.log('时期');
                    this.dynastyIndex = this.dynastyIndex < this.dynasty.list.length ? this.dynasty.list.length : 4;
                    this.professionIndex = 4
                    this.activeBox = this.activeBox === 'b' ? null : 'b';
                }
            },
            // 分页当前页触发事件
            CurrentChange(val) {
                if (this.CurrentPage != val) {
                    this.CurrentPage = val
                    console.log('当前页', val);
                    this.onSearch('')
                }
            },
            // 上一页
            PrevClick(val) {
                if (this.CurrentPage != val) {
                    this.CurrentPage = val
                    // console.log('上一页', val);
                    // console.log(this.CurrentPage);
                    this.onSearch('')
                }
            },
            // 下一页
            NextClick(val) {
                if (this.CurrentPage != val) {
                    // console.log('下一页',val);
                    this.CurrentPage = val
                    // console.log(this.CurrentPage);
                    this.onSearch('')
                }
            }
        }
    }
      // this.activeBox = this.activeBox === 'a' ? null : 'a';
      if (name == "职业") {
        console.log("职业");
        this.professionIndex =
          this.professionIndex < this.profession.list.length
            ? this.profession.list.length
            : 4;
        this.dynastyIndex = 4;
        this.activeBox = this.activeBox === "a" ? null : "a";
      } else {
        console.log("时期");
        this.dynastyIndex =
          this.dynastyIndex < this.dynasty.list.length
            ? this.dynasty.list.length
            : 4;
        this.professionIndex = 4;
        this.activeBox = this.activeBox === "b" ? null : "b";
      }
    },
    // 分页当前页触发事件
    CurrentChange(val) {
      if (this.CurrentPage != val) {
        this.CurrentPage = val;
        console.log("当前页", val);
        this.onSearch("");
      }
    },
    // 上一页
    PrevClick(val) {
      if (this.CurrentPage != val) {
        this.CurrentPage = val;
        // console.log('上一页', val);
        // console.log(this.CurrentPage);
        this.onSearch("");
      }
    },
    // 下一页
    NextClick(val) {
      if (this.CurrentPage != val) {
        // console.log('下一页',val);
        this.CurrentPage = val;
        // console.log(this.CurrentPage);
        this.onSearch("");
      }
    },
  },
};
</script>

<style scoped>
    /* 表头 */
    ::v-deep .el-table__header {
        margin-bottom: .02rem;
    }
/* 表头 */
::v-deep .el-table__header {
  margin-bottom: 0.02rem;
}

    ::v-deep .has-gutter tr>th {
        background-color: #DDE8F6 !important;
        font-weight: normal;
::v-deep .has-gutter tr > th {
  background-color: #dde8f6 !important;
  font-weight: normal;
}

    }
::v-deep .el-table__header th {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.14rem;
  color: #2c2c2c;
  /* 表头文字颜色为白色，增加对比度 */
  margin-bottom: 0.02rem !important;
}

    ::v-deep .el-table__header th {
        height: .3rem;
        line-height: .3rem;
        font-size: .14rem;
        color: #2C2C2C;
        /* 表头文字颜色为白色，增加对比度 */
        margin-bottom: .02rem !important;
    }
::v-deep .el-table::before {
  border: 0;
  background-color: #fff;
}

    ::v-deep .el-table::before {
        border: 0;
        background-color: #fff;
    }
/* 表格 */
::v-deep .el-table__body td {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.14rem;
  color: #2c2c2c !important;
  font-weight: normal;
}

    /* 表格 */
    ::v-deep .el-table__body td {
        height: .3rem;
        line-height: .3rem;
        font-size: .14rem;
        color: #2C2C2C !important;
        font-weight: normal;
    }
.abox {
  height: 1rem;
}

    .abox {
        height: 1rem;
    }
/* 分页 */
.paging ::v-deep .btn-prev,
.paging ::v-deep .btn-next {
  border: 0;
}

    /* 分页 */
    .paging ::v-deep .btn-prev,
    .paging ::v-deep .btn-next {
        border: 0;
    }
.paging ::v-deep .btn-prev span,
.paging ::v-deep .btn-next span {
  font-size: 0.12rem;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: #fff;
  color: #9e9e9e;
  text-align: center;
  border: 1px solid #9e9e9e;
  padding: 0 0.1rem;
}

    .paging ::v-deep .btn-prev span,
    .paging ::v-deep .btn-next span {
        font-size: .12rem;
        height: .3rem;
        line-height: .3rem;
        background-color: #fff;
        color: #9E9E9E;
        text-align: center;
        border: 1px solid #9E9E9E;
        padding: 0 .1rem;
    }
.paging ::v-deep .el-pager li {
  font-size: 0.1rem;
  width: 0.28rem;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: #fff;
  color: #9e9e9e;
  text-align: center;
  border: 1px solid #9e9e9e;
}

    .paging ::v-deep .el-pager li {
        font-size: .1rem;
        width: .28rem;
        height: .3rem;
        line-height: .3rem;
        background-color: #fff;
        color: #9E9E9E;
        text-align: center;
        border: 1px solid #9E9E9E;
    }
/* -------------- */
/* 右侧 */
.rightList {
  padding-left: 0.2rem !important;

    /* -------------- */
    /* 右侧 */
    .rightList {
        padding-left: .2rem !important;
  .light {
    padding: 0.1rem 0.2rem !important;
  }

        .light {
            padding: .1rem .2rem !important;
        }
  .lightTop {
    font-size: 0.14rem !important;
  }

        .lightTop {
            font-size: .14rem !important;
        }
  .el-button {
    font-size: 0.12rem !important;
    padding: 0.05rem 0.18rem !important;
  }

        .el-button {
            font-size: .12rem !important;
            padding: .05rem .18rem !important;
        }
  .lightBo {
    font-size: 0.14rem !important;

        .lightBo {
            font-size: .14rem !important;
    .is-leaf {
      background-color: #c1d3ea !important;
      color: #2c2c2c !important;
      font-weight: 400;

            .is-leaf {
                background-color: #C1D3EA !important;
                color: #2C2C2C !important;
                font-weight: 400;
      .cell {
        height: 0.3rem !important;
        line-height: 0.3rem !important;
      }
    }
  }

                .cell {
  .el-table__body-wrapper {
    .el-table__row {
      height: 0.46rem !important;
      line-height: 0.46rem !important;

                    height: .3rem !important;
                    line-height: .3rem !important;
                }
            }
        }
      .cell {
        height: 0.3rem !important;
        line-height: 0.3rem !important;
      }
    }
  }
}

        .el-table__body-wrapper {
            .el-table__row {
                height: .46rem !important;
                line-height: .46rem !important;
@media screen and (min-width: 2560px) and (max-width: 3840px) {
  /* 搜索 */
  .Search {
    margin: 0.35rem 0 0.16rem !important;
    font-size: 0.12rem !important;
  }

                .cell {
  .Search ::v-deep .advancedSea {
    font-size: 0.12rem !important;
    margin-left: 0.35rem;
  }

                    height: .3rem !important;
                    line-height: .3rem !important;
                }
            }
  .Search ::v-deep .flex-center {
    height: 80% !important;
  }

        }
    }
  .hotSearch {
    font-size: 0.12rem !important;
    margin-bottom: 0.19rem !important;

    @media screen and (min-width:2560px)and (max-width:3840px) {
    li {
      font-size: 0.12rem !important;
      margin: 0 0.1rem;
    }
  }

        /* 搜索 */
        .Search {
            margin: .35rem 0 .16rem !important;
            font-size: .12rem !important;
        }
  .advancedSeaTrue,
  .zhushuju {
    padding: 0 1.24rem !important;
  }

        .Search ::v-deep .advancedSea {
            font-size: .12rem !important;
            margin-left: .35rem;
        }
  .advancedSeaTrue1 {
    padding: 0.08rem 0.19rem !important;
    font-size: 0.14rem !important;
  }

        .Search ::v-deep .flex-center {
            height: 80% !important;
        }
  /* Form组件里面的样式 */
  ::v-deep .el-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.1rem !important;
  }

        .hotSearch {
            font-size: .12rem !important;
            margin-bottom: .19rem !important;
  ::v-deep .el-form-item {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.18rem !important;
  }

            li {
                font-size: .12rem !important;
                margin: 0 .1rem;
            }
        }
  ::v-deep .el-form-item__label {
    font-size: 0.14rem !important;
    height: 0.3rem !important;
    display: flex !important;
    align-items: center !important;
  }

        .advancedSeaTrue,
        .zhushuju {
            padding: 0 1.24rem !important;
        }
  ::v-deep .el-input__inner {
    font-size: 0.14rem !important;
    height: 0.3rem !important;
  }

        .advancedSeaTrue1 {
            padding: .08rem .19rem !important;
            font-size: .14rem !important;
        }
  ::v-deep .Formbtn {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;

        /* Form组件里面的样式 */
        ::v-deep .el-row {
            display: flex;
            flex-wrap: wrap;
            margin-top: .1rem !important;
        }
    .el-button {
      width: 0.7rem !important;
      height: 0.3rem !important;
      font-size: 0.12rem;
    }
  }

        ::v-deep .el-form-item {
            display: flex !important;
            flex-wrap: wrap !important;
            margin-bottom: .18rem !important;
        }
  /* —————————————————————— */
  /* 左边的 */
  .boox {
    padding: 0.1rem 0.09rem;
    min-height: 2rem !important;
    position: relative;

        ::v-deep .el-form-item__label {
            font-size: .14rem !important;
            height: .3rem !important;
            display: flex !important;
            align-items: center !important;
        }
    ul {
      margin-top: 0.16rem !important;
    }

        ::v-deep .el-input__inner {
            font-size: .14rem !important;
            height: .3rem !important;
        }
    h3 {
      font-size: 0.14rem;
      margin-left: 0.1rem;
    }

        ::v-deep .Formbtn {
            width: 100% !important;
            display: flex;
            justify-content: center;
            align-items: center;
    li {
      height: 0.3rem;
      line-height: 0.3rem;
      padding: 0 0.2rem !important;
      margin: 0.05rem 0 !important;
      border-radius: 0.3rem !important;
    }

            .el-button {
                width: .7rem !important;
                height: .3rem !important;
                font-size: .12rem;
    .toggleButton1 {
      position: absolute;
      bottom: 0.1rem !important;
      left: 40% !important;
    }

            }
        }
    .toggleButton {
      font-size: 0.14rem !important;
    }
  }

        /* —————————————————————— */
        /* 左边的 */
        .boox {
            padding: .1rem .09rem;
            min-height: 2rem !important;
            position: relative;
  .zhongjianleft {
    margin: 0.27rem 0 !important;
  }

            ul {
                margin-top: .16rem !important;
            }
  .laiyuan {
    min-height: 2rem !important;
    overflow: auto;
  }

            h3 {
                font-size: .14rem;
                margin-left: .1rem;
            }
  /* ———————————————————— */
  ::v-deep .uni-input-placeholder {
    font-size: 0.14rem;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
  }

            li {
                height: .3rem;
                line-height: .3rem;
                padding: 0 .2rem !important;
                margin: .05rem 0 !important;
                border-radius: .3rem !important;
  ::v-deep .ffff {
    border-radius: 0.3rem !important;
    height: 0.36rem !important;
  }

            }
  ::v-deep .widget_button {
    border-radius: inherit !important;
    margin-right: 0.02rem !important;
    background-color: #597aa5;
  }

            .toggleButton1 {
                position: absolute;
                bottom: .1rem !important;
                left: 40% !important;
            }
  /* 右侧 */
  .rightList {
    padding-left: 0.2rem !important;

            .toggleButton {
                font-size: .14rem !important;
            }
        }
    .light {
      padding: 0.1rem 0.2rem !important;
    }

        .zhongjianleft {
            margin: .27rem 0 !important;
        }
    .lightTop {
      font-size: 0.14rem !important;
    }

        .laiyuan {
            min-height: 2rem !important;
        }
    .el-button {
      font-size: 0.12rem !important;
      padding: 0.05rem 0.18rem !important;
    }

        /* ———————————————————— */
        ::v-deep .uni-input-placeholder {
            font-size: .14rem;
            height: 100%;
            display: flex;
            align-content: center;
            align-items: center;
        }
    .lightBo {
      font-size: 0.14rem !important;

        ::v-deep .ffff {
            border-radius: .3rem !important;
            height: .36rem !important;
        }

        ::v-deep .widget_button {
            border-radius: inherit !important;
            margin-right: .02rem !important;
            background-color: #597AA5;
        }



        /* 右侧 */
        .rightList {
            padding-left: .2rem !important;

            .light {
                padding: .1rem .2rem !important;
            }

            .lightTop {
                font-size: .14rem !important;
            }

            .el-button {
                font-size: .12rem !important;
                padding: .05rem .18rem !important;
            }

            .lightBo {
                font-size: .14rem !important;

                .is-leaf {
                    background-color: #C1D3EA !important;
                    color: #2C2C2C !important;
                    font-weight: 400;

                    .cell {

                        height: .3rem !important;
                        line-height: .3rem !important;
                    }
                }
            }

            .el-table__body-wrapper {
                .el-table__row {
                    height: .46rem !important;
                    line-height: .46rem !important;

                    .cell {

                        height: .3rem !important;
                        line-height: .3rem !important;
                    }
                }

            }
        }
    }

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

        /* 搜索 */
        .Search {
            margin: .35rem 0 .16rem !important;
            font-size: .12rem !important;
        }

        .Search ::v-deep .advancedSea {
            font-size: .12rem !important;
            margin-left: .35rem;
        }
      .is-leaf {
        background-color: #c1d3ea !important;
        color: #2c2c2c !important;
        font-weight: 400;

        .Search ::v-deep .flex-center {
            height: 80% !important;
        }
        .cell {
          height: 0.3rem !important;
          line-height: 0.3rem !important;
        }
      }
    }

        .hotSearch {
            font-size: .12rem !important;
            margin-bottom: .19rem !important;
    .el-table__body-wrapper {
      .el-table__row {
        height: 0.46rem !important;
        line-height: 0.46rem !important;

            li {
                font-size: .12rem !important;
                margin: 0 .1rem;
            }
        }
        .advancedSeaTrue1{
            border: 1px solid #C1D3EA;
        }
        .advancedSeaTrue,
        .zhushuju {
            padding: 0 1.24rem !important;
        }
        .cell {
          height: 0.3rem !important;
          line-height: 0.3rem !important;
        }
      }
    }
  }
}

        .advancedSeaTrue1 {
            padding: .08rem .19rem !important;
            font-size: .14rem !important;
        }
@media screen and (min-width: 1366px) and (max-width: 1920px) {
  /* 搜索 */
  .Search {
    margin: 0.35rem 0 0.16rem !important;
    font-size: 0.12rem !important;
  }

        /* Form组件里面的样式 */
        ::v-deep .el-row {
            display: flex;
            flex-wrap: wrap;
            margin-top: .1rem !important;
        }
  .Search ::v-deep .advancedSea {
    font-size: 0.12rem !important;
    margin-left: 0.35rem;
  }

        ::v-deep .el-form-item {
            display: flex !important;
            flex-wrap: wrap !important;
            margin-bottom: .18rem !important;
        }
  .Search ::v-deep .flex-center {
    height: 80% !important;
  }

        ::v-deep .el-form-item__label {
            font-size: .14rem !important;
            height: .3rem !important;
            display: flex !important;
            align-items: center !important;
        }
  .hotSearch {
    font-size: 0.12rem !important;
    margin-bottom: 0.19rem !important;

        ::v-deep .el-input__inner {
            font-size: .14rem !important;
            height: .3rem !important;
        }
    li {
      font-size: 0.12rem !important;
      margin: 0 0.1rem;
    }
  }
  .advancedSeaTrue1 {
    border: 1px solid #c1d3ea;
  }
  .advancedSeaTrue,
  .zhushuju {
    padding: 0 1.24rem !important;
  }

        ::v-deep .Formbtn {
            width: 100% !important;
            display: flex;
            justify-content: center;
            align-items: center;
  .advancedSeaTrue1 {
    padding: 0.08rem 0.19rem !important;
    font-size: 0.14rem !important;
  }

            .el-button {
                width: .7rem !important;
                height: .3rem !important;
                font-size: .12rem;
  /* Form组件里面的样式 */
  ::v-deep .el-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.1rem !important;
  }

            }
        }
  ::v-deep .el-form-item {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.18rem !important;
  }

        /* —————————————————————— */
        /* 左边的 */
        .boox {
            padding: .1rem .09rem;
            min-height: 2rem !important;
            position: relative;
  ::v-deep .el-form-item__label {
    font-size: 0.14rem !important;
    height: 0.3rem !important;
    display: flex !important;
    align-items: center !important;
  }

            ul {
                margin-top: .16rem !important;
                margin-bottom: .2rem !important;
            }
  ::v-deep .el-input__inner {
    font-size: 0.14rem !important;
    height: 0.3rem !important;
  }

            h3 {
                font-size: .14rem;
                margin-left: .1rem;
            }
  ::v-deep .Formbtn {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;

            li {
                height: .3rem;
                line-height: .3rem;
                padding: 0 .2rem !important;
                margin: .05rem 0 !important;
                border-radius: .3rem !important;
    .el-button {
      width: 0.7rem !important;
      height: 0.3rem !important;
      font-size: 0.12rem;
    }
  }

            }
  /* —————————————————————— */
  /* 左边的 */
  .boox {
    padding: 0.1rem 0.09rem;
    min-height: 2rem !important;
    position: relative;

            .toggleButton1 {
                position: absolute;
                bottom: .1rem !important;
                left: 40% !important;
            }
    ul {
      margin-top: 0.16rem !important;
      margin-bottom: 0.2rem !important;
    }

            .toggleButton {
                font-size: .14rem !important;
            }
        }
    h3 {
      font-size: 0.14rem;
      margin-left: 0.1rem;
    }

        .zhongjianleft {
            margin: .27rem 0 !important;
        }
    li {
      height: 0.3rem;
      line-height: 0.3rem;
      padding: 0 0.2rem !important;
      margin: 0.05rem 0 !important;
      border-radius: 0.3rem !important;
    }

        .laiyuan {
            min-height: 2rem !important;
        }
    .toggleButton1 {
      position: absolute;
      bottom: 0.1rem !important;
      left: 40% !important;
    }

        /* ———————————————————— */
        ::v-deep .uni-input-placeholder {
            font-size: .14rem;
            height: 100%;
            display: flex;
            align-content: center;
            align-items: center;
        }
    .toggleButton {
      font-size: 0.14rem !important;
    }
  }

        ::v-deep .ffff {
            border-radius: .3rem !important;
            height: .36rem !important;
        }
  .zhongjianleft {
    margin: 0.27rem 0 !important;
  }

        ::v-deep .widget_button {
            border-radius: inherit !important;
            margin-right: .02rem !important;
            background-color: #597AA5;
        }
  .laiyuan {
    min-height: 2rem !important;
    overflow: auto;
  }

        /* -------------------- */
        /* 右侧 */
        .rightList {
            width: 100%;
            padding-left: .2rem !important;
  /* ———————————————————— */
  ::v-deep .uni-input-placeholder {
    font-size: 0.14rem;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
  }

            .light {
                padding: .1rem .2rem !important;
            }
  ::v-deep .ffff {
    border-radius: 0.3rem !important;
    height: 0.36rem !important;
  }

            .lightTop {
                font-size: .14rem !important;
            }
  ::v-deep .widget_button {
    border-radius: inherit !important;
    margin-right: 0.02rem !important;
    background-color: #597aa5;
  }

            .el-button {
                font-size: .12rem !important;
                padding: .05rem .18rem !important;
            }
  /* -------------------- */
  /* 右侧 */
  .rightList {
    width: 100%;
    padding-left: 0.2rem !important;

            .lightBo {
                font-size: .14rem !important;
    .light {
      padding: 0.1rem 0.2rem !important;
    }

                .is-leaf {
                    background-color: #C1D3EA !important;
                    color: #2C2C2C !important;
                    font-weight: 400;
    .lightTop {
      font-size: 0.14rem !important;
    }

                    .cell {
    .el-button {
      font-size: 0.12rem !important;
      padding: 0.05rem 0.18rem !important;
    }

                        height: .3rem !important;
                        line-height: .3rem !important;
                    }
                }
            }
    .lightBo {
      font-size: 0.14rem !important;

            .el-table__body-wrapper {
                .el-table__row {
                    height: .46rem !important;
                    line-height: .46rem !important;
      .is-leaf {
        background-color: #c1d3ea !important;
        color: #2c2c2c !important;
        font-weight: 400;

                    .cell {
        .cell {
          height: 0.3rem !important;
          line-height: 0.3rem !important;
        }
      }
    }

                        height: .3rem !important;
                        line-height: .3rem !important;
                    }
                }
    .el-table__body-wrapper {
      .el-table__row {
        height: 0.46rem !important;
        line-height: 0.46rem !important;

            }
        }
    }
        .cell {
          height: 0.3rem !important;
          line-height: 0.3rem !important;
        }
      }
    }
  }
}

    * {
        box-sizing: border-box;
    }
* {
  box-sizing: border-box;
}

    .hotSearch {
        font-size: .12rem;
        margin-bottom: .19rem;
.hotSearch {
  font-size: 0.12rem;
  margin-bottom: 0.19rem;

        li {
            font-size: .12rem;
            margin: 0 .1rem;
        }
    }
  li {
    font-size: 0.12rem;
    margin: 0 0.1rem;
  }
}

    /*     .a {
/*     .a {
        height: 2rem;
    }

@@ -1058,53 +1228,52 @@
        height: 100px;
    } */

    .box {
        transition: height 0.3s;
        /* 添加过渡效果 */
        overflow: hidden;
        /* 避免内容溢出 */
.box {
  transition: height 0.3s;
  /* 添加过渡效果 */
  overflow: hidden;
  /* 避免内容溢出 */
}

    }
/* 左边的 */
.boox {
  width: 100%;
  padding: 0.1rem 0.09rem;
  min-height: 2rem !important;
  position: relative;
  border: 1px solid #c1d3ea !important;

    /* 左边的 */
    .boox {
        width: 100%;
        padding: .1rem .09rem;
        min-height: 2rem !important;
        position: relative;
        border: 1px solid #c1d3ea !important;
  ul {
    margin-top: 0.16rem !important;
  }

        ul {
            margin-top: .16rem !important;
        }
  h3 {
    font-size: 0.14rem;
    margin-left: 0.1rem;
  }

        h3 {
            font-size: .14rem;
            margin-left: .1rem;
        }
  li {
    height: 0.3rem;
    line-height: 0.3rem;
    padding: 0 0.2rem !important;
    margin: 0.05rem 0 !important;
    border-radius: 0.3rem !important;
    font-size: 0.14rem;
  }

        li {
            height: .3rem;
            line-height: .3rem;
            padding: 0 .2rem !important;
            margin: .05rem 0 !important;
            border-radius: .3rem !important;
            font-size: .14rem;
        }
  .toggleButton1 {
    position: absolute;
    bottom: 0.1rem !important;
    left: 40% !important;
  }

        .toggleButton1 {
            position: absolute;
            bottom: .1rem !important;
            left: 40% !important;
        }
  .toggleButton {
    font-size: 0.14rem !important;
  }
}

        .toggleButton {
            font-size: .14rem !important;
        }
    }

    ::v-deep .el-table th,
    ::v-deep .el-table td {
        text-align: center;
    }
</style>
::v-deep .el-table th,
::v-deep .el-table td {
  text-align: center;
}
</style>

 src/static/initialize.css

@@ -5,8 +5,8 @@
}

html {
  font-size: calc(100vw / 1440 * 96) !important;
  /* font-size: 10px; */
  /* font-size: calc(100vw / 1440 * 96) !important; */
  font-size: 126px;
}

body {