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 | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 154 insertions(+), 0 deletions(-)
diff --git a/src/views/personalCenter/index.vue b/src/views/personalCenter/index.vue
new file mode 100644
index 0000000..b20e53c
--- /dev/null
+++ b/src/views/personalCenter/index.vue
@@ -0,0 +1,154 @@
+<template>
+ <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>
+ <span>{{ item.label }}</span>
+ </li>
+ </ul>
+ </div>
+ <div class="rightContent">
+ <div>
+ <!-- 璁╀富浣撳仛瀛愯矾鐢辩殑鏄剧ず -->
+ <router-view />
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+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
+})
+onMounted(() => {
+ menu.forEach((item) => {
+ if ('/' + item.path === path.value) {
+ label.value = item.label
+ }
+ })
+ const userCache: any = localStorage.getItem(config.userInfoKey)
+ const userInfo = JSON.parse(userCache)
+ if (!userInfo) {
+ router.push({
+ path: '/',
+ })
+ return false
+ }
+ 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 goRouter = (item: any) => {
+ if (!localStorage.getItem(config.tokenKey) || localStorage.getItem(config.tokenKey) == null) {
+ router.push({
+ path: '/home',
+ query: {
+ showLogin: '1',
+ },
+ })
+ } else {
+ 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;
+}
+
+.personalPage {
+ padding: 20px 10px;
+ display: flex;
+
+ .leftList {
+ width: 275px;
+ 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;
+ padding: 10px 40px;
+ font-size: 16px;
+ display: flex;
+ align-items: center;
+ border-bottom: 1px solid #ffffff;
+
+ img {
+ width: 19px;
+ height: 24px;
+ }
+
+ span {
+ margin-left: 10px;
+ }
+ }
+
+ .activeItem {
+ background: linear-gradient(90deg, #019e58 0%, #144941 100%);
+ background-size: 100% 100%;
+ color: #fff;
+ svg {
+ fill: #fff;
+ }
+ }
+ }
+ }
+
+ .rightContent {
+ flex: 1;
+ overflow: auto;
+ margin-left: 15px;
+ background-color: #fff;
+ }
+}
+</style>
--
Gitblit v1.9.1