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="content_item_user">
				<div class="content_item_user_left">
					<div class="content_item_user_left_detail">
						<img :src="userDetail.avatar" alt="">
					</div>
					<div class="content_item_user_left_detail">
						<div class="modal_title_text">
							<div>{{ userDetail.userName }}</div>
							<div class="modal_title_text_assistant"><span>{{$t('account.email')}}: </span>{{ userDetail.email }}</div>
						</div>
						<div class="content_item_user_left_detail_bottom">
							<div>
								<span>{{$t('account.Follow')}}：</span>{{ userDetail.followeeCount }}
							</div>
							<div>
								<span>{{$t('account.Fans')}}：</span>{{ userDetail.followerCount }}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="account_page_content">
				<div class="account_page_content_left">
					<!-- {{ 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 { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
    },
    setup() {

		const {t} = useI18n()
        const store = useStore();
		let userDetail= computed(()=>{
			return store.state.UserHabit.userDetail
		})
		let accountHomeData = reactive({
			rootSubmenuKeys:[
				{
					name:t('account.frontPage'),
					route:'/home/account/frontPage',
					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{
			userDetail,
           ...toRefs(accountHomeData),
		   router,
		   handleClick,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.account_page{
	height: 100%;
	// overflow-y: auto;
	padding: 0 30rem;
	padding-top: 10rem;
	display: flex;
	overflow: hidden;
	.account_page_titleImg{
		img{
			width: 100%;
			height: 30rem;
			object-fit: cover;
		}
	}
	.account_page_content_box{
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.content_item_user{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 7rem;
			.content_item_user_left{
				display: flex;
				.content_item_user_left_detail{
					> .modal_title_text{
						margin: 0;
						> div{
							margin-bottom: 1rem;
						}
					}
					img{
						border-radius: 50%;
						width: 10rem;
						height: 10rem
					}
					.content_item_user_left_detail_bottom{
						display: flex;
						font-size: 1.8rem;
						>div{
							font-weight: 900;
							width: 10rem;
							span{
								font-weight: 600;
								color: rgba(0,0,0,.45);
							}
						}
					}
				}
				.content_item_user_left_detail:last-child{
					margin-left: 3rem;
				}
			}
		}
		.account_page_content{
			display: flex;
			flex: 1;
			overflow: hidden;
			.account_page_content_left{
				width: 24rem;
				text-align: center;
				margin-right: 10rem;
			}
			.account_page_content_right{
				flex: 1;
				overflow: hidden;
				.account_message{
					height: 100%;
					:deep(.account_message_body){
						height: 100%;
						.ant-tabs-content-holder{
							flex: 1;
							
						}
						.ant-tabs-content{
							height: 100%;
							overflow-y: auto;
						}
					}
				}
			}
			.content_left_item{
				display: flex;
				align-items: center;
				height: 6rem;
				color: #232323;
				div{
					white-space: nowrap;
					width: 15rem;
					color: #999999;
					// text-align-last: justify;
					text-align: left;
					font-size: 2rem;
				}
				i{
					color: #cfcfcf;
					font-size: 2rem;
					display: flex;
					margin: 0 2rem;
				}
				&.active{
					color: #fff;
					background: #000;
					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;
	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;
	.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{
	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>