This commit is contained in:
X1627315083
2024-12-11 16:26:36 +08:00
parent 5d9dc7b77d
commit a6ae63e7cd
96 changed files with 6163 additions and 9414 deletions

View File

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