From 8bffcbb7f5fca4e1e7a308f6f786b63d0773704c Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 28 四月 2025 19:28:29 +0800
Subject: [PATCH] 页面优化
---
src/layout/index.vue | 60 +++++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 45 insertions(+), 15 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 1bfab19..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: "鑽ｈ獕濂栭」",
path: "/honor",
- icon: "el-icon-s-home",
+ icon: rongyu,
+ activeIcon: rongyu1,
},
{
name: "瀛︾敓鍚嶅綍",
path: "/directory",
- icon: "el-icon-s-home",
+ icon: mulu,
+ activeIcon: mulu1,
},
],
};
@@ -68,6 +86,12 @@
</script>
<style lang="less" scoped>
+
+.iconBox{
+ width: 70px;
+ height: 70px;
+ position: relative;
+}
.homeLayoutBox {
height: 100%;
display: flex;
@@ -80,7 +104,7 @@
}
.active {
- background: #6F5A3A;
+ background: #6f5a3a;
color: #fff;
}
@@ -90,13 +114,14 @@
background: #937950;
display: flex;
flex-direction: column;
- font-family: Alimama DongFangDaKai;
-
+ font-family: siyuanBlod;
+
.leftMenuTitle {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
+ margin-top: 20px;
color: #fff;
font-size: 24px;
}
@@ -105,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;
}
@@ -122,7 +150,7 @@
justify-content: space-around;
border-top: 1px solid #b9a587;
margin-top: 20px;
-
+ font-weight: bold;
.menuItem {
width: 100%;
display: flex;
@@ -134,8 +162,10 @@
font-size: 24px;
border-bottom: 1px solid #b9a587;
height: 18vh;
+ cursor: pointer;
.menuText {
line-height: 50px;
+ font-weight: 700;
}
i {
--
Gitblit v1.9.1