图表

杨磊

3 天以前 b50a2e6d9385a88916fc43cddb18842e5036f565

图表

 package-lock.json

@@ -16,7 +16,7 @@
        "moment": "^2.29.4",
        "qrcodejs2": "0.0.2",
        "spark-md5": "^3.0.2",
        "video.js": "^7.20.3",
        "video.js": "^7.21.7",
        "vue": "^2.6.14",
        "vue-qr": "^4.0.9",
        "vue-router": "^3.5.1",
@@ -2305,16 +2305,16 @@
      }
    },
    "node_modules/@videojs/http-streaming": {
      "version": "2.14.3",
      "resolved": "https://registry.npmmirror.com/@videojs/http-streaming/-/http-streaming-2.14.3.tgz",
      "integrity": "sha512-2tFwxCaNbcEZzQugWf8EERwNMyNtspfHnvxRGRABQs09W/5SqmkWFuGWfUAm4wQKlXGfdPyAJ1338ASl459xAA==",
      "version": "2.16.3",
      "resolved": "https://registry.npmmirror.com/@videojs/http-streaming/-/http-streaming-2.16.3.tgz",
      "integrity": "sha512-91CJv5PnFBzNBvyEjt+9cPzTK/xoVixARj2g7ZAvItA+5bx8VKdk5RxCz/PP2kdzz9W+NiDUMPkdmTsosmy69Q==",
      "dependencies": {
        "@babel/runtime": "^7.12.5",
        "@videojs/vhs-utils": "3.0.5",
        "aes-decrypter": "3.1.3",
        "global": "^4.4.0",
        "m3u8-parser": "4.7.1",
        "mpd-parser": "0.21.1",
        "m3u8-parser": "4.8.0",
        "mpd-parser": "^0.22.1",
        "mux.js": "6.0.1",
        "video.js": "^6 || ^7"
      },
@@ -3126,10 +3126,9 @@
      }
    },
    "node_modules/@xmldom/xmldom": {
      "version": "0.7.9",
      "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.7.9.tgz",
      "integrity": "sha512-yceMpm/xd4W2a85iqZyO09gTnHvXF6pyiWjD2jcOJs7hRoZtNNOO1eJlhHj1ixA+xip2hOyGn+LgcvLCMo5zXA==",
      "deprecated": "this version is no longer supported, please update to at least 0.8.*",
      "version": "0.8.10",
      "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
      "engines": {
        "node": ">=10.0.0"
      }
@@ -7704,9 +7703,9 @@
      }
    },
    "node_modules/m3u8-parser": {
      "version": "4.7.1",
      "resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-4.7.1.tgz",
      "integrity": "sha512-pbrQwiMiq+MmI9bl7UjtPT3AK603PV9bogNlr83uC+X9IoxqL5E4k7kU7fMQ0dpRgxgeSMygqUa0IMLQNXLBNA==",
      "version": "4.8.0",
      "resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-4.8.0.tgz",
      "integrity": "sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==",
      "dependencies": {
        "@babel/runtime": "^7.12.5",
        "@videojs/vhs-utils": "^3.0.5",
@@ -8001,13 +8000,13 @@
      }
    },
    "node_modules/mpd-parser": {
      "version": "0.21.1",
      "resolved": "https://registry.npmmirror.com/mpd-parser/-/mpd-parser-0.21.1.tgz",
      "integrity": "sha512-BxlSXWbKE1n7eyEPBnTEkrzhS3PdmkkKdM1pgKbPnPOH0WFZIc0sPOWi7m0Uo3Wd2a4Or8Qf4ZbS7+ASqQ49fw==",
      "version": "0.22.1",
      "resolved": "https://registry.npmmirror.com/mpd-parser/-/mpd-parser-0.22.1.tgz",
      "integrity": "sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==",
      "dependencies": {
        "@babel/runtime": "^7.12.5",
        "@videojs/vhs-utils": "^3.0.5",
        "@xmldom/xmldom": "^0.7.2",
        "@xmldom/xmldom": "^0.8.3",
        "global": "^4.4.0"
      },
      "bin": {
@@ -11023,23 +11022,23 @@
      }
    },
    "node_modules/video.js": {
      "version": "7.20.3",
      "resolved": "https://registry.npmmirror.com/video.js/-/video.js-7.20.3.tgz",
      "integrity": "sha512-JMspxaK74LdfWcv69XWhX4rILywz/eInOVPdKefpQiZJSMD5O8xXYueqACP2Q5yqKstycgmmEKlJzZ+kVmDciw==",
      "version": "7.21.7",
      "resolved": "https://registry.npmmirror.com/video.js/-/video.js-7.21.7.tgz",
      "integrity": "sha512-T2s3WFAht7Zjr2OSJamND9x9Dn2O+Z5WuHGdh8jI5SYh5mkMdVTQ7vSRmA5PYpjXJ2ycch6jpMjkJEIEU2xxqw==",
      "dependencies": {
        "@babel/runtime": "^7.12.5",
        "@videojs/http-streaming": "2.14.3",
        "@videojs/http-streaming": "2.16.3",
        "@videojs/vhs-utils": "^3.0.4",
        "@videojs/xhr": "2.6.0",
        "aes-decrypter": "3.1.3",
        "global": "^4.4.0",
        "keycode": "^2.2.0",
        "m3u8-parser": "4.7.1",
        "mpd-parser": "0.21.1",
        "m3u8-parser": "4.8.0",
        "mpd-parser": "0.22.1",
        "mux.js": "6.0.1",
        "safe-json-parse": "4.0.0",
        "videojs-font": "3.2.0",
        "videojs-vtt.js": "^0.15.4"
        "videojs-vtt.js": "^0.15.5"
      }
    },
    "node_modules/videojs-contrib-hls": {
@@ -11233,9 +11232,9 @@
      "integrity": "sha512-FGg+Csioa8/A/EacvFefBdb9Z0rSiMlheHDunZnN3xXfUF43jvjawcWFQnZvrv1Cs1nE1LBrHyUZjF7j2mKOLw=="
    },
    "node_modules/videojs-vtt.js": {
      "version": "0.15.4",
      "resolved": "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.15.4.tgz",
      "integrity": "sha512-r6IhM325fcLb1D6pgsMkTQT1PpFdUdYZa1iqk7wJEu+QlibBwATPfPc9Bg8Jiym0GE5yP1AG2rMLu+QMVWkYtA==",
      "version": "0.15.5",
      "resolved": "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
      "dependencies": {
        "global": "^4.3.1"
      }

 package.json

@@ -16,7 +16,7 @@
    "moment": "^2.29.4",
    "qrcodejs2": "0.0.2",
    "spark-md5": "^3.0.2",
    "video.js": "^7.20.3",
    "video.js": "^7.21.7",
    "vue": "^2.6.14",
    "vue-qr": "^4.0.9",
    "vue-router": "^3.5.1",

 src/assets/css/common.css

@@ -174,7 +174,3 @@
  color: #fff !important;
  background: #f56c6c !important;
}

