1

YM

2024-07-26 c423765d8a5ff0c58d23bb0a31af7df6c1fad95c

1

 src/pages/Login/Login.vue

@@ -1,49 +1,35 @@
<template>
  <view class="container flex flex-center" style="align-items: flex-start">
    <view class="repository relative">
      <view
        class="Ttop flex flex-center flex-wrap"
        style="flex-direction: column"
      >
        <view ></view>
        <view  ref="Rtop">
      <view class="Ttop flex flex-center flex-wrap" style="flex-direction: column">
        <view></view>
        <view ref="Rtop">
          <text class="login"></text>
          <text
            style="
          <text style="
              font-size: 0.36rem;
              letter-spacing: 4rpx;
              vertical-align: middle;
              font-family: cursive;
              font-weight: bold;
            "
            >中国历代医学人物知识库</text
          >
            ">中国历代医学人物知识库</text>
        </view>
        <view></view>
      </view>
      <el-card>
        <!-- 用户登录   v-if="isLogin"-->
        <view
          class="LoginTop"
          style="
        <view class="LoginTop" style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.47rem;
            align-items: center;
          "
        >
          ">
          <!-- <view style="color: #244A7B;padding-bottom: .47rem;font-size: .3rem;font-weight: bold;">用户登录</view> -->
          <view class="LoginBg"></view>
          <view > </view>
          <view> </view>
        </view>

        <el-form
          :hide-required-asterisk="true"
          ref="formLogin1"
          label-position="top"
          :rules="rules1"
          :model="loginData"
        >
        <el-form :hide-required-asterisk="true" ref="formLogin1" label-position="top" :rules="rules1"
          :model="loginData">
          <el-form-item label="登录账号" prop="loginID">
            <input v-model="loginData.loginID" @confirm="Login('formLogin1')"></input>
          </el-form-item>
@@ -51,9 +37,7 @@
            <input type="password" v-model="loginData.pass" @confirm="Login('formLogin1')"></input>
          </el-form-item>
          <el-form-item class="btn">
            <el-button
              class="font-family"
              style="
            <el-button class="font-family" style="
                margin-top: 0.47rem;
                font-weight: 900;
                font-size: 0.3rem;
@@ -61,30 +45,15 @@
                background-color: #244a7b;
                color: #fff;
                padding: 0.16rem;
              "
              size="medium"
              @click="Login('formLogin1')"
              >登录</el-button
            >
              " size="medium" @click="Login('formLogin1')">登录</el-button>
          </el-form-item>
          <view
            
            style="display: flex; font-size: 0.14rem; color: #244a7b"
          >
            <view
              
              style="display: inline-block; cursor: pointer"
              @click="forgetPass"
              >忘记密码
          <view style="display: flex; font-size: 0.14rem; color: #244a7b">
            <view style="display: inline-block; cursor: pointer" @click="forgetPass">忘记密码
            </view>
            <view  style="display: inline-block; margin: 0 20rpx">
            <view style="display: inline-block; margin: 0 20rpx">
              |
            </view>
            <view
              
              style="display: inline-block; cursor: pointer"
              @click="quickRegister"
              >快速注册
            <view style="display: inline-block; cursor: pointer" @click="quickRegister">快速注册
            </view>
          </view>
        </el-form>
@@ -101,271 +70,271 @@
</template>

<script>
import { encryptAES, decryptAES } from "@/utils/Crypto.js";
import { nextTick } from "vue";
import { getLogin, getUserInfo } from "@/api/index.js";
import Footer1 from "@/components/footer/footer.vue";
export default {
  components: {
    Footer1
  },
  data() {
    // 密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerData.checkPass !== "") {
          this.$nextTick(() => {
            this.$refs.formLogin.validateField("checkPass");
  import { encryptAES, decryptAES } from "@/utils/Crypto.js";
  import { nextTick } from "vue";
  import { getLogin, getUserInfo } from "@/api/index.js";
  import Footer1 from "@/components/footer/footer.vue";
  export default {
    components: {
      Footer1
    },
    data() {
      // 密码
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (this.registerData.checkPass !== "") {
            this.$nextTick(() => {
              this.$refs.formLogin.validateField("checkPass");
            });
          }
          callback();
        }
      };
      // 确认密码
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.registerData.pass) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        // 用户注册
        isRegister: false,
        // 用户登录
        isLogin: true,
        // 修改密码
        isAmendPass: false,
        // 重置密码
        isResetPass: false,
        // 注册用户账号的校验
        rules: {
          loginID: [
            {
              required: true,
              message: "请输入登录账号",
              trigger: "blur"
            }
          ],
          pass: [
            {
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              min: 6,
              max: 12,
              message: "密码长度在 6 到 12 个字符",
              trigger: "blur"
            },
            {
              validator: validatePass,
              trigger: "blur"
            }
          ],
          checkPass: [
            {
              validator: validatePass2,
              trigger: "blur"
            }
          ],
          cellphoneORmailbox: [
            {
              required: true,
              message: "请输入邮箱地址",
              trigger: "blur"
            },
            {
              type: "email",
              message: "请输入正确的邮箱地址",
              trigger: ["blur", "change"]
            }
          ],
          verifyCode: [
            {
              required: true,
              message: "请输入验证码",
              trigger: "blur"
            },
            {
              validator: (rule, value, callback) =>
                this.validateVerificationCode(rule, value, callback),
              trigger: "blur"
            }
          ]
        },
        rules1: {
          loginID: [
            {
              required: true,
              message: "请输入登录账号",
              trigger: "blur"
            }
          ],
          pass: [
            {
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              min: 6,
              max: 12,
              message: "密码长度在 6 到 12 个字符",
              trigger: "blur"
            }
          ]
        },

        // 登录注册框
        loginTrue: true,
        Rtop1: 0,
        value: "sdfdsf",
        // 登录用户账号
        loginData: {
          // 账号
          loginID: "",
          pass: ""
        },
        // 书籍数据
        listData: [
          {
            name: "历代人物",
            id: 1
          },
          {
            name: "家学传承",
            id: 2
          },
          {
            name: "学术图谱",
            id: 6
          },
          {
            name: "学术流派",
            id: 3
          },
          {
            name: "地域图谱",
            id: 4
          },
          // {
          //   name: "中医医事制度",
          //   id: 5
          // }
        ]
      };
    },
    onLoad() {
      uni.getSystemInfo({
        success: function (info) {
          // console.log('屏幕的宽度：' + info.windowWidth);
          // console.log('屏幕的高度：' + info.windowHeight);
        }
      });
    },
    mounted() {
      this.getElementWidth();
    },
    methods: {
      // 列表项跳转
      listDataClick(item) {
        // 在当前页面设置全局变量
        // uni.setStorageSync('globalData', { id: 123, name: 'example' });
        if (item.id == 1) {
          uni.navigateTo({
            url: "/pages/character/detail?id=" + item.id
          });
        } else if (item.id == 2) {
          // uni.navigateTo({
          //     url:'/pages/character/detail?id='+item.id
          // })
        } else if (item.id == 3) {
          uni.navigateTo({
            url: "/pages/academicGenres/index?id=" + item.id
          });
        } else if (item.id == 4) {
          uni.navigateTo({
            url: "/pages/territory/territory?id=" + item.id
          });
        } else if (item.id == 5) {
          uni.navigateTo({
            url: "/pages/TcmSystem/TcmSystem?id=" + item.id
          });
        }
        callback();
      }
    };
    // 确认密码
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerData.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 用户注册
      isRegister: false,
      // 用户登录
      isLogin: true,
      // 修改密码
      isAmendPass: false,
      // 重置密码
      isResetPass: false,
      // 注册用户账号的校验
      rules: {
        loginID: [
          {
            required: true,
            message: "请输入登录账号",
            trigger: "blur"
          }
        ],
        pass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 12,
            message: "密码长度在 6 到 12 个字符",
            trigger: "blur"
          },
          {
            validator: validatePass,
            trigger: "blur"
          }
        ],
        checkPass: [
          {
            validator: validatePass2,
            trigger: "blur"
          }
        ],
        cellphoneORmailbox: [
          {
            required: true,
            message: "请输入邮箱地址",
            trigger: "blur"
          },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        verifyCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          },
          {
            validator: (rule, value, callback) =>
              this.validateVerificationCode(rule, value, callback),
            trigger: "blur"
          }
        ]
      },
      rules1: {
        loginID: [
          {
            required: true,
            message: "请输入登录账号",
            trigger: "blur"
          }
        ],
        pass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 12,
            message: "密码长度在 6 到 12 个字符",
            trigger: "blur"
          }
        ]
      },

      // 登录注册框
      loginTrue: true,
      Rtop1: 0,
      value: "sdfdsf",
      // 登录用户账号
      loginData: {
        // 账号
        loginID: "",
        pass: ""
      },
      // 书籍数据
      listData: [
        {
          name: "历代人物",
          id: 1
        },
        {
          name: "家学传承",
          id: 2
        },
        {
          name: "学术图谱",
          id: 6
        },
        {
          name: "学术流派",
          id: 3
        },
        {
          name: "地域图谱",
          id: 4
        },
        // {
        //   name: "中医医事制度",
        //   id: 5
        // }
      ]
    };
  },
  onLoad() {
    uni.getSystemInfo({
      success: function (info) {
        // console.log('屏幕的宽度：' + info.windowWidth);
        // console.log('屏幕的高度：' + info.windowHeight);
      }
    });
  },
  mounted() {
    this.getElementWidth();
  },
  methods: {
    // 列表项跳转
    listDataClick(item) {
      // 在当前页面设置全局变量
      // uni.setStorageSync('globalData', { id: 123, name: 'example' });
      if (item.id == 1) {
        uni.navigateTo({
          url: "/pages/character/detail?id=" + item.id
        });
      } else if (item.id == 2) {
        // uni.navigateTo({
        //     url:'/pages/character/detail?id='+item.id
        // })
      } else if (item.id == 3) {
        uni.navigateTo({
          url: "/pages/academicGenres/index?id=" + item.id
        });
      } else if (item.id == 4) {
        uni.navigateTo({
          url: "/pages/territory/territory?id=" + item.id
        });
      } else if (item.id == 5) {
        uni.navigateTo({
          url: "/pages/TcmSystem/TcmSystem?id=" + item.id
        });
      }
    },
    // 忘记密码
    forgetPass() {
      uni.redirectTo({
        url: "/pages/forgetPass/forgetPass"
      });
    },
    // 快速注册
    quickRegister() {
      uni.redirectTo({
        url: "/pages/Register/Register"
      });
    },
    // 验证码校验
    validateVerificationCode(rule, value, callback) {
      if (value !== "123456") {
        callback(new Error("验证码错误"));
      } else {
        callback();
      }
    },
    getElementWidth() {
      this.$nextTick(() => {
        var width = this.$refs.Rtop.$el.clientWidth;
        this.Rtop1 = width + 50;
      });
    },
    // 用户登录
    async Login(formName) {
      let Obj = {
        username: this.loginData.loginID,
        // encryptAES(this.loginData.pass) | this.loginData.pass
        password: encryptAES(this.loginData.pass)
      };
      let res = await getLogin(Obj);
      if (res.success) {
        this.$message.success("登录成功");
        // 将token存储再本地中
        window.localStorage.setItem("access_token", res.results.token);
        // await getUserInfo().then((res) => {
        // });
        // 将账号存入到vuex中
        this.$store.dispatch("setUserName", res.object.username);
      // 忘记密码
      forgetPass() {
        uni.redirectTo({
          url: "/pages/index/index"
          url: "/pages/forgetPass/forgetPass"
        });
      } else {
        this.$message.error(res.errorText);
        this.loginData.pass = "";
      }
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert('submit!成功');
          // uni.redirectTo({
          //     url: '/pages/index/index'
          // })
      },
      // 快速注册
      quickRegister() {
        uni.redirectTo({
          url: "/pages/Register/Register"
        });
      },
      // 验证码校验
      validateVerificationCode(rule, value, callback) {
        if (value !== "123456") {
          callback(new Error("验证码错误"));
        } else {
          console.log("error submit!!失败");
          return false;
          callback();
        }
      });
      },
      getElementWidth() {
        this.$nextTick(() => {
          var width = this.$refs.Rtop.$el.clientWidth;
          this.Rtop1 = width + 50;
        });
      },
      // 用户登录
      async Login(formName) {
        let Obj = {
          username: this.loginData.loginID,
          // encryptAES(this.loginData.pass) | this.loginData.pass
          password: encryptAES(this.loginData.pass)
        };
        let res = await getLogin(Obj);
        if (res.success) {
          this.$message.success("登录成功");
          // 将token存储再本地中
          window.localStorage.setItem("access_token", res.results.token);
          // await getUserInfo().then((res) => {
          // });
          // 将账号存入到vuex中
          this.$store.dispatch("setUserName", res.object.username);
          uni.redirectTo({
            url: "/pages/index/index"
          });
        } else {
          this.$message.error(res.errorText);
          this.loginData.pass = "";
        }
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            // alert('submit!成功');
            // uni.redirectTo({
            //     url: '/pages/index/index'
            // })
          } else {
            console.log("error submit!!失败");
            return false;
          }
        });
      }
    }
  }
};
  };
