fix
This commit is contained in:
X1627315083
213
src/component/Account/accountHome.vue
Normal file
213
src/component/Account/accountHome.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<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="../../assets/images/homePage/alipay.svg" alt="">
|
||||
</div>
|
||||
<div class="content_item_user_left_detail">
|
||||
<div class="modal_title_text">
|
||||
<div>用户名</div>
|
||||
<div class="modal_title_text_intro">个性签名</div>
|
||||
<div class="modal_title_text_assistant">Credits: 2222</div>
|
||||
</div>
|
||||
<div class="content_item_user_left_detail_bottom">
|
||||
<div>
|
||||
<span>关注：</span>22
|
||||
</div>
|
||||
<div>
|
||||
<span>粉丝：</span>22
|
||||
</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 accountHomeData = reactive({
|
||||
})
|
||||
// provide('exhibitionList',exhibitionList)
|
||||
let setUserData = ()=>{
|
||||
router.push({path:'/home/account/accountEdit'})
|
||||
}
|
||||
return{
|
||||
...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>
|
||||
Reference in New Issue
Block a user