aida_front/src/component/Account/account.vue

<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>