登录注册

杨磊

2024-05-11 2df27fd1fa604fc6b2e5876b1b5e073f9a7f39ab

登录注册

 src/pages/Register/Register.vue

@@ -1,58 +1,144 @@
<template>
    <view class="container flex flex-center" style="align-items: flex-start;">
  <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="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>
            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: .47rem;align-items: center;">
        <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: .14rem;color: #244A7B;font-weight: normal;">
          <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
          :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-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-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-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 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>
              <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: .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 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: .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
            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>
@@ -67,30 +153,23 @@
</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'
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
    Footer1,
        },
        data() {
            // 密码
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
      if (value === "") {
        callback(new Error("请输入密码"));
                } else {
                    if (this.registerData.checkPass !== '') {
        if (this.registerData.checkPass !== "") {
                        this.$nextTick(() => {
                            this.$refs.formLogin.validateField('checkPass');
            this.$refs.formLogin.validateField("checkPass");
                        });
                    }
                    callback();
@@ -98,15 +177,17 @@
            };
            // 确认密码
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
      if (value === "") {
        callback(new Error("请再次输入密码"));
                } else if (value !== this.registerData.pass) {
                    callback(new Error('两次输入密码不一致!'));
        callback(new Error("两次输入密码不一致!"));
                } else {
                    callback();
                }
            };
            return {
      //验证码倒计时
      countdown: 0,
                // 用户注册
                isRegister: false,
                // 用户登录
@@ -117,112 +198,123 @@
                isResetPass: false,
                // 注册用户账号的校验
                rules: {
                    loginID: [{
        loginID: [
          {
                            required: true,
                            message: '请输入登录账号',
                            trigger: 'blur'
            message: "请输入登录账号",
            trigger: "blur",
                        },
                        {
                            pattern: /^[a-zA-Z0-9]{3,15}$/,
                            message: '请输入3-15个字符的字母或数字',
                            trigger: 'blur'
                        } // 自定义校验规则，使用正则表达式
            message: "请输入3-15个字符的字母或数字",
            trigger: "blur",
          }, // 自定义校验规则，使用正则表达式
                    ],
                    pass: [{
        pass: [
          {
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
            message: "请输入密码",
            trigger: "blur",
                        },
                        {
                            min: 6,
                            max: 10,
                            message: '密码长度在 6 到 12 个字符',
                            trigger: 'blur'
            message: "密码长度在 6 到 12 个字符",
            trigger: "blur",
                        },
                        {
                            validator: validatePass,
                            trigger: 'blur'
                        }
            trigger: "blur",
          },
                    ],
                    checkPass: [{
        checkPass: [
          {
                        validator: validatePass2,
                        trigger: 'blur'
                    }],
                    cellphoneORmailbox: [{
            trigger: "blur",
          },
        ],
        cellphoneORmailbox: [
          {
                            required: true,
                            message: '请输入手机号或邮箱',
                            trigger: 'blur'
            message: "请输入手机",
            trigger: "blur",
                        },
                        {
                            validator: this.validateContact,
                            trigger: 'blur'
                        }
            trigger: "blur",
          },
                    ],
                    verifyCode: [{
        verifyCode: [
          {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }]
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
                },
                // 登录注册框
                loginTrue: true,
                Rtop1: 0,
                value: 'sdfdsf',
      value: "sdfdsf",
                // 注册用户对应的数据
                registerData: {
                    loginID: '',
                    pass: '',
                    checkPass: '',
                    cellphoneORmailbox: '',
                    verifyCode: ''
        loginID: "",
        pass: "",
        checkPass: "",
        cellphoneORmailbox: null,
        verifyCode: "",
                },
                // 登录用户账号
                loginData: {
                    // 账号
                    loginID: '',
                    pass: ''
        loginID: "",
        pass: "",
                },
                // 重置密码
                resetDataPass: {
                    cellphoneORmailbox: '',
        cellphoneORmailbox: null,
                    verifyCode: "",
                    newPass: "",
                    checkPass: ""
        checkPass: "",
                },
                // 修改密码
                amendDataPass: {
                    loginID: '',
        loginID: "",
                    originalPass: "",
                    newPass: "",
                    checkPass: ""
        checkPass: "",
                },
                // 书籍数据
                listData: [{
                        name: '中医人物数据库',
      listData: [
        {
          name: "中医人物数据库",
                        id: 1,
                    }, {
                        name: '世医医家数据库',
        },
        {
          name: "世医医家数据库",
                        id: 2,
                    }, {
                        name: '中医学术流派',
        },
        {
          name: "中医学术流派",
                        id: 3,
                    }, {
                        name: '中医地域医谱',
        },
        {
          name: "中医地域医谱",
                        id: 4,
                    }, {
                        name: '中医医事制度',
        },
        {
          name: "中医医事制度",
                        id: 5,
                    },

                ]
            }
      ],
    };
        },
        onLoad() {
            uni.getSystemInfo({
                success: function(info) {
                    // console.log('屏幕的宽度：' + info.windowWidth);
                    // console.log('屏幕的高度：' + info.windowHeight);
                }
      },
            });
        },
        mounted() {
@@ -233,40 +325,49 @@
            termOfServiceClick(number) {
                // console.log(number);
                if (number == 1) {
                    console.log('服务条款');
                    window.open(`#/pages/userAgreement/userAgreement`)
        console.log("服务条款");
        window.open(`#/pages/userAgreement/userAgreement`);
                    // uni.navigateTo({
                    //     url: '/pages/userAgreement/userAgreement'
                    // })
                } else if (number == 2) {
                    window.open(`#/pages/userAgreement/userAgreement`)
                    console.log('用户隐私保护和个人信息条款');
        window.open(`#/pages/userAgreement/userAgreement`);
        console.log("用户隐私保护和个人信息条款");
                }
            },
            // 已有账号？返回登录
            BacktoLogin() {
                uni.redirectTo({
                    url: '/pages/Login/Login'
                })
        url: "/pages/Login/Login",
      });
            },
            // 获取验证码
            async verifyCodeClick() {
      console.log(this.registerData.cellphoneORmailbo, "registerData");
      if (!this.registerData.cellphoneORmailbox) {
        this.$message({
          message: "请输入手机！",
          type: "warning",
        });

        return false;
      }
      if (this.countdown > 0) {
        return;
      }
                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()
      };
      this.countdown = 60;
      const intervalId = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown -= 1;
                } else {
                    callback();
          clearInterval(intervalId);
                }
      }, 1000);
      let code = await getverifyCode(Obj);

            },
            // 手机号/或者邮箱
            validateContact(rule, value, callback) {
@@ -276,15 +377,15 @@
                if (regPhone.test(value) || regEmail.test(value)) {
                    callback(); // 校验通过
                } else {
                    callback(new Error('请输入正确的手机号或邮箱')); // 校验失败
        callback(new Error("请输入正确的手机号")); // 校验失败
                }
            },
            getElementWidth() {
                this.$nextTick(() => {
                    var width = this.$refs.Rtop.$el.clientWidth;
                    this.Rtop1 = width + 50;
                    console.log('Element width:', width);
                })
        console.log("Element width:", width);
      });
            },
            // 用户注册
            async Login(formName) {
@@ -294,34 +395,34 @@
                    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, '注册成功');
          console.log("sdfds");
          await getaddLogin(Obj).then((res) => {
            console.log(res, "注册成功");
                            if(res.success==true){
                                uni.showToast({
                                    title: res.errorText,
                                    icon: 'success'
                icon: "success",
                                });
                                uni.navigateTo({
                                    url: '/pages/Login/Login'
                                })
                url: "/pages/Login/Login",
              });
                            }else{
                                uni.showToast({
                                    title: res.errorText,
                                    icon: 'error'
                icon: "error",
                                });
                            }
                        })
          });
                        // encryptAES
                        // uni.navigateTo({
                        //     url: '/pages/Login/Login'
                        // })
                    } else {
                        console.log('error submit!!');
          console.log("error submit!!");
                        return false;
                    }
                });
