mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-12 04:16:45 +08:00
留言页面
This commit is contained in:
zhaofang
334
src/components/HomePage/homePage.vue
Normal file
334
src/components/HomePage/homePage.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<div class="uc-header xcontent">
|
||||
<div class="header-box" >
|
||||
<div class="personalData">
|
||||
<!-- <div >
|
||||
<img src="../../../public/images/Avatarwoman.png" alt="">
|
||||
</div> -->
|
||||
<div class="uesr-avaer">
|
||||
<img :src="userInfo.avatar" v-if="userInfo.avatar !== '' ">
|
||||
<div v-else class="uavatar">
|
||||
<div v-if="sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
|
||||
<div v-else><img src="../../../public/images/Avatarwoman.png" alt=""></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-content">
|
||||
<div class="content-top">
|
||||
<h6 content-bottom><router-link to="/homePage"> {{userInfo.name}}</router-link>
|
||||
</h6>
|
||||
<div class="grade">
|
||||
<div>LV.1</div>
|
||||
<span style="color: #A3680A;margin-left:12px;line-height: 24px;">经验值：367</span>
|
||||
</div>
|
||||
<el-button round plain class="btn-user" size="small">关注TA</el-button>
|
||||
<el-button round plain class="btn-user" size="small"><router-link to="/homePage/leavingMessage">去留言</router-link></el-button>
|
||||
</div>
|
||||
<div class="content-bottom">
|
||||
<p class="portal-summary-text">你必须非常努力才能看起来毫不费力</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="learningData">
|
||||
<div class="learning-info">
|
||||
<div class="learning-qus">当月学习时长</div>
|
||||
<div class="learning-an"><span>{{uinfo.monthStudy}}</span>h</div>
|
||||
</div>
|
||||
<div class="learning-info">
|
||||
<div class="learning-qus">累计学习时长</div>
|
||||
<div class="learning-an"><span>{{uinfo.monthTotal}}</span>h</div>
|
||||
</div>
|
||||
<div class="learning-border" ></div>
|
||||
<div class="learning-info" style="margin-left:22px">
|
||||
<div class="learning-qus">当月学习天数</div>
|
||||
<div class="learning-an"><span>{{uinfo.monthDay}}</span>天</div>
|
||||
</div>
|
||||
<div class="learning-info">
|
||||
<div class="learning-qus">累计学习天数</div>
|
||||
<div class="learning-an"><span>{{uinfo.monthTotalDay}}</span>天</div>
|
||||
</div>
|
||||
<div class="learning-border" ></div>
|
||||
<div class="learning-info" style="margin-left:22px">
|
||||
<div class="learning-qus">我的U币（累计）</div>
|
||||
<div class="learning-an"><span>{{uinfo.uCurrency}}</span></div>
|
||||
</div>
|
||||
<div class="list">
|
||||
BOE 排行榜 >>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {userAvatarText,cutFullName} from "@/utils/tools.js";
|
||||
import { mapGetters } from 'vuex'
|
||||
import apiStart from '@/api/phase2/stat.js'
|
||||
export default {
|
||||
name: 'UcHeader',
|
||||
computed:{
|
||||
...mapGetters(['curIdentity','identity','userInfo']),
|
||||
avatarText(){
|
||||
return userAvatarText(this.userInfo.name);
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||||
uinfo:{
|
||||
monthStudy:0,//当月学习时长
|
||||
monthTotal: 0,
|
||||
monthDay:0,
|
||||
monthTotalDay:0,
|
||||
uCurrency:0
|
||||
},
|
||||
orgInfo:'',
|
||||
sex:'',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.sex = this.userInfo.sex;
|
||||
// 判断路由是进入的学员默认页面就重置setCurIdentity
|
||||
if(this.$route.path == '/uc/study/task' || this.$route.path == '/study/index'){
|
||||
this.setCurIdentity(1);
|
||||
}
|
||||
//let testName='京东方科技集团股份有限公司/北京中祥英科技有限公司/技术中心';
|
||||
//this.orgInfo=cutFullName(testName,1);
|
||||
this.orgInfo=cutFullName(this.userInfo.departFullName,1);
|
||||
this.getInfo();
|
||||
},
|
||||
methods:{
|
||||
getInfo(){
|
||||
apiStart.userTotal(this.userInfo.aid,[10,11,30]).then(res=>{
|
||||
if(res.status == 200 && res.result.length > 0) {
|
||||
res.result.forEach(item => {
|
||||
if(item.statType == 10) {
|
||||
this.uinfo.monthStudy = item.months;
|
||||
this.uinfo.monthTotal = item.total;
|
||||
}
|
||||
if(item.statType == 11) {
|
||||
this.uinfo.monthDay = item.months;
|
||||
this.uinfo.monthTotalDay = item.total;
|
||||
}
|
||||
if(item.statType == 30) {
|
||||
this.uinfo.uCurrency = item.total;
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
setCurIdentity(iden){
|
||||
this.$store.dispatch('SetCurIdentity',iden);
|
||||
},
|
||||
toPage(url){
|
||||
this.$router.push({path:url})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.learningData{
|
||||
width: 50%;
|
||||
padding-top: 70px;
|
||||
box-sizing: border-box;
|
||||
margin-left:auto;
|
||||
.learning-info{
|
||||
float: left;
|
||||
margin-right: 22px;
|
||||
.learning-qus{
|
||||
font-size: 14px;
|
||||
color: #666660;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.learning-an{
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
span{
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: #0060FF;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.learning-border{
|
||||
width: 1px;
|
||||
height: 49px;
|
||||
opacity: 0.3;
|
||||
border: 1px solid #AAA6A6;
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
// .content-bottom{
|
||||
// margin-top: 12px;
|
||||
.medal{
|
||||
float: left;
|
||||
img{
|
||||
width: 36px;
|
||||
height: 40px;
|
||||
margin-right: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.medalbutt{
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.grade{
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
div{
|
||||
margin-left: 22px;
|
||||
font-weight: 600;
|
||||
float: left;
|
||||
width: 57px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
color: #9D6110 ;
|
||||
background: url('../../../public/images/lvbg.png') no-repeat 100% / 100%;
|
||||
}
|
||||
}
|
||||
// }
|
||||
.personalData{
|
||||
|
||||
flex: 1;
|
||||
padding-top: 40px;
|
||||
padding-left: 115px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.uesr-avaer{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-right: 30px;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
.user-content{
|
||||
flex: 1;
|
||||
.content-top{
|
||||
margin-top: 15px;
|
||||
height: 56px;
|
||||
.btn-user{
|
||||
margin-top: 6px;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #0060FF;
|
||||
color: #0060FF;
|
||||
}
|
||||
h6{
|
||||
color: #333333;
|
||||
font-size: 26px;
|
||||
margin:0;
|
||||
float: left;
|
||||
}
|
||||
span{
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
margin-left: 5px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
.editbutt{
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 210px;
|
||||
background: url('../../../public/images/userbgimg.png') no-repeat;
|
||||
background-size:445px 210px;
|
||||
background-position: right 0;
|
||||
}
|
||||
|
||||
.uc-header{
|
||||
height: 210px;
|
||||
margin: 0 auto;
|
||||
|
||||
background: #fff;
|
||||
// background-color: #c9c2c2;
|
||||
}
|
||||
.upicon{
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
margin-left: 15px;
|
||||
font-size: 14px;
|
||||
i{font-size: 30px;color: #ffb30f;}
|
||||
div{color: #7b7b7b;padding: 5px 0px 10px 0px;}
|
||||
}
|
||||
.upicon:focus div{
|
||||
color: #588afc;
|
||||
}
|
||||
.identity{
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #fcfcfc;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
background-color: #ffffff;
|
||||
margin: 5px;
|
||||
}
|
||||
.active{
|
||||
background-color: #ffb30f;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #ffb30f;
|
||||
}
|
||||
.uc-alert{
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
padding: 0px 50x;
|
||||
.uc-alert-label{
|
||||
color: #3f3f3f;
|
||||
}
|
||||
.uc-alert-value{
|
||||
padding-top: 10px;
|
||||
color: #aa0000;
|
||||
}
|
||||
}
|
||||
.uavatar{
|
||||
border-radius: 50%;
|
||||
// border: 1px solid #73adfe;
|
||||
// color: #73adfe;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
line-height: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
// background: #d9e9ff;
|
||||
div{
|
||||
border-radius: 50%;
|
||||
img{
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user