fix

src/component/Account/account.vue

@@ -0,0 +1,148 @@
+<template>
+    <div class="account_page">
+		<div class="account_page_titleImg">
+			<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
+		</div>
+		<div class="account_page_content_box">
+			<div class="account_page_content">
+				<div class="account_page_content_left">
+					<div class="content_left_item">
+						<div>个人中心</div>
+					</div>
+					<!-- {{ router.path }} -->
+					<router-link class="content_left_item" v-for="item in rootSubmenuKeys" :class="{active: $route.path == item.route}" :to="item.route">
+						<i class="fi" :class="item.icon"></i>
+						<div>
+							{{item.name}}
+						</div>
+					</router-link>
+					<!-- <div class="content_left_item" v-for="item in rootSubmenuKeys" :class="{active: $route.path == item.route}">
+						<i class="fi" :class="item.icon"></i>
+						<router-link :to="item.route">
+							{{item.name}}
+						</router-link>
+					</div> -->
+				</div>
+				<div class="account_page_content_right">
+					<router-view></router-view>
+				</div>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import { useRouter,useRoute } from 'vue-router'
+import { useStore } from "vuex";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+    },
+    setup() {
+        const store = useStore();
+		let accountHomeData = reactive({
+			rootSubmenuKeys:[
+				{
+					name:'首页',
+					route:'/home/account/accountHome',
+					icon:'fi-rr-house-chimney'
+				},{
+					name:'我的信息',
+					route:'/home/account/accountEdit',
+					icon:'fi-rr-user'
+				},{
+					name:'消息中心',
+					route:'/home/account/accountMessage',
+					icon:'fi-rr-envelope'
+				},{
+					name:'粉丝&关注',
+					route:'/home/account/accountFollowFans',
+					icon:'fi-rr-envelope'
+				},
+			]
+		})
+		const router = useRouter()
+		// provide('exhibitionList',exhibitionList)
+		let handleClick = (event:any) => {
+            // state.selectedKeys = [Number(event.key)]
+            // state.nowPageName = event.item.name
+            router.push({path:event.item.route})
+        }
+        return{
+           ...toRefs(accountHomeData),
+		   router,
+		   handleClick,
+        }
+    },
+    data(){
+        return{
+            
+        }
+    },
+})
+</script>
+<style lang="less" scoped>
+.account_page{
+	height: 100%;
+	overflow-y: auto;
+	.account_page_titleImg{
+		img{
+			width: 100%;
+			height: 30rem;
+			object-fit: cover;
+		}
+	}
+	.account_page_content_box{
+		padding: 5rem 10rem;
+		.account_page_content{
+			box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+			border: 1px solid #e9eaec;
+			border-radius: 5px;
+			display: flex;
+			.account_page_content_left{
+				width: 20%;
+				text-align: center;
+				background: #fafafa;
+				border-right: 1px solid #e9eaec;
+			}
+			.account_page_content_right{
+				width: 80%;
+			}
+			.content_left_item{
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 10rem;
+				color: #232323;
+				div{
+					width: 15rem;
+					color: #232323;
+					text-align-last: justify;
+					font-size: 3rem;
+				}
+				i{
+					color: #cfcfcf;
+					font-size: 2.5rem;
+					display: flex;
+					margin-right: 2rem;
+				}
+				&.active{
+					color: #fff;
+					background: #39215b;
+					div{
+						color: #fff;
+						font-weight: 900;
+					}
+					i{
+						color: #fff;
+					}
+				}
+			}
+		}
+	}
+	
+}
+</style>