@@ -330,10 +431,9 @@

                // let res = await getaddLogin(Obj)
                // console.log('sdfdsfs', res);

            },
        }
    }
  },
};
</script>
<style scoped>
    @media screen and (max-width:1366px) {
@@ -342,11 +442,11 @@
        }

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

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

        .LoginBg {
@@ -359,7 +459,6 @@
    }

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

        /* ::v-deep .el-card__body {
            padding: 0 .58rem !important;
        }
@@ -385,7 +484,7 @@
        } */
        .LoginBg {
            margin: 0 !important;
            height: .3rem !important;
    height: 0.3rem !important;
        }

        ::v-deep .el-card {
@@ -394,19 +493,19 @@
        }

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

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

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

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

        .hua {
@@ -414,7 +513,7 @@
        }

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

        .yzm {
@@ -439,12 +538,11 @@
        }

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

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

        /*         ::v-deep .el-card {
            top: 80% !important;
        }
@@ -524,7 +622,7 @@
        } */
        .LoginBg {
            margin: 0 !important;
            height: .3rem !important;
    height: 0.3rem !important;
        }

        ::v-deep .el-card {
@@ -533,19 +631,19 @@
        }

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

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

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

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

        .hua {
@@ -553,7 +651,7 @@
        }

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

        .yzm {
@@ -578,14 +676,14 @@
        }

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

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

        ::v-deep .el-card {
@@ -594,19 +692,19 @@
        }

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

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

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

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

        .hua {
@@ -614,7 +712,7 @@
        }

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

        .yzm {
@@ -639,9 +737,8 @@
        }

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

    }

    /* @media screen and (max-width: 1366px){
@@ -689,16 +786,13 @@
        }
    } */


    .LoginBg {
        width: 1.2rem;
        height: .37rem;
  height: 0.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;
@@ -709,12 +803,11 @@
    }

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

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

    }

    ::v-deep .el-form-item__content {
@@ -727,14 +820,14 @@
        border-bottom: 1px solid #2d476a;
        border-radius: 0;
        padding: 0;
        height: .4rem;
        line-height: .4rem;
        font-size: .14rem;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.14rem;
    }

    ::v-deep .el-form-item__error {
        /* display: none; */
        font-size: .12rem;
  font-size: 0.12rem;
    }

    ::v-deep .input.invalid:focus {
@@ -745,21 +838,20 @@
        border-color: #2d476a !important;
    }


    ::v-deep .el-form-item__label {
        min-width: .6rem;
  min-width: 0.6rem;
        padding: 0;
        color: #244A7B;
        font-size: .14rem;
  color: #244a7b;
  font-size: 0.14rem;
        font-weight: 500;
        margin-right: .29rem;
  margin-right: 0.29rem;
        display: flex;
        align-items: center;
        text-align: right;
    }

    ::v-deep .el-form-item {
        margin-bottom: .22rem;
  margin-bottom: 0.22rem;
        display: flex;
    }

