zhongshujie
3 天以前 34c4d498b69f746b98ff71afa14a9804e43afcf8
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;
@@ -212,7 +242,7 @@
  text-align: center;
}
@media screen and (min-width: 1920px) {
@media screen and (min-width: 1950px) {
  .textInfo {
    font-size: 20px;
    line-height: 24px;