作者 mxd

核对名单

1 <template> 1 <template>
2 <view class="wrap_box"> 2 <view class="wrap_box">
3 - <!-- <uParse v-if="datas" :content="datas"></uParse> -->  
4 - <!-- stu_bz_index -->  
5 - <view class="tel_index_bg"></view>  
6 - <view class="bz_box">  
7 - <view class="stu_num">  
8 - <view class="">  
9 - 共{{datas.length}}人 3 + <u-sticky>
  4 + <view class="head">
  5 + <view class="stu-num">
  6 +
  7 + <text class="val">30</text>
  8 +
10 </view> 9 </view>
11 - <view class="" @click="$service.jump" data-url="/pagesA/stu_hddk_list/stu_hddk_list"> 10 + <view class="btn" @click="$service.jump" data-url="/pagesA/stu_hddk_list/stu_hddk_list">
12 查看历史记录 11 查看历史记录
13 </view> 12 </view>
14 </view> 13 </view>
15 - <view class="stu_list">  
16 - <view class="stu_li" v-for="(item,index) in datas">  
17 - <view class="stu_li_name"> 14 + </u-sticky>
  15 +
  16 + <view class="list">
  17 + <view class="item" v-for="(item,index) in datas" :key="index">
  18 + <view class="info">
  19 + <view class="name">
18 {{item.name}} 20 {{item.name}}
19 - <image v-if="item.sex!=1" src="/static/images/tch/icon_female.png" mode="aspectFit"></image>  
20 - <image v-else src="/static/images/tch/icon_male.png" mode="aspectFit"></image>  
21 </view> 21 </view>
22 - <view class="flex_1"></view>  
23 - <view class="sf_v">  
24 - <text>是否到课</text>  
25 - <view class="sf_v_btn" @click="set_fuc(item,true)"> 22 + <image class="gender" v-if="item.sex!=1" src="/static/imagesV2/stu_selection/icon_female.png" mode="aspectFit"></image>
  23 + <image class="gender" v-else src="/static/imagesV2/stu_selection/icon_male.png" mode="aspectFit"></image>
  24 + </view>
  25 + <view class="operate">
  26 + <view class="operate-label">
  27 + 是否到课:
  28 + </view>
  29 + <view class="operate-content">
  30 + <view class="radio-view" @click="set_fuc(item,true)">
  31 + <view class="radio-view_icon">
  32 + <image v-show="!item.is_check" src="/static/imagesV2/tch_index/radio.png" mode="aspectFit"></image>
  33 + <image v-show="item.is_check" src="/static/imagesV2/tch_index/radio-active.png" mode="aspectFit"></image>
  34 + </view>
  35 + <view class="radio-view_text">
26 36
27 - <view class="sf_v_btn_b" :class="{active:item.is_check}">  
28 - <text class="icon icon-duigou"></text>  
29 </view> 37 </view>
30 </view> 38 </view>
31 - <view class="sf_v_btn" @click="set_fuc(item,false)"> 39 + <view class="radio-view" @click="set_fuc(item,false)">
  40 + <view class="radio-view_icon">
  41 + <image v-show="item.is_check" src="/static/imagesV2/tch_index/radio.png" mode="aspectFit"></image>
  42 + <image v-show="!item.is_check" src="/static/imagesV2/tch_index/radio-active.png" mode="aspectFit"></image>
  43 + </view>
  44 + <view class="radio-view_text">
32 45
33 - <view class="sf_v_btn_b" :class="{active:!item.is_check}">  
34 - <text class="icon icon-duigou"></text>  
35 </view> 46 </view>
36 </view> 47 </view>
37 </view> 48 </view>
38 </view> 49 </view>
39 </view> 50 </view>
40 - <view class="save_btn" @click="save_fuc"> 51 + </view>
  52 + <view class="footer">
  53 + <view class="btn" @click="save_fuc">
