From cb9cd5f77b5d6ace463f46ab2f0e8aafa82f9dcb Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期二, 15 四月 2025 09:44:54 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/wyyDatabase --- src/views/home/index.vue | 207 +++++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 199 insertions(+), 8 deletions(-) diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 9f00586..a626284 100644 --- a/src/views/home/index.vue +++ b/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"> + 鐗堟潈鎵�鏈夛細涓浗涓尰鐮旂┒闄� 浜琁CP澶� 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: "鑽h獕濂栭」", + 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> -- Gitblit v1.9.1