From f2433a2fb08c167b45a9fc26f2fa178a76ab807b Mon Sep 17 00:00:00 2001
From: qiyunfeng-create <1940665526@qq.com>
Date: 星期三, 20 八月 2025 10:40:02 +0800
Subject: [PATCH] 个人中心-img
---
src/views/personalCenter/index.vue | 144 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 144 insertions(+), 0 deletions(-)
diff --git a/src/views/personalCenter/index.vue b/src/views/personalCenter/index.vue
new file mode 100644
index 0000000..243c6b4
--- /dev/null
+++ b/src/views/personalCenter/index.vue
@@ -0,0 +1,144 @@
+<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'"
+ >
+ <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>
+ </page>
+</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 } from 'vue'
+const router = useRouter()
+const routerVal = router.currentRoute.value
+const path = ref(routerVal.path)
+const label = ref('')
+const listMenu: any = ref([])
+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('jesk-userInfo')
+ // const userInfo = JSON.parse(userCache)
+ // if(!userInfo){
+ // router.push({
+ // path:'/'
+ // })
+ // return false;
+ // }
+ // if (userInfo.role == 'Teacher') {
+ // const data: any = menu.filter((item) => item.path != 'class')
+ // listMenu.value = data
+ // } else {
+ const data: any = menu.filter((item) => item.path != 'course')
+ listMenu.value = data
+ // }
+})
+const goRouter = (item: any) => {
+ // if (!localStorage.getItem('jsek-token') || localStorage.getItem('jsek-token') == null) {
+ // router.push({
+ // path: '/home',
+ // query: {
+ // showLogin: '1'
+ // }
+ // })
+ // } else {
+ label.value = item.label
+ router.push({ path: item.path })
+ // }
+}
+</script>
+<style lang="less" scoped>
+.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;
+ .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