From c6189f35d8744bf9c90bc15fd132ceb2a51d902c Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 28 四月 2025 19:29:52 +0800
Subject: [PATCH] bug修改
---
src/views/home/index.vue | 197 +++++++++++++++++++++++++++++++------------------
1 files changed, 125 insertions(+), 72 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 108815d..9259896 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,58 +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 @searchFun="handleSearch" />
</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 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 class="copyrightInformation">
- 鐗堟潈鎵�鏈夛細涓浗涓尰鐮旂┒闄� 浜琁CP澶� 0384937947 浜叕缃戝畨澶� 1212129923
- </div>
- <div class="profilePhoto"></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,
@@ -62,36 +57,64 @@
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);
+ },
+
+ handleSearch(type, value) {
+ console.log(type, value);
+ },
+ //鑾峰彇浜虹墿浠嬬粛
+ 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;
+ });
},
},
};
@@ -105,45 +128,57 @@
background-repeat: no-repeat;
background-size: 98% 95%;
position: relative;
- padding: 0 40px;
box-sizing: border-box;
+ font-family: siyuan;
+
+}
+.bgBox {
+ width: 100%;
+ height: 100vh;
+ background-image: url("@/assets/images/homeBg1.jpg");
}
.profilePhoto {
- background-image: url("@/assets/images/profilePhoto.png");
- width: 475px;
- height: 556px;
+ /* background-image: url("@/assets/images/profilePhoto.png"); */
+ width: 50%;
+ height: 60%;
+ background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
- top: 30%;
- left: 8%;
+ top: 28.2%;
+ left: 0;
}
.headerBox {
- width: 99.5%;
- height: 220px;
- padding-top: 60px;
- padding-left: 40px;
+ 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;
+}
+.title {
+ font-size: 50px;
+ line-height: 66px;
}
.searchBox {
margin-right: 100px;
}
.menuBox {
position: absolute;
- right: 48px;
- width: 1000px;
+ right: 2.5%;
+ width: 52%;
+ height: 47.3%;
font-family: Alimama DongFangDaKai;
}
.menu {
width: 25%;
- height: 450px;
- background-color: #fff;
+ /* height: 450px; */
+ height: 100%;
text-align: center;
padding-top: 20px;
box-sizing: border-box;
@@ -155,6 +190,7 @@
align-items: center;
justify-content: center;
color: #937950;
+ cursor: pointer;
}
.menu:first-child {
border-left: 1px solid #937950;
@@ -162,15 +198,23 @@
.menuIcon {
font-size: 80px;
margin-top: 20px;
+ width: 50%;
+ height: 29%;
+ background-color: #937950;
+ border-radius: 50%;
+ position: relative;
}
.menuTitle {
font-size: 40px;
font-weight: 600;
margin-top: 20px;
+ font-family: siyuan;
}
.menuSubTitle {
font-size: 28px;
margin-top: 20px;
+ font-family: siyuan;
+
}
.menuLine {
margin-top: 40px;
@@ -178,30 +222,39 @@
}
.menuList {
display: flex;
+ height: 100%;
}
.personalProfile {
background: rgba(147, 121, 80, 0.15);
- height: 170px;
- width: 100%;
+ height: 17.8%;
+ width: 95.1%;
position: absolute;
- right: 40px;
- bottom: 111px;
+ right: 2.5%;
+ bottom: 11.7%;
border: 1px solid #937950;
}
.textInfo {
position: absolute;
right: 40px;
- width: 1000px;
+ width: 50%;
margin-top: 20px;
- line-height: 16px;
+ /* line-height: 16px; */
}
.copyrightInformation {
+ width: 100%;
position: absolute;
- bottom: 80px;
+ 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