From 8209ece89c9ee3ba78969433b60b4d20af6b9421 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 31 三月 2025 18:41:31 +0800
Subject: [PATCH] 公共组件
---
src/views/honors/index.vue | 2
src/views/achievements/index.vue | 14 ++++
src/layout/index.vue | 112 ++++++++++++++++++++++++++++++++++++
src/router/index.js | 20 +++++-
src/views/directory/index.vue | 9 +++
5 files changed, 151 insertions(+), 6 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index d7b591b..490107c 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,5 +1,26 @@
<template>
<div class="homeLayoutBox">
+ <div class="leftMenu">
+ <div 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>
+ <div class="menuText">{{ item.name }}</div>
+ </div>
+ </div>
+ </div>
<div class="pageContentBox">
<keep-alive v-if="keepAliveList.length > 0" :include="keepAliveList">
<router-view />
@@ -12,16 +33,41 @@
<script>
import { mapState } from "vuex";
export default {
-
computed: {
...mapState(["userInfo", "keepAliveList"]),
},
watch: {
$route(to, from) {
if (to.meta.keepAlive && this.keepAliveList.indexOf(to.name) == -1) {
- this.$store.commit("addKeepAlive", to.name);
+ this.$store.commit("addKeepAlive", to.name);
}
},
+ },
+ data() {
+ return {
+ menuList: [
+ {
+ name: "骞磋氨",
+ path: "/chronology",
+ icon: "el-icon-s-home",
+ },
+ {
+ name: "瀛︽湳鎴愭灉",
+ path: "/achievements",
+ icon: "el-icon-s-home",
+ },
+ {
+ name: "鑽ｈ獕濂栭」",
+ path: "/honor",
+ icon: "el-icon-s-home",
+ },
+ {
+ name: "瀛︾敓鍚嶅綍",
+ path: "/directory",
+ icon: "el-icon-s-home",
+ },
+ ],
+ };
},
};
</script>
@@ -30,8 +76,70 @@
.homeLayoutBox {
width: 100%;
height: 100%;
+ display: flex;
+ // background-image: url("@/assets/images/homeBg.png");
+ // background-repeat: no-repeat;
+ // background-size: 100% 95%;
.pageContentBox {
min-height: calc(100% - 525px);
}
+ .active{
+ background: #6F5A3A;
+ color: #fff;
+ }
+ .leftMenu {
+ width: 200px;
+ height: 100%;
+ background: #937950;
+ display: flex;
+ flex-direction: column;
+ .leftMenuTitle {
+ width: 100%;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+ color: #fff;
+ font-size: 24px;
+ }
+ .leftMenuContent {
+ font-size: 20px;
+ line-height: 30px;
+ color: #fff;
+ margin: 10px 20px;
+ padding: 10px 0;
+ text-align: center;
+ border-top: 1px solid #fff;
+ border-bottom: 1px solid #fff;
+ }
+ .leftMenuList > menuItem:first-child {
+ border-top: 1px solid #fff;
+ }
+ .leftMenuList {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ border-top: 1px solid #b9a587;
+ margin-top: 20px;
+
+ .menuItem {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ color: #decaac;
+ font-size: 24px;
+ border-bottom: 1px solid #b9a587;
+ height: 180px;
+ .menuText {
+ line-height: 50px;
+ }
+ i {
+ font-size: 34px;
+ }
+ }
+ }
+ }
}
</style>
diff --git a/src/router/index.js b/src/router/index.js
index 6f83cad..e5c95e0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,13 +24,12 @@
path: "/chronology",
name: "chronology",
meta: {
- name: "棣栭〉",
+ name: "骞磋氨",
authentication: false, // 鏄惁闇�瑕佺櫥褰曢獙璇�
keepAlive: false, // 鏄惁闇�瑕佺紦瀛�
},
component: () => import("@/views/chronology/index.vue")
},
-
{
path: "/honor",
name: "honor",
@@ -39,7 +38,22 @@
},
component: Honor,
},
-
+ {
+ path: "/achievements",
+ name: "achievements",
+ meta: {
+ name: "瀛︽湳鎴愭灉",
+ },
+ component: () => import("@/views/achievements/index.vue"),
+ },
+ {
+ path: "/directory",
+ name: "directory",
+ meta: {
+ name: "瀛︾敓鍚嶅綍",
+ },
+ component: () => import("@/views/directory/index.vue"),
+ },
// {
// path: "/login",
// name: "login",
diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue
new file mode 100644
index 0000000..ffd9204
--- /dev/null
+++ b/src/views/achievements/index.vue
@@ -0,0 +1,14 @@
+
+<template>
+ <div>瀛︽湳鎴愭灉</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/views/directory/index.vue b/src/views/directory/index.vue
new file mode 100644
index 0000000..e9f4253
--- /dev/null
+++ b/src/views/directory/index.vue
@@ -0,0 +1,9 @@
+<template>
+ <div>瀛︾敓鍚嶅綍</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>
diff --git a/src/views/honors/index.vue b/src/views/honors/index.vue
index cb3efc7..a2f9c44 100644
--- a/src/views/honors/index.vue
+++ b/src/views/honors/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="honors">
- <div></div>
+ <div>鑽ｈ獕</div>
<div></div>
</div>
</template>
--
Gitblit v1.9.1