</script>

<style scoped>
/*     @media screen and (max-width:1366px) {
  /*     @media screen and (max-width:1366px) {
        ::v-deep .el-card {
            top: 50% !important;
        }
@@ -417,11 +386,11 @@
        }
    } */

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

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

/*     @media screen and (min-width:2560px)and (max-width:3840px) {
  /*     @media screen and (min-width:2560px)and (max-width:3840px) {
        .LoginBg {
            margin: 0 !important;
        }
@@ -546,87 +515,87 @@

    } */

.LoginBg {
  width: 1.2rem;
  height: 0.37rem;
  background: url(@/static/image/用户登录.png) no-repeat 0 0;
  background-size: 100%;
  margin-bottom: 0.47rem;
}
  .LoginBg {
    width: 1.2rem;
    height: 0.37rem;
    background: url(@/static/image/用户登录.png) no-repeat 0 0;
    background-size: 100%;
    margin-bottom: 0.47rem;
  }

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

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

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

::v-deep uni-input {
  border: none;
  border-bottom: 1px solid #2d476a;
  border-radius: 0;
}
  ::v-deep uni-input {
    border: none;
    border-bottom: 1px solid #2d476a;
    border-radius: 0;
  }

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

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

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

::v-deep .el-form-item__label {
  padding: 0;
  color: #244a7b;
  font-size: 0.14rem;
  font-weight: 500;
}
  ::v-deep .el-form-item__label {
    padding: 0;
    color: #244a7b;
    font-size: 0.14rem;
    font-weight: 500;
  }

::v-deep .el-form-item {
  margin-bottom: 0.25rem;
}
  ::v-deep .el-form-item {
    margin-bottom: 0.25rem;
  }

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

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

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

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

.container {
  background: url(@/static/image/bg1.png);
  width: 100vw;
  height: 100vh;
  .container {
    background: url(@/static/image/bg1.png);
    width: 100vw;
    height: 100vh;
    color: #fff;
  }

  color: #fff;

  .repository {
  .container .repository {
    width: 100% !important;
    /* margin-top: 19px; */
    /* height: 68%; */
@@ -635,73 +604,77 @@
    justify-content: space-around;
    align-items: center;

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

    .r-top {
      font-size: 40rpx !important;
      margin: 10rpx 0;
    }
  }
}

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

.rrr {
  position: absolute;
  right: 0.53rem;
  bottom: 0.36rem;
  width: 2.5rem;
  height: 3.07rem;
  opacity: 1;
  background: url(@/static/image/bg4.png);
  background-size: 100% 100%;
}
  .container .repository .r-top {
    font-size: 40rpx !important;
    margin: 10rpx 0;
  }

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

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

::v-deep .uni-easyinput__content {
  border-radius: 30rpx !important;
  /* height: 52rpx; */
}
  .hua {
    width: 13.81rem;
    height: 5.965rem;
    position: absolute;
    background: url(@/static/image/bg3.png) no-repeat 0 0;
    background-size: 100% 100%;
  }

.secretary {
  width: 1300rpx !important;
  height: 50rpx;
  /* height: 80%; */
  /* flex-wrap: wrap; */
  padding: 0 20px;
  text-align: center;
  /* 底部人物背景图  */
  .fff {
    background: url(@/static/image/bg2.png) no-repeat 0 0;
    background-size: 100% 100%;
    width: 2.74rem;
    height: 4.52rem;
    position: fixed;
    bottom: 0;
    z-index: 9999999999999;
    left: 0;
  }

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

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


  }

  .secretary li {
    background-color: #fff;
    color: black;
    height: 600rpx;
@@ -715,86 +688,85 @@
    text-align: center;
    background: #ebf4ff;
  }
}

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

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

::v-deep .el-card {
  top: 85% !important;
}
  ::v-deep .el-card {
    top: 85% !important;
  }

::v-deep uni-input {
  height: 0.4rem !important;
  font-size: 0.14rem;
}
  ::v-deep uni-input {
    height: 0.4rem !important;
    font-size: 0.14rem;
  }

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

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

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

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

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

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

::v-deep uni-input {
  height: 0.44rem !important;
}
  ::v-deep uni-input {
    height: 0.44rem !important;
  }

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

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

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

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

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

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

.asdf {
  margin-bottom: 0.1rem !important;
}
</style>
  .asdf {
    margin-bottom: 0.1rem !important;
  }
</style>

 src/pages/Register/Register.vue

@@ -131,7 +131,10 @@
              margin-bottom: 0.19rem;
            "
          >
            <el-checkbox v-model="checked" style="margin-right: 0.06rem;"></el-checkbox>
            <el-checkbox
              v-model="checked"
              style="margin-right: 0.06rem"
            ></el-checkbox>
            用户注册即代表同意
            <span
              class="cursor"
@@ -311,7 +314,7 @@
        {
          name: "地域图谱",
          id: 4
        },
        }
        // {
        //   name: "中医医事制度",
        //   id: 5
@@ -390,10 +393,10 @@
    },
    // 用户注册
    async Login(formName) {
      if(!this.checked) {
      if (!this.checked) {
        this.$message({
          message: '请勾选同意服务条款、用户隐私保护和个人信息条款',
          type: 'warning'
          message: "请勾选同意服务条款、用户隐私保护和个人信息条款",
          type: "warning"
        });
        return false;
      }
@@ -870,26 +873,24 @@
  height: 100vh;

  color: #fff;
}
.container .repository {
  width: 100% !important;
  /* margin-top: 19px; */
  /* height: 68%; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.container .repository .Ttop {
  margin-top: 0.38rem;
  margin-bottom: 1.22rem;
}

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

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

    .r-top {
      font-size: 40rpx !important;
      margin: 10rpx 0;
    }
  }
.container .repository .r-top {
  font-size: 40rpx !important;
  margin: 10rpx 0;
}

.login {
@@ -946,20 +947,20 @@
  padding: 0 20px;
  text-align: center;

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

.Bbottom {

 src/pages/TcmSystem/TcmSystem.vue

@@ -847,58 +847,55 @@
  background-color: #0c274c;
  padding: 25rpx;
  color: #fff !important;
}
.NavTop img {
  width: 30rpx;
  height: 30rpx;
  vertical-align: middle;
}

.NavTop .NavTopr {
  img {
    width: 30rpx;
    height: 30rpx;
    vertical-align: middle;
  }

  .NavTopr {
    img {
      margin-right: 10rpx;
    }
    margin-right: 10rpx;
  }
}

.mImage {
  width: 100%;
  height: 40rpx;

  img {
    vertical-align: top;
  }
}
.mImage img {
  vertical-align: top;
}

.centre {
  padding-left: 1.23rem;
  padding-right: 1.17rem;
  align-items: stretch;
}
.centre .CLeft {
  width: 2.4rem;
  flex-direction: column;
  margin-right: 0.2rem;
}
.centre .CLeft .institution {
  width: 100%;
  border: 1px solid #000;
  padding: 20rpx;
}
.centre .CLeft .institution2 {
  margin: 20rpx 0;
}
.centre .CLeft .institution3 {
  flex-grow: 1;
}

  .CLeft {
    width: 2.4rem;
    flex-direction: column;
    margin-right: 0.2rem;
    .institution {
      width: 100%;
      border: 1px solid #000;
      padding: 20rpx;
    }
    .institution2 {
      margin: 20rpx 0;
    }
    .institution3 {
      flex-grow: 1;
    }
  }

  .CRight {
    flex: 1;
    border: 1px solid #c1d3ea;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0.1rem 0.2rem;
  }
.centre .CRight {
  flex: 1;
  border: 1px solid #c1d3ea;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0.1rem 0.2rem;
}

.CommodityList {
@@ -911,15 +908,15 @@
  align-content: flex-start;
  /* padding: 20rpx 20rpx 0 20rpx; */
  justify-content: space-between;
}

  > .rightList {
    width: 49%;
    margin-bottom: 20rpx;
.CommodityList .rightList {
  width: 49%;
  margin-bottom: 20rpx;
}

    .box-card {
      overflow: visible;
    }
  }
.CommodityList .rightList .box-card {
  overflow: visible;
}

/* ::v-deep .el-card__body{
@@ -965,21 +962,22 @@
  right: 0;
  top: 0;
  z-index: 99999 !important;
  > div {
    height: 100%;
    margin: 0 !important;
    position: fixed;
    right: 0;
    top: 86px;
}

    > :nth-child(1) {
      display: none;
    }
.dialog div {
  height: 100%;
  margin: 0 !important;
  position: fixed;
  right: 0;
  top: 86px;
}

    > :nth-child(2) {
      padding: 0;
    }
  }
.dialog div:nth-child(1) {
  display: none;
}

.dialog div:nth-child(2) {
  padding: 0;
}

::v-deep .el-dialog .el-dialog__body {
@@ -990,13 +988,12 @@
  width: 100%;
  height: 1.94rem;
  color: #000;

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    vertical-align: top;
  }
}
.detailImage img {
  position: absolute;
  width: 100%;
  height: 100%;
  vertical-align: top;
}

/* 搜索按钮 */
@@ -1111,34 +1108,33 @@
  min-height: 2rem !important;
  position: relative;
  border: 1px solid #c1d3ea !important;
}
.boox ul {
  margin-top: 0.16rem !important;
}

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

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

  li {
    height: 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;
  }
.boox .toggleButton1 {
  position: absolute;
  bottom: 0.1rem !important;
  left: 40% !important;
}

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

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

.paixu {
@@ -1227,27 +1223,27 @@
  padding: 0.14rem 0.2rem 0.23rem;

  /* position: relative; */
  .biecheng {
    height: 0.24rem;
    /* line-height: .24rem; */
    font-size: 0.12rem;
    padding-left: 0.1rem;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    margin-bottom: 0.12rem;
  }
}
.rightList .desBox .biecheng {
  height: 0.24rem;
  /* line-height: .24rem; */
  font-size: 0.12rem;
  padding-left: 0.1rem;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  margin-bottom: 0.12rem;
}

  .describe {
    position: absolute;
    bottom: 0.1rem;
    left: 0;
    /* width: 100%; */
    padding: 0 0.23rem;
    height: 0.49rem;
    line-height: 0.24rem;
    font-size: 0.12rem;
  }
.rightList .desBox .describe {
  position: absolute;
  bottom: 0.1rem;
  left: 0;
  /* width: 100%; */
  padding: 0 0.23rem;
  height: 0.49rem;
  line-height: 0.24rem;
  font-size: 0.12rem;
}

