徐浩 / zzxyt-uniapp · 提交

转到一个项目

作者 mxd
提交 5b3cbb4586c82795d50c8da2fababb9a7f10c27d 1 个父辈 e603a6c9

听课教室选座

内嵌 并排对比
正在显示 7 个修改的文件 包含 131 行增加 和 136 行删除
@@ -309,7 +309,8 @@ @@ -309,7 +309,8 @@
309 "path": "stu_selection/stu_selection", 309 "path": "stu_selection/stu_selection",
310 "style": { 310 "style": {
311 "navigationBarTitleText": "听课教室选座", 311 "navigationBarTitleText": "听课教室选座",
312 - "enablePullDownRefresh": false 312 + "enablePullDownRefresh": false,
  313 + "navigationStyle": "custom"
313 } 314 }
314 315
315 }, { 316 }, {
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="tel_index_bg"></view> -->  
5 - <image class="tel_index_bg" src="/static/images/selectseat_bg.png" mode="aspectFill"></image> 3 + <CustomReturn title="听课教室选座" color="#fff" :bgColor="bgColor"/>
  4 + <view class="bg-img">
  5 + <image src="/static/imagesV2/stu_selection/selectseat_bg.png" mode="aspectFill"></image>
  6 + </view>
6 7
  8 + <PaddingTopB>
7 <view v-if="datas.info" class="vio_list"> 9 <view v-if="datas.info" class="vio_list">
8 - <scroll-view scroll-x class="stime_list scroll_x" v-if="datas.type==2"> 10 + <scroll-view scroll-x class="stime_list scroll_x" v-if="datas.type ==2">
9 <view class="stime_li" :class="{active:index==0}" v-for="(item,index) in datas.timeArr"> 11 <view class="stime_li" :class="{active:index==0}" v-for="(item,index) in datas.timeArr">
10 <view class="li_tit"> 12 <view class="li_tit">
11 {{item.title}} 13 {{item.title}}
@@ -19,6 +21,10 @@ @@ -19,6 +21,10 @@
19 </view> 21 </view>
20 </scroll-view> 22 </scroll-view>
21 <view v-else class="xzdata_null"> 23 <view v-else class="xzdata_null">
  24 + <view class="icon">
  25 + <image src="/static/imagesV2/stu_selection/icon-success.png" mode=""></image>
  26 + </view>
  27 + <view>
22 <view class="d1"> 28 <view class="d1">
23 选座已结束 29 选座已结束
24 </view> 30 </view>
@@ -26,10 +32,11 @@ @@ -26,10 +32,11 @@
26 没有选座的同学赶紧选座吧！ 32 没有选座的同学赶紧选座吧！
27 </view> 33 </view>
28 </view> 34 </view>
  35 + </view>
  36 +
29 <view class="xz_rule"> 37 <view class="xz_rule">
30 - <image class="xz_rule_top" src="/static/images/selectseat_rules.png" mode="aspectFill"></image>  
31 - <view class="xz_rule_tit">  
32 - 选座规则 38 + <view class="tit-icon">
  39 + <image src="/static/imagesV2/stu_selection/xuanzuoguize.png" mode="aspectFill"></image>
33 </view> 40 </view>
34 <view class="rule_msg"> 41 <view class="rule_msg">
35 <view class="xz_room"> 42 <view class="xz_room">
@@ -40,26 +47,28 @@ @@ -40,26 +47,28 @@
40 </view> 47 </view>
41 </view> 48 </view>
42 </view> 49 </view>
  50 +
43 <view class="stu_tit"> 51 <view class="stu_tit">
44 - <text></text>  
45 <view class="">以下学员可以选座</view> 52 <view class="">以下学员可以选座</view>
46 </view> 53 </view>
  54 +
47 <view class="stu_list"> 55 <view class="stu_list">
48 <view class="stu_li" v-for="(item,index) in datas.user"> 56 <view class="stu_li" v-for="(item,index) in datas.user">
49 - <view class="stu_name">  
50 - <view class="oh1">{{item.name}}</view>  
51 - <image v-if="item.sex==2" src="/static/images/tch/icon_female.png" mode="aspectFit"></image>  
52 - <image v-else src="/static/images/tch/icon_male.png" mode="aspectFit"></image>  
53 - </view>  
54 - <view class="stu_time">  
55 - {{item.add_time}} 入学  
56 - </view>  
57 <view v-if="item.seat_type==1" class="stu_status"> 57 <view v-if="item.seat_type==1" class="stu_status">
58 已选 58 已选
59 </view> 59 </view>
60 <view v-else class="stu_status stu_status1"> 60 <view v-else class="stu_status stu_status1">
61 未选 61 未选
62 </view> 62 </view>
  63 + <view class="stu_name">
  64 + <view class="oh1">{{item.name}}</view>
  65 + <image v-if="item.sex==2" src="/static/imagesV2/stu_selection/icon_female.png" mode="aspectFit"></image>
  66 + <image v-else src="/static/imagesV2/stu_selection/icon_male.png" mode="aspectFit"></image>
  67 + </view>
  68 + <view class="stu_time">
  69 + {{item.add_time}} 入学
  70 + </view>
  71 +
63 </view> 72 </view>
64 <u-empty v-if="datas.user&&datas.user.length==0" 73 <u-empty v-if="datas.user&&datas.user.length==0"
65 mode="data" 74 mode="data"
@@ -68,15 +77,17 @@ @@ -68,15 +77,17 @@
68 > 77 >
69 </u-empty> 78 </u-empty>
70 </view> 79 </view>
71 - </view>  
72 80
73 <view v-if="datas.user&&datas.user.length>0" class="bz_add" > 81 <view v-if="datas.user&&datas.user.length>0" class="bz_add" >
74 <view class="" @click="$service.jump" :data-url="'/pagesStu/stu_seat_list/stu_seat_list?id='+datas.info.id"> 82 <view class="" @click="$service.jump" :data-url="'/pagesStu/stu_seat_list/stu_seat_list?id='+datas.info.id">
75 去选座 83 去选座
76 </view> 84 </view>
77 </view> 85 </view>
78 - <!-- 阻止滑动 -->  
79 - <!-- <view @touchmove.stop.prevent='test'></view> --> 86 +
  87 + </view>
  88 +
  89 + </PaddingTopB>
  90 +
80 </view> 91 </view>
81 </template> 92 </template>
82 93
@@ -86,11 +97,18 @@ @@ -86,11 +97,18 @@
86 mapState, 97 mapState,
87 mapMutations 98 mapMutations
88 } from 'vuex' 99 } from 'vuex'
  100 + import CustomReturn from "@/components/CustomReturn/index.vue"
  101 + import PaddingTopB from "@/components/PaddingTopB/index.vue"