@@ -773,7 +865,6 @@

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

    }

    .s2 {
@@ -801,7 +892,7 @@
            align-items: center;

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

@@ -810,23 +901,22 @@
                margin: 10rpx 0;
            }
        }

    }

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

    .rrr {
        position: absolute;
        right: .53rem;
        bottom: .36rem;
  right: 0.53rem;
  bottom: 0.36rem;
        width: 2.5rem;
        height: 3.07rem;
        opacity: 1;
@@ -859,7 +949,6 @@
        /* height: 52rpx; */
    }


    .secretary {
        width: 1300rpx !important;
        height: 50rpx;
@@ -867,9 +956,6 @@
        /* flex-wrap: wrap; */
        padding: 0 20px;
        text-align: center;




        li {
            background-color: #fff;
@@ -883,15 +969,12 @@
            padding: 50rpx 65rpx;
            /*             padding: 58rpx 128rpx 88rpx; */
            text-align: center;
            background: #EBF4FF;
    background: #ebf4ff;
        }
    }



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

    }
</style>

 src/pages/forgetPass/forgetPass.vue

@@ -1,53 +1,114 @@
<template>
    <view class="container flex flex-center" style="align-items: flex-start;">
  <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="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>
            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: .47rem;align-items: center;">
        <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: .14rem;color: #244A7B;font-weight: normal;">
          <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-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
                @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-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-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-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>
        <!-- 底部人物背景图左侧 -->