41 保存 54 保存
42 </view> 55 </view>
43 </view> 56 </view>
44 - <!-- 阻止滑动 -->  
45 - <!-- <view @touchmove.stop.prevent='test'></view> -->  
46 </view> 57 </view>
47 </template> 58 </template>
48 59
@@ -314,7 +325,7 @@ @@ -314,7 +325,7 @@
314 <style lang="scss" scoped> 325 <style lang="scss" scoped>
315 .wrap_box{ 326 .wrap_box{
316 width: 100%; 327 width: 100%;
317 - // padding: 30rpx; 328 + padding-bottom: 140rpx;
318 min-height: 100vh; 329 min-height: 100vh;
319 // #ifdef H5 330 // #ifdef H5
320 min-height: calc(100vh - 44px); 331 min-height: calc(100vh - 44px);
@@ -322,99 +333,98 @@ @@ -322,99 +333,98 @@
322 background: #F8F8F8; 333 background: #F8F8F8;
323 position: relative; 334 position: relative;
324 } 335 }
325 -.tel_index_bg{  
326 - position: absolute;  
327 - top: 0;  
328 - z-index: 1;  
329 - width: 100%;  
330 - min-height: 220rpx;  
331 - background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);  
332 -}  
333 -.bz_box{  
334 - width: 100%;  
335 - position: relative;  
336 - z-index: 2;  
337 - padding: 0 30rpx 50rpx;  
338 - .stu_num{  
339 - width: 100%;  
340 - height: 80rpx; 336 +.head {
341 display: flex; 337 display: flex;
342 align-items: center; 338 align-items: center;
343 - font-size: 28rpx;  
344 - color: #fff;  
345 justify-content: space-between; 339 justify-content: space-between;
346 - 340 + padding: 30rpx;
  341 + background: #F8F8F8;
  342 + .stu-num {
  343 + font-size: 26rpx;
  344 + font-family: PingFang SC;
  345 + font-weight: 500;
  346 + color: #323232;
  347 + .val {
  348 + color: #2D81FF;
  349 + }
  350 + }
  351 + .btn {
  352 + font-size: 30rpx;
  353 + font-family: PingFang SC;
  354 + font-weight: 500;
347 } 355 }
348 } 356 }
349 -.stu_list{  
350 - width: 100%;  
351 - min-height: 100rpx; 357 +
  358 +.list {
  359 + padding: 0 30rpx;
  360 + .item {
352 background: #FFFFFF; 361 background: #FFFFFF;
353 - border-radius: 10rpx;  
354 - .stu_li{  
355 - width: 100%;  
356 - height: 100rpx; 362 + border-radius: 20rpx;
  363 + padding: 30rpx;
357 display: flex; 364 display: flex;
358 align-items: center; 365 align-items: center;
359 - padding: 0 30rpx;  
360 - &+.stu_li{  
361 - border-top: 1px solid #eee; 366 + & + .item {
  367 + margin-top: 20rpx;
362 } 368 }
363 - .stu_li_name{  
364 - font-size: 30rpx;  
365 - color: #545D71;  
366 - margin-bottom: 10rpx;  
367 - image{  
368 - width: 28rpx;  
369 - height: 28rpx;  
370 - margin-left: 5rpx; 369 + .info {
  370 + flex: 1;
  371 + display: flex;
  372 + align-items: center;
371 } 373 }
  374 + .gender {
  375 + width: 29rpx !important;
  376 + height: 24rpx !important;
  377 + margin-left: 20rpx;
372 } 378 }
373 - .sf_v{  
374 - font-size: 30rpx;  
375 - color: #A9B1C0; 379 + .operate {
376 display: flex; 380 display: flex;
377 align-items: center; 381 align-items: center;
378 - .sf_v_btn{ 382 + &-label {
  383 + font-size: 26rpx;
  384 + font-family: PingFang SC;
  385 + font-weight: 500;
  386 + color: #646464;
  387 + }
  388 + &-content {
  389 + flex: 1;
379 display: flex; 390 display: flex;
380 align-items: center; 391 align-items: center;
381 - margin-left: 20rpx;  
382 - font-size: 30rpx;  
383 - color: #A9B1C0;  
384 - .sf_v_btn_b{ 392 + .radio-view {
385 display: flex; 393 display: flex;
386 align-items: center; 394 align-items: center;
387 - justify-content: center;  
388 - font-size: 18rpx;  
389 - color: #fff;  
390 - width: 32rpx;  
391 - height: 32rpx;  
392 - border: 1px solid #DDDDDD;  
393 - border-radius: 50%;  
394 - margin-left: 8rpx;  
395 - &.active{  
396 - background: #2D81FF;  
397 - border: 1px solid #2D81FF;  
398 - }  
399 - text{  
400 - font-size: 18rpx;  
401 - line-height: 20rpx; 395 + font-size: 28rpx;
  396 + font-family: PingFang SC;
  397 + font-weight: 400;
  398 + color: #979797;
  399 + margin-left: 20rpx;
  400 + .radio-view_icon {
  401 + width: 30rpx;
  402 + height: 30rpx;
  403 + margin-right: 10rpx;
402 } 404 }
403 } 405 }
404 } 406 }
405 } 407 }
406 } 408 }
407 } 409 }
408 -.save_btn{  
409 - display: flex;  
410 - align-items: center;  
411 - justify-content: center;  
412 - font-size: 32rpx;  
413 - color: #FFFFFF; 410 +.footer {
  411 + position: fixed;
  412 + left: 0;
  413 + bottom: 0;
  414 + z-index: 99;
414 width: 100%; 415 width: 100%;
415 - height: 90rpx; 416 + background-color: #fff;
  417 + padding: 16rpx 25rpx;
  418 + .btn {
  419 + height: 88rpx;
416 background: #2D81FF; 420 background: #2D81FF;
417 - border-radius: 10rpx;  
418 - margin-top: 40rpx; 421 + border-radius: 44rpx;
  422 + line-height: 88rpx;
  423 + font-size: 34rpx;
  424 + font-family: PingFang SC;
  425 + font-weight: 500;
  426 + color: #FFFFFF;
  427 + text-align: center;
  428 + }
419 } 429 }
420 </style> 430 </style>
1 <template> 1 <template>
2 <view class="wrap_box"> 2 <view class="wrap_box">
3 - <!-- <uParse v-if="datas" :content="datas"></uParse> -->  
4 - <!-- stu_bz_index -->  
5 - <view class="tel_index_bg"></view>  
6 - <view class="bz_box">  
7 - <view class="stu_num">  
8 - <!-- <picker mode="date" :value="sx_time" :start="startDate" :end="endDate" @change="bindDateChange">  
9 - <view class="">  
10 - 核对时间:{{sx_time}}<text class="icon icon-arrow-right-copy-copy"></text>  
11 - </view>  
12 - </picker> --> 3 + <u-sticky>
  4 + <view class="search">