::v-deep .el-loading-spinner {
  color: #937950 !important;
}

 src/assets/images/homeBg1.jpg

 src/assets/images/menuIcon/mulu.png

 src/assets/images/menuIcon/mulu1.png

 src/assets/images/menuIcon/nianpu.png

 src/assets/images/menuIcon/nianpu1.png

 src/assets/images/menuIcon/rongyu.png

 src/assets/images/menuIcon/rongyu1.png

 src/assets/images/menuIcon/xueshu.png

 src/assets/images/menuIcon/xueshu1.png

 src/layout/index.vue

@@ -7,10 +7,16 @@
        <p>多维度数据库</p>
      </div>
      <div class="leftMenuList">
        <div class="menuItem" :class="{ active: $route.path == item.path }" v-for="(item, index) in menuList"
          :key="index" @click="$router.push(item.path)">
          <div>
            <i :class="item.icon"></i>
        <div
          class="menuItem"
          :class="{ active: $route.path == item.path }"
          v-for="(item, index) in menuList"
          :key="index"
          @click="$router.push(item.path)"
        >
          <div class="iconBox">
            <img class="autoImg" :src="item.activeIcon" alt="" v-if="$route.path == item.path">
            <img class="autoImg" :src="item.icon" alt="" v-else>
          </div>
          <div class="menuText">{{ item.name }}</div>
        </div>
@@ -27,6 +33,14 @@

