From 9cad6a832c786989be620573b09badccfe7e3b51 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期一, 25 八月 2025 15:11:37 +0800
Subject: [PATCH] 首页头部，样式调整
---
src/views/personalCenter/index.vue | 149 +++++++++++++++++++++++++------------------------
1 files changed, 77 insertions(+), 72 deletions(-)
diff --git a/src/views/personalCenter/index.vue b/src/views/personalCenter/index.vue
index 53e00c3..b20e53c 100644
--- a/src/views/personalCenter/index.vue
+++ b/src/views/personalCenter/index.vue
@@ -1,100 +1,101 @@
<template>
- <page>
- <div class="contentBox">
- <div class="breadcrumbBox">
- <span>浣嶇疆锛�</span>
- <el-breadcrumb :separator-icon="ArrowRight">
- <el-breadcrumb-item>涓汉涓績</el-breadcrumb-item>
- <el-breadcrumb-item>{{ label }}</el-breadcrumb-item>
- </el-breadcrumb>
- </div>
- <el-divider />
- <div class="personalPage clear">
- <div class="leftList fl">
- <ul class="menu">
- <li
- v-for="item in listMenu"
- :key="item.key"
- @click="goRouter(item)"
- :class="`/${item.path}` === path ? 'activeItem hover' : 'menuItem hover'"
+ <div class="contentBox">
+ <div class="breadcrumbBox">
+ <span>浣嶇疆锛�</span>
+ <el-breadcrumb :separator-icon="ArrowRight">
+ <el-breadcrumb-item>涓汉涓績</el-breadcrumb-item>
+ <el-breadcrumb-item>{{ label }}</el-breadcrumb-item>
+ </el-breadcrumb>
+ </div>
+ <el-divider style="margin: 5px 0;" />
+ <div class="personalPage clear">
+ <div class="leftList fl">
+ <ul class="menu">
+ <li
+ v-for="item in listMenu"
+ :key="item.key"
+ @click="goRouter(item)"
+ :class="`/${item.path}` === path ? 'activeItem hover' : 'menuItem hover'"
+ >
+ <span
+ :style="{
+ fill: `/${item.path}` === path ? '#fff' : '#000',
+ }"
+ v-html="item.icon"
>
- <span
- :style="{
- fill: `/${item.path}` === path ? '#fff' : '#000',
- }"
- v-html="item.icon"
- >
- </span>
- <span>{{ item.label }}</span>
- </li>
- </ul>
- </div>
- <div class="rightContent">
- <div>
- <!-- 璁╀富浣撳仛瀛愯矾鐢辩殑鏄剧ず -->
- <router-view />
- </div>
+ </span>
+ <span>{{ item.label }}</span>
+ </li>
+ </ul>
+ </div>
+ <div class="rightContent">
+ <div>
+ <!-- 璁╀富浣撳仛瀛愯矾鐢辩殑鏄剧ず -->
+ <router-view />
</div>
</div>
</div>
- </page>
+ </div>
</template>
<script setup lang="ts">
-import { ArrowRight } from "@element-plus/icons-vue";
-import { menu } from "./config.ts";
-import { useRouter, onBeforeRouteUpdate } from "vue-router";
-import { ref, onMounted, inject } from "vue";
-const router = useRouter();
-const routerVal = router.currentRoute.value;
-const path = ref(routerVal.path);
-const label = ref("");
-const listMenu: any = ref([]);
-const MG: any = inject("MG");
-const config: any = inject("config");
+import { ArrowRight } from '@element-plus/icons-vue'
+import { menu } from './config'
+import { useRouter, onBeforeRouteUpdate } from 'vue-router'
+import { ref, onMounted, inject } from 'vue'
+const router = useRouter()
+const routerVal = router.currentRoute.value
+const path = ref(routerVal.path)
+const label = ref('')
+const listMenu: any = ref([])
+const MG: any = inject('MG')
+const config: any = inject('config')
onBeforeRouteUpdate(async (to, from) => {
- path.value = to.fullPath;
-});
+ path.value = to.fullPath
+})
onMounted(() => {
menu.forEach((item) => {
- if ("/" + item.path === path.value) {
- label.value = item.label;
+ if ('/' + item.path === path.value) {
+ label.value = item.label
}
- });
- const userCache: any = localStorage.getItem(config.userInfoKey);
- const userInfo = JSON.parse(userCache);
+ })
+ const userCache: any = localStorage.getItem(config.userInfoKey)
+ const userInfo = JSON.parse(userCache)
if (!userInfo) {
router.push({
- path: "/",
- });
- return false;
+ path: '/',
+ })
+ return false
}
- if (userInfo.role == "Teacher") {
- const data: any = menu.filter((item) => item.path != "myClass");
- listMenu.value = data;
+ if (userInfo.role == 'Teacher') {
+ const data: any = menu.filter((item) => item.path != 'myClass')
+ listMenu.value = data
} else {
- const data: any = menu.filter((item) => item.path != "myCourse");
- listMenu.value = data;
+ const data: any = menu.filter((item) => item.path != 'myCourse')
+ listMenu.value = data
}
-});
+})
const goRouter = (item: any) => {
- if (
- !localStorage.getItem(config.tokenKey) ||
- localStorage.getItem(config.tokenKey) == null
- ) {
+ if (!localStorage.getItem(config.tokenKey) || localStorage.getItem(config.tokenKey) == null) {
router.push({
- path: "/home",
+ path: '/home',
query: {
- showLogin: "1",
+ showLogin: '1',
},
- });
+ })
} else {
- label.value = item.label;
- router.push({ path: item.path });
+ label.value = item.label
+ router.push({ path: item.path })
}
-};
+}
</script>
<style lang="less" scoped>
+.homePage {
+ min-width: 1220px;
+ min-height: calc(100vh - 61.8%);
+ background-color: #fff;
+ padding-bottom: 100px;
+}
.breadcrumbBox {
display: flex;
padding: 20px;
@@ -109,6 +110,10 @@
border-radius: 10px 10px 10px 10px;
background: #e1ebe3;
height: max-content;
+ background-image: url('@/assets/images/personalCenter/Account_bg.png');
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100% 100%;
.menu {
li {
height: 50px;
--
Gitblit v1.9.1