224 lines
4.3 KiB
Vue
224 lines
4.3 KiB
Vue
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<view class="user-edit">
|
||
|
|
<view class="user-avatar">
|
||
|
|
<image src="/static/eduImg/avatar.jpg"></image>
|
||
|
|
</view>
|
||
|
|
<view class="user-info">
|
||
|
|
<span style="font-size: 24px">马晓峰</span>
|
||
|
|
<span style="font-size: 12px; color: #8A8A8B">云南送变电培训中心</span>
|
||
|
|
</view>
|
||
|
|
<view class="edit-btn">
|
||
|
|
<view>修改资料</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="learn-infos">
|
||
|
|
<view>
|
||
|
|
<span>{{ learnStats.selfLearn }}</span>
|
||
|
|
<span>我的自学</span>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<span>{{ learnStats.totalHrs }}</span>
|
||
|
|
<span>累计学时</span>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<span>{{ learnStats.totalCer }}</span>
|
||
|
|
<span>已获证书</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="secs">
|
||
|
|
<view
|
||
|
|
class="single-sec"
|
||
|
|
v-for="(item, index) in secList"
|
||
|
|
:key="item.id"
|
||
|
|
@click="jumpUrl(item.path)"
|
||
|
|
>
|
||
|
|
<view class="lef-icon">
|
||
|
|
<image :src="item.src"></image>
|
||
|
|
</view>
|
||
|
|
<view style="margin-left: 2vw">{{ item.title }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<m-tabbar fixed fill :current="1" :tabbar="tabbar"></m-tabbar>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import TabbarConfig from '@/tabbar.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabbar: TabbarConfig,
|
||
|
|
// 信息参数
|
||
|
|
learnStats: {
|
||
|
|
selfLearn: 17,
|
||
|
|
totalHrs: 218,
|
||
|
|
totalCer: 26
|
||
|
|
},
|
||
|
|
secList: [
|
||
|
|
{ id: 1, title: '切换门户', src: '/static/eduImg/changeGate.png', path: 'changeGate' },
|
||
|
|
{ id: 2, title: '人脸识别', src: '/static/eduImg/faceScan.png', path: 'faceScan' },
|
||
|
|
{ id: 3, title: '我的消息', src: '/static/eduImg/myMsg.png', path: 'myMsg' },
|
||
|
|
{ id: 4, title: '设置', src: '/static/eduImg/settings.png', path: 'settings' },
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
jumpUrl(path) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/YNEduApp/user/${path}`
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
|
||
|
|
.page{
|
||
|
|
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
background: linear-gradient(#EAF0F7, #F8F8F8);
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 15vh 8vw;
|
||
|
|
|
||
|
|
.user-edit{
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
height: 10vh;
|
||
|
|
display: flex;
|
||
|
|
margin-bottom: 3vh;
|
||
|
|
|
||
|
|
.user-avatar{
|
||
|
|
|
||
|
|
width: 25%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 50%;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
image{
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-info{
|
||
|
|
|
||
|
|
width: 50%;
|
||
|
|
height: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 5%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-around;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.edit-btn{
|
||
|
|
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
view{
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
height: 35%;
|
||
|
|
background: linear-gradient(90deg, #6DCDFA, #4BA2F9);
|
||
|
|
color: #fff;
|
||
|
|
margin: auto;
|
||
|
|
border-radius: 20px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 12px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.learn-infos{
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
height: 12vh;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 15rpx;
|
||
|
|
box-shadow: #F1F1F2 2px 2px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 2vh;
|
||
|
|
|
||
|
|
view{
|
||
|
|
|
||
|
|
width: 25%;
|
||
|
|
height: 50%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
span:first-child{
|
||
|
|
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
span:last-child{
|
||
|
|
|
||
|
|
font-size: 12px;
|
||
|
|
color: #767676;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.secs{
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 15rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 4vh 3vw;
|
||
|
|
color: #727272;
|
||
|
|
|
||
|
|
.single-sec{
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 10px 0;
|
||
|
|
font-size: 14px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
border-bottom: 1px solid #F6F6F6;
|
||
|
|
|
||
|
|
.lef-icon{
|
||
|
|
|
||
|
|
width: 5%;
|
||
|
|
height: 2vh;
|
||
|
|
|
||
|
|
image{
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|