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>{{$t('account.personCentered')}}</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 {t} = useI18n()
        const store = useStore();
		let accountHomeData = reactive({
			rootSubmenuKeys:[
				{
					name:t('account.Home'),
					route:'/home/account/accountHome',
					icon:'fi-rr-house-chimney'
				},{
					name:t('account.myInformation'),
					route:'/home/account/accountEdit',
					icon:'fi-rr-user'
				},{
					name:t('account.Messages'),
					route:'/home/account/accountMessage',
					icon:'fi-rr-envelope'
				},{
					name:`${t('account.Follow')} ${t('account.Fans')}`,
					route:'/home/account/accountFollowFans',
					icon:'fi-rr-users-alt'
				},
			]
		})
		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;
	padding: 0 9rem;
	.account_page_titleImg{
		img{
			width: 100%;
			height: 30rem;
			object-fit: cover;
		}
	}
	.account_page_content_box{
		padding: 5rem 0;
		.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{
					white-space: nowrap;
					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>
<style lang="less">
.account_generalMessage_title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem 5rem;
	border-bottom: 1px solid #e9eaec;
	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
	border: 1px solid #e9eaec;
	border-radius: 5px;
	position: sticky;
	top: 0;
	background: #fff;
	margin-right: 5rem;
	margin-left: 5rem;
	&.modal_title_text{
		z-index: 2;
	}
	.account_generalMessage_title_setting{
		cursor: pointer;
		margin-left: auto
	}
	.account_generalMessage_title_seach{
		display: flex;
		input{
			padding-left: 1.5rem;
			font-size: 1.4rem;
		}
		.search_icon_block{
			background: #39215b;
			color: #fff;
			padding: .5rem 2rem;
			font-size: 1.8rem;
			cursor: pointer;
		}
	}
}
.account_generalMessage_center{
	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
    border: 1px solid #e9eaec;
    border-radius: 5px;
    padding: 2rem 0;
	margin-right: 5rem;
	margin-left: 5rem;
	.account_generalMessage_item{
		margin-right: 0;
		margin-left: 0;
		display: flex;
		border-radius: 0px;
		justify-content: space-between;
		align-items: center;
		padding: 2rem 5rem;
		border: none;
		border-bottom: 1px solid #e9eaec;
		box-shadow: none;
	}
}
.account_generalMessage_item{
	box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
	border: 1px solid #e9eaec;
	border-radius: 5px;
	padding: 5rem 5rem;
	margin-right: 5rem;
	margin-left: 5rem;
	position: relative;
	cursor: pointer;
	.ant-badge{
		position: absolute;
		transform: translate(-100%, 100%);
		top: 0;
		right: 0;
	}
	.account_generalMessage_item_link{
		color: #39215b;
		cursor: pointer;
		font-weight: 600;
	}
	.account_generalMessage_item_link:hover{
		text-decoration: underline;
	}
}
.account_generalMessage_item:hover{
	background: #efefef;
}
.page_loading_box{
	text-align: center;
	height: 50px;
	.page_loading{
		display: block;
		width: 50px;
		height: 50px;
		margin: 0 auto;
	}
}
</style>