13 <picker @change="bindPickerChange" :value="index" :range="tabs" range-key="create_time"> 5 <picker @change="bindPickerChange" :value="index" :range="tabs" range-key="create_time">
14 - <view class=""> 6 + <view class="search-item">
  7 + <view class="search-item_label">
15 核对时间: 8 核对时间:
16 - {{sxtitle||'请选择时间'}}  
17 - <text class="icon icon-arrow-right-copy-copy"></text> 9 + </view>
  10 + <view class="search-item_content">
  11 + <template v-if="sxtitle">
  12 + {{sxtitle}}
  13 + </template>
  14 + <text class="msg" v-else>请选择时间</text>
  15 + </view>
  16 + <u-icon name="arrow-down-fill" color="#646464" size="10px"></u-icon>
18 </view> 17 </view>
19 </picker> 18 </picker>
20 </view> 19 </view>
  20 + </u-sticky>
21 21
22 - <view class="stu_list">  
23 - <view class="stu_li" v-for="(item,index) in datas">  
24 - <view class="stu_li_name"> 22 + <view class="list">
  23 + <view class="item" v-for="(item,index) in datas" :key="index">
  24 + <view class="info">
  25 + <view class="name">
25 {{item.name}} 26 {{item.name}}
26 - <image v-if="item.sex!=1" src="/static/images/tch/icon_female.png" mode="aspectFit"></image>  
27 - <image v-else src="/static/images/tch/icon_male.png" mode="aspectFit"></image>  
28 </view> 27 </view>
29 - <view class="flex_1"></view>  
30 - <view class="sf_v">  
31 - <text>是否到课:</text>  
32 - <view class="sf_v_btn" v-if="item.dk==1">  
33 - 28 + <image class="gender" v-if="item.sex!=1" src="/static/imagesV2/stu_selection/icon_female.png" mode="aspectFit"></image>
  29 + <image class="gender" v-else src="/static/imagesV2/stu_selection/icon_male.png" mode="aspectFit"></image>
34 </view> 30 </view>
35 - <view class="sf_v_btn" v-else>  
36 - 31 + <view class="operate">
  32 + <text class="operate-label">是否到课:</text>
  33 + <view class="operate-content">
  34 + {{item.dk==1 ? '是' : '否'}}