@@ -60,33 +121,24 @@
</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'
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
    Footer1,
        },
        data() {
            // 密码
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
      if (value === "") {
        callback(new Error("请输入密码"));
                } else {
                    if (this.resetDataPass.checkPass !== '') {
        if (this.resetDataPass.checkPass !== "") {
                        this.$nextTick(() => {
                            this.$refs.formLogin.validateField('checkPass');
            this.$refs.formLogin.validateField("checkPass");
                        });
                    }
                    callback();
@@ -94,15 +146,17 @@
            };
            // 确认密码
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
      if (value === "") {
        callback(new Error("请再次输入密码"));
                } else if (value !== this.resetDataPass.newPass) {
                    callback(new Error('两次输入密码不一致!'));
        callback(new Error("两次输入密码不一致!"));
                } else {
                    callback();
                }
            };
            return {
      //验证码倒计时
      countdown: 0,
                // 用户注册
                isRegister: false,
                // 用户登录
@@ -113,62 +167,70 @@
                isResetPass: false,
                // 注册用户账号的校验
                rules: {
                    loginID: [{
        loginID: [
          {
                        required: true,
                        message: '请输入登录账号',
                        trigger: 'blur'
                    }],
                    newPass: [{
            message: "请输入登录账号",
            trigger: "blur",
          },
        ],
        newPass: [
          {
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
            message: "请输入密码",
            trigger: "blur",
                        },
                        {
                            min: 6,
                            max: 10,
                            message: '密码长度在 6 到 12 个字符',
                            trigger: 'blur'
            message: "密码长度在 6 到 12 个字符",
            trigger: "blur",
                        },
                        {
                            validator: validatePass,
                            trigger: 'blur'
                        }
            trigger: "blur",
          },
                    ],
                    checkPass: [{
        checkPass: [
          {
                        validator: validatePass2,
                        trigger: 'blur'
                    }],
                    cellphoneORmailbox: [{
            trigger: "blur",
          },
        ],
        cellphoneORmailbox: [
          {
                            required: true,
                            message: '请输入手机号或邮箱',
                            trigger: 'blur'
            message: "请输入手机号",
            trigger: "blur",
                        },
                        {
                            validator: this.validateContact,
                            trigger: 'blur'
                        }
            trigger: "blur",
          },
                    ],
                    verifyCode: [{
        verifyCode: [
          {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    }]
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
                },
                // 重置密码
                resetDataPass: {
                    cellphoneORmailbox: '',
        cellphoneORmailbox: "",
                    verifyCode: "",
                    newPass: "",
                    checkPass: ""
        checkPass: "",
                },
            }
    };
        },
        onLoad() {
            uni.getSystemInfo({
                success: function(info) {
                    // console.log('屏幕的宽度：' + info.windowWidth);
                    // console.log('屏幕的高度：' + info.windowHeight);
                }
      },
            });
        },
        mounted() {
@@ -178,18 +240,36 @@
            // 已有账号？返回登录
            BacktoLogin() {
                uni.redirectTo({
                    url: '/pages/Login/Login'
                })
        url: "/pages/Login/Login",
      });
            },
            // 获取验证码
            async verifyCodeClick() {
                console.log('获取验证码');
      if (!this.resetDataPass.cellphoneORmailbox) {
        this.$message({
          message: "请输入手机！",
          type: "warning",
        });

        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);
                }
                await getverifyCode(Obj).then(res => {
                    console.log(res, '验证码获取成功');
                })
      }, 1000);
      await getverifyCode(Obj).then((res) => {
        console.log(res, "验证码获取成功");
      });
            },
            // 列表项跳转
            listDataClick(item) {
@@ -198,8 +278,8 @@
                // uni.setStorageSync('globalData', { id: 123, name: 'example' });
                if (item.id == 1) {
                    uni.navigateTo({
                        url: '/pages/character/detail?id=' + item.id
                    })
          url: "/pages/character/detail?id=" + item.id,
        });
                } else if (item.id == 2) {
                    console.log(item.name);
                    // uni.navigateTo({
@@ -207,16 +287,16 @@
                    // })
                } else if (item.id == 3) {
                    uni.navigateTo({
                        url: '/pages/academicGenres/index?id=' + item.id
                    })
          url: "/pages/academicGenres/index?id=" + item.id,
        });
                } else if (item.id == 4) {
                    uni.navigateTo({
                        url: '/pages/territory/territory?id=' + item.id
                    })
          url: "/pages/territory/territory?id=" + item.id,
        });
                } else if (item.id == 5) {
                    uni.navigateTo({
                        url: '/pages/TcmSystem/TcmSystem?id=' + item.id
                    })
          url: "/pages/TcmSystem/TcmSystem?id=" + item.id,
        });
                }
            },

