学术成果检索

zhongshujie

3 天以前 34c4d498b69f746b98ff71afa14a9804e43afcf8

 src/views/home/index.vue

@@ -1,11 +1,119 @@
<template>
  <div class="home">
    <div class="profilePhoto"></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 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 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>
export default {};
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,
  },

  data() {
    return {
      menuList: [
        {
          icon: nianpu1,
          title: "年谱",
          subTitle: "1936-2024",
          path: "/chronology",
        },
        {
          icon: xueshu,
          title: "学术成果",
          subTitle: "100+",
          path: "/achievements",
        },
        {
          icon: rongyu,
          title: "荣誉奖项",
          subTitle: "50+",
          path: "/honor",
        },
        {
          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;
        });
    },
  },
};
</script>

<style>
@@ -14,16 +122,130 @@
  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;
}
.bgBox {
  width: 100%;
  height: 100vh;
  background-image: url("@/assets/images/homeBg1.jpg");
}
.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: absolute;
  top: 28.2%;
  left: 0;
}
.headerBox {
  width: 95.5%;
  height: 23.1%;
  padding-top: 3%;
  padding-left: 5%;
  border-bottom: 1px solid#937950;

  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;
}
.menuBox {
  position: absolute;
  right: 2.5%;
  width: 52%;
  height: 47.3%;
  font-family: Alimama DongFangDaKai;
}
.menu {
  width: 25%;
  /* height: 450px; */
  height: 100%;
  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;
  cursor: pointer;
}
.menu:first-child {
  border-left: 1px solid #937950;
}
.menuIcon {
  font-size: 80px;
  margin-top: 20px;
  width: 50%;
  height: 29%;
  background-color: #937950;
  border-radius: 50%;
  position: relative;
  top: 33%;
  left: 8%;
}
.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: 1950px) {
  .textInfo {
    font-size: 20px;
    line-height: 24px;
  }
}
</style>