<script>
import { mapState } from "vuex";
import nianpu1 from "@/assets/images/menuIcon/nianpu1.png";
import nianpu from "@/assets/images/menuIcon/nianpu.png";
import mulu from "@/assets/images/menuIcon/mulu.png";
import mulu1 from "@/assets/images/menuIcon/mulu1.png";
import rongyu from "@/assets/images/menuIcon/rongyu.png";
import rongyu1 from "@/assets/images/menuIcon/rongyu1.png";
import xueshu from "@/assets/images/menuIcon/xueshu.png";
import xueshu1 from "@/assets/images/menuIcon/xueshu1.png";
export default {
  computed: {
    ...mapState(["userInfo", "keepAliveList"]),
@@ -44,22 +58,26 @@
        {
          name: "年谱",
          path: "/chronology",
          icon: "el-icon-s-home",
          icon: nianpu1,
          activeIcon: nianpu,
        },
        {
          name: "学术成果",
          path: "/achievements",
          icon: "el-icon-s-home",
          icon: xueshu,
          activeIcon: xueshu1,
        },
        {
          name: "荣誉奖项",
          path: "/honor",
          icon: "el-icon-s-home",
          icon: rongyu,
          activeIcon: rongyu1,
        },
        {
          name: "学生名录",
          path: "/directory",
          icon: "el-icon-s-home",
          icon: mulu,
          activeIcon: mulu1,
        },
      ],
    };
@@ -68,6 +86,12 @@
</script>

<style lang="less" scoped>

.iconBox{
  width: 70px;
  height: 70px;
  position: relative;
}
.homeLayoutBox {
  height: 100%;
  display: flex;
@@ -80,7 +104,7 @@
  }

  .active {
    background: #6F5A3A;
    background: #6f5a3a;
    color: #fff;
  }

@@ -112,7 +136,7 @@
      border-bottom: 1px solid #fff;
    }

    .leftMenuList>menuItem:first-child {
    .leftMenuList > menuItem:first-child {
      border-top: 1px solid #fff;
    }

@@ -134,6 +158,7 @@
        font-size: 24px;
        border-bottom: 1px solid #b9a587;
        height: 18vh;
        cursor: pointer;
        .menuText {
          line-height: 50px;
        }

 src/views/chronology/floatingWindow.vue

@@ -10,9 +10,9 @@
        <div class="journalInformation">{{ info.IssueNumber }}</div>
      </div>
      <div class="contentBox">
       <span>{{ info.author }}</span>
       <span style="margin-left: 20px"> {{ info.authorsUnits }}</span>
       <span></span>
        <span>{{ info.author }}</span>
        <span style="margin-left: 20px"> {{ info.authorsUnits }}</span>
        <span></span>
      </div>
      <div class="abstract">
        摘要：
@@ -43,44 +43,40 @@
      </div>
    </div>
    <div class="videoBox" v-if="info.cmsItemType === 'video'">
      <video
        width="370"
        height="240"
        controls
        :src="info.requestCtx"
      ></video>
      <video width="370" height="200" controls :src="info.requestCtx"></video>

      <div>
        <div class="subtitle">
          <div class="source">{{ info.name }}</div>
          <div class="source">{{ info.source }}</div>
          <div class="journalInformation">2005 3月 第40卷 第4期</div>
        </div>
        <div class="contentBox" style="text-align: left">
        
        </div>
          <div class="contentBox" style="text-align: left">
          <div class="audioContent" v-html="info.abstract"></div>
        </div></div>
      </div>
    </div>
    <div class="audioBox" v-if="info.cmsItemType === 'audio'">
      <div style="text-align: center">
        <audio
          style="width: 100%"
          style="width: 90%"
          src="https://www.w3schools.com/html/horse.ogg"
          controls
        ></audio>
      </div>
      <div>
        <div class="subtitle">
          <div class="source">中国中医基础医学杂志</div>
          <div class="source">{{ info.source }}</div>
          <div class="journalInformation">2005 3月 第40卷 第4期</div>
        </div>
        <div class="contentBox" style="text-align: left">
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <p>王睿 中国科学院大连化学物理研究所</p>
          <div class="audioContent" v-html="info.abstract"></div>
        </div>
      </div>
    </div>

    <div class="btnBox">
      <div class="detailBtn">查看详情</div>
    </div>
  </div>
</template>
@@ -94,12 +90,19 @@
      default: () => {},
    },
  },

  data() {
    return {};
  },
  mounted() {
    console.log(this.info);
  },
};
</script>