@@ -228,49 +308,53 @@
                if (regPhone.test(value) || regEmail.test(value)) {
                    callback(); // 校验通过
                } else {
                    callback(new Error('请输入正确的手机号或邮箱')); // 校验失败
        callback(new Error("请输入正确的手机号")); // 校验失败
                }
            },
            getElementWidth() {
                this.$nextTick(() => {
                    var width = this.$refs.Rtop.$el.clientWidth;
                    this.Rtop1 = width + 50;
                    console.log('Element width:', width);
                })
        console.log("Element width:", width);
      });
            },
            // 忘记密码
            Login2(formName) {
                let Obj = {
                    "communicateParam": this.resetDataPass.cellphoneORmailbox, //手机或邮箱
                    "verifyCode": this.resetDataPass.verifyCode, //验证码
                    "newPassword": encryptAES(this.resetDataPass.newPass) //新密码
                }
        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, '接口');
          await getRestPassword(Obj).then((res) => {
            console.log(res, "接口");
                            if (res.success) {
                                console.log('忘记密码的接口拿到数据了');
              console.log("忘记密码的接口拿到数据了");
                                uni.navigateTo({
                                    url: '/pages/Login/Login'
                                })
                url: "/pages/Login/Login",
              });
                            } else {
                                Message.error(res.errorText || '')
              Message.error(res.errorText || "");
                            }
                        })
          });
                        // alert('submit!成功');
                        // uni.redirectTo({
                        //     url: '/pages/Login/Login'
                        // })
          this.$message({
            message: "密码重置成功",
            type: "success",
          });
                    } else {
                        console.log('error submit!!失败');
          console.log("error submit!!失败");
                        return false;
                    }
                });
            }
        }
    }
    },
  },
};
</script>
<style scoped>
    /* 
@@ -306,7 +390,7 @@
    @media screen and (min-width:2560px)and (max-width:3840px) {
        .LoginBg {
            margin: 0 !important;
            height: .3rem !important;
    height: 0.3rem !important;
        }

        ::v-deep .el-card {
@@ -315,28 +399,28 @@
        }

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

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

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

        ::v-deep .el-input__inner {
            height: .35rem !important;
            font-size: .14rem;
    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;
    margin-right: 0.2rem !important;
    width: 0.7rem;
        }

        .hua {
@@ -344,7 +428,7 @@
        }

        .LoginTop {
            margin-bottom: .4rem !important;
    margin-bottom: 0.4rem !important;
        }

        .yzm {
@@ -361,7 +445,7 @@
        }

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

        .btn ::v-deep .el-button {
@@ -376,12 +460,12 @@
        }

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

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

        ::v-deep .el-card {
@@ -390,19 +474,19 @@
        }

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

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

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

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

        .hua {
@@ -410,7 +494,7 @@
        }

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

        .yzm {
@@ -435,15 +519,14 @@
        }

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

    }

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

        ::v-deep .el-card {
@@ -452,19 +535,19 @@
        }

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

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

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

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

        .hua {
@@ -472,7 +555,7 @@
        }

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

        .yzm {
@@ -497,18 +580,16 @@
        }

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

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

    }


    ::v-deep .el-card {
        border-radius: 0;
@@ -519,12 +600,11 @@
    }

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

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

    }

    ::v-deep .el-form-item__content {
@@ -537,8 +617,8 @@
        border-bottom: 1px solid #2d476a;
        border-radius: 0;
        padding: 0;
        height: .4rem;
        line-height: .4rem;
  height: 0.4rem;
  line-height: 0.4rem;
    }

    ::v-deep .el-form-item__error {
@@ -553,18 +633,17 @@
        border-color: #2d476a !important;
    }


    ::v-deep .el-form-item__label {
        min-width: .6rem;
  min-width: 0.6rem;
        padding: 0;
        color: #244A7B;
        font-size: .14rem;
  color: #244a7b;
  font-size: 0.14rem;
        font-weight: 500;
        margin-right: .29rem;
  margin-right: 0.29rem;
    }

    ::v-deep .el-form-item {
        margin-bottom: .22rem;
  margin-bottom: 0.22rem;
        display: flex;
    }

@@ -578,7 +657,6 @@

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

    }

    .s2 {
@@ -606,7 +684,7 @@
            align-items: center;

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

@@ -615,23 +693,22 @@
                margin: 10rpx 0;
            }
        }

    }

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

    .rrr {
        position: absolute;
        right: .53rem;
        bottom: .36rem;
  right: 0.53rem;
  bottom: 0.36rem;
        width: 2.5rem;
        height: 3.07rem;
        opacity: 1;
@@ -664,7 +741,6 @@
        /* height: 52rpx; */
    }


    .secretary {
        width: 1300rpx !important;
        height: 50rpx;
@@ -672,9 +748,6 @@
        /* flex-wrap: wrap; */
        padding: 0 20px;
        text-align: center;




        li {
            background-color: #fff;
@@ -688,15 +761,12 @@
            padding: 50rpx 65rpx;
            /*             padding: 58rpx 128rpx 88rpx; */
            text-align: center;
            background: #EBF4FF;
    background: #ebf4ff;
        }
    }



    .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

@@ -5,85 +5,162 @@
        <!-- 搜索 -->
        <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>
      <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;">
    <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;">
      <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: .18rem;">
            <view style="background-color: #fff;padding: 20rpx;" class="advancedSeaTrue1">
    <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; ">
    <uni-row
      class="demo-uni-row zhushuju flex flex-items-start"
      style="padding: 0 230rpx"
    >
            <!-- 左侧 -->
            <view class="fbox2" style="width: 2.6rem;">
      <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;">
        <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')">
          <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
              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'}">
        <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':'' }">
          <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')">
            <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
              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;">
        <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':'' }">
          <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
              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">
@@ -94,33 +171,65 @@
                </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>
      <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="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="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="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-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 />
@@ -128,20 +237,21 @@
</template>