37 </view> 35 </view>
38 </view> 36 </view>
39 </view> 37 </view>
@@ -44,9 +42,7 @@ @@ -44,9 +42,7 @@
44 > 42 >
45 </u-empty> 43 </u-empty>
46 </view> 44 </view>
47 - </view>  
48 - <!-- 阻止滑动 -->  
49 - <!-- <view @touchmove.stop.prevent='test'></view> --> 45 +
50 </view> 46 </view>
51 </template> 47 </template>
52 48
@@ -235,119 +231,72 @@ @@ -235,119 +231,72 @@
235 <style lang="scss" scoped> 231 <style lang="scss" scoped>
236 .wrap_box { 232 .wrap_box {
237 width: 100%; 233 width: 100%;
238 - // padding: 30rpx;  
239 min-height: 100vh; 234 min-height: 100vh;
240 // #ifdef H5 235 // #ifdef H5
241 min-height: calc(100vh - 44px); 236 min-height: calc(100vh - 44px);
242 // #endif 237 // #endif
243 background: #F8F8F8; 238 background: #F8F8F8;
244 position: relative; 239 position: relative;
  240 + padding-bottom: 30rpx;
245 } 241 }
246 242
247 - .tel_index_bg {  
248 - position: absolute;  
249 - top: 0;  
250 - z-index: 1;  
251 - width: 100%;  
252 - min-height: 220rpx;  
253 - background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);  
254 - }  
255 -  
256 - .bz_box {  
257 - width: 100%;  
258 - position: relative;  
259 - z-index: 2;  
260 - padding:0 30rpx 30rpx;  
261 -  
262 - .stu_num {  
263 - width: 100%;  
264 - height: 80rpx; 243 + .search {
  244 + padding: 30rpx;
  245 + background: #F8F8F8;
  246 + &-item {
265 display: flex; 247 display: flex;
266 align-items: center; 248 align-items: center;
267 - font-size: 28rpx;  
268 - color: #fff;  
269 - justify-content: space-between;  
270 - .icon{  
271 - font-size: 24rpx;  
272 - margin-left: 10rpx; 249 + font-size: 26rpx;
  250 + font-family: PingFang SC;
  251 + font-weight: 500;
  252 + color: #323232;
  253 + &_label {
  254 + width: 140rpx;
273 } 255 }
  256 + &_content {
  257 + margin-right: 5rpx;
  258 + .msg {
  259 + color: #646464;
274 } 260 }
275 } 261 }
276 -  
277 - .stu_list {  
278 - width: 100%;  
279 - min-height: 100rpx;  
280 - background: #FFFFFF;  
281 - border-radius: 10rpx;  
282 -  
283 - .stu_li {  
284 - width: 100%;  
285 - height: 100rpx;  
286 - display: flex;  
287 - align-items: center;  
288 - padding: 0 30rpx;  
289 -  
290 - &+.stu_li {  
291 - border-top: 1px solid #eee;  
292 - }  
293 -  
294 - .stu_li_name {  
295 - font-size: 30rpx;  
296 - color: #545D71;  
297 - margin-bottom: 10rpx;  
298 -  
299 - image {  
300 - width: 28rpx;  
301 - height: 28rpx;  
302 - margin-left: 5rpx;  
303 } 262 }
304 } 263 }
305 -  
306 - .sf_v {  
307 - font-size: 30rpx;  
308 - color: #A9B1C0; 264 + .list {
  265 + padding: 0 30rpx;
  266 + .item {
  267 + background: #FFFFFF;
  268 + border-radius: 20rpx;
  269 + padding: 30rpx;
309 display: flex; 270 display: flex;
310 align-items: center; 271 align-items: center;
311 -  
312 - .sf_v_btn { 272 + & + .item {
  273 + margin-top: 20rpx;
  274 + }
  275 + .info {
  276 + flex: 1;
313 display: flex; 277 display: flex;
314 align-items: center; 278 align-items: center;
  279 + }
  280 + .gender {
  281 + width: 29rpx !important;
  282 + height: 24rpx !important;
315 margin-left: 20rpx; 283 margin-left: 20rpx;
316 - font-size: 30rpx;  
317 - color: #A9B1C0;  
318 -  
319 - .sf_v_btn_b { 284 + }
  285 + .operate {
320 display: flex; 286 display: flex;
321 align-items: center; 287 align-items: center;
322 - justify-content: center;  
323 - font-size: 18rpx;  
324 - color: #fff;  
325 - width: 32rpx;  
326 - height: 32rpx;  
327 - border: 1px solid #DDDDDD;  
328 - border-radius: 50%;  
329 - margin-left: 8rpx;  
330 -  
331 - &.active {  
332 - background: #2D81FF;  
333 - border: 1px solid #2D81FF;  
334 - }  
335 - }  
336 - } 288 + font-size: 26rpx;
  289 + font-family: PingFang SC;
  290 + font-weight: 500;
  291 + color: #646464;
  292 + &-content {
  293 + font-size: 28rpx;
  294 + font-family: PingFang SC;
  295 + font-weight: 500;
  296 + color: #323232;
  297 + margin-left: 5px;
337 } 298 }
338 } 299 }
339 } 300 }
340 -  
341 - .save_btn {  
342 - display: flex;  
343 - align-items: center;  
344 - justify-content: center;  
345 - font-size: 32rpx;  
346 - color: #FFFFFF;  
347 - width: 100%;  
348 - height: 90rpx;  
349 - background: #2D81FF;  
350 - border-radius: 10rpx;  
351 - margin-top: 40rpx;  
352 } 301 }
353 </style> 302 </style>