311 lines
6.8 KiB
Vue
311 lines
6.8 KiB
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> |