aida_front/src/component/Account/accountHome.vue

<template>
    <div class="account_home">
		<div class="account_home_content">
			<div class="content_item 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>邮箱: </span>{{ cookieUserInfo?.email }}</div>
						</div>
						<div class="content_item_user_left_detail_bottom">
							<div>
								<span>关注：</span>{{ userInfo?.followeeCount }}
							</div>
							<div>
								<span>粉丝：</span>{{ userInfo?.followerCount }}
							</div>
						</div>
					</div>
				</div>
				<div class="content_item_user_right">
					<div @click="setUserData">修改资料</div>
				</div>
			</div>
			<div class="content_item content_item_task">
				<div class="content_item_title">
					<i>icon</i>
					<div>每日奖励</div>
				</div>
				<div class="content_item_task_max">
					<div class="content_item_task_item">
						<div class="content_item_task_item_state">
							<div class="state_credits">20 Credits</div>
							<i class="fi fi-br-check"></i>
						</div>
						<div class="content_item_task_item_title">
							每日点赞
						</div>
						<div class="content_item_task_item_award">
							已完成 0 / 10
						</div>
					</div>
					<div class="content_item_task_item active">
						<div class="content_item_task_item_state">
							<div class="state_credits">20 Credits</div>
							<i class="fi fi-br-check"></i>
						</div>
						<div class="content_item_task_item_title">
							每日发布作品
						</div>
						<div class="content_item_task_item_award">
							20 Credits 到手
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode} from 'vue'
import { Https } from "@/tool/https";
import { useRouter,useRoute } from 'vue-router'
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
    },
    setup() {
		const router = useRouter()
        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({
		})
		// provide('exhibitionList',exhibitionList)
		let setUserData = ()=>{
			router.push({path:'/home/account/accountEdit'})
		}
        return{
			userInfo,
			cookieUserInfo,
           ...toRefs(accountHomeData),
		   setUserData,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.account_home{
	width: 100%;
	.account_home_content{
		.content_item{
			padding: 8rem 5rem;	
			border-bottom: 1px solid #e9eaec;
			.content_item_title{
				display: flex;
				align-items: center;
				i{
					margin-right: 1rem;
				}
			}
		}
		.content_item:last-child{
			border-bottom: none;
		}
		.content_item_user{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.content_item_user_left{
				display: flex;
				.content_item_user_left_detail{
					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: 4rem;
				}
			}
			.content_item_user_right{
				border: 1px solid #e9eaec;
				color: #6f767f;
				font-size: 1.8rem;
				cursor: pointer;
				display: flex;
				padding: 0 1rem;
				border-radius: 4px;
			}
		}
		.content_item_task{
			.content_item_task_max{
				display: flex;
				margin-top: 4rem;
			}
			.content_item_task_item{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				.content_item_task_item_state{
					width: 10rem;
					height: 10rem;
					background: linear-gradient(135deg, #cdacfc 50%, #a46ef0 50%) 00px 0;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					.state_credits{
						font-size: 1.6rem;
						font-weight: 900;
						color: #fff;
					}
					i{
						font-size: 3rem;
						font-weight: 900;
						display: none;
						color: #fff;
					}
				}
				.content_item_task_item_title{
					margin: 2rem 0 ;
				}
				.content_item_task_item_award{
					font-size: 1.8rem;
					background: #fff;
					border-radius: 4px;
					padding: 0 1rem;
					color: #99a2aa;
				}
				&.active{
					.content_item_task_item_state{
						background: linear-gradient(135deg, #4ddda8 50%, #3bcd98 50%) 00px 0;
						.state_credits{
							display: none;
						}
						i{
							display: flex;
						}
					}
					.content_item_task_item_award{
						background: #8a95a8;
						color: #fff;
					}
						
				}
			}
		}
	}
}
</style>