fix
This commit is contained in:
@@ -4,11 +4,29 @@
|
||||
<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="userInfo?.avatar" alt="">
|
||||
</div>
|
||||
<div class="content_item_user_left_detail">
|
||||
<div class="modal_title_text">
|
||||
<div>{{ cookieUserInfo.userName }}</div>
|
||||
<div class="modal_title_text_assistant"><span>{{$t('account.email')}}: </span>{{ cookieUserInfo?.email }}</div>
|
||||
</div>
|
||||
<div class="content_item_user_left_detail_bottom">
|
||||
<div>
|
||||
<span>{{$t('account.Follow')}}:</span>{{ userInfo?.followeeCount }}
|
||||
</div>
|
||||
<div>
|
||||
<span>{{$t('account.Fans')}}:</span>{{ userInfo?.followerCount }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
@@ -45,15 +63,19 @@ export default defineComponent({
|
||||
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
let userInfo:any= computed(()=>{
|
||||
return store.state.UserHabit.userInfo
|
||||
})
|
||||
let cookieUserInfo = ref(null)
|
||||
if(getCookie('userInfo')){
|
||||
let userInfo:any = getCookie('userInfo')
|
||||
cookieUserInfo.value = JSON.parse(userInfo)
|
||||
}
|
||||
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',
|
||||
name:t('account.frontPage'),
|
||||
route:'/home/account/frontPage',
|
||||
icon:'fi-rr-user'
|
||||
},{
|
||||
name:t('account.Messages'),
|
||||
@@ -74,6 +96,8 @@ export default defineComponent({
|
||||
router.push({path:event.item.route})
|
||||
}
|
||||
return{
|
||||
userInfo,
|
||||
cookieUserInfo,
|
||||
...toRefs(accountHomeData),
|
||||
router,
|
||||
handleClick,
|
||||
@@ -89,8 +113,11 @@ export default defineComponent({
|
||||
<style lang="less" scoped>
|
||||
.account_page{
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0 9rem;
|
||||
// overflow-y: auto;
|
||||
padding: 0 30rem;
|
||||
padding-top: 10rem;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
.account_page_titleImg{
|
||||
img{
|
||||
width: 100%;
|
||||
@@ -99,43 +126,96 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.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;
|
||||
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: 20%;
|
||||
width: 24rem;
|
||||
text-align: center;
|
||||
background: #fafafa;
|
||||
border-right: 1px solid #e9eaec;
|
||||
margin-right: 10rem;
|
||||
}
|
||||
.account_page_content_right{
|
||||
width: 80%;
|
||||
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;
|
||||
justify-content: center;
|
||||
height: 10rem;
|
||||
height: 6rem;
|
||||
color: #232323;
|
||||
div{
|
||||
white-space: nowrap;
|
||||
width: 15rem;
|
||||
color: #232323;
|
||||
text-align-last: justify;
|
||||
font-size: 3rem;
|
||||
color: #999999;
|
||||
// text-align-last: justify;
|
||||
text-align: left;
|
||||
font-size: 2rem;
|
||||
}
|
||||
i{
|
||||
color: #cfcfcf;
|
||||
font-size: 2.5rem;
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
margin-right: 2rem;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
&.active{
|
||||
color: #fff;
|
||||
background: #39215b;
|
||||
background: #000;
|
||||
div{
|
||||
color: #fff;
|
||||
font-weight: 900;
|
||||
@@ -155,10 +235,6 @@ export default defineComponent({
|
||||
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;
|
||||
@@ -188,12 +264,9 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.account_generalMessage_center{
|
||||
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
|
||||
border: 1px solid #e9eaec;
|
||||
// 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;
|
||||
@@ -208,8 +281,6 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.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;
|
||||
|
||||
Reference in New Issue
Block a user