.nullBox {

 src/pages/character/detail.vue

@@ -1314,17 +1314,15 @@
<style>
/* Table1表格里面的数据 */
::v-deep .is-leaf .cell {
    font-size: 0.14rem !important;
    height: 0.4rem !important;
    line-height: 0.4rem !important;
  }
  font-size: 0.14rem !important;
  height: 0.4rem !important;
  line-height: 0.4rem !important;
}

::v-deep .el-table__body .cell {
    font-size: 0.14rem !important;
    height: 0.4rem !important;
    line-height: 0.4rem !important;
  }
  font-size: 0.14rem !important;
  height: 0.4rem !important;
  line-height: 0.4rem !important;
}

/* --------------- */
@@ -1340,8 +1338,6 @@
.BoxRight {
  width: 70%;
}



/* 个人小传 ------------------*/
::v-deep .el-dialog__header {
@@ -1371,7 +1367,6 @@
  background-color: #0c274c;
  padding: 15rpx 25rpx;
  color: #fff !important;

}
.NavTop img {
  width: 30rpx;
@@ -1388,7 +1383,6 @@
.mImage {
  width: 100%;
  height: 30rpx;

}
.mImage img {
  vertical-align: top;
@@ -1401,7 +1395,6 @@
  color: #000;
  align-items: flex-start;
  padding: 0.18rem 0.24rem;

}
.Midde view {
  color: #000;
@@ -1417,7 +1410,6 @@

.yinyong {
  font-size: 0.12rem;

}
.yinyong img {
  width: 0.12rem;

 src/pages/knowledgeBase/knowledgeBase.vue

@@ -865,43 +865,42 @@
/* 右侧 */
.rightList {
  padding-left: 0.2rem !important;
}
.rightList .light {
  padding: 0.1rem 0.2rem !important;
}

  .light {
    padding: 0.1rem 0.2rem !important;
  }
.rightList .lightTop {
  font-size: 0.14rem !important;
}

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

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

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

  .lightBo .is-leaf {
    background-color: #c1d3ea !important;
    color: #2c2c2c !important;
    font-weight: 400;
  }
.rightList .lightBo .is-leaf .cell {
  height: 0.3rem !important;
  line-height: 0.3rem !important;
}

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

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

@media screen and (min-width: 2560px) and (max-width: 3840px) {
@@ -923,11 +922,11 @@
  .hotSearch {
    font-size: 0.12rem !important;
    margin-bottom: 0.19rem !important;
  }

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

  .advancedSeaTrue,
@@ -984,33 +983,32 @@
    padding: 0.1rem 0.09rem;
    min-height: 2rem !important;
    position: relative;
  }
  .boox ul {
    margin-top: 0.16rem !important;
  }

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

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

    li {
      height: 0.3rem;
      line-height: 0.3rem;
      padding: 0 0.2rem !important;
      margin: 0.05rem 0 !important;
      border-radius: 0.3rem !important;
    }
  .boox .toggleButton1 {
    position: absolute;
    bottom: 0.1rem !important;
    left: 40% !important;
  }

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

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

  .zhongjianleft {
@@ -1045,46 +1043,42 @@
  /* 右侧 */
  .rightList {
    padding-left: 0.2rem !important;
  }
  .rightList .light {
    padding: 0.1rem 0.2rem !important;
  }

    .light {
      padding: 0.1rem 0.2rem !important;
    }
  .rightList .lightTop {
    font-size: 0.14rem !important;
  }

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

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

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

      .is-leaf {
        background-color: #c1d3ea !important;
        color: #2c2c2c !important;
        font-weight: 400;
  .rightList .lightBo .is-leaf .cell {
    height: 0.3rem !important;
    line-height: 0.3rem !important;
  }

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

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

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

@@ -1107,11 +1101,11 @@
  .hotSearch {
    font-size: 0.12rem !important;
    margin-bottom: 0.19rem !important;
  }

    li {
      font-size: 0.12rem !important;
      margin: 0 0.1rem;
    }
  .hotSearch li {
    font-size: 0.12rem !important;
    margin: 0 0.1rem;
  }
  .advancedSeaTrue1 {
    border: 1px solid #c1d3ea;
@@ -1170,34 +1164,33 @@
    padding: 0.1rem 0.09rem;
    min-height: 2rem !important;
    position: relative;
  }
  .boox ul {
    margin-top: 0.16rem !important;
    margin-bottom: 0.2rem !important;
  }

    ul {
      margin-top: 0.16rem !important;
      margin-bottom: 0.2rem !important;
    }
  .boox h3 {
    font-size: 0.14rem;
    margin-left: 0.1rem;
  }

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

    li {
      height: 0.3rem;
      line-height: 0.3rem;
      padding: 0 0.2rem !important;
      margin: 0.05rem 0 !important;
      border-radius: 0.3rem !important;
    }
  .boox .toggleButton1 {
    position: absolute;
    bottom: 0.1rem !important;
    left: 40% !important;
  }

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

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

  .zhongjianleft {
@@ -1234,46 +1227,42 @@
  .rightList {
    width: 100%;
    padding-left: 0.2rem !important;
  }
  .rightList .light {
    padding: 0.1rem 0.2rem !important;
  }

    .light {
      padding: 0.1rem 0.2rem !important;
    }
  .rightList .lightTop {
    font-size: 0.14rem !important;
  }

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

    .el-button {
      font-size: 0.12rem !important;
      padding: 0.05rem 0.18rem !important;
    }
  .rightList .lightBo {
    font-size: 0.14rem !important;
  }
  .rightList .lightBo .is-leaf {
    background-color: #c1d3ea !important;
    color: #2c2c2c !important;
    font-weight: 400;
  }

    .lightBo {
      font-size: 0.14rem !important;
  .rightList .lightBo .is-leaf .cell {
    height: 0.3rem !important;
    line-height: 0.3rem !important;
  }

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

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

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

        .cell {
          height: 0.3rem !important;
          line-height: 0.3rem !important;
        }
      }
    }
  .rightList .el-table__body-wrapper .el-table__row .cell {
    height: 0.3rem !important;
    line-height: 0.3rem !important;
  }
}

@@ -1284,24 +1273,16 @@
.hotSearch {
  font-size: 0.12rem;
  margin-bottom: 0.19rem;

  li {
    font-size: 0.12rem;
    margin: 0 0.1rem;
    &.active {
      color: #027edc !important;
      font-weight: bold;
    }
  }
}

/*     .a {
        height: 2rem;
    }

    .b {
        height: 100px;
    } */
.hotSearch li {
  font-size: 0.12rem;
  margin: 0 0.1rem;
}
.hotSearch li.active {
  color: #027edc !important;
  font-weight: bold;
}

.box {
  transition: height 0.3s;
@@ -1317,34 +1298,33 @@
  min-height: 2rem !important;
  position: relative;
  border: 1px solid #c1d3ea !important;
}
.boox ul {
  margin-top: 0.16rem !important;
}

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

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

  li {
    height: 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;
  }
.boox .toggleButton1 {
  position: absolute;
  bottom: 0.1rem !important;
  left: 40% !important;
}

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

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

::v-deep .el-table th,

 src/pages/repository/repository.vue

@@ -1,884 +1,1004 @@
<template>
    <view class="relative">
        <headNav :idIndex="idIndex" text="历代人物" />
        <view class="Midde flex">
            <el-button class="MiddeBack flex flex-center" @click="goBack">返回</el-button>
            <view style="width: 70%;" class="flex flex-center flex-column">
                <view  style="font-weight: bold;font-size: .20rem;">李时珍</view>
                <ul class="flex" style="line-height: 1.2;margin: .15rem 0 ;">
                    <li v-for="item in 4"
                        style="background-color: #fff; padding: 0 .08rem ;  border: .01rem solid #000;border-radius:.1rem ;font-size: .12rem;text-align: center;margin-right: .15rem;">
                        VSDS</li>
                </ul>
                <view class="fz font-family"
                    style="font-size: .13rem;font-weight: normal;line-height: .2rem;letter-spacing: .03rem;">
                    李时珍(1518年-1593年)，字:
                    东璧，时人谓之:李东璧。号濒湖，晚年自号濒湖山人，湖北薪州(今湖北省黄冈市薪春县薪州镇)人，汉族，生于明武宗正德十三年(公元1518年)，卒于神宗万历二十二年(公元1593年)。是中国明代与万密斋齐名的医学家、药物学家、博物学家、著述家。李时珍对道家医学的继承是多方面的，曾参考历代有关医药及其学术书籍八百余种，结合自身经验和调查研究，历时27年编成《本草纲目》一书，是我国古代药物学的总结性巨著，在国内外均有很高的评价，已有几种文字的译本或节译本，其著有《濒湖脉学》
                </view>
                <view class="flex" style="width: 100%;margin: .25rem 0 .15rem 0;">
                    <view >
                        <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">收藏</el-button> -->
                        <el-button style="padding: .05rem .085rem;" class="yinyong flex">
                            <img src="@/static/image/yinyong.png" alt="" />引用</el-button>
                    </view>
                    <view  style="font-size: .12rem;color: #244A7B;" @click="ProfileClick">阅读更多></view>
                </view>
            </view>
            <view  style="width: 5%;"></view>
        </view>
        <el-row style="padding: 0 1.2rem 0;padding-top: .24rem;">
            <!-- 左侧 -->
            <el-col :span="5" class="BoxLeft" style="padding-right: .2rem;width: 2.8rem;">
                <div class="grid-content bg-purple-dark flex flex-column">
                    <el-card class="box-card" style="width: 100%;height: 2.06rem;">
                        <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span style="margin-left: .12rem;font-size: .14rem;font-weight: 900;">关系图谱</span>
                            <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0;" type="text"></el-button> -->
                            <img src="@/static/image/fangda.png" @click="fangdaClick(1)"
                                style="width: .18rem;height: .18rem;" alt="" />
                        </div>
                        <view id="relation" style="height: 1.51rem;width: 100%;"></view>
                    </el-card>
                    <el-card class="box-card" style="width: 100%;height: 2.06rem; margin: .26rem 0;">
                        <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span>时空地图</span>
                            <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> -->
                            <img src="@/static/image/fangda.png" @click="fangdaClick(2)"
                                style="width: .18rem;height: .18rem;" alt="" />
                        </div>
                        <view id="spaceTime" style="height: 1.51rem;width: 100%;position: relative;"></view>
                    </el-card>
                    <el-card style="width: 100%;height: 2.06rem;">
                        <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span>来源</span>
                        </div>
                        <ul class="font-family" style="height: 300rpx;font-size: .12rem;line-height: .3rem;">
                            <li>1.《明史·卷二百九十九·列作品. p52</li>
                            <li>2.《进(本草纲目)疏》 p52</li>
                        </ul>
                    </el-card>
                </div>
            </el-col>
            <!-- 右侧 -->
            <el-col :span="18" class="BoxRight">
                <div class="grid-content bg-purple-dark" style="width: 100%;">
                    <el-card class="box-card" style="padding: 0;">
                        <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span>基础信息</span>
                        </div>
                        <!-- 基础信息  -->
                        <cc-defineTable :tableData="tableArr"></cc-defineTable>
                    </el-card>
                    <el-card class="box-card" style=" min-height: 1.91rem; margin: .2rem 0;">
                        <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="代表著作" data-id="1" name="representative">
                                <Table1 :data="tableData" :columns="tableColumns" />
                            </el-tab-pane>
                            <el-tab-pane label="亲属关系" data-id="2" name="family ">
                                亲属关系
                            </el-tab-pane>
                            <el-tab-pane label="师承关系" data-id="3" name="mentoring ">师承关系</el-tab-pane>
                            <el-tab-pane label="社会关系" data-id="4" name="society">社会关系</el-tab-pane>
                            <el-tab-pane label="活动年谱" data-id="5" name="activity">活动年谱</el-tab-pane>
                        </el-tabs>
                    </el-card>
                    <el-card style=" margin-bottom: .2rem ;">
                        <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span>相关附表/图像</span>
                        </div>
                        <view class="flex">
                            <el-image v-for="item in 4" :key="item" style="width: 2.05rem; height: 1.4rem"
                                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                                fit="fill"></el-image>
                        </view>
                    </el-card>
                    <el-card class="box-card">
                        <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
                            <span>相关附表/图像</span>
                        </div>
                        <ul class="font-family" style="font-size: .13rem;line-height: 2;">
                            <li>
                                [1|刘炜,谢蓉,张磊,等.向人文研究的国家数据基础设施建设[J|.中国图书馆学报,2016,42(5):29-39.
                            </li>
                            <li>
                                [2|周晨.国际数字人文研究特征与知识结构|J图书馆论坛2017.37(4):1-8.
                            </li>
                            <li>
                                [3]傅德华,于翠艳,李春博,关于创建“20 世纪中国人物传记资料全文数据库治的构想[川,中国者引,2009,714):24-26.
                            </li>
                            <li>
                                [4|于翠艳,傅德华,李春博,关于“20世纪中国人物传记资料全文数据库治的进展与困惑[J1.中国常引,2012.10111:20-22
                            </li>
                            <li>
                                [5]贾武。《湖南近代人物数据率》资源收录范围研究|J河南图书馆学利,2015,35(7):126.127.140.
                            </li>
                        </ul>
                    </el-card>
                </div>
            </el-col>
        </el-row>
  <view class="relative">
    <headNav :idIndex="idIndex" text="历代人物" />
    <view class="Midde flex">
      <el-button class="MiddeBack flex flex-center" @click="goBack"
        >返回</el-button
      >
      <view style="width: 70%" class="flex flex-center flex-column">
        <view style="font-weight: bold; font-size: 0.2rem">李时珍</view>
        <ul class="flex" style="line-height: 1.2; margin: 0.15rem 0">
          <li
            v-for="item in 4"
            style="
              background-color: #fff;
              padding: 0 0.08rem;
              border: 0.01rem solid #000;
              border-radius: 0.1rem;
              font-size: 0.12rem;
              text-align: center;
              margin-right: 0.15rem;
            "
          >
            VSDS
          </li>
        </ul>
        <view
          class="fz font-family"
          style="
            font-size: 0.13rem;
            font-weight: normal;
            line-height: 0.2rem;
            letter-spacing: 0.03rem;
          "
        >
          李时珍(1518年-1593年)，字:
          东璧，时人谓之:李东璧。号濒湖，晚年自号濒湖山人，湖北薪州(今湖北省黄冈市薪春县薪州镇)人，汉族，生于明武宗正德十三年(公元1518年)，卒于神宗万历二十二年(公元1593年)。是中国明代与万密斋齐名的医学家、药物学家、博物学家、著述家。李时珍对道家医学的继承是多方面的，曾参考历代有关医药及其学术书籍八百余种，结合自身经验和调查研究，历时27年编成《本草纲目》一书，是我国古代药物学的总结性巨著，在国内外均有很高的评价，已有几种文字的译本或节译本，其著有《濒湖脉学》
        </view>
        <view class="flex" style="width: 100%; margin: 0.25rem 0 0.15rem 0">
          <view>
            <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">收藏</el-button> -->
            <el-button style="padding: 0.05rem 0.085rem" class="yinyong flex">
              <img src="@/static/image/yinyong.png" alt="" />引用</el-button
            >
          </view>
          <view style="font-size: 0.12rem; color: #244a7b" @click="ProfileClick"
            >阅读更多></view
          >
        </view>
      </view>
      <view style="width: 5%"></view>
    </view>
    <el-row style="padding: 0 1.2rem 0; padding-top: 0.24rem">
      <!-- 左侧 -->
      <el-col
        :span="5"
        class="BoxLeft"
        style="padding-right: 0.2rem; width: 2.8rem"
      >
        <div class="grid-content bg-purple-dark flex flex-column">
          <el-card class="box-card" style="width: 100%; height: 2.06rem">
            <div
              class="clearfix flex"
              style="
                font-weight: 900;
                font-size: 0.14rem;
                padding-bottom: 0.1rem;
              "
            >
              <span
                style="
                  margin-left: 0.12rem;
                  font-size: 0.14rem;
                  font-weight: 900;
                "
                >关系图谱</span
              >
              <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0;" type="text"></el-button> -->
              <img
                src="@/static/image/fangda.png"
                @click="fangdaClick(1)"
                style="width: 0.18rem; height: 0.18rem"
                alt=""
              />
            </div>
            <view id="relation" style="height: 1.51rem; width: 100%"></view>
          </el-card>
          <el-card
            class="box-card"
            style="width: 100%; height: 2.06rem; margin: 0.26rem 0"
          >
            <div
              class="clearfix flex"
              style="
                font-weight: 900;
                font-size: 0.14rem;
                padding-bottom: 0.1rem;
              "
            >
              <span>时空地图</span>
              <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> -->
              <img
                src="@/static/image/fangda.png"
                @click="fangdaClick(2)"
                style="width: 0.18rem; height: 0.18rem"
                alt=""
              />
            </div>
            <view
              id="spaceTime"
              style="height: 1.51rem; width: 100%; position: relative"
            ></view>
          </el-card>
          <el-card style="width: 100%; height: 2.06rem">
            <div
              class="clearfix"
              style="
                font-weight: 900;
                font-size: 0.14rem;
                padding-bottom: 0.1rem;
              "
            >
              <span>来源</span>
            </div>
            <ul
              class="font-family"
              style="height: 300rpx; font-size: 0.12rem; line-height: 0.3rem"
            >
              <li>1.《明史·卷二百九十九·列作品. p52</li>
              <li>2.《进(本草纲目)疏》 p52</li>
            </ul>
          </el-card>
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="18" class="BoxRight">
        <div class="grid-content bg-purple-dark" style="width: 100%">
          <el-card class="box-card" style="padding: 0">
            <div
              class="clearfix"
              style="
                font-weight: 900;
                font-size: 0.14rem;
                padding-bottom: 0.1rem;
              "
            >
              <span>基础信息</span>
            </div>
            <!-- 基础信息  -->
            <cc-defineTable :tableData="tableArr"></cc-defineTable>
          </el-card>
          <el-card
            class="box-card"
            style="min-height: 1.91rem; margin: 0.2rem 0"
          >
            <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="代表著作" data-id="1" name="representative">
                <Table1 :data="tableData" :columns="tableColumns" />
              </el-tab-pane>
              <el-tab-pane label="亲属关系" data-id="2" name="family ">
                亲属关系
              </el-tab-pane>
              <el-tab-pane label="师承关系" data-id="3" name="mentoring "
                >师承关系</el-tab-pane
              >
              <el-tab-pane label="社会关系" data-id="4" name="society"
                >社会关系</el-tab-pane
              >
              <el-tab-pane label="活动年谱" data-id="5" name="activity"
                >活动年谱</el-tab-pane
              >
            </el-tabs>
          </el-card>
          <el-card style="margin-bottom: 0.2rem">
            <div
              class="clearfix"
              style="
                font-weight: 900;
                font-size: 0.14rem;
                padding-bottom: 0.1rem;
              "
            >
              <span>相关附表/图像</span>
            </div>
            <view class="flex">
              <el-image
                v-for="item in 4"
                :key="item"
                style="width: 2.05rem; height: 1.4rem"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                fit="fill"
              ></el-image>
            </view>
          </el-card>
          <el-card class="box-card">
            <div
              class="clearfix"
              style="
                font-weight: 900;
                font-size: 0.14rem;
                padding-bottom: 0.1rem;
              "
            >
              <span>相关附表/图像</span>
            </div>
            <ul class="font-family" style="font-size: 0.13rem; line-height: 2">
              <li>
                [1|刘炜,谢蓉,张磊,等.向人文研究的国家数据基础设施建设[J|.中国图书馆学报,2016,42(5):29-39.
              </li>
              <li>
                [2|周晨.国际数字人文研究特征与知识结构|J图书馆论坛2017.37(4):1-8.
              </li>
              <li>
                [3]傅德华,于翠艳,李春博,关于创建“20
                世纪中国人物传记资料全文数据库治的构想[川,中国者引,2009,714):24-26.
              </li>
              <li>
                [4|于翠艳,傅德华,李春博,关于“20世纪中国人物传记资料全文数据库治的进展与困惑[J1.中国常引,2012.10111:20-22
              </li>
              <li>
                [5]贾武。《湖南近代人物数据率》资源收录范围研究|J河南图书馆学利,2015,35(7):126.127.140.
              </li>
            </ul>
          </el-card>
        </div>
      </el-col>
    </el-row>

        <!-- 个人小传 -->
        <el-dialog :visible.sync="isProfile">
            <view class="ProfileNav flex flex-center">
                个人小传
            </view>
            <view  style="padding: .44rem .3rem;min-height: 7.32rem;">
                <view 
                    style="margin-bottom: .2rem; background-color: #F0F0F0;padding: .18rem .1rem .1rem .27rem;font-size: .12rem;line-height: .24rem;font-weight: 400;">
                    <view  style="color: #2C2C2C;">
                        蕙展丁丑同里日岩额序先考月池翁著《四彭酸明》八卷，皆精指奥室，茂犀未能疯造，珍因撮粹想菜，僵撰此唐，以便智睛，服指南。世之雷病雨家，咸以服焉首务，不知派乃四能之末，谓之巧者雨。上士欲舍其全，非四不可。
                    </view>
                    <view class="flex">
                        <view ></view>
                        <view  style="font-weight: 700;color: #2C2C2C;">——《奇八服考》P 3</view>
                    </view>
                </view>
            </view>
        </el-dialog>
    <!-- 个人小传 -->
    <el-dialog :visible.sync="isProfile">
      <view class="ProfileNav flex flex-center"> 个人小传 </view>
      <view style="padding: 0.44rem 0.3rem; min-height: 7.32rem">
        <view
          style="
            margin-bottom: 0.2rem;
            background-color: #f0f0f0;
            padding: 0.18rem 0.1rem 0.1rem 0.27rem;
            font-size: 0.12rem;
            line-height: 0.24rem;
            font-weight: 400;
          "
        >
          <view style="color: #2c2c2c">
            蕙展丁丑同里日岩额序先考月池翁著《四彭酸明》八卷，皆精指奥室，茂犀未能疯造，珍因撮粹想菜，僵撰此唐，以便智睛，服指南。世之雷病雨家，咸以服焉首务，不知派乃四能之末，谓之巧者雨。上士欲舍其全，非四不可。
          </view>
          <view class="flex">
            <view></view>
            <view style="font-weight: 700; color: #2c2c2c"
              >——《奇八服考》P 3</view
            >
          </view>
        </view>
      </view>
    </el-dialog>



        <!-- 返回顶部 -->
        <el-col style="position: absolute;bottom: 1rem;left:1.2rem ;">
            <el-button style="width: .50rem;height: .50rem;font-size: .3rem;" icon="el-icon-top" circle
                @click="scrollToTop"></el-button>
        </el-col>
    </view>
    <!-- 返回顶部 -->
    <el-col style="position: absolute; bottom: 1rem; left: 1.2rem">
      <el-button
        style="width: 0.5rem; height: 0.5rem; font-size: 0.3rem"
        icon="el-icon-top"
        circle
        @click="scrollToTop"
      ></el-button>
    </el-col>
  </view>
</template>

<script>
    import * as echarts from 'echarts';
    import 'echarts/extension/bmap/bmap';
    import {
        loadBMap
    } from "@/static/map.js"
    import Table1 from '@/components/table1/table1.vue'
    export default {
        components: {
            Table1
        },
        data() {
            return {
                // 标题顶部栏需要的东西
                idIndex: 0,
                // -------
                // 小传
                isProfile: false,
                // 关系图谱
                activeName: 'representative',
                // 基础信息
                tableArr: [{
                        'list': [{
                                'name': '别名',
                                'value': '李东璧、药圣、李三七'
                            },
                            {
                                'name': '字',
                                'value': '东璧'
                            },
                            {
                                'name': '号',
                                'value': '频湖山人'
                            },
                            {
                                'name': '所处时期',
                                'value': '明朝'
                            },
                            {
                                'name': '民族',
                                'value': '166g'
                            }
                        ]
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import { loadBMap } from "@/static/map.js";
import Table1 from "@/components/table1/table1.vue";
export default {
  components: {
    Table1
  },
  data() {
    return {
      // 标题顶部栏需要的东西
      idIndex: 0,
      // -------
      // 小传
      isProfile: false,
      // 关系图谱
      activeName: "representative",
      // 基础信息
      tableArr: [
        {
          list: [
            {
              name: "别名",
              value: "李东璧、药圣、李三七"
            },
            {
              name: "字",
              value: "东璧"
            },
            {
              name: "号",
              value: "频湖山人"
            },
            {
              name: "所处时期",
              value: "明朝"
            },
            {
              name: "民族",
              value: "166g"
            }
          ]
        },
        {
          list: [
            {
              name: "籍贯",
              value: "黄州府薪州 (今湖北省薪春县)"
            },
            {
              name: "性别",
              value: "男"
            },
            {
              name: "职官",
              value: "太医院判"
            },
            {
              name: "流派",
              value: "医经学派"
            },
            {
              name: "学术特点",
              value: "考古证今、穷究物理"
            }
          ]
        }
      ],
      // 代表著作
      tableColumns: [
        {
          prop: "worksName",
          label: "作品名"
        },
        {
          prop: "works",
          label: "作品"
        },
        {
          prop: "literature",
          label: "文献关系"
        },
        {
          prop: "epoch",
          label: "著作时期"
        },
        {
          prop: "category",
          label: "类别"
        }
        // { type: 'button', action: 'edit', label: 'Edit' }
      ],
      tableData: [
        {
          worksName: "本草纲目",
          works: "李二牛",
          literature: "作者",
          epoch: "现代",
          category: "中医学",
          id: 1
        },
        {
          worksName: "本草纲目",
          works: "李二牛",
          literature: "作者",
          epoch: "现代",
          category: "中医学",
          id: 1
        }
      ]
    };
  },
  onLoad(options) {
    this.idIndex = options.id;
  },
  mounted() {
    // 关系图谱
    this.relation();
    // 时空地图
    loadBMap("5USVDAhhS4ssz44HLq3gNPZai7naXf4Q").then(() => {
      this.spaceTime();
    });
    this.$nextTick(() => {
      // 获取第一个选项卡的 DOM 元素
      const firstTab = this.$refs.tabs.$el.querySelector(
        ".el-tabs__active-bar"
      );
      firstTab.style.transform = "translateX(" + "-.2rem" + ")";
    });

                    },
                    {
                        'list': [{
                                'name': '籍贯',
                                'value': '黄州府薪州 (今湖北省薪春县)'
                            },
                            {
                                'name': '性别',
                                'value': '男'
                            },
                            {
                                'name': '职官',
                                'value': '太医院判'
                            },
                            {
                                'name': '流派',
                                'value': '医经学派'
                            },
                            {
                                'name': '学术特点',
                                'value': '考古证今、穷究物理'
                            }
                        ]
                    }
                ],
                // 代表著作
                tableColumns: [{
                        prop: 'worksName',
                        label: '作品名'
                    },
                    {
                        prop: 'works',
                        label: '作品'
                    },
                    {
                        prop: 'literature',
                        label: '文献关系'
                    },
                    {
                        prop: 'epoch',
                        label: '著作时期'
                    }, {
                        prop: 'category',
                        label: '类别'
                    },
                    // { type: 'button', action: 'edit', label: 'Edit' }
                ],
                tableData: [{
                    worksName: '本草纲目',
                    works: '李二牛',
                    literature: '作者',
                    epoch: '现代',
                    category: '中医学',
                    id: 1
                }, {
                    worksName: '本草纲目',
                    works: '李二牛',
                    literature: '作者',
                    epoch: '现代',
                    category: '中医学',
                    id: 1
    // 监听窗口大小变化
    window.addEventListener("resize", this.relation);
  },
  methods: {
    // 放大地图跳转
    fangdaClick(index) {
      if (index == 1) {
        uni.navigateTo({
          url: "/pages/character/index"
        });
      } else if (index == 2) {
        uni.navigateTo({
          url: "/pages/characterMap/characterMap"
        });
      }
    },
    // 小传
    ProfileClick() {
      this.isProfile = !this.isProfile;
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 返回顶部
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth" // 使用平滑滚动
      });
    },
    handleClick(tab) {
      let index = tab.$attrs["data-id"] - 1;
      this.$nextTick(() => {
        let firstTab = this.$refs.tabs.$el.querySelector(
          ".el-tabs__active-bar"
        );
        if (index == 0) {
          firstTab.style.transform = "translateX(-" + 0.2 + "rem)";
        } else if (index == 1) {
          firstTab.style.transform = "translateX(" + 0.85 * index + "rem)";
        } else if (index == 2) {
          firstTab.style.transform = "translateX(" + 0.93 * index + "rem)";
        } else if (index == 3) {
          firstTab.style.transform = "translateX(" + 0.95 * index + "rem)";
        } else if (index == 4) {
          firstTab.style.transform = "translateX(" + 0.97 * index + "rem)";
        } else {
          let firstTab = this.$refs.tabs.$el.querySelector(
            ".el-tabs__active-bar"
          );
          firstTab.style.transform = "translateX(" + "-.2" + "rem)";
        }
      });
    },
    // 关系图谱
    relation() {
      var chartDom = document.getElementById("relation");
      var myChart = echarts.init(chartDom);

                }]
            }
        },
        onLoad(options) {
            this.idIndex = options.id
        },
        mounted() {
      // 假设您有节点名称和它们之间的关系数据
      var nodes = ["李时珍", "成就", "传承", "亲友", "著作"];
      var relationships = [
        {
          source: "李时珍",
          target: "成就"
        },
        {
          source: "李时珍",
          target: "传承"
        },
        {
          source: "李时珍",
          target: "亲友"
        },
        {
          source: "李时珍",
          target: "著作"
        }
        // 其他关系...
      ];

            // 关系图谱
            this.relation()
            // 时空地图
            loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
                this.spaceTime()
            })
            this.$nextTick(() => {
                // 获取第一个选项卡的 DOM 元素
                const firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
                firstTab.style.transform = 'translateX(' + '-.2rem' + ')'
            });
      // 根据关系数据生成连接线
      var links = [];
      relationships.forEach(function (relationship) {
        var sourceIndex = nodes.indexOf(relationship.source);
        var targetIndex = nodes.indexOf(relationship.target);
        if (sourceIndex !== -1 && targetIndex !== -1) {
          links.push({
            source: sourceIndex,
            target: targetIndex
          });
        }
      });
      let FontSize = 12; // 字体大小
      let BorderWidth = 2; // 边框大小
      let SymbolSize = 80; // 尺寸距离
      // 不同尺寸下修改echarts的字体
      if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
        FontSize = 28;
        BorderWidth = 5;
        SymbolSize = 100;
      } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
        FontSize = 28;
        BorderWidth = 4;
        SymbolSize = 90;
      } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
        FontSize = 18;
        BorderWidth = 4;
        SymbolSize = 70;
      }
      // 根据nodes动态生成节点数据
      var nodeData = nodes.map(function (node, index) {
        return {
          name: node,
          x: Math.random() * 1000, // 设置随机x坐标位置
          y: Math.random() * 600, // 设置随机y坐标位置
          itemStyle: {
            color: getColorByIndex(index), // 可以根据索引设置不同的颜色
            borderWidth: BorderWidth,
            borderColor: getColorByIndex(index + 1)
          }
        };
      });
      // 设置颜色
      function getColorByIndex(index) {
        var colors = ["#ecf4ff", "#dd9795", "#f1edbe", "#ecf4ff", "#c5dbd8"]; // 可以根据实际情况设置颜色数组
        return colors[index % colors.length];
      }

      var option;
      option = {
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "none",
            symbolSize: SymbolSize, // 调整节点大小
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
            },
            edgeSymbol: ["circle"],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 40
            },
            data: nodeData,
            links: [
              {
                source: 0,
                target: 1,
                symbolSize: [5, 20]
              },
              {
                source: "Node 2",
                target: "Node 1"
              },
              {
                source: "Node 1",
                target: "Node 3"
              },
              {
                source: "Node 2",
                target: "Node 3"
              },
              {
                source: "Node 2",
                target: "Node 4"
              },
              {
                source: "Node 1",
                target: "Node 4"
              }
            ],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      };

            // 监听窗口大小变化
            window.addEventListener('resize', this.relation);
        },
        methods: {
            // 放大地图跳转
            fangdaClick(index) {
                if (index == 1) {
                    uni.navigateTo({
                        url: '/pages/character/index'
                    })
                } else if (index == 2) {
                    uni.navigateTo({
                        url: '/pages/characterMap/characterMap'
                    })
                }
            },
            // 小传
            ProfileClick() {
                this.isProfile = !this.isProfile
            },
            // 返回上一页
            goBack() {
                this.$router.go(-1);
            },
            // 返回顶部
            scrollToTop() {
                window.scrollTo({
                    top: 0,
                    behavior: "smooth" // 使用平滑滚动
                });
            },
            handleClick(tab) {
                let index = tab.$attrs['data-id'] - 1
                this.$nextTick(() => {
                    let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
                    if (index == 0) {
                        firstTab.style.transform = 'translateX(-' + .2 + 'rem)'
                    } else if (index == 1) {
                        firstTab.style.transform = 'translateX(' + .85 * index + 'rem)'
                    } else if (index == 2) {
                        firstTab.style.transform = 'translateX(' + .93 * index + 'rem)'
                    } else if (index == 3) {
                        firstTab.style.transform = 'translateX(' + .95 * index + 'rem)'
                    } else if (index == 4) {
                        firstTab.style.transform = 'translateX(' + .97 * index + 'rem)'
                    } else {
                        let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
                        firstTab.style.transform = 'translateX(' + '-.2' + 'rem)'
                    }
                })
            },
            // 关系图谱
            relation() {
                var chartDom = document.getElementById('relation');
                var myChart = echarts.init(chartDom);
      // 将生成的连接线添加到echarts图表的option中
      option.series[0].links = links;
      option && myChart.setOption(option);
    },
    // 时空地图
    spaceTime() {
      var chartDom = document.getElementById("spaceTime");
      var myChart = echarts.init(chartDom);
      var option;

                // 假设您有节点名称和它们之间的关系数据
                var nodes = ['李时珍', '成就', '传承', '亲友', '著作'];
                var relationships = [{
                        source: '李时珍',
                        target: '成就'
                    },
                    {
                        source: '李时珍',
                        target: '传承'
                    },
                    {
                        source: '李时珍',
                        target: '亲友'
                    },
                    {
                        source: '李时珍',
                        target: '著作'
                    },
                    // 其他关系...
                ];
      const data = [
        {
          name: "海门",
          value: 9
        },
        {
          name: "金昌",
          value: 19
        },
        {
          name: "泉州",
          value: 21
        },
        {
          name: "衢州",
          value: 177
        },
        {
          name: "廊坊",
          value: 193
        },
        {
          name: "菏泽",
          value: 194
        },
        {
          name: "合肥",
          value: 229
        },
        {
          name: "武汉",
          value: 273
        },
        {
          name: "大庆",
          value: 279
        }
      ];
      const geoCoordMap = {
        海门: [121.15, 31.89],
        鄂尔多斯: [109.781327, 39.608266],
        招远: [120.38, 37.35],
        平顶山: [113.29, 33.75],
        邢台: [114.48, 37.05],
        德州: [116.29, 37.45],
        济宁: [116.59, 35.38],
        荆州: [112.239741, 30.335165],
        宜昌: [111.3, 30.7],
        义乌: [120.06, 29.32],
        丽水: [119.92, 28.45],
        洛阳: [112.44, 34.7],
        秦皇岛: [119.57, 39.95],
        株洲: [113.16, 27.83],
        石家庄: [114.48, 38.03],
        莱芜: [117.67, 36.19],
        常德: [111.69, 29.05],
        保定: [115.48, 38.85],
        湘潭: [112.91, 27.87],
        金华: [119.64, 29.12],
        岳阳: [113.09, 29.37],
        长沙: [113, 28.21],
        衢州: [118.88, 28.97],
        廊坊: [116.7, 39.53],
        菏泽: [115.480656, 35.23375],
        合肥: [117.27, 31.86],
        武汉: [114.31, 30.52],
        大庆: [125.03, 46.58]
      };
      const convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      option = {
        tooltip: {
          trigger: "item"
        },
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 1,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3"
                }
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#999999"
                }
              }
            ]
          }
        },
        series: [
          {
            name: "pm2.5",
            type: "scatter",
            coordinateSystem: "bmap",
            data: convertData(data),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            encode: {
              value: 2
            },
            credits: {
              enabled: false
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: convertData(
              data
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 6)
            ),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            encode: {
              value: 2
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: true
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "#333"
            },
            emphasis: {
              scale: true
            },
            zlevel: 1
          }
        ]
      };

                // 根据关系数据生成连接线
                var links = [];
                relationships.forEach(function(relationship) {
                    var sourceIndex = nodes.indexOf(relationship.source);
                    var targetIndex = nodes.indexOf(relationship.target);
                    if (sourceIndex !== -1 && targetIndex !== -1) {
                        links.push({
                            source: sourceIndex,
                            target: targetIndex
                        });
                    }

                });
                let FontSize = 12; // 字体大小
                let BorderWidth = 2; // 边框大小
                let SymbolSize = 80; // 尺寸距离
                // 不同尺寸下修改echarts的字体
                if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
                    FontSize = 28
                    BorderWidth = 5
                    SymbolSize = 100
                } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
                    FontSize = 28
                    BorderWidth = 4
                    SymbolSize = 90
                } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
                    FontSize = 18
                    BorderWidth = 4
                    SymbolSize = 70
                }
                // 根据nodes动态生成节点数据
                var nodeData = nodes.map(function(node, index) {
                    return {
                        name: node,
                        x: Math.random() * 1000, // 设置随机x坐标位置
                        y: Math.random() * 600, // 设置随机y坐标位置
                        itemStyle: {
                            color: getColorByIndex(index), // 可以根据索引设置不同的颜色
                            borderWidth: BorderWidth,
                            borderColor: getColorByIndex(index + 1),
                        }
                    };
                });
                // 设置颜色
                function getColorByIndex(index) {
                    var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // 可以根据实际情况设置颜色数组
                    return colors[index % colors.length];
                }

                var option;
                option = {
                    tooltip: {},
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    series: [{
                        type: 'graph',
                        layout: 'none',
                        symbolSize: SymbolSize, // 调整节点大小
                        label: {
                            show: true,
                            color: 'black', // 设置节点文字颜色为黑色
                            fontSize: FontSize, // 设置文字大小
                        },
                        edgeSymbol: ['circle'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            fontSize: 40
                        },
                        data: nodeData,
                        links: [{
                                source: 0,
                                target: 1,
                                symbolSize: [5, 20]
                            },
                            {
                                source: 'Node 2',
                                target: 'Node 1'
                            },
                            {
                                source: 'Node 1',
                                target: 'Node 3'
                            },
                            {
                                source: 'Node 2',
                                target: 'Node 3'
                            },
                            {
                                source: 'Node 2',
                                target: 'Node 4'
                            },
                            {
                                source: 'Node 1',
                                target: 'Node 4'
                            }
                        ],
                        lineStyle: {
                            opacity: 0.9,
                            width: 2,
                            curveness: 0
                        }
                    }]
                };

                // 将生成的连接线添加到echarts图表的option中
                option.series[0].links = links;
                option && myChart.setOption(option);
            },
            // 时空地图
            spaceTime() {
                var chartDom = document.getElementById('spaceTime');
                var myChart = echarts.init(chartDom);
                var option;

                const data = [{
                        name: '海门',
                        value: 9
                    },
                    {
                        name: '金昌',
                        value: 19
                    },
                    {
                        name: '泉州',
                        value: 21
                    },
                    {
                        name: '衢州',
                        value: 177
                    },
                    {
                        name: '廊坊',
                        value: 193
                    },
                    {
                        name: '菏泽',
                        value: 194
                    },
                    {
                        name: '合肥',
                        value: 229
                    },
                    {
                        name: '武汉',
                        value: 273
                    },
                    {
                        name: '大庆',
                        value: 279
                    }
                ];
                const geoCoordMap = {
                    海门: [121.15, 31.89],
                    鄂尔多斯: [109.781327, 39.608266],
                    招远: [120.38, 37.35],
                    平顶山: [113.29, 33.75],
                    邢台: [114.48, 37.05],
                    德州: [116.29, 37.45],
                    济宁: [116.59, 35.38],
                    荆州: [112.239741, 30.335165],
                    宜昌: [111.3, 30.7],
                    义乌: [120.06, 29.32],
                    丽水: [119.92, 28.45],
                    洛阳: [112.44, 34.7],
                    秦皇岛: [119.57, 39.95],
                    株洲: [113.16, 27.83],
                    石家庄: [114.48, 38.03],
                    莱芜: [117.67, 36.19],
                    常德: [111.69, 29.05],
                    保定: [115.48, 38.85],
                    湘潭: [112.91, 27.87],
                    金华: [119.64, 29.12],
                    岳阳: [113.09, 29.37],
                    长沙: [113, 28.21],
                    衢州: [118.88, 28.97],
                    廊坊: [116.7, 39.53],
                    菏泽: [115.480656, 35.23375],
                    合肥: [117.27, 31.86],
                    武汉: [114.31, 30.52],
                    大庆: [125.03, 46.58]
                };
                const convertData = function(data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    bmap: {
                        center: [104.114129, 37.550339],
                        zoom: 1,
                        roam: true,
                        mapStyle: {
                            styleJson: [{
                                    featureType: 'water',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'land',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#f3f3f3'
                                    }
                                },
                                {
                                    featureType: 'manmade',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'local',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'arterial',
                                    elementType: 'labels',
                                    stylers: {
                                        visibility: 'off'
                                    }
                                },
                                {
                                    featureType: 'boundary',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#fefefe'
                                    }
                                },
                                {
                                    featureType: 'building',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'label',
                                    elementType: 'labels.text.fill',
                                    stylers: {
                                        color: '#999999'
                                    }
                                }
                            ]
                        }
                    },
                    series: [{
                            name: 'pm2.5',
                            type: 'scatter',
                            coordinateSystem: 'bmap',
                            data: convertData(data),
                            symbolSize: function(val) {
                                return val[2] / 10;
                            },
                            encode: {
                                value: 2
                            },
                            credits: {
                                enabled: false
                            },
                            label: {
                                formatter: '{b}',
                                position: 'right',
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        {
                            name: 'Top 5',
                            type: 'effectScatter',
                            coordinateSystem: 'bmap',
                            data: convertData(
                                data
                                .sort(function(a, b) {
                                    return b.value - a.value;
                                })
                                .slice(0, 6)
                            ),
                            symbolSize: function(val) {
                                return val[2] / 10;
                            },
                            encode: {
                                value: 2
                            },
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            label: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: '#333'
                            },
                            emphasis: {
                                scale: true
                            },
                            zlevel: 1
                        }
                    ]
                };


                option && myChart.setOption(option);

            },

        }
    }
      option && myChart.setOption(option);
    }
  }
};
</script>

