From a5abb70a428f59894fc9ee4330f0033d6fe93a8b Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期四, 24 四月 2025 18:38:13 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/wyyDatabase
---
src/views/home/index.vue | 239 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 230 insertions(+), 9 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 9f00586..7518d17 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,12 +1,119 @@
<template>
- <div class="home">
- <div class="profilePhoto">
+ <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">
+ 鐗堟潈鎵�鏈夛細涓浗涓尰鐮旂┒闄� 浜琁CP澶� 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>
@@ -15,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>
--
Gitblit v1.9.1