392 lines
9.7 KiB
Vue
392 lines
9.7 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="proj-cont">
|
||
<h2 style="margin-bottom: 15rpx">这是标题</h2>
|
||
<span style="font-size: 12px; color: #B0B0B0">合格标准：学习进度完成100%，考试及格一场，练习通过一场</span>
|
||
<view class="user-info">
|
||
<view class="info-lef">
|
||
<view class="avatar">
|
||
<image src="/static/eduImg/avatar.jpg"></image>
|
||
<span style="font-size: 18px">马晓峰</span>
|
||
</view>
|
||
<view style="display: flex; align-items: center">
|
||
<l-starRate v-model="starRate" :disabled="true" style="margin-right: 1vw"></l-starRate>
|
||
<span style="color: #ffca3e">{{ starRate }}.0</span>
|
||
</view>
|
||
</view>
|
||
<view class="info-rig">
|
||
<view class="rig-up">
|
||
<view>
|
||
培训内容
|
||
<span>6</span>
|
||
</view>
|
||
<view style="margin-left: 2vw">
|
||
观看记录
|
||
<span>28</span>
|
||
<uni-icons style="color: #b0b0b0" type="right" size="12"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="rig-dn">
|
||
去评分
|
||
<uni-icons style="color: #b0b0b0" type="right" size="12"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tip">
|
||
已开启进度同步，其他途径的学习进度已自动同步
|
||
</view>
|
||
<uni-collapse>
|
||
<uni-collapse-item title="理论学习">
|
||
<uni-list>
|
||
<uni-list-item
|
||
v-for="(item, index) in theoryLearnList"
|
||
:key="item.id"
|
||
title="课程"
|
||
:note="item.title"
|
||
clickable
|
||
:show-extra-icon="true"
|
||
:extra-icon="learnIconObj"
|
||
:rightText="item.percent + '%'"
|
||
@click="toggleTheoryLearn(item.id)"
|
||
>
|
||
<!-- <template v-slot:footer>
|
||
<liu-progressbar
|
||
:progress="item.percent"
|
||
color="#000"
|
||
:height="'20rpx'"
|
||
bgColor="#1989FA"
|
||
:textInside="false"
|
||
/>
|
||
</template>-->
|
||
</uni-list-item>
|
||
</uni-list>
|
||
</uni-collapse-item>
|
||
<uni-collapse-item title="理论练习">
|
||
<uni-list>
|
||
<uni-list-item
|
||
v-for="(item, index) in theoryPracList"
|
||
:key="item.id"
|
||
title="练习"
|
||
:note="item.title"
|
||
:rightText="item.ifPrac ? '已练习' : '未练习'"
|
||
clickable
|
||
:show-extra-icon="true"
|
||
:extra-icon="pracIconObj"
|
||
@click="toggleTheoryPrac(item.id)"
|
||
></uni-list-item>
|
||
</uni-list>
|
||
</uni-collapse-item>
|
||
<uni-collapse-item title="理论模拟考试">
|
||
<uni-list>
|
||
<uni-list-item title="练习" note="高压电取证理论学习"
|
||
showArrow></uni-list-item>
|
||
</uni-list>
|
||
</uni-collapse-item>
|
||
<uni-collapse-item title="实操题目练习">
|
||
<uni-list>
|
||
<uni-list-item title="练习" note="高压电取证理论学习"
|
||
showArrow></uni-list-item>
|
||
</uni-list>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
</view>
|
||
<view class="comment-area">
|
||
<h2 style="margin-bottom: 15rpx">最新评论 ({{ commentList.length }})</h2>
|
||
<view class="write-cmt">
|
||
<uni-icons style="color: #9B9B9B; margin-right: 1vw" type="compose" size="12"></uni-icons>
|
||
写评论
|
||
</view>
|
||
<view
|
||
class="cmts"
|
||
v-for="(item, index) in commentList"
|
||
:key="index"
|
||
>
|
||
<view class="cmt-up">
|
||
<image :src="item.avatar"></image>
|
||
<span>{{ item.username }}</span>
|
||
</view>
|
||
<view class="cmt-dn">
|
||
{{ item.cont }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btm-sticky">
|
||
<view class="icons">
|
||
<view>
|
||
<uni-icons style="color: #1989FA; margin-right: 1vw" type="chat-filled" size="24"></uni-icons>
|
||
<span>23</span>
|
||
</view>
|
||
<view>
|
||
<uni-icons style="color: #1989FA; margin-right: 1vw" type="hand-up-filled" size="24"></uni-icons>
|
||
<span>12</span>
|
||
</view>
|
||
</view>
|
||
<view class="learn-btn">继续学习</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
projId: '',
|
||
starRate: 4,
|
||
learnIconObj: { color: '#1A63AC',size: '18', type: 'calendar' },
|
||
pracIconObj: { color: '#38B022',size: '18', type: 'compose' },
|
||
theoryLearnList: [
|
||
{ title: '高压电', id: 121, percent: 86 },
|
||
{ title: '氨基酸', id: 122, percent: 42 },
|
||
{ title: '维他命', id: 123, percent: 66 },
|
||
{ title: '电功率', id: 124, percent: 13 },
|
||
],
|
||
theoryPracList: [
|
||
{ title: '母猪的产后护理', id: 141, ifPrac: false },
|
||
{ title: '公猪的情绪安抚', id: 142, ifPrac: true },
|
||
{ title: '母狗的二三情事', id: 143, ifPrac: true },
|
||
{ title: '公狗的大顶绿帽', id: 144, ifPrac: false },
|
||
],
|
||
commentList: [
|
||
{ username: '王二', avatar: '/static/eduImg/avatar.jpg', cont: '写的什么东西' },
|
||
{ username: '张三', avatar: '/static/eduImg/avatar.jpg', cont: '我感觉写得挺好' },
|
||
{ username: '李四', avatar: '/static/eduImg/avatar.jpg', cont: '+3' },
|
||
{ username: '孙笑川', avatar: '/static/eduImg/avatar.jpg', cont: '我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了' },
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
toggleTheoryLearn(id) {
|
||
console.log(id)
|
||
},
|
||
toggleTheoryPrac(id) {
|
||
console.log(id)
|
||
},
|
||
},
|
||
onLoad(params) {
|
||
this.projId = params.id
|
||
console.log(this.projId)
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.page{
|
||
|
||
width: 100vw;
|
||
background-color: #f8f8f8;
|
||
box-sizing: border-box;
|
||
padding: 5vw;
|
||
position: relative;
|
||
|
||
.proj-cont{
|
||
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: #F4F4F4 2px 2px;
|
||
|
||
.user-info{
|
||
|
||
width: 100%;
|
||
height: 8vh;
|
||
display: flex;
|
||
margin-top: 2vh;
|
||
|
||
.info-lef{
|
||
|
||
width: 35%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
|
||
.avatar{
|
||
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image{
|
||
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
margin-right: 1.5vw;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.info-rig{
|
||
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
box-sizing: border-box;
|
||
color: #b0b0b0;
|
||
|
||
.rig-up{
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
view{
|
||
|
||
span{
|
||
|
||
padding: 0 1vw;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.tip{
|
||
|
||
width: 100%;
|
||
margin: 2vh auto;
|
||
background-color: #F7F7F7;
|
||
font-size: 12px;
|
||
color: #9B9B9B;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 25rpx 15rpx;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.comment-area{
|
||
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
margin: 1vh auto;
|
||
padding: 30rpx 20rpx 5vh 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: #F4F4F4 2px 2px;
|
||
|
||
.write-cmt{
|
||
|
||
width: 100%;
|
||
margin: 2vh auto;
|
||
background-color: #F7F7F7;
|
||
font-size: 12px;
|
||
color: #9B9B9B;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 15rpx;
|
||
|
||
}
|
||
|
||
.cmts{
|
||
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 2vh;
|
||
|
||
.cmt-up{
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
|
||
image{
|
||
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
margin-right: 2vw;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.cmt-dn{
|
||
|
||
box-sizing: border-box;
|
||
padding-left: calc(60rpx + 2vw);
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.btm-sticky{
|
||
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 8vh;
|
||
background-color: #fff;
|
||
border-top: 1px solid #D8D8D8;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0 5vw;
|
||
|
||
.icons{
|
||
|
||
width: 40%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
view{
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span{
|
||
|
||
font-size: 16px;
|
||
color: #1A89FA;
|
||
font-weight: bold;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.learn-btn{
|
||
|
||
width: 30%;
|
||
height: 60%;
|
||
background-color: #1A89FA;
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
border-radius: 50rpx;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
</style>
|