作者 mxd

学员对我的评分

1 <template> 1 <template>
2 <view class="wrap_box"> 2 <view class="wrap_box">
3 - <!-- <uParse v-if="datas" :content="datas"></uParse> -->  
4 - <view class="kq_box">  
5 - <view class="kq_bg dis_flex aic ju_c">  
6 - <image class="kq_bgimg" src="/static/images/tbbj.png" mode="widthFix"></image>  
7 - <view class="">  
8 - <text>{{all_star}}</text>分 3 + <view class="head">
  4 + <view class="head-bg">
  5 + <image src="/static/imagesV2/tch_index/bg2.png"></image>
9 </view> 6 </view>
  7 +
  8 + <view class="head-box">
  9 + <view class="head-item">
  10 + <view class="head-item_content">
  11 + {{all_star}}
10 </view> 12 </view>
11 - <view class="pf_num">  
12 - 共{{total}}人评价 13 + <view class="head-item_label">
  14 + 班主任评分(分)
13 </view> 15 </view>
14 - <view class="kq_list_box">  
15 - <view class="kq_list">  
16 - <u-empty v-if="datas.length==0"  
17 - mode="data"  
18 - text="暂无数据"  
19 - icon="/static/images/tch/img_blank.png"  
20 - >  
21 - </u-empty>  
22 - <view v-for="(item,index) in datas" class="kq_li">  
23 - <view class="pj_tit">  
24 - 负责任程度  
25 </view> 16 </view>
26 - <view class="pj_star dis_flex aic" style="border-bottom: 0;">  
27 - <view class="flex_1 dis_flex aic">  
28 - <text class="icon icon-star" :class="item.star>index1?'active':''" v-for="(item1,index1) in 10"></text> 17 + <view class="head-line">
  18 +
29 </view> 19 </view>
30 - <view class="star_text">  
31 - <!-- {{active>7?'优秀':active>5?'良好':active>0?'一般':''}} -->  
32 - {{item.star>7?'优秀':item.star>5?'良好':'一般'}} 20 + <view class="head-item">
  21 + <view class="head-item_content">
  22 + {{total}}
33 </view> 23 </view>
  24 + <view class="head-item_label">
  25 + 评价人数(人)
34 </view> 26 </view>
35 - <view class="pj_tit">  
36 - 专业能力(答疑、讲解、课堂组织能力)  
37 </view> 27 </view>
38 - <view class="pj_star dis_flex aic">  
39 - <view class="flex_1 dis_flex aic">  
40 - <text class="icon icon-star" :class="item.star_o>index1?'active':''" v-for="(item1,index1) in 10"></text>  
41 </view> 28 </view>
42 - <view class="star_text">  
43 - <!-- {{active2>7?'优秀':active2>5?'良好':active2>0?'一般':''}} --> 29 +
  30 + </view>
  31 +
  32 +
  33 + <view class="card" v-for="(item,index) in datas" :key="index">
  34 + <view class="cell">
  35 + <view class="cell-label">
  36 + 专业能力(答疑、讲解、课堂组织能力)
  37 + </view>
  38 + <view class="cell-rate">
  39 + <u-rate
  40 + :count="rate.count"
  41 + :activeColor="rate.activeColor"
  42 + :inactiveColor="rate.inactiveColor"
  43 + :value="item.star_o"
  44 + readonly>
  45 + </u-rate>
  46 + <text class="cell-rate_text">
44 {{item.star_o>7?'优秀':item.star_o>5?'良好':'一般'}} 47 {{item.star_o>7?'优秀':item.star_o>5?'良好':'一般'}}
  48 + </text>
45 </view> 49 </view>
46 </view> 50 </view>
47 - <view class="other_box">  
48 - <text class="other_tit">其他评价及建议:</text><text>{{item.content}}</text>  
49 - </view> </view> 51 +
  52 + <view class="cell">
  53 + <view class="cell-label">
  54 + 负责任程度
50 </view> 55 </view>
  56 + <view class="cell-rate">
  57 + <u-rate
  58 + :count="rate.count"
  59 + :activeColor="rate.activeColor"
  60 + :inactiveColor="rate.inactiveColor"
  61 + :value="item.star"
  62 + readonly>
  63 + </u-rate>
  64 + <text class="cell-rate_text">
  65 + {{item.star>7?'优秀':item.star>5?'良好':'一般'}}
  66 + </text>
  67 + </view>
  68 + </view>
  69 +
  70 +
  71 + <view class="cell">
  72 + <view class="cell-content">
  73 + <text class="label">其他评价及建议:</text>
  74 + {{item.content}}
51 </view> 75 </view>
52 </view> 76 </view>
53 77
54 - <!-- 阻止滑动 -->  
55 - <!-- <view @touchmove.stop.prevent='test'></view> --> 78 + </view>
  79 +
56 </view> 80 </view>
57 </template> 81 </template>
58 82
@@ -88,7 +112,12 @@ @@ -88,7 +112,12 @@
88 allnum:'', 112 allnum:'',
89 page:1, 113 page:1,
90 all_star:0, 114 all_star:0,
91 - total:0 115 + total:0,
  116 + rate: {
  117 + count: 10,
  118 + activeColor: '#FC7D01',
  119 + inactiveColor: '#D8D8D8'
  120 + }
