From 5e73d562bae941a7658c3c13fdb585461f1a24e4 Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期一, 28 四月 2025 21:21:07 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/wyyDatabase --- src/layout/index.vue | 64 +++++++++++++++++++++++--------- 1 files changed, 46 insertions(+), 18 deletions(-) diff --git a/src/layout/index.vue b/src/layout/index.vue index 5664b1e..eb9f1ab 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -1,16 +1,22 @@ <template> <div class="homeLayoutBox"> <div class="leftMenu"> - <div class="leftMenuTitle" @click="$router.push('/home')">鐜嬫案鐐庨櫌澹�</div> + <div style="cursor: pointer;" class="leftMenuTitle" @click="$router.push('/home')">鐜嬫案鐐庨櫌澹�</div> <div class="leftMenuContent"> <p>瀛︽湳鎬濇兂浼犳壙</p> <p>澶氱淮搴︽暟鎹簱</p> </div> <div class="leftMenuList"> - <div class="menuItem" :class="{ active: $route.path == item.path }" v-for="(item, index) in menuList" - :key="index" @click="$router.push(item.path)"> - <div> - <i :class="item.icon"></i> + <div + class="menuItem" + :class="{ active: $route.path == item.path }" + v-for="(item, index) in menuList" + :key="index" + @click="$router.push(item.path)" + > + <div class="iconBox"> + <img class="autoImg" :src="item.activeIcon" alt="" v-if="$route.path == item.path"> + <img class="autoImg" :src="item.icon" alt="" v-else> </div> <div class="menuText">{{ item.name }}</div> </div> @@ -27,6 +33,14 @@ <script> import { mapState } from "vuex"; +import nianpu1 from "@/assets/images/menuIcon/nianpu1.png"; +import nianpu from "@/assets/images/menuIcon/nianpu.png"; +import mulu from "@/assets/images/menuIcon/mulu.png"; +import mulu1 from "@/assets/images/menuIcon/mulu1.png"; +import rongyu from "@/assets/images/menuIcon/rongyu.png"; +import rongyu1 from "@/assets/images/menuIcon/rongyu1.png"; +import xueshu from "@/assets/images/menuIcon/xueshu.png"; +import xueshu1 from "@/assets/images/menuIcon/xueshu1.png"; export default { computed: { ...mapState(["userInfo", "keepAliveList"]), @@ -44,22 +58,26 @@ { name: "骞磋氨", path: "/chronology", - icon: "el-icon-s-home", + icon: nianpu1, + activeIcon: nianpu, }, { name: "瀛︽湳鎴愭灉", path: "/achievements", - icon: "el-icon-s-home", + icon: xueshu, + activeIcon: xueshu1, }, { name: "鑽h獕濂栭」", path: "/honor", - icon: "el-icon-s-home", + icon: rongyu, + activeIcon: rongyu1, }, { name: "瀛︾敓鍚嶅綍", path: "/directory", - icon: "el-icon-s-home", + icon: mulu, + activeIcon: mulu1, }, ], }; @@ -68,11 +86,15 @@ </script> <style lang="less" scoped> + +.iconBox{ + width: 70px; + height: 70px; + position: relative; +} .homeLayoutBox { - width: 100%; height: 100%; display: flex; - // background-image: url("@/assets/images/homeBg.png"); // background-repeat: no-repeat; // background-size: 100% 95%; @@ -82,7 +104,7 @@ } .active { - background: #6F5A3A; + background: #6f5a3a; color: #fff; } @@ -92,12 +114,14 @@ background: #937950; display: flex; flex-direction: column; - + font-family: siyuanBlod; + .leftMenuTitle { width: 100%; height: 50px; line-height: 50px; text-align: center; + margin-top: 20px; color: #fff; font-size: 24px; } @@ -106,14 +130,17 @@ font-size: 20px; line-height: 30px; color: #fff; - margin: 10px 20px; + margin: 10px 14px; + margin-top: 0px; padding: 10px 0; text-align: center; border-top: 1px solid #fff; border-bottom: 1px solid #fff; + letter-spacing: 4px; + white-space: nowrap; } - .leftMenuList>menuItem:first-child { + .leftMenuList > menuItem:first-child { border-top: 1px solid #fff; } @@ -123,7 +150,7 @@ justify-content: space-around; border-top: 1px solid #b9a587; margin-top: 20px; - + font-weight: bold; .menuItem { width: 100%; display: flex; @@ -134,10 +161,11 @@ color: #decaac; font-size: 24px; border-bottom: 1px solid #b9a587; - height: 180px; - + height: 18vh; + cursor: pointer; .menuText { line-height: 50px; + font-weight: 700; } i { -- Gitblit v1.9.1