<style scoped>
.dialogBox {
  width: 400px;
  width: 524px;
  height: 100%;
  background-color: #fdf8f0;
  position: relative;
@@ -175,9 +178,32 @@
  font-weight: 700;
  color: #8f7a5a;
}
.source{
.source {
  max-width: 300px;
  overflow: hidden;
  white-space: normal;
}
.btnBox {
  text-align: center;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.detailBtn {
  width: 100px;
  height: 30px;
  border-radius: 30px;
  color: #8f7a5a;
  line-height: 30px;
  cursor: pointer;
  border: 1px solid #8f7a5a;
}
.audioContent{
  white-space: pre-line;
  line-height: 18px;
  margin-top: 10px;
  max-height: 100px;
  overflow-y: auto;
  margin-top: 20px;
}
</style>

 src/views/chronology/index.vue

@@ -50,6 +50,7 @@
                  v-for="(citem, cindex) in item.list"
                  :style="{ background: citem.color }"
                  @mouseover="showDetail(index, cindex, 1)"
                  @mouseleave="closeDetail(index, cindex, 0)"
                  :key="cindex"
                >
                  <div class="detailDialog" v-if="citem.showDetail">
@@ -66,7 +67,6 @@
                </div>
              </div>
              <div class="item-circle" @click="showYearWindow(index, 1)"></div>

              <div class="item-text">
                <div class="">
                  {{ item.name.split("，")[0] }}
@@ -195,6 +195,7 @@
      const filterList = yearDataList.datas.filter((item) => {
        return item.cmsItemType != "chronology" && item.cmsItemType != "AWARD";
      });

      if (filterList && filterList.length > 0) {
        for (let i = 0; i < filterList.length; i++) {
          const item = filterList[i];
@@ -202,16 +203,18 @@
            const requestCtx =
              this.config.requestCtx + `/file/api/ApiDownload?md5=${item.file}`;
            this.$set(item, "fileLink", requestCtx);
            console.log(item.fileLink, "item.fileLink");
          }
          this.$set(item, "showDetail", false);
          this.$set(item, "color", this.colorList[item.cmsItemType]);
        }
      }

      if (filterList.length > 0) {
        console.log(filterList, "filterList");
      }
      return filterList;
    },
    closeDetail(index, cindex, type) {
      console.log(index, cindex, type);
      for (let i = 0; i < this.contentList.length; i++) {
        const item = this.contentList[i];
        if (item && item.length > 0) {
@@ -230,6 +233,7 @@
          for (let j = 0; j < item.list.length; j++) {
            const citem = item.list[j];
            this.$set(citem, "showDetail", false);
            item.showDetail = false;
          }
        }
      }
@@ -287,7 +291,6 @@
      color: #937950;
    }

  
    .chartsBox {
      white-space: nowrap;
      padding: 0 80px;
@@ -404,10 +407,8 @@
}
.detailDialog {
  position: absolute;
  // left: -54px;
  // bottom: 50px;
  top: -550%;
  width: 400px;
  top: -700%;
  width: 524px;
  z-index: 9999;
  cursor: pointer;
  background: #fff;
@@ -444,6 +445,6 @@
  z-index: 999;
}
::v-deep .el-loading-spinner {
      color: #937950 !important;
    }
  color: #937950 !important;
}
</style>

 src/views/chronology/yearWindow.vue

@@ -7,7 +7,7 @@
        <div v-if="imgLink != ''" class="imgBox">
          <img class="autoImg" :src="imgLink" alt="" />
        </div>
        <div v-else>暂无图片</div>
        <div style="text-align: center; font-size: 18px; color: #999" v-else>暂无图片</div>
      </div>
    </div>
  </div>