<style>
    /* Table1表格里面的数据 */
    ::v-deep .is-leaf {
        .cell {
            font-size: .14rem !important;
            height: .4rem !important;
            line-height: .4rem !important;
        }
    }
/* Table1表格里面的数据 */
::v-deep .is-leaf {
  .cell {
    font-size: 0.14rem !important;
    height: 0.4rem !important;
    line-height: 0.4rem !important;
  }
}

    ::v-deep .el-table__body {
        .cell {
            font-size: .14rem !important;
            height: .4rem !important;
            line-height: .4rem !important;
        }
    }
::v-deep .el-table__body {
  .cell {
    font-size: 0.14rem !important;
    height: 0.4rem !important;
    line-height: 0.4rem !important;
  }
}

    /* --------------- */
/* --------------- */

    .BoxLeft ::v-deep.el-card__body {
        padding: .1rem .11rem !important;
    }
.BoxLeft ::v-deep.el-card__body {
  padding: 0.1rem 0.11rem !important;
}

    ::v-deep .el-tabs__content {
        line-height: 1;
    }
::v-deep .el-tabs__content {
  line-height: 1;
}

/* 个人小传 ------------------*/
::v-deep .el-dialog__header {
  display: none;
}

    /* 个人小传 ------------------*/
    ::v-deep .el-dialog__header {
        display: none;
    }
