bug修改

zhongshujie

2025-04-08 dc161b8ff89d1a2791ba0c08e30aa278ea5ace47

 src/views/home/index.vue

@@ -1,12 +1,102 @@
<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>
      </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>
    </div>
    <div class="copyrightInformation">
      版权所有：中国中医研究院 京ICP备 0384937947 京公网安备 1212129923
    </div>
    <div class="profilePhoto">
      <img class="autoImg" src="@/assets/images/profilePhoto.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {};
import SearchBox from "./components/searchBox.vue";
export default {
  components: {
    SearchBox,
  },

  data() {
    return {
      menuList: [
        {
          icon: "el-icon-platform-eleme",
          title: "年谱",
          subTitle: "1936-2024",
          path: "/chronology",
        },
        {
          icon: "el-icon-platform-eleme",
          title: "学术成果",
          subTitle: "100+",
          path: "/achievements",
        },
        {
          icon: "el-icon-platform-eleme",
          title: "荣誉奖项",
          subTitle: "50+",
          path: "/honor",
        },
        {
          icon: "el-icon-platform-eleme",
          title: "学生目录",
          subTitle: "1936-2024",
          path: "/directory",
        },
      ],
    };
  },
  methods: {
    goPage(row) {
      console.log(row);
      this.$router.push(row.path);
    },
  },
};
</script>

<style>
@@ -15,16 +105,117 @@
  height: 100vh;
  background-image: url("@/assets/images/homeBg.png");
  background-repeat: no-repeat;
  background-size: 100% 95%;
  background-size: 98% 95%;
  position: relative;
  box-sizing: border-box;
}
.profilePhoto {
  background-image: url("@/assets/images/profilePhoto.png");
  width: 575px;
  height: 656px;
  /* background-image: url("@/assets/images/profilePhoto.png"); */
  width: 50%;
  height: 60%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: 33%;
  left: 8%;
  position: absolute;
  top: 28.2%;
  left: 0;
}
.headerBox {
  width: 95.5%;
  height: 23.1%;
  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;
}
.searchBox {
  margin-right: 100px;
}
.menuBox {
  position: absolute;
  right: 2.5%;
  width: 52%;
  height: 47.3%;
  font-family: Alimama DongFangDaKai;
}
.menu {
  width: 25%;
  /* height: 450px; */
  height: 100%;
  background-color: #fff;
  text-align: center;
  padding-top: 20px;
  box-sizing: border-box;
  border: 1px solid #937950;
  border-top: none;
  border-left: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #937950;
}
.menu:first-child {
  border-left: 1px solid #937950;
}
.menuIcon {
  font-size: 80px;
  margin-top: 20px;
}
.menuTitle {
  font-size: 40px;
  font-weight: 600;
  margin-top: 20px;
}
.menuSubTitle {
  font-size: 28px;
  margin-top: 20px;
}
.menuLine {
  margin-top: 40px;
  font-size: 40px;
}
.menuList {
  display: flex;
  height: 100%;
}

.personalProfile {
  background: rgba(147, 121, 80, 0.15);
  height: 17.8%;
  width: 95.1%;
  position: absolute;
  right: 2.5%;
  bottom: 11.7%;
  border: 1px solid #937950;
}
.textInfo {
  position: absolute;
  right: 40px;
  width: 50%;
  margin-top: 20px;
  /* line-height: 16px; */
}
.copyrightInformation {
  width: 100%;
  position: absolute;
  bottom: 8%;
  font-size: 12px;
  color: #937950;
  width: 100%;
  text-align: center;
}

@media screen and (min-width: 1920px) {
  .textInfo {
    font-size: 20px;
    line-height: 24px;
  }
}
</style>