89 var that 102 var that
90 var djs_name 103 var djs_name
91 export default { 104 export default {
  105 + components: {
  106 + CustomReturn,
  107 + PaddingTopB
  108 + },
92 data() { 109 data() {
93 return { 110 return {
  111 + bgColor: 'none',
94 options:'', 112 options:'',
95 time_list:[ 113 time_list:[
96 { 114 {
@@ -131,6 +149,13 @@ @@ -131,6 +149,13 @@
131 return this.getDate('end'); 149 return this.getDate('end');
132 } 150 }
133 }, 151 },
  152 + onPageScroll(e) {
  153 + if(e.scrollTop > 0 ) {
  154 + this.bgColor = '#3384fc'
  155 + }else {
  156 + this.bgColor = 'none'
  157 + }
  158 + },
134 onLoad(e) { 159 onLoad(e) {
135 that=this 160 that=this
136 that.options=e||{} 161 that.options=e||{}
@@ -308,24 +333,12 @@ @@ -308,24 +333,12 @@
308 333
309 <style lang="scss" scoped> 334 <style lang="scss" scoped>
310 .wrap_box{ 335 .wrap_box{
311 - width: 100%;  
312 - // padding: 30rpx;  
313 - min-height: 100vh;  
314 - // #ifdef H5  
315 - min-height: calc(100vh - 44px);  
316 - // #endif  
317 - background: #F8F8F8;  
318 - position: relative;  
319 padding-bottom: 120rpx; 336 padding-bottom: 120rpx;
320 } 337 }
321 -  
322 -.tel_index_bg { 338 +.bg-img {
  339 + height: 504rpx;
323 position: absolute; 340 position: absolute;
324 - top: 0;  
325 - z-index: 1;  
326 width: 100%; 341 width: 100%;
327 - height: 250rpx;  
328 - background: url('/static/images/selectseat_bg.png') repeat fixed center;  
329 } 342 }
330 343
331 .vio_list{ 344 .vio_list{
@@ -344,7 +357,7 @@ @@ -344,7 +357,7 @@
344 } 357 }
345 .stime_list{ 358 .stime_list{
346 width: 100%; 359 width: 100%;
347 - // padding: 0 30rpx; 360 + margin: 20rpx 0 60rpx 0;
348 .stime_li{ 361 .stime_li{
349 width: 144rpx; 362 width: 144rpx;
350 height: 102rpx; 363 height: 102rpx;
@@ -389,122 +402,100 @@ @@ -389,122 +402,100 @@
389 } 402 }
390 .xz_rule{ 403 .xz_rule{
391 width: 100%; 404 width: 100%;
392 - height: 306rpx;  
393 background: #FFFFFF; 405 background: #FFFFFF;
394 - border-radius: 32rpx;  
395 - margin-top: 80rpx;  
396 - position: relative;  
397 - .xz_rule_top{  
398 - width: 100%;  
399 - height: 154rpx;  
400 - margin-top: -40rpx; 406 + border-radius: 20rpx;
401 position: relative; 407 position: relative;
402 - z-index: 2;  
403 - }  
404 - .xz_rule_tit{  
405 - width: 100%;  
406 - height: 74rpx;  
407 - display: flex;  
408 - align-items: center;  
409 - padding: 0 40rpx; 408 + padding: 60rpx 30rpx 30rpx;
  409 + .tit-icon {
410 position: absolute; 410 position: absolute;
411 - top: 0;  
412 left: 0; 411 left: 0;
413 - z-index: 10;  
414 - font-size: 30rpx;  
415 - color: #FFFFFF; 412 + top: 0;
  413 + width: 130rpx;
  414 + height: 40rpx;
416 } 415 }
417 .rule_msg{ 416 .rule_msg{
418 - width: 100%;  
419 - padding: 0 30rpx;  
420 .xz_room{ 417 .xz_room{
421 - font-size: 30rpx;  
422 - color: #545D71;  
423 - position: relative;  
424 - padding-left: 21rpx;  
425 - &:before{  
426 - content:'';  
427 - position: absolute;  
428 - left: 0;  
429 - top: 50%;  
430 - margin-top: -13rpx;  
431 - width: 6rpx;  
432 - height: 26rpx;  
433 - background: #2D81FF;  
434 - border-radius: 3rpx;  
435 - }  
436 - 418 + font-size: 28rpx;
  419 + font-family: PingFang SC;
  420 + font-weight: 500;
  421 + color: #323232;
437 } 422 }
438 .rule_tip{ 423 .rule_tip{
439 - padding-top: 30rpx;  
440 - font-size: 28rpx;  
441 - color: #A9B1C0; 424 + font-size: 22rpx;
  425 + font-family: PingFang SC;
  426 + font-weight: 400;
  427 + color: #979797;
  428 + margin-top: 20rpx;
442 } 429 }
443 } 430 }
444 } 431 }
445 .stu_tit{ 432 .stu_tit{
446 - width: 100%;  
447 - height: 94rpx;  
448 font-size: 28rpx; 433 font-size: 28rpx;
449 - color: #545D71;  
450 - display: flex;  
451 - align-items: center;  
452 - text{  
453 - width: 16rpx;  
454 - height: 16rpx;  
455 - background: #FFAC0D;  
456 - border-radius: 50%;  
457 - margin-right: 8rpx; 434 + font-family: PingFang SC;
  435 + font-weight: 500;
  436 + color: #323232;
  437 + margin: 30rpx 0;
  438 + padding-left: 20rpx;
  439 + position: relative;
  440 + &:before{
  441 + content:'';
  442 + position: absolute;
  443 + left: 0;
  444 + top: 0;
  445 + bottom: 0;
  446 + width: 10rpx;
  447 + background: #2D81FF;
  448 + border-radius: 6rpx;
458 } 449 }
459 } 450 }
460 .stu_list{ 451 .stu_list{
461 width: 100%; 452 width: 100%;
462 - // height: 740px;  
463 background: #FFFFFF; 453 background: #FFFFFF;
464 - border-radius: 10rpx;  
465 - padding: 15rpx 0; 454 + border-radius: 20rpx;
466 .stu_li{ 455 .stu_li{
467 width: 100%; 456 width: 100%;
468 - padding: 0 30rpx;  
469 - height: 80rpx; 457 + padding: 30rpx;
470 display: flex; 458 display: flex;
471 align-items: center; 459 align-items: center;
472 .stu_name{ 460 .stu_name{
473 - font-size: 30rpx;  
474 - color: #545D71; 461 + font-size: 28rpx;
  462 + font-family: PingFang SC;
  463 + font-weight: 400;
  464 + color: #323232;
475 display: flex; 465 display: flex;
476 align-items: center; 466 align-items: center;
477 - view{  
478 - line-height: 32rpx;  
479 - height: 32rpx;  
480 - max-width: 250rpx;  
481 - } 467 +
482 image { 468 image {
483 - width: 28rpx;  
484 - height: 28rpx;  
485 - margin-left: 12rpx; 469 + width: 30rpx;
  470 + height: 26rpx;
  471 + margin-left: 20rpx;
486 } 472 }
487 } 473 }
488 .stu_time{ 474 .stu_time{
489 flex: 1; 475 flex: 1;
490 - font-size: 28rpx;  
491 - font-family: Arial;  
492 - color: #A9B1C0;  
493 - padding-left: 20rpx; 476 + font-size: 24rpx;
  477 + font-family: PingFang SC;
  478 + font-weight: 400;
  479 + color: #979797;
  480 + text-align: right;
494 } 481 }
495 .stu_status{ 482 .stu_status{
496 - font-size: 26rpx;  
497 - color: #2D81FF;  
498 - width: 78rpx;  
499 - height: 38rpx;  
500 - background: rgba(45, 129, 255, .1);  
501 - border-radius: 4rpx;  
502 - display: flex;  
503 - align-items: center;  
504 - justify-content: center; 483 +
  484 + padding: 4rpx 6rpx;
  485 +
  486 + font-size: 20rpx;
  487 + font-family: PingFang SC;
  488 + font-weight: 500;
  489 +
  490 + background: #F3F4F6;
  491 + border: 1px solid #CACACA;
  492 + border-radius: 2px;
  493 + color: #979797;
  494 + margin-right: 20rpx;
505 &.stu_status1{ 495 &.stu_status1{
506 - color: #AFB6C4;  
507 - background: rgba(175, 182, 196, .1); 496 + background: #FFF1F0;
  497 + border: 1px solid #FFAFAE;
  498 + color: #EC5656;
508 } 499 }
509 } 500 }
510 } 501 }
@@ -513,39 +504,42 @@ @@ -513,39 +504,42 @@
513 width: 100%; 504 width: 100%;
514 position: fixed; 505 position: fixed;
515 bottom: 0; 506 bottom: 0;
516 - background: #f8f8f8; 507 + background: #FFFFFF;
517 z-index: 800; 508 z-index: 800;
518 left: 0; 509 left: 0;
519 - padding: 30rpx; 510 + padding: 15rpx 25rpx;
520 view{ 511 view{
521 - font-size: 32rpx;  
522 - color: #FFFFFF;  
523 - width: 100%;  
524 - height: 90rpx;  
525 background: #2D81FF; 512 background: #2D81FF;
526 - border-radius: 10rpx;  
527 - display: flex;  
528 - align-items: center;  
529 - justify-content: center; 513 + border-radius: 44rpx;
  514 + line-height: 88rpx;
  515 + font-size: 34rpx;
  516 + font-family: PingFang SC;
  517 + font-weight: 500;
  518 + text-align: center;
  519 + color: #FFFFFF;
530 } 520 }
531 } 521 }
532 .xzdata_null{ 522 .xzdata_null{
533 - width: 100%;  
534 - height: 110rpx;  
535 display: flex; 523 display: flex;
536 align-items: center; 524 align-items: center;
537 - // justify-content: center;  
538 - flex-direction: column;  
539 - position: relative;  
540 - // top: -20rpx;  
541 - margin-bottom: -40rpx; 525 + margin: 50rpx 0;
  526 + .icon {
  527 + width: 60rpx;
  528 + height: 60rpx;
  529 + margin-right: 20rpx;
  530 + }
542 .d1{ 531 .d1{
543 - font-size: 36rpx; 532 + font-size: 32rpx;
  533 + font-family: PingFang SC;
  534 + font-weight: 500;
544 color: #FFFFFF; 535 color: #FFFFFF;
545 } 536 }
546 .d2{ 537 .d2{
547 - font-size: 26rpx; 538 + font-size: 24rpx;
  539 + font-family: PingFang SC;
  540 + font-weight: 500;
548 color: #FFFFFF; 541 color: #FFFFFF;
  542 + margin-top: 20rpx;
549 } 543 }
550 } 544 }
551 </style> 545 </style>