180 lines
4.0 KiB
Vue
180 lines
4.0 KiB
Vue
<template>
|
|
<view class="container">
|
|
<unitv-page id="minePage" ref="minePage" class="minePage" :show="true">
|
|
<app-header />
|
|
<view class="content">
|
|
<view class="info">
|
|
<view class="user_info">
|
|
<view class="avatar">
|
|
<image src="/static/avatar.png" />
|
|
</view>
|
|
<view class="username">呀哈哈</view>
|
|
</view>
|
|
<view class="statistics">
|
|
<view class="item">
|
|
<view class="title">累计开班数量</view>
|
|
<view>
|
|
<text class="value">123</text>
|
|
<text class="label">个</text>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="title">累计学员数量</view>
|
|
<view>
|
|
<text class="value">456</text>
|
|
<text class="label">个</text>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="title">累计培训课时</view>
|
|
<view>
|
|
<text class="value">789</text>
|
|
<text class="label">个</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<unitv-zone
|
|
id="mine_first_zone"
|
|
class="mine_first_zone"
|
|
:values="[0, 1, 2, 3]"
|
|
:column="4"
|
|
auto-fous
|
|
:item="0"
|
|
>
|
|
<unitv-item
|
|
:item="0"
|
|
class="item"
|
|
@click="fnNavigate('/pages/mine/curriculum/index')"
|
|
>
|
|
<view class="text">我的课程</view>
|
|
</unitv-item>
|
|
<unitv-item :item="1" class="item">
|
|
<view class="text">学员档案</view>
|
|
</unitv-item>
|
|
<unitv-item :item="2" class="item">
|
|
<view class="text">效果评估报告</view>
|
|
</unitv-item>
|
|
<unitv-item :item="3" class="item">
|
|
<view class="text">定制课申请</view>
|
|
</unitv-item>
|
|
<unitv-item :item="4" class="item">
|
|
<view class="text">问题反馈</view>
|
|
</unitv-item>
|
|
</unitv-zone>
|
|
</view>
|
|
</unitv-page>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
onShow() {
|
|
if (this.$refs.minePage) {
|
|
this.$refs.minePage.showPage();
|
|
}
|
|
},
|
|
methods: {
|
|
fnNavigate(url) {
|
|
uni.navigateTo({ url });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
margin-top: 40rpx;
|
|
|
|
.info {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.user_info {
|
|
display: flex;
|
|
|
|
.avatar {
|
|
border-radius: 50%;
|
|
|
|
image {
|
|
width: 71rpx;
|
|
height: 71rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.username {
|
|
padding-top: 20rpx;
|
|
padding-left: 17rpx;
|
|
font-size: 20rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.statistics {
|
|
display: flex;
|
|
|
|
.item {
|
|
background-image: url("/static/statistics_bg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 127rpx;
|
|
height: 66rpx;
|
|
padding: 13rpx 14rpx;
|
|
margin-left: 9rpx;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.title {
|
|
font-size: 11rpx;
|
|
padding-bottom: 5rpx;
|
|
}
|
|
|
|
.value {
|
|
font-size: 16rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.label {
|
|
padding-left: 5rpx;
|
|
font-size: 9rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mine_first_zone {
|
|
margin-top: 40rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
padding: 15rpx 11rpx;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
width: 131rpx;
|
|
height: 65rpx;
|
|
border: 1rpx solid transparent;
|
|
border-radius: 4rpx;
|
|
|
|
@for $i from 1 through 5 {
|
|
&:nth-child(#{$i}) {
|
|
background-image: url("/static/mine_zone#{$i}.png");
|
|
}
|
|
}
|
|
|
|
.text {
|
|
font-size: 14rpx;
|
|
}
|
|
|
|
&.hover {
|
|
border: 1rpx solid rgba(0, 180, 255, 0.79);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|