92 } 121 }
93 }, 122 },
94 computed: { 123 computed: {
@@ -208,111 +237,97 @@ @@ -208,111 +237,97 @@
208 <style lang="scss" scoped> 237 <style lang="scss" scoped>
209 .wrap_box{ 238 .wrap_box{
210 width: 100%; 239 width: 100%;
211 - // padding: 30rpx; 240 + padding: 25rpx;
212 min-height: 100vh; 241 min-height: 100vh;
213 // #ifdef H5 242 // #ifdef H5
214 min-height: calc(100vh - 44px); 243 min-height: calc(100vh - 44px);
215 // #endif 244 // #endif
216 background: #F8F8F8; 245 background: #F8F8F8;
217 } 246 }
218 -.kq_box{  
219 - width: 100%;  
220 - position: relative;  
221 - .kq_bg{ 247 +
  248 +.head {
222 position: relative; 249 position: relative;
  250 + height: 200rpx;
  251 +
  252 + .head-bg {
223 width: 100%; 253 width: 100%;
224 - height: 250rpx;  
225 - font-size: 32rpx;  
226 - color: #fff;  
227 - .kq_bgimg{ 254 + height: 100%;
  255 + }
  256 + &-box {
228 position: absolute; 257 position: absolute;
229 top: 0; 258 top: 0;
230 - z-index: 1;  
231 - width: 100%;  
232 - height: 250rpx;  
233 - font-size: 32rpx;  
234 - color: #fff;  
235 -  
236 - 259 + left: 0;
  260 + right: 0;
  261 + bottom: 0;
  262 + display: flex;
  263 + align-items: center;
237 } 264 }
238 - view{  
239 - position: relative;  
240 - top: -40rpx;  
241 - z-index: 2;  
242 - text{  
243 - font-size: 72rpx; 265 + &-item {
  266 + flex: 1;
  267 + text-align: center;
  268 + &_label {
  269 + font-size: 26rpx;
  270 + font-family: PingFang SC;
  271 + font-weight: 500;
  272 + color: #FFFFFF;
  273 + }
  274 + &_content {
  275 + font-size: 48rpx;
  276 + font-family: PingFang SC;
244 font-weight: bold; 277 font-weight: bold;
  278 + color: #FFFFFF;
245 } 279 }
246 } 280 }
  281 + &-line {
  282 + background: #F2F2F2;
  283 + opacity: 0.2;
  284 + width: 1px;
  285 + height: 50rpx;
247 } 286 }
248 } 287 }
249 -.kq_list_box{  
250 - width: 100%;  
251 - padding: 30rpx;  
252 - .kq_list{  
253 - width: 100%;  
254 - .kq_li{  
255 - width: 100%;  
256 - padding: 28rpx;  
257 - min-height: 150rpx; 288 +
  289 +.card {
258 background: #fff; 290 background: #fff;
259 - border-radius: 10rpx;  
260 - &+.kq_li{  
261 - // border-top: 1px solid #f8f8f8;  
262 - margin-top: 30rpx; 291 + border-radius: 20rpx;
  292 + padding: 30rpx;
  293 + margin-top: 20rpx;
  294 + .cell {
  295 + & + .cell {
  296 + margin-top: 20rpx;
263 } 297 }
264 - .pj_tit{  
265 - font-size: 28rpx; 298 + &-label {
  299 + font-size: 24rpx;
266 font-family: PingFang SC; 300 font-family: PingFang SC;
267 - font-weight: 400;  
268 - color: #A9B1C0;  
269 - margin-bottom: 20rpx;  
270 - &.pj_tit1{  
271 - padding-bottom: 34rpx;  
272 - border-bottom: 1px solid #eee;  
273 - }  
274 - }  
275 - .pj_star{  
276 - padding-bottom: 34rpx;  
277 - border-bottom: 1px solid #eee;  
278 - // margin-bottom: 14rpx;  
279 - padding-right: 60rpx;  
280 - text{  
281 - color: #EEEEEE;  
282 - font-size: 36rpx;  
283 - &+text{  
284 - margin-left: 13rpx;  
285 - }  
286 - &.active{  
287 - color: #FF9A18;  
288 - } 301 + font-weight: 500;
  302 + color: #323232;
289 } 303 }
290 - .star_text{  
291 - font-size: 28rpx; 304 + &-rate {
  305 + margin-top: 20rpx;
  306 + display: flex;
  307 + align-items: center;
  308 + &_text {
  309 + font-size: 24rpx;
292 font-family: PingFang SC; 310 font-family: PingFang SC;
293 - font-weight: 400;  
294 - color: #A9B1C0; 311 + font-weight: 500;
  312 + color: #FC5101;
  313 + margin-left: 40rpx;
295 } 314 }
296 } 315 }
297 - .other_box{  
298 - margin-top: 30rpx;  
299 - font-size: 28rpx; 316 + &-content {
  317 + background: #F5F6F8;
  318 + border-radius: 20rpx;
  319 + padding: 20rpx;
  320 + font-size: 26rpx;
300 font-family: PingFang SC; 321 font-family: PingFang SC;
301 - font-weight: 400;  
302 - color: #545D71;  
303 - .other_tit{  
304 - color: #A9B1C0;  
305 - } 322 + font-weight: 500;
  323 + color: #323232;
  324 + .label {
  325 + color: #979797;
306 } 326 }
307 } 327 }
308 } 328 }
  329 +
309 } 330 }
310 -.pf_num{  
311 - font-size: 28rpx;  
312 - font-family: PingFang SC;  
313 - font-weight: 500;  
314 - color: #333333;  
315 - padding: 20rpx 30rpx 0;  
316 - margin-top: -10rpx;  
317 -} 331 +
  332 +
318 </style> 333 </style>