正在显示
1 个修改的文件
包含
132 行增加
和
117 行删除
| 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> |
-
请 注册 或 登录 后发表评论