::v-deep .el-dialog__body {
  padding: 0;
}

    ::v-deep .el-dialog__body {
        padding: 0;
    }
.ProfileNav {
  width: 100%;
  height: 0.7rem;
  background: url(@/static/image/ProfileBg.png);
  background-size: 100% 100%;
  font-size: 0.24rem;
  color: #2c2c2c;
  font-weight: bold;
}

    .ProfileNav {
        width: 100%;
        height: 0.7rem;
        background: url(@/static/image/ProfileBg.png);
        background-size: 100% 100%;
        font-size: .24rem;
        color: #2C2C2C;
        font-weight: bold;
    }
/* ------------------- */

    /* ------------------- */
img {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

    img {
        width: 100%;
        height: 100%;
    }
.NavTop {
  background-color: #0c274c;
  padding: 15rpx 25rpx;
  color: #fff !important;
}
.NavTop img {
  width: 30rpx;
  height: 30rpx;
  vertical-align: middle;
}

    * {
        box-sizing: border-box;
    }
.NavTop .NavTopr {
  img {
    margin-right: 10rpx;
  }
}

    .NavTop {
        background-color: #0c274c;
        padding: 15rpx 25rpx;
        color: #fff !important;
.mImage {
  width: 100%;
  height: 30rpx;
}
.mImage img {
  vertical-align: top;
}

        img {
            width: 30rpx;
            height: 30rpx;
            vertical-align: middle;
        }
.Midde {
  /* background-color: #dbeafd; */
  background-image: url(@/static/image/yongBg.png);
  background-size: 100% 100%;
  color: #000;
  align-items: flex-start;
  padding: 0.18rem 0.24rem;
}
.Midde view {
  color: #000;
}

        .NavTopr {
            img {
                margin-right: 10rpx;
            }
        }
    }
.Midde .MiddeBack {
  width: 0.6rem;
  height: 0.24rem;
  font-size: 0.12rem;
  padding: 0;
  border: 1px solid #9e9e9e;
}

    .mImage {
        width: 100%;
        height: 30rpx;
.yinyong {
  font-size: 0.12rem;
}
.yinyong img {
  width: 0.12rem;
  height: 0.1rem;
  vertical-align: top;
  margin-right: 0.03rem;
}

        img {
            vertical-align: top;
        }
    }
.el-dialog__wrapper {
  background: rgba(0, 0, 0, 0.3);
}

    .Midde {
        /* background-color: #dbeafd; */
        background-image: url(@/static/image/yongBg.png);
        background-size: 100% 100%;
        color: #000;
        align-items: flex-start;
        padding: .18rem .24rem ;
		
        view {
            color: #000;
        }

        .MiddeBack {
            width: 0.6rem;
            height: 0.24rem;
            font-size: .12rem;
            padding: 0;
            border: 1px solid  #9E9E9E;
        }
    }

    .yinyong {
        font-size: .12rem;

        img {
            width: .12rem;
            height: .1rem;
            vertical-align: top;
            margin-right: .03rem;
        }
    }

    .el-dialog__wrapper {
        background: rgba(0, 0, 0, .3);
    }

    .fz {
        /* line-height: 1.3;
.fz {
  /* line-height: 1.3;
        height: 100rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical; */
        color: #2C2C2C;
    }
  color: #2c2c2c;
}

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

    /* echart地图水印 */
    ::v-deep .BMap_cpyCtrl {
        display: none;
    }