@@ -44,7 +44,7 @@
<style scoped>
.dialogBox {
  width: 700px;
  height: 100%;
  min-height: 300px;
  position: relative;
  padding: 15px;
  z-index: 20;
@@ -53,7 +53,6 @@
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.leftTxt {
  width: 350px;

 src/views/directory/index.vue

@@ -26,7 +26,14 @@
        </p>
      </div>
      <!-- 图表显示 -->
      <div class="charts-main" v-if="activeTabs == 'chart'">
      <div
        class="charts-main"
        v-if="activeTabs == 'chart'"
        v-loading="loading"
        element-loading-text="图表加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0)"
      >
        <div class="radial-tree-container" v-show="!loading">
          <div ref="chart" style="width: 100%; height: 70vh"></div>
        </div>
@@ -83,8 +90,14 @@
                    {{ currentNodeInfo.name }}
                  </div>
                  <div style="margin-top: 20px">
                    <span> 男 </span> <span> 硕士 </span>
                    <span> 北京中医药大学 </span>
                    <span>
                      {{
                        currentNodeInfo.gender == "male" ? "男" : "女" || "-"
                      }}
                    </span>
                    <span> {{  currentNodeInfo.academicName || "-"}} </span>
                    <span> {{              legendList.find((item) => item.value == currentNodeInfo.unit)?.name ||
                "-" }} </span>
                  </div>
                </div>
              </div>
@@ -98,12 +111,12 @@
                  margin-top: 10px;
                "
              >
                <p style="margin-bottom: 15px">学习时间：1985.09 -1988.07</p>
                <p style="margin-bottom: 15px">学习时间：{{  currentNodeInfo.studyTime || "-" }}</p>
                <p style="margin-bottom: 15px">
                  现工作单位：北京中医药大学东方医院
                  现工作单位： {{currentNodeInfo.currentEmployer_secondary || '-' }}
                </p>
                <p style="margin-bottom: 15px">职务：原院长</p>
                <p style="margin-bottom: 15px">职称：主任医师、教授</p>
                <p style="margin-bottom: 15px">职务：{{ currentNodeInfo.jobTitle || "-" }}</p>
                <p style="margin-bottom: 15px">职称：{{ currentNodeInfo.professionalTitle || "-" }}</p>
              </div>
              <div style="text-align: left; line-height: 22px">
                <p>
@@ -285,7 +298,7 @@
          formatter: (params) => {
            const data = params.data;
            this.currentNodeInfo = data;

            console.log(data, "data");
            if (data.cmsItemType == "student") {
              return `
              <div style="
@@ -300,14 +313,27 @@
      <img class="autoImg"  src="${require("@/assets/images/directory/touxiang.png")}" alt="">
                  </div>
                <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;">${
                  data.name|| '-'
                  data.name || "-"
                }</div>
                <div> <span> ${data.gender == "male" ? "男" : "女" || '-'} </span> <span> ${data.academicName || '-'} </span> <span> ${ this.legendList.find((item) => item.value == data.unit)?.name || '-'}  </span></div>
                <div> <span> ${
                  data.gender == "male" ? "男" : "女" || "-"
                } </span> <span> ${data.academicName || "-"} </span> <span> ${
                this.legendList.find((item) => item.value == data.unit)?.name ||
                "-"
              }  </span></div>
                <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;text-align: left;margin-top: 10px;overflow: hidden;">
                  <p style="margin-bottom: 5px;">学习时间：${data.studyTime || '-'}</p>
                  <p style="margin-bottom: 5px; white-space: pre-wrap" >现工作单位：${data.currentEmployer_secondary || '-'}</p>
                  <p style="margin-bottom: 5px;">职务：${data.jobTitle || '-'}</p>
                  <p style="margin-bottom: 5px;">职称：${data.professionalTitle || '-'}</p>
                  <p style="margin-bottom: 5px;">学习时间：${
                    data.studyTime || "-"
                  }</p>
                  <p style="margin-bottom: 5px; white-space: pre-wrap" >现工作单位：${
                    data.currentEmployer_secondary || "-"
                  }</p>
                  <p style="margin-bottom: 5px;">职务：${
                    data.jobTitle || "-"
                  }</p>
                  <p style="margin-bottom: 5px;">职称：${
                    data.professionalTitle || "-"
                  }</p>
                  </div>

              </div>
@@ -328,14 +354,10 @@
                <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;">${
                  data.name
                }</div>
                <div> <span> 测试 </span> <span> 硕士 </span> <span> 北京中医药大学 </span></div>
                <div style="font-size: 16px; font-weight: bold; margin-bottom: 5px;text-align: left;margin-top: 10px;">
                  <p style="margin-bottom: 5px;">学习时间：1985.09 -1988.07</p>
                  <p style="margin-bottom: 5px;">现工作单位：北京中医药大学东方医院</p>
                  <p style="margin-bottom: 5px;">职务：原院长</p>
                  <p style="margin-bottom: 5px;">职称：主任医师、教授</p>
                  </div>

                <div>  <span> ${data.academicDegreeValue} </span> <span> ${
                data.academicDegreeName
              } </span></div>
   
              </div>
            `;
            }
@@ -499,7 +521,9 @@
                  item.unit == citem.unitValue &&
                  item.academicDegree == citem.academicDegreeValue
                ) {
                  item.academicName = this.academicDegreeList.find(f => f.value == item.academicDegree)?.name
                  item.academicName = this.academicDegreeList.find(
                    (f) => f.value == item.academicDegree
                  )?.name;
                  citem.studentList.push(item);
                  citem.children.push(item);
                }
@@ -655,6 +679,8 @@
.charts-main {
  // background-color: #000;
  position: relative;
  margin: 0 auto;
  min-height: 600px;
}

.table-title {
@@ -737,4 +763,12 @@
.tagText {
  margin-left: 30px;
}
::v-deep .el-loading-spinner {
  color: #937950 !important;
}

::v-deep .el-loading-spinner .el-loading-text {
  font-size: 14px;
  color: #937950;
}
</style>

 src/views/home/components/searchBox.vue

@@ -54,10 +54,13 @@
  max-width: 800px;
  display: flex;
  align-items: center;
  background-color: #fff;
}

/* 输入框样式 */
.search-input {
  background-color:transparent;

}

.inputBox {
@@ -96,7 +99,7 @@
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #B9A587;

  background-color: transparent;
  border-right: none;

}

 src/views/home/index.vue

@@ -1,60 +1,53 @@
<template>
  <div class="home">
    <div class="headerBox">
      <div class="title">
        <p>王永炎院士</p>
        <p>学术思想传承多维度数据库</p>
      </div>
      <div class="searchBox">
        <SearchBox />
      </div>
    </div>
    <div class="menuBox">
      <div class="menuList">
        <div
          class="menu"
          v-for="item in menuList"
          :key="item.id"
          @click="$router.push(item.path)"
        >
          <div class="menuIcon"><i class="el-icon-platform-eleme"></i></div>
          <div class="menuTitle">{{ item.title }}</div>
          <div class="menuSubTitle">{{ item.subTitle }}</div>
          <div class="menuLine"><i class="el-icon-right"></i></div>
  <div class="bgBox">
    <div class="home">
      <div class="headerBox">
        <div class="title">
          <p>王永炎院士</p>
          <p>学术思想传承多维度数据库</p>
        </div>
        <div class="searchBox">
          <SearchBox />
        </div>
      </div>
    </div>
    <div class="personalProfile">
      <div class="textInfo">
        <p>
          <i style="font-size: 18px">王永炎（1938.09.29 - ） </i>
          <i> 字致远，号颖容学人，中医内科学、中药资源学专家。</i>
        </p>
        <p>
          中央文史研究馆馆员，中国工程院院士，中国科学技术协会荣誉委员，第十届全国人大常委会委员，著名中医学家、中医脑病学家。
        </p>
        <p>
          曾任北京中医药大学校长、中国中医科学院院长，国务院学位委员会中医学、中药学学科评议组第三、四、五届召集人；
        </p>
        <p>
          现任中国中医科学院名誉院长、中国中医科学院临床医学基础研究所所长、北京师范大学资源学院资源药物与中药资源研究所所长、北京中医药大学脑病研究院学术委员会主<br />任，中国药典委员会第六、七届委员、第八、九届执行委员。
        </p>
        <p>
          曾获国家科学科技进步奖一等奖1项、二等奖2项、三等奖3项，省部级科技成果一等奖8项，获何梁何利基金“科学与技术进步奖”、香港求是科技基金会“中医药现代化杰出科技成就奖”，中国标准化协会“标准化终身成就奖”，中国产学研合作促进会产学研合作突出贡献奖，获全国五一劳动奖章和“全国先进工作者”荣誉称号。
        </p>
      <div class="menuBox">
        <div class="menuList">
          <div
            class="menu"
            v-for="item in menuList"
            :key="item.id"
            @click="$router.push(item.path)"
          >
            <div class="menuIcon">
              <img class="autoImg" :src="item.icon" alt="" />
            </div>
            <div class="menuTitle">{{ item.title }}</div>
            <div class="menuSubTitle">{{ item.subTitle }}</div>
            <div class="menuLine"><i class="el-icon-right"></i></div>
          </div>
        </div>
      </div>
    </div>
    <div class="copyrightInformation">
      版权所有：中国中医研究院 京ICP备 0384937947 京公网安备 1212129923
    </div>
    <div class="profilePhoto">
      <img class="autoImg" src="@/assets/images/profilePhoto.png" alt="" />
      <div class="personalProfile">
        <div class="textInfo" v-html="introduction"></div>
      </div>
      <div class="copyrightInformation">
        版权所有：中国中医研究院 京ICP备 0384937947 京公网安备 1212129923
      </div>
      <div class="profilePhoto">
        <img class="autoImg" src="@/assets/images/profilePhoto.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import SearchBox from "./components/searchBox.vue";
import nianpu1 from "@/assets/images/menuIcon/nianpu1.png";
import mulu from "@/assets/images/menuIcon/mulu.png";
import rongyu from "@/assets/images/menuIcon/rongyu.png";
import xueshu from "@/assets/images/menuIcon/xueshu.png";
import homeBg from "@/assets/images/homeBg1.jpg";

export default {
  components: {
    SearchBox,
@@ -64,36 +57,60 @@
    return {
      menuList: [
        {
          icon: "el-icon-platform-eleme",
          icon: nianpu1,
          title: "年谱",
          subTitle: "1936-2024",
          path: "/chronology",
        },
        {
          icon: "el-icon-platform-eleme",
          icon: xueshu,
          title: "学术成果",
          subTitle: "100+",
          path: "/achievements",
        },
        {
          icon: "el-icon-platform-eleme",
          icon: rongyu,
          title: "荣誉奖项",
          subTitle: "50+",
          path: "/honor",
        },
        {
          icon: "el-icon-platform-eleme",
          icon: mulu,
          title: "学生目录",
          subTitle: "1936-2024",
          path: "/directory",
        },
      ],
      introduction: "",
    };
  },

  momunted() {},
  created() {
    this.getPersonInfo();
  },
  methods: {
    goPage(row) {
      console.log(row);
      this.$router.push(row.path);
    },
    //获取人物介绍
    getPersonInfo() {
      this.MG.resource
        .getItem({
          path: "WYY_introduction",
          fields: {
            content: [],
          },
          paging: {
            start: 0,
            size: 999,
          },
        })
        .then(async (res) => {
          console.log(res, "this.res");
          this.introduction = res.datas[0].content;
        });
    },
  },
};
@@ -108,6 +125,11 @@
  background-size: 98% 95%;
  position: relative;
  box-sizing: border-box;
}
.bgBox {
  width: 100%;
  height: 100vh;
  background-image: url("@/assets/images/homeBg1.jpg");
}
.profilePhoto {
  /* background-image: url("@/assets/images/profilePhoto.png"); */
@@ -125,14 +147,17 @@
  padding-top: 3%;
  padding-left: 5%;
  border-bottom: 1px solid#937950;
  font-size: 50px;
  line-height: 66px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Alimama DongFangDaKai;
  box-sizing: border-box;
  margin: 0 auto;
}
.title {
  font-size: 50px;
  line-height: 66px;
}
.searchBox {
  margin-right: 100px;
@@ -148,7 +173,6 @@
  width: 25%;
  /* height: 450px; */
  height: 100%;
  background-color: #fff;
  text-align: center;
  padding-top: 20px;
  box-sizing: border-box;
@@ -160,6 +184,7 @@
  align-items: center;
  justify-content: center;
  color: #937950;
  cursor: pointer;
}
.menu:first-child {
  border-left: 1px solid #937950;
@@ -167,6 +192,11 @@
.menuIcon {
  font-size: 80px;
  margin-top: 20px;
  width: 50%;
  height: 29%;
  background-color: #937950;
  border-radius: 50%;
  position: relative;
}
.menuTitle {
  font-size: 40px;

 yarn.lock

Diff too large