作者 mxd

学员对我的评分

<template>
<view class="wrap_box">
<!-- <uParse v-if="datas" :content="datas"></uParse> -->
<view class="kq_box">
<view class="kq_bg dis_flex aic ju_c">
<image class="kq_bgimg" src="/static/images/tbbj.png" mode="widthFix"></image>
<view class="">
<text>{{all_star}}</text>分
<view class="head">
<view class="head-bg">
<image src="/static/imagesV2/tch_index/bg2.png"></image>
</view>
<view class="head-box">
<view class="head-item">
<view class="head-item_content">
{{all_star}}
</view>
<view class="pf_num">
共{{total}}人评价
<view class="head-item_label">
班主任评分(分)
</view>
<view class="kq_list_box">
<view class="kq_list">
<u-empty v-if="datas.length==0"
mode="data"
text="暂无数据"
icon="/static/images/tch/img_blank.png"
>
</u-empty>
<view v-for="(item,index) in datas" class="kq_li">
<view class="pj_tit">
负责任程度
</view>
<view class="pj_star dis_flex aic" style="border-bottom: 0;">
<view class="flex_1 dis_flex aic">
<text class="icon icon-star" :class="item.star>index1?'active':''" v-for="(item1,index1) in 10"></text>
<view class="head-line">
</view>
<view class="star_text">
<!-- {{active>7?'优秀':active>5?'良好':active>0?'一般':''}} -->
{{item.star>7?'优秀':item.star>5?'良好':'一般'}}
<view class="head-item">
<view class="head-item_content">
{{total}}
</view>
<view class="head-item_label">
评价人数(人)
</view>
<view class="pj_tit">
专业能力(答疑、讲解、课堂组织能力)
</view>
<view class="pj_star dis_flex aic">
<view class="flex_1 dis_flex aic">
<text class="icon icon-star" :class="item.star_o>index1?'active':''" v-for="(item1,index1) in 10"></text>
</view>
<view class="star_text">
<!-- {{active2>7?'优秀':active2>5?'良好':active2>0?'一般':''}} -->
</view>
<view class="card" v-for="(item,index) in datas" :key="index">
<view class="cell">
<view class="cell-label">
专业能力(答疑、讲解、课堂组织能力)
</view>
<view class="cell-rate">
<u-rate
:count="rate.count"
:activeColor="rate.activeColor"
:inactiveColor="rate.inactiveColor"
:value="item.star_o"
readonly>
</u-rate>
<text class="cell-rate_text">
{{item.star_o>7?'优秀':item.star_o>5?'良好':'一般'}}
</text>
</view>
</view>
<view class="other_box">
<text class="other_tit">其他评价及建议:</text><text>{{item.content}}</text>
</view> </view>
<view class="cell">
<view class="cell-label">
负责任程度
</view>
<view class="cell-rate">
<u-rate
:count="rate.count"
:activeColor="rate.activeColor"
:inactiveColor="rate.inactiveColor"
:value="item.star"
readonly>
</u-rate>
<text class="cell-rate_text">
{{item.star>7?'优秀':item.star>5?'良好':'一般'}}
</text>
</view>
</view>
<view class="cell">
<view class="cell-content">
<text class="label">其他评价及建议:</text>
{{item.content}}
</view>
</view>
<!-- 阻止滑动 -->
<!-- <view @touchmove.stop.prevent='test'></view> -->
</view>
</view>
</template>
... ... @@ -88,7 +112,12 @@
allnum:'',
page:1,
all_star:0,
total:0
total:0,
rate: {
count: 10,
activeColor: '#FC7D01',
inactiveColor: '#D8D8D8'
}
}
},
computed: {
... ... @@ -208,111 +237,97 @@
<style lang="scss" scoped>
.wrap_box{
width: 100%;
// padding: 30rpx;
padding: 25rpx;
min-height: 100vh;
// #ifdef H5
min-height: calc(100vh - 44px);
// #endif
background: #F8F8F8;
}
.kq_box{
width: 100%;
position: relative;
.kq_bg{
.head {
position: relative;
height: 200rpx;
.head-bg {
width: 100%;
height: 250rpx;
font-size: 32rpx;
color: #fff;
.kq_bgimg{
height: 100%;
}
&-box {
position: absolute;
top: 0;
z-index: 1;
width: 100%;
height: 250rpx;
font-size: 32rpx;
color: #fff;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
}
view{
position: relative;
top: -40rpx;
z-index: 2;
text{
font-size: 72rpx;
&-item {
flex: 1;
text-align: center;
&_label {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
&_content {
font-size: 48rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
}
}
&-line {
background: #F2F2F2;
opacity: 0.2;
width: 1px;
height: 50rpx;
}
}
.kq_list_box{
width: 100%;
padding: 30rpx;
.kq_list{
width: 100%;
.kq_li{
width: 100%;
padding: 28rpx;
min-height: 150rpx;
.card {
background: #fff;
border-radius: 10rpx;
&+.kq_li{
// border-top: 1px solid #f8f8f8;
margin-top: 30rpx;
border-radius: 20rpx;
padding: 30rpx;
margin-top: 20rpx;
.cell {
& + .cell {
margin-top: 20rpx;
}
.pj_tit{
font-size: 28rpx;
&-label {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #A9B1C0;
margin-bottom: 20rpx;
&.pj_tit1{
padding-bottom: 34rpx;
border-bottom: 1px solid #eee;
}
}
.pj_star{
padding-bottom: 34rpx;
border-bottom: 1px solid #eee;
// margin-bottom: 14rpx;
padding-right: 60rpx;
text{
color: #EEEEEE;
font-size: 36rpx;
&+text{
margin-left: 13rpx;
}
&.active{
color: #FF9A18;
}
font-weight: 500;
color: #323232;
}
.star_text{
font-size: 28rpx;
&-rate {
margin-top: 20rpx;
display: flex;
align-items: center;
&_text {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #A9B1C0;
font-weight: 500;
color: #FC5101;
margin-left: 40rpx;
}
}
.other_box{
margin-top: 30rpx;
font-size: 28rpx;
&-content {
background: #F5F6F8;
border-radius: 20rpx;
padding: 20rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 400;
color: #545D71;
.other_tit{
color: #A9B1C0;
}
font-weight: 500;
color: #323232;
.label {
color: #979797;
}
}
}
}
.pf_num{
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
padding: 20rpx 30rpx 0;
margin-top: -10rpx;
}
</style>
... ...