/* echart地图水印 */
::v-deep .BMap_cpyCtrl {
  display: none;
}

    ::v-deep .anchorBL {
        display: none;
    }
::v-deep .anchorBL {
  display: none;
}

    ::v-deep .el-tabs__nav-wrap::after {
        background-color: transparent;
    }
::v-deep .el-tabs__nav-wrap::after {
  background-color: transparent;
}

    ::v-deep .el-tabs__nav {
        margin-bottom: .1rem !important;
::v-deep .el-tabs__nav {
  margin-bottom: 0.1rem !important;
}

    }
::v-deep .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}

    ::v-deep .el-tabs__nav-scroll {
        display: flex;
        justify-content: center;
    }
::v-deep .el-tabs__item {
  width: 1rem;
  font-size: 0.14rem;
  line-height: 0.4rem;
  height: 0.4rem;
}

    ::v-deep .el-tabs__item {
        width: 1rem;
        font-size: .14rem;
        line-height: .4rem;
        height: .4rem;
    }
::v-deep .el-tabs__header {
  margin: 0 0 10rpx;
}

    ::v-deep .el-tabs__header {
        margin: 0 0 10rpx;
    }
::v-deep .el-tabs__active-bar {
  /* 设置滚动条宽度 */
  width: 1rem !important;
  height: 0.03rem !important;
  background-color: #597aa5;
  transform: translateX(-20px);
  /* margin-top: .09rem; */
}

    ::v-deep .el-tabs__active-bar {
        /* 设置滚动条宽度 */
        width: 1rem !important;
        height: .03rem !important;
        background-color: #597AA5;
        transform: translateX(-20px);
        /* margin-top: .09rem; */
    }