<script>
    import Footer1 from '@/components/footer/footer'
    import MyForm from '@/components/form/form.vue'
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'
  getHotSearch,
  getPersonList,
} from "@/api/index.js";
    export default {
        components: {
            Footer1,
            MyForm
    MyForm,
        },
        data() {
            return {
@@ -149,86 +259,90 @@
                isAdvancedSearch: false,
                // 高级搜索
                from: {
                    from: [{
                            type: 'input',
                            label: '姓名',
                            name: 'name',
                            value: ''
        from: [
          {
            type: "input",
            label: "姓名",
            name: "name",
            value: "",
                        },
                        {
                            type: 'input',
                            label: '别名',
                            name: 'alias',
                            value: ''
            type: "input",
            label: "别名",
            name: "alias",
            value: "",
                        },
                        {
                            type: 'input',
                            label: '籍贯',
                            name: 'nativePlace',
                            value: ''
            type: "input",
            label: "籍贯",
            name: "nativePlace",
            value: "",
                        },
                        {
                            type: 'select',
                            label: '职业',
                            value: '',
                            name: 'tagId',
                            options: [{
                                    label: '医家',
                                    value: '1'
            type: "select",
            label: "职业",
            value: "",
            name: "tagId",
            options: [
              {
                label: "医家",
                value: "1",
                                },
                                {
                                    label: '世家',
                                    value: '2'
                                }
                            ]
                label: "世家",
                value: "2",
              },
            ],
                        },
                        {
                            type: 'input',
                            label: '职官',
                            name: 'official',
                            value: ''
            type: "input",
            label: "职官",
            name: "official",
            value: "",
                        },
                        {
                            type: 'select',
                            label: '性别',
                            value: '',
                            name: 'genderType',
                            options: [{
                                    label: '未指明',
                                    value: 'UNKNOWN'
                                }, {
                                    label: '男',
                                    value: 'MALE'
            type: "select",
            label: "性别",
            value: "",
            name: "genderType",
            options: [
              {
                label: "未指明",
                value: "UNKNOWN",
                                },
                                {
                                    label: '女',
                                    value: 'WOMAN'
                                }
                            ]
                label: "男",
                value: "MALE",
                        },
                        {
                            type: 'input',
                            label: '时期',
                            name: 'dynasty',
                            value: ''
                label: "女",
                value: "WOMAN",
              },
            ],
                        },
                        {
                            type: 'input',
                            label: '机构',
                            name: 'institution',
                            value: ''
                        }
                    ]
            type: "input",
            label: "时期",
            name: "dynasty",
            value: "",
          },
          {
            type: "input",
            label: "机构",
            name: "institution",
            value: "",
          },
        ],
                },

                // 热门搜索
                hot: [],
                // 职业
                profession: {
                    title: '职业',
        title: "职业",
                    index: 0,
                    id: 0,
                    list: []
        list: [],
                },
                // 现在多少条职业数据
                professionIndex: 4,
@@ -236,19 +350,19 @@
                activeBox: null,
                // 时期
                dynasty: {
                    title: '时期',
                    id: 0,
                    index: 0,
                    list: []
        title: "时期",
        id: "",
        index: "",
        list: [],
                },
                // 现在多少条时期数据
                dynastyIndex: 4,
                // 来源
                source: {
                    title: '来源',
        title: "来源",
                    index: 0,
                    id: 0,
                    list: []
        list: [],
                },
                // 表格的数组
                tableData: [],
@@ -257,22 +371,25 @@
                // 当前页
                CurrentPage: 1,
                // 一页显示多少条数据
                pageSize: 6,
      pageSize: 10,
                dataTable: [],
                option: {}
            }
      option: {},
      keywords: "",
    };
        },
        onLoad(options) {
            this.onSearch({text:options.name})
    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()
    var box1Height = document.querySelector(".fbox2").offsetHeight;
    document.querySelector(".fbox3").style.height =
      box1Height + box1Height / 18 + "px";
    console.log(box1Height, "box1Height");
    this.getStatistics();
            // 默认先调用搜索一次
            this.onSearch('')
    this.onSearch("");
        },
        methods: {
            // ExportJsonExcel实例
@@ -283,8 +400,33 @@
                toExcel.saveExcel();
            },
            // 下载按钮
            exportClick() {
    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) {
@@ -306,184 +448,223 @@
                }
                this.option.fileName = "中医医学人物知识库"; //excel文件名
                //excel文件数据
                this.option.datas = [{
      this.option.datas = [
        {
                    //   excel文件的数据源
                    sheetData: dataTable,
                    //   excel文件sheet的表名
                    sheetName: "sheet",
                    //   excel文件表头名
                    sheetHeader: ["序号", "姓名", "别名", "性别", "别名", "时期", "生年", "卒年", "籍贯", "社会身份", "官职"],
          sheetHeader: [
            "序号",
            "姓名",
            "别名",
            "性别",
            "别名",
            "时期",
            "生年",
            "卒年",
            "籍贯",
            "社会身份",
            "官职",
          ],
                    //   excel文件列名
                    sheetFilter: ["序号", "姓名", "别名", "性别", "别名", "时期", "生年", "卒年", "籍贯", "社会身份", "官职"],
          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 => {
      await getHotSearch().then((res) => {
        console.log(res, "热门搜索");
        this.hot = Object.keys(res.object).map((key) => {
                        return {
                            id: parseInt(key),
                            name: res.object[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);
      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 === '职业');
        const professionIndex = this.from.from.findIndex(
          (field) => field.label === "职业"
        );
                    // 如果找到了职业字段
                    if (professionIndex !== -1) {
                        // 将 profession.list 转换为 options 格式
                        const options = this.profession.list.map(item => ({
          const options = this.profession.list.map((item) => ({
                            label: item.tagName,
                            value: item.tagId.toString() // 将 id 转换为字符串，确保与 value 类型一致
            value: item.tagId.toString(), // 将 id 转换为字符串，确保与 value 类型一致
                        }));

                        // 更新职业字段的 options 属性
                        this.$set(this.from.from[professionIndex], 'options', options);
          this.$set(this.from.from[professionIndex], "options", options);
                    }
                    // --------------------------------------------------
                    this.profession.index = this.profession.list[0].tagId
        this.profession.index = this.profession.list[0].tagId;
                    // 时期
                    this.dynasty.list = [
                        ...res.object.dynastyStatistic.details
                    ]
          { count: totalCount2, dynastyName: "全部", dynastyId: "" },
          ...res.object.dynastyStatistic.details,
        ];
                    // 来源
                    this.source.list = res.object.sourceStatistic.details
                    this.source.index = this.source.list[0].bookId
                })
        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, '热门搜索');
      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
      //   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('来源');

      } else if (name == "c") {
        this.source.index = item.bookId;
        this.source.id = item.bookId;
        this.CurrentPage = 1;
        console.log("来源");
                }
                this.onSearch('')

      this.onSearch("");

                console.log(item, name);
            },
            isAvancedClick() {
                this.isAdvancedSearch = !this.isAdvancedSearch
      this.isAdvancedSearch = !this.isAdvancedSearch;
                this.$nextTick(() => {
                    var box1Height = document.querySelector('.fbox').offsetHeight;
        var box1Height = document.querySelector(".fbox").offsetHeight;
                    // let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px';
                    let box2Height = document.querySelector('.fbox1').offsetHeight
        let box2Height = document.querySelector(".fbox1").offsetHeight;
                    console.log(box1Height, box2Height);
                    if (box1Height <= box2Height) {
                        document.querySelector('.fbox1').style.height = box1Height + 'px';
          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
      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;
                }

      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 getPList(Obj).then(res => {
      await getPersonList(Obj).then((res) => {
                    console.log(res);
                    if (res.success) {
                        console.log(res, '搜索接口');
                        this.tableData = res.list
          console.log(res, "搜索接口");
          this.tableData = res.list;
                        // 总数量
                        this.total = res.npage.totalCount
          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
                }
        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 => {
      await getPersonList(Obj).then((res) => {
                    if (res.success) {
                        console.log(res, '搜索接口');
                        this.tableData = res.list
          console.log(res, "搜索接口");
          this.tableData = res.list;
                        // 总数量
                        this.total = res.npage.totalCount
          this.total = res.npage.totalCount;
                    }
                })
      });
                // console.log(val, '士大夫但是');
            },
            // 热门搜索
            HotClick(id) {
                this.hot.forEach(item => {
      this.hot.forEach((item) => {
                    if (item.id === id) {
                        console.log(item.id === id);
                        item.bgColor = true
          item.bgColor = true;
                    } else {
                        console.log(item.id === id);
                        item.bgColor = false
          item.bgColor = false;
                    }
                })

      });
            },
            // 展开收缩
            shrinkClick(box, name) {
@@ -491,68 +672,72 @@
                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';
      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';
        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('')
        this.CurrentPage = val;
        console.log("当前页", val);
        this.onSearch("");
                }
            },
            // 上一页
            PrevClick(val) {
                if (this.CurrentPage != val) {
                    this.CurrentPage = val
        this.CurrentPage = val;
                    // console.log('上一页', val);
                    // console.log(this.CurrentPage);
                    this.onSearch('')
        this.onSearch("");
                }
            },
            // 下一页
            NextClick(val) {
                if (this.CurrentPage != val) {
                    // console.log('下一页',val);
                    this.CurrentPage = val
        this.CurrentPage = val;
                    // console.log(this.CurrentPage);
                    this.onSearch('')
        this.onSearch("");
                }
            }
        }
    }
    },
  },
};
</script>

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

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

    }

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

    ::v-deep .el-table::before {
@@ -562,10 +747,10 @@

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

@@ -581,87 +766,83 @@

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

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

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

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

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

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

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

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

                .cell {

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

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

                .cell {

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

        }
    }

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

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

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

        .Search ::v-deep .flex-center {
@@ -669,12 +850,12 @@
        }

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

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

@@ -684,33 +865,33 @@
        }

        .advancedSeaTrue1 {
            padding: .08rem .19rem !important;
            font-size: .14rem !important;
    padding: 0.08rem 0.19rem !important;
    font-size: 0.14rem !important;
        }

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

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

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

        ::v-deep .el-input__inner {
            font-size: .14rem !important;
            height: .3rem !important;
    font-size: 0.14rem !important;
    height: 0.3rem !important;
        }

        ::v-deep .Formbtn {
@@ -720,60 +901,59 @@
            align-items: center;

            .el-button {
                width: .7rem !important;
                height: .3rem !important;
                font-size: .12rem;

      width: 0.7rem !important;
      height: 0.3rem !important;
      font-size: 0.12rem;
            }
        }

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

            ul {
                margin-top: .16rem !important;
      margin-top: 0.16rem !important;
            }

            h3 {
                font-size: .14rem;
                margin-left: .1rem;
      font-size: 0.14rem;
      margin-left: 0.1rem;
            }

            li {
                height: .3rem;
                line-height: .3rem;
                padding: 0 .2rem !important;
                margin: .05rem 0 !important;
                border-radius: .3rem !important;

      height: 0.3rem;
      line-height: 0.3rem;
      padding: 0 0.2rem !important;
      margin: 0.05rem 0 !important;
      border-radius: 0.3rem !important;
            }

            .toggleButton1 {
                position: absolute;
                bottom: .1rem !important;
      bottom: 0.1rem !important;
                left: 40% !important;
            }

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

        .zhongjianleft {
            margin: .27rem 0 !important;
    margin: 0.27rem 0 !important;
        }

        .laiyuan {
            min-height: 2rem !important;
    overflow: auto;
        }

        /* ———————————————————— */
        ::v-deep .uni-input-placeholder {
            font-size: .14rem;
    font-size: 0.14rem;
            height: 100%;
            display: flex;
            align-content: center;
@@ -781,78 +961,72 @@
        }

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

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



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

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

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

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

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

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

                    .cell {

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

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

                    .cell {

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

            }
        }
    }

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

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

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

        .Search ::v-deep .flex-center {
@@ -860,16 +1034,16 @@
        }

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

            li {
                font-size: .12rem !important;
                margin: 0 .1rem;
      font-size: 0.12rem !important;
      margin: 0 0.1rem;
            }
        }
        .advancedSeaTrue1{
            border: 1px solid #C1D3EA;
    border: 1px solid #c1d3ea;
        }
        .advancedSeaTrue,
        .zhushuju {
@@ -877,33 +1051,33 @@
        }

        .advancedSeaTrue1 {
            padding: .08rem .19rem !important;
            font-size: .14rem !important;
    padding: 0.08rem 0.19rem !important;
    font-size: 0.14rem !important;
        }

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

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

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

        ::v-deep .el-input__inner {
            font-size: .14rem !important;
            height: .3rem !important;
    font-size: 0.14rem !important;
    height: 0.3rem !important;
        }

        ::v-deep .Formbtn {
@@ -913,61 +1087,60 @@
            align-items: center;

            .el-button {
                width: .7rem !important;
                height: .3rem !important;
                font-size: .12rem;

      width: 0.7rem !important;
      height: 0.3rem !important;
      font-size: 0.12rem;
            }
        }

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

            ul {
                margin-top: .16rem !important;
                margin-bottom: .2rem !important;
      margin-top: 0.16rem !important;
      margin-bottom: 0.2rem !important;
            }

            h3 {
                font-size: .14rem;
                margin-left: .1rem;
      font-size: 0.14rem;
      margin-left: 0.1rem;
            }

            li {
                height: .3rem;
                line-height: .3rem;
                padding: 0 .2rem !important;
                margin: .05rem 0 !important;
                border-radius: .3rem !important;

      height: 0.3rem;
      line-height: 0.3rem;
      padding: 0 0.2rem !important;
      margin: 0.05rem 0 !important;
      border-radius: 0.3rem !important;
            }

            .toggleButton1 {
                position: absolute;
                bottom: .1rem !important;
      bottom: 0.1rem !important;
                left: 40% !important;
            }

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

        .zhongjianleft {
            margin: .27rem 0 !important;
    margin: 0.27rem 0 !important;
        }

        .laiyuan {
            min-height: 2rem !important;
    overflow: auto;
        }

        /* ———————————————————— */
        ::v-deep .uni-input-placeholder {
            font-size: .14rem;
    font-size: 0.14rem;
            height: 100%;
            display: flex;
            align-content: center;
@@ -975,63 +1148,60 @@
        }

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

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

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

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

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

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

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

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

                    .cell {

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

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

                    .cell {

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

            }
        }
    }
@@ -1041,12 +1211,12 @@
    }

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

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

@@ -1063,43 +1233,42 @@
        /* 添加过渡效果 */
        overflow: hidden;
        /* 避免内容溢出 */

    }

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

        ul {
            margin-top: .16rem !important;
    margin-top: 0.16rem !important;
        }

        h3 {
            font-size: .14rem;
            margin-left: .1rem;
    font-size: 0.14rem;
    margin-left: 0.1rem;
        }

        li {
            height: .3rem;
            line-height: .3rem;
            padding: 0 .2rem !important;
            margin: .05rem 0 !important;
            border-radius: .3rem !important;
            font-size: .14rem;
    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;
        }

        .toggleButton1 {
            position: absolute;
            bottom: .1rem !important;
    bottom: 0.1rem !important;
            left: 40% !important;
        }

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


 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 {