::v-deep .el-tabs__active-bar {
  top: 0.37rem !important;
}

    ::v-deep .el-tabs__active-bar {
        top: .37rem !important;
    }
::v-deep .el-table::before {
  background-color: #fff !important;
}

    ::v-deep .el-table::before {
        background-color: #fff !important;
    }
.BoxRight ::v-deep.el-card__body {
  padding: 0.2rem 0.14rem !important;
}

    .BoxRight ::v-deep.el-card__body {
        padding: .2rem .14rem !important;

    }

    .BoxRight .box-card {
        margin-bottom: .2rem !important;
    }
</style>
.BoxRight .box-card {
  margin-bottom: 0.2rem !important;
}
</style>

 src/pages/zhongyi/zhongyi.vue

@@ -1,642 +1,657 @@
<template>
    <view >
        <headNav :idIndex="idIndex" :searchBg="false" text="家学传承" bg="/static/image/topBg1.png"
            bg1="/static/image/line1.png" />
  <view>
    <headNav
      :idIndex="idIndex"
      :searchBg="false"
      text="家学传承"
      bg="/static/image/topBg1.png"
      bg1="/static/image/line1.png"
    />

        <view class="flex" style="padding: .24rem 1.21rem ;background-color: #f0f0f0;">
            <view class="flex">
                    <el-button class="MiddeBack flex flex-center" @click="goBack">返回</el-button>
                <h3 style="margin-left: .22rem;font-size: .28erm;font-weight: 500;">邵登瀛</h3>
            </view>
            <ul class="flex Lists">
                <li style="background-color: #DA7A2B;color: #fff;">世医传承</li>
                <li @click="ListClick" style="background-color: #fff;color: #DA7A2B;" >世医传承</li>
            </ul>
            <view  style="width: 1rem;"></view>
        </view>
        <!-- echarts图 -->
        <div class="barChart" ref="barChart"></div>
    </view>
    <view
      class="flex"
      style="padding: 0.24rem 1.21rem; background-color: #f0f0f0"
    >
      <view class="flex">
        <el-button class="MiddeBack flex flex-center" @click="goBack"
          >返回</el-button
        >
        <h3 style="margin-left: 0.22rem; font-size: 0.28erm; font-weight: 500">
          邵登瀛
        </h3>
      </view>
      <ul class="flex Lists">
        <li style="background-color: #da7a2b; color: #fff">世医传承</li>
        <li @click="ListClick" style="background-color: #fff; color: #da7a2b">
          世医传承
        </li>
      </ul>
      <view style="width: 1rem"></view>
    </view>
    <!-- echarts图 -->
    <div class="barChart" ref="barChart"></div>
  </view>
</template>
<script>
    import * as echarts from "echarts";
    export default {
        data() {
            return {
                // 标题顶部栏需要的东西
                idIndex: 0,
                activeIndex: 1
            }
        },
        onLoad(options) {
            this.idIndex = options.id
        },
        mounted() {
            // 初始化 echarts
            this.initBarChart();
        },
        methods: {
            initBarChart() {
                // WMBg
                //通过 $ref 进行挂载
                let myChart = echarts.init(this.$refs.barChart);
import * as echarts from "echarts";
export default {
  data() {
    return {
      // 标题顶部栏需要的东西
      idIndex: 0,
      activeIndex: 1
    };
  },
  onLoad(options) {
    this.idIndex = options.id;
  },
  mounted() {
    // 初始化 echarts
    this.initBarChart();
  },
  methods: {
    initBarChart() {
      // WMBg
      //通过 $ref 进行挂载
      let myChart = echarts.init(this.$refs.barChart);

                let FontSize = 12; // 字体大小
                let BorderWidth = 2; // 边框大小
                let SymbolSize = 80; // 尺寸距离
                let Distance = 10;
                // 不同尺寸下修改echarts的字体
                if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
                    FontSize = 28
                    BorderWidth = 5
                    SymbolSize = 100
                    Distance = 33
                } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
                    FontSize = 28
                    BorderWidth = 4
                    SymbolSize = 90
                    Distance = 22
                } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
                    FontSize = 18
                    BorderWidth = 4
                    SymbolSize = 70
                    Distance = 22
                }
      let FontSize = 12; // 字体大小
      let BorderWidth = 2; // 边框大小
      let SymbolSize = 80; // 尺寸距离
      let Distance = 10;
      // 不同尺寸下修改echarts的字体
      if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
        FontSize = 28;
        BorderWidth = 5;
        SymbolSize = 100;
        Distance = 33;
      } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
        FontSize = 28;
        BorderWidth = 4;
        SymbolSize = 90;
        Distance = 22;
      } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
        FontSize = 18;
        BorderWidth = 4;
        SymbolSize = 70;
        Distance = 22;
      }

                let option = {
                    title: {
                        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 或者百分比
                    },
                    tooltip: {},
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: "quinticInOut",
                    series: [{
                        type: "graph",
                        layout: "none",
                        symbolSize: SymbolSize + 20,
                        //是否允许用户拖动图片
                        roam: false,
                        label: {
                            show: true,
                            color: 'black', // 设置节点文字颜色为黑色
                            fontSize: FontSize, // 设置文字大小
                        },
                        edgeSymbol: ["circle", "arrow"],
                        edgeSymbolSize: [4, 10],
      let option = {
        title: {
          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 或者百分比
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "none",
            symbolSize: SymbolSize + 20,
            //是否允许用户拖动图片
            roam: false,
            label: {
              show: true,
              color: "black", // 设置节点文字颜色为黑色
              fontSize: FontSize // 设置文字大小
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],

                        edgeLabel: {
                            show: true,
                            fontSize: FontSize, //更改两者关系的字体
                            position: "middle",
                            //这里设置关系文字是否和线段重叠
                            //   padding: [0, 0], // 调整内边距以确保标签与线段紧密贴合
                            // verticalAlign: 'middle', // 设置文本的垂直对齐方式为居中
                            formatter: function(params) {
                                // params.data 是边的数据对象，你可以在这里定义关系名
                                // 例如，你可以根据 source 和 target 的名称来定义关系名
                                return params.data.relationName ||
                                    "父子"; // 如果定义了 relationName 则显示它，否则显示“父子”
                            },
                        },
                        //各个节点
                        data: [{
                                name: "薛雪",
                                x: 300,
                                y: 300,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵登瀛",
                                x: 400,
                                y: 300,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵鲁瞻",
                                x: 500,
                                y: 300,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵春泉",
                                x: 600,
                                y: 300,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "徐锦",
                                x: 650,
                                y: 400,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵丙扬",
                                x: 700,
                                y: 300,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "冯桂芬",
                                x: 720,
                                y: 400,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "李鸿章",
                                x: 740,
                                y: 500,
                                itemStyle: {
                                    color: "#E1E1E1",
                                    borderColor: "#888888",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵景尧",
                                x: 800,
                                y: 200,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵景康",
                                x: 800,
                                y: 400,
                                itemStyle: {
                                    color: "#F8E2D7",
                                    borderColor: "#F3AA78",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "鲍昇",
                                x: 750,
                                y: 100,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "文龙",
                                x: 850,
                                y: 100,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "傅庆贻",
                                x: 950,
                                y: 50,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "成允",
                                x: 950,
                                y: 100,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "胡玉坦",
                                x: 950,
                                y: 150,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "裕禄",
                                x: 950,
                                y: 200,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "陆乃昔",
                                x: 950,
                                y: 250,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "刘传祺",
                                x: 950,
                                y: 300,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "邵诚",
                                x: 950,
                                y: 350,
                                itemStyle: {
                                    color: "#DCE7EB",
                                    borderColor: "#5F81A4",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "曾国藩",
                                x: 1050,
                                y: 200,
                                itemStyle: {
                                    color: "#E1E1E1",
                                    borderColor: "#888888",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "曾国藩01",
                                x: 1050,
                                y: 50,
                                itemStyle: {
                                    color: "#E1E1E1",
                                    borderColor: "#888888",
                                    borderWidth: "3",
                                },
                            },
                            {
                                name: "曾国藩02",
                                x: 1050,
                                y: 350,
                                itemStyle: {
                                    color: "#E1E1E1",
                                    borderColor: "#888888",
                                    borderWidth: "3",
                                },
                            },
                        ],
                        //关系连接
                        links: [{
                                source: "薛雪",
                                target: "邵登瀛",
                                relationName: "师徒",
                                hasArrow: "true",
                            },
                            {
                                source: "邵登瀛",
                                target: "邵鲁瞻",
                                relationName: "父子",
                            },
                            {
                                source: "邵鲁瞻",
                                target: "邵春泉",
                                relationName: "父子",
                            },
                            {
                                source: "邵春泉",
                                target: "邵丙扬",
                                relationName: "叔侄",
                            },
                            //曲线
                            {
                                source: "邵春泉",
                                target: "徐锦",
                                relationName: "朋友",
                                //这里设置为不带箭头
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵丙扬",
                                target: "邵景尧",
                                relationName: "父子",
                            },
                            {
                                source: "邵丙扬",
                                target: "邵景康",
                                relationName: "父子",
                            },
                            //曲线
                            {
                                source: "邵丙扬",
                                target: "冯桂芬",
                                relationName: "朋友",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            //曲线
                            {
                                source: "邵丙扬",
                                target: "鲍昇",
                                relationName: "师徒",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: 0.2,
                                },
                            },
                            //曲线
                            {
                                source: "冯桂芬",
                                target: "李鸿章",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "邵景康",
                                relationName: "兄弟",
                            },
                            {
                                source: "邵景康",
                                target: "邵景尧",
                                relationName: "兄弟",
                            },
                            {
                                source: "邵景尧",
                                target: "鲍昇",
                                relationName: "姻亲",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "文龙",
                                relationName: "朋友",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: 0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "傅庆贻",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.1,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "成允",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "胡玉坦",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "裕禄",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "陆乃昔",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "刘传祺",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "邵景尧",
                                target: "邵诚",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                    curveness: -0.2,
                                },
                            },
                            {
                                source: "成允",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "胡玉坦",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "裕禄",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "陆乃昔",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "刘传祺",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "成允",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "成允",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "成允",
                                target: "曾国藩",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "傅庆贻",
                                target: "曾国藩01",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                            {
                                source: "邵诚",
                                target: "曾国藩02",
                                relationName: "同僚",
                                symbol: ["none", "none"],
                                lineStyle: {
                                    color: "#6584B1",
                                },
                            },
                        ],
                        lineStyle: {
                            color: "#000000",
                            opacity: 0.9,
                            width: 2,
                            curveness: 0,
                        },
                    }, ],
                };
                //进行渲染
                myChart.setOption(option);
            },
            // 返回按钮 
            goBack() {
                this.$router.go(-1);
            },
        }
    }
            edgeLabel: {
              show: true,
              fontSize: FontSize, //更改两者关系的字体
              position: "middle",
              //这里设置关系文字是否和线段重叠
              //   padding: [0, 0], // 调整内边距以确保标签与线段紧密贴合
              // verticalAlign: 'middle', // 设置文本的垂直对齐方式为居中
              formatter: function (params) {
                // params.data 是边的数据对象，你可以在这里定义关系名
                // 例如，你可以根据 source 和 target 的名称来定义关系名
                return params.data.relationName || "父子"; // 如果定义了 relationName 则显示它，否则显示“父子”
              }
            },
            //各个节点
            data: [
              {
                name: "薛雪",
                x: 300,
                y: 300,
                itemStyle: {
                  color: "#F8E2D7",
                  borderColor: "#F3AA78",
                  borderWidth: "3"
                }
              },
              {
                name: "邵登瀛",
                x: 400,
                y: 300,
                itemStyle: {
                  color: "#F8E2D7",
                  borderColor: "#F3AA78",
                  borderWidth: "3"
                }
              },
              {
                name: "邵鲁瞻",
                x: 500,
                y: 300,
                itemStyle: {
                  color: "#F8E2D7",
                  borderColor: "#F3AA78",
                  borderWidth: "3"
                }
              },
              {
                name: "邵春泉",
                x: 600,
                y: 300,
                itemStyle: {
                  color: "#F8E2D7",
                  borderColor: "#F3AA78",
                  borderWidth: "3"
                }
              },
              {
                name: "徐锦",
                x: 650,
                y: 400,
                itemStyle: {
                  color: "#DCE7EB",
                  borderColor: "#5F81A4",
                  borderWidth: "3"
                }
              },
              {
                name: "邵丙扬",
                x: 700,
                y: 300,
                itemStyle: {
                  color: "#F8E2D7",
                  borderColor: "#F3AA78",
                  borderWidth: "3"
                }
              },
              {
                name: "冯桂芬",
                x: 720,
                y: 400,
                itemStyle: {
                  color: "#DCE7EB",
                  borderColor: "#5F81A4",
                  borderWidth: "3"
                }
              },
              {
                name: "李鸿章",
                x: 740,
                y: 500,
                itemStyle: {
                  color: "#E1E1E1",
                  borderColor: "#888888",
                  borderWidth: "3"
                }
              },
              {
                name: "邵景尧",
                x: 800,
                y: 200,
                itemStyle: {
                  color: "#F8E2D7",
                  borderColor: "#F3AA78",
                  borderWidth: "3"
                }
              },
              {
                name: "邵景康",
                x: 800,
                y: 400,
                itemStyle: {
                  color: "#F8E2D7",
                  borderColor: "#F3AA78",
                  borderWidth: "3"
                }
              },
              {
                name: "鲍昇",
                x: 750,
                y: 100,
                itemStyle: {
                  color: "#DCE7EB",
                  borderColor: "#5F81A4",
                  borderWidth: "3"
                }
              },
              {
                name: "文龙",
                x: 850,
                y: 100,
                itemStyle: {
                  color: "#DCE7EB",
                  borderColor: "#5F81A4",
                  borderWidth: "3"
                }
              },
              {
                name: "傅庆贻",
                x: 950,
                y: 50,
                itemStyle: {
                  color: "#DCE7EB",
                  borderColor: "#5F81A4",
                  borderWidth: "3"
                }
              },
              {
                name: "成允",
                x: 950,
                y: 100,
                itemStyle: {
                  color: "#DCE7EB",
                  borderColor: "#5F81A4",
                  borderWidth: "3"
                }
              },
              {
                name: "胡玉坦",
                x: 950,
                y: 150,
                itemStyle: {
                  color: "#DCE7EB",
                  borderColor: "#5F81A4",
                  borderWidth: "3"
                }
              },
              {
                name: "裕禄",
                x: 950,
                y: 200,
                itemStyle: {
                  color: "#DCE7EB",
                  borderColor: "#5F81A4",
                  borderWidth: "3"
                }
              },
              {
                name: "陆乃昔",
                x: 950,
                y: 250,
                itemStyle: {
                  color: "#DCE7EB",
                  borderColor: "#5F81A4",
                  borderWidth: "3"
                }
              },
              {
                name: "刘传祺",
                x: 950,
                y: 300,
                itemStyle: {
                  color: "#DCE7EB",
                  borderColor: "#5F81A4",
                  borderWidth: "3"
                }
              },
              {
                name: "邵诚",
                x: 950,
                y: 350,
                itemStyle: {
                  color: "#DCE7EB",
                  borderColor: "#5F81A4",
                  borderWidth: "3"
                }
              },
              {
                name: "曾国藩",
                x: 1050,
                y: 200,
                itemStyle: {
                  color: "#E1E1E1",
                  borderColor: "#888888",
                  borderWidth: "3"
                }
              },
              {
                name: "曾国藩01",
                x: 1050,
                y: 50,
                itemStyle: {
                  color: "#E1E1E1",
                  borderColor: "#888888",
                  borderWidth: "3"
                }
              },
              {
                name: "曾国藩02",
                x: 1050,
                y: 350,
                itemStyle: {
                  color: "#E1E1E1",
                  borderColor: "#888888",
                  borderWidth: "3"
                }
              }
            ],
            //关系连接
            links: [
              {
                source: "薛雪",
                target: "邵登瀛",
                relationName: "师徒",
                hasArrow: "true"
              },
              {
                source: "邵登瀛",
                target: "邵鲁瞻",
                relationName: "父子"
              },
              {
                source: "邵鲁瞻",
                target: "邵春泉",
                relationName: "父子"
              },
              {
                source: "邵春泉",
                target: "邵丙扬",
                relationName: "叔侄"
              },
              //曲线
              {
                source: "邵春泉",
                target: "徐锦",
                relationName: "朋友",
                //这里设置为不带箭头
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: -0.2
                }
              },
              {
                source: "邵丙扬",
                target: "邵景尧",
                relationName: "父子"
              },
              {
                source: "邵丙扬",
                target: "邵景康",
                relationName: "父子"
              },
              //曲线
              {
                source: "邵丙扬",
                target: "冯桂芬",
                relationName: "朋友",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: -0.2
                }
              },
              //曲线
              {
                source: "邵丙扬",
                target: "鲍昇",
                relationName: "师徒",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: 0.2
                }
              },
              //曲线
              {
                source: "冯桂芬",
                target: "李鸿章",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: -0.2
                }
              },
              {
                source: "邵景尧",
                target: "邵景康",
                relationName: "兄弟"
              },
              {
                source: "邵景康",
                target: "邵景尧",
                relationName: "兄弟"
              },
              {
                source: "邵景尧",
                target: "鲍昇",
                relationName: "姻亲",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: -0.2
                }
              },
              {
                source: "邵景尧",
                target: "文龙",
                relationName: "朋友",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: 0.2
                }
              },
              {
                source: "邵景尧",
                target: "傅庆贻",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: -0.1
                }
              },
              {
                source: "邵景尧",
                target: "成允",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: -0.2
                }
              },
              {
                source: "邵景尧",
                target: "胡玉坦",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: -0.2
                }
              },
              {
                source: "邵景尧",
                target: "裕禄",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: -0.2
                }
              },
              {
                source: "邵景尧",
                target: "陆乃昔",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: -0.2
                }
              },
              {
                source: "邵景尧",
                target: "刘传祺",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: -0.2
                }
              },
              {
                source: "邵景尧",
                target: "邵诚",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1",
                  curveness: -0.2
                }
              },
              {
                source: "成允",
                target: "曾国藩",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1"
                }
              },
              {
                source: "胡玉坦",
                target: "曾国藩",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1"
                }
              },
              {
                source: "裕禄",
                target: "曾国藩",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1"
                }
              },
              {
                source: "陆乃昔",
                target: "曾国藩",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1"
                }
              },
              {
                source: "刘传祺",
                target: "曾国藩",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1"
                }
              },
              {
                source: "成允",
                target: "曾国藩",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1"
                }
              },
              {
                source: "成允",
                target: "曾国藩",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1"
                }
              },
              {
                source: "成允",
                target: "曾国藩",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1"
                }
              },
              {
                source: "傅庆贻",
                target: "曾国藩01",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1"
                }
              },
              {
                source: "邵诚",
                target: "曾国藩02",
                relationName: "同僚",
                symbol: ["none", "none"],
                lineStyle: {
                  color: "#6584B1"
                }
              }
            ],
            lineStyle: {
              color: "#000000",
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      };
      //进行渲染
      myChart.setOption(option);
    },
    // 返回按钮
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
    .Lists {
        li {
            /* background-color: #e4ebf3;
.Lists li {
  /* background-color: #e4ebf3;
            border: 1rpx solid #5778a2;
            padding: 5rpx 10rpx;
            font-size: 18rpx; */
            width: 0.96rem;
            height: .3rem;
            border: 1px solid #DA7A2B;
            line-height: .3rem;
            text-align: center;
            font-size: .14rem;
        }
    }
    .MiddeBack {
        width: 0.6rem;
        height: 0.24rem;
        font-size: .12rem;
        padding: 0;
	
    }
    .barChart {
        width: 100vw;
        height: 80vh;
    }
</style>
  width: 0.96rem;
  height: 0.3rem;
  border: 1px solid #da7a2b;
  line-height: 0.3rem;
  text-align: center;
  font-size: 0.14rem;
}

.MiddeBack {
  width: 0.6rem;
  height: 0.24rem;
  font-size: 0.12rem;
  padding: 0;
}
.barChart {
  width: 100vw;
  height: 80vh;
}
</style>

 src/uni_modules/csr-tab/components/csr-tab/csr-tab.vue

@@ -132,11 +132,8 @@
  font-size: 14px;
  height: 44px;
  line-height: 44px;
  // sdsd
  // justify-content: center;
  .uni-tab-item {
    flex: 1;
    // width: 20% !important;
    height: 100%;
    text-align: center;
    box-sizing: border-box;

 src/uni_modules/jc-form/components/jc-form-item/jc-form-item.vue

@@ -101,14 +101,6 @@
</template>

<style lang="scss" scoped>
    // // 穿透隔离css
    // ::v-deep input {
    //     height: 100rpx;

    //     &:active {
    //         background: rgba(0, 0, 0, .02);
    //     }
    // }
    .jc-form-item {
        display: flex;
        align-items: center;

 src/uni_modules/next-search-more/components/next-search-more/next-search-more.vue

@@ -230,7 +230,6 @@
}
::v-deep .content {
  border-radius: 0 !important;
  // border: 1px solid #7d8ea5 !important;
}
::v-deep .button-item {
  width: 100% !important;
@@ -245,7 +244,6 @@
    width: 100%;
    border-bottom: 1px #f5f5f5 solid;
    box-sizing: border-box;
    // padding: 15upx;
    border-radius: 35rpx;
    font-size: $uni-font-size-base;
    background: #fff;