作者 mxd

违纪情况

@@ -13,6 +13,7 @@ @@ -13,6 +13,7 @@
13 <view class="vio_sx dis_flex aic"> 13 <view class="vio_sx dis_flex aic">
14 <picker mode="date" :value="vio_time" :start="startDate" :end="endDate" @change="bindDateChange"> 14 <picker mode="date" :value="vio_time" :start="startDate" :end="endDate" @change="bindDateChange">
15 <view class="vio_time"> 15 <view class="vio_time">
  16 +
16 <view class="flex_1"> 17 <view class="flex_1">
17 {{vio_time||'请选择时间'}} 18 {{vio_time||'请选择时间'}}
18 </view> 19 </view>
@@ -20,51 +21,71 @@ @@ -20,51 +21,71 @@
20 </view> 21 </view>
21 </picker> 22 </picker>
22 <view class="vio_ss"> 23 <view class="vio_ss">
23 - <input type="text" placeholder="请输入姓名" v-model="name" @confirm="onRetry">  
24 <text class="icon icon-sousuo" @click="onRetry"></text> 24 <text class="icon icon-sousuo" @click="onRetry"></text>
  25 + <input type="text" placeholder="请输入姓名" v-model="name" @confirm="onRetry">
  26 +
25 </view> 27 </view>
26 </view> 28 </view>
27 </view> 29 </view>
28 - <view class="vio_list">  
29 - <view class="vio_li" v-for="(item,index) in datas">  
30 - <view class="vio_li_msg">  
31 - <view class="vio_li_tit">  
32 - <text class="li_type"></text>  
33 - <text class="li_name">{{item.title}}</text>  
34 - <block v-if="active==5">  
35 - <view v-if="item.type==1" class="li_tip" style="background:#2D81FF1a"><text style="color:#2D81FF">事假</text></view>  
36 - <view v-else class="li_tip" style="background:#FF90001a"><text style="color:#FF9000">病假</text></view>  
37 - </block>  
38 - <text class="identification" style="color: #FF9000;" v-if="item.examine === AUDITSTATUS.PENDINGREVIEW">待审核</text>  
39 - <text class="identification" style="color: #67c23a;" v-else-if="item.examine === AUDITSTATUS.APPROVED">已通过</text>  
40 - <text class="identification" style="color: #f56c6c;" v-else-if="item.examine === AUDITSTATUS.FAILED">未通过</text>  
41 - <view class="flex_1"></view>  
42 - <text v-if="active==5||active==6">学员:{{item.name}}</text>  
43 - <text v-else>学员:{{item.uid}}</text>  
44 - </view>  
45 - <view class="vio_li_inr">  
46 - {{item.content}} 30 + <view class="list">
  31 + <view class="item" v-for="(item,index) in datas">
  32 + <view class="item-top">
  33 + <template v-if="active==5">
  34 + <view class="tab" v-if="item.type==1">
  35 + 事假
  36 + </view>
  37 + <view class="tab bg" v-else>
  38 + 病假
  39 + </view>
  40 + </template>
  41 +
  42 + <view class="name">
  43 + <template v-if="active==5||active==6">
  44 + {{item.name}}
  45 + </template>
  46 + <template v-else>
  47 + {{item.uid}}
  48 + </template>
47 </view> 49 </view>
  50 +
  51 + <text class="state" v-if="item.examine === AUDITSTATUS.PENDINGREVIEW">
  52 + 待审核
  53 + </text>
  54 + <text class="state bg" v-else-if="item.examine === AUDITSTATUS.APPROVED">
  55 + 已通过
  56 + </text>
  57 + <text class="state bg1" v-else-if="item.examine === AUDITSTATUS.FAILED">
  58 + 未通过
  59 + </text>
  60 +
48 </view> 61 </view>
49 - <view v-if="active==5" class="li_time">  
50 - {{item.start_time}} 62 + <view class="item-remarks" v-if="active==5">
  63 + {{item.content || ''}}
51 </view> 64 </view>
52 - <view v-else-if="active==6" class="li_time">  
53 - {{item.create_time}} 65 + <view class="item-title" v-else>
  66 + <text class="icon"></text>
  67 + <text class="content">
  68 + <template v-if="active==6">
  69 + {{item.content || ''}}
  70 + </template>
  71 + <template v-else>
  72 + {{item.title}}
  73 + </template>
  74 + </text>
54 </view> 75 </view>
55 - <view v-else class="li_time">  
56 - {{item.deduct_time}} 76 + <view class="item-time">
  77 + <template v-if="active==5">
  78 + {{item.start_time}}
  79 + </template>
  80 + <template v-else-if="active==6">
  81 + {{item.create_time}}
  82 + </template>
  83 + <template v-else>
  84 + {{item.deduct_time}}
  85 + </template>
57 </view> 86 </view>
58 - </view>  
59 - <u-empty v-if="datas.length==0"  
60 - mode="data"  
61 - text="暂无违纪"  
62 - icon="/static/images/tch/img_blank.png"  
63 - >  
64 - </u-empty> 87 + </view>
65 </view> 88 </view>
66 - <!-- 阻止滑动 -->  
67 - <!-- <view @touchmove.stop.prevent='test'></view> -->  
68 </view> 89 </view>
69 </template> 90 </template>
70 91
@@ -272,41 +293,34 @@ @@ -272,41 +293,34 @@
272 background: #F8F8F8; 293 background: #F8F8F8;
273 } 294 }
274 .vio_top{ 295 .vio_top{
275 - // position: absolute;  
276 - // top: 0;  
277 - // z-index: 1;  
278 width: 100%; 296 width: 100%;
279 - min-height: 220rpx;  
280 - background: linear-gradient(0deg, rgba(45, 129, 255, .01) 0%, #428EFE 80%, #2D81FF 100%);  
281 -}  
282 -.vip_tab_list{  
283 - padding: 0 30rpx;  
284 } 297 }
285 .vip_tab_li{ 298 .vip_tab_li{
286 - height: 100rpx;  
287 display: inline-flex; 299 display: inline-flex;
288 - align-items: center;  
289 - font-size: 30rpx;  
290 - color: #FFFFFF;  
291 - opacity: 0.6;  
292 - margin-right: 50rpx; 300 + font-size: 28rpx;
  301 + font-family: PingFang SC;
  302 + font-weight: 500;
  303 + color: #323232;
293 position: relative; 304 position: relative;
  305 + background-color: #fff;
  306 + border-top:1rpx solid #f3f4f6;
  307 + padding:30rpx;
294 &.active{ 308 &.active{
295 - opacity: 1;  
296 - 309 + color: #2D81FF;
297 &:after{ 310 &:after{
298 content: ''; 311 content: '';
299 position: absolute; 312 position: absolute;
300 - bottom: 0; 313 + bottom: 8rpx;
301 left: 50%; 314 left: 50%;
302 - margin-left: -18rpx;  
303 - width: 36rpx;  
304 - height: 6rpx;  
305 - background: #FFFFFF;  
306 - border-radius: 3rpx; 315 + background-image: url(@/static/imagesV2/icon23.png);
  316 + background-size: 100% 100%;
  317 + transform: translateX(-50%);
  318 + height: 24rpx;
  319 + width: 24rpx;
307 } 320 }
308 } 321 }
309 } 322 }
  323 +
310 .vio_sx{ 324 .vio_sx{
311 margin-top: 28rpx; 325 margin-top: 28rpx;
312 padding: 0 30rpx 30rpx; 326 padding: 0 30rpx 30rpx;
@@ -323,6 +337,7 @@ @@ -323,6 +337,7 @@
323 letter-spacing: 0; 337 letter-spacing: 0;
324 display: flex; 338 display: flex;
325 align-items: center; 339 align-items: center;
  340 + border-radius: 36rpx;
326 .icon{ 341 .icon{
327 font-size: 20rpx; 342 font-size: 20rpx;
328 margin-left: 5rpx; 343 margin-left: 5rpx;
@@ -333,86 +348,103 @@ @@ -333,86 +348,103 @@
333 height: 80rpx; 348 height: 80rpx;
334 background: #FFFFFF; 349 background: #FFFFFF;
335 border-radius: 10rpx; 350 border-radius: 10rpx;
336 - padding: 0 24rpx; 351 + padding: 0 30rpx;
337 display: flex; 352 display: flex;
338 align-items: center; 353 align-items: center;
  354 + border-radius: 36rpx;
  355 +
339 input{ 356 input{
340 flex: 1; 357 flex: 1;
341 min-width: 0; 358 min-width: 0;
342 - padding-right: 20rpx;  
343 font-size: 30rpx; 359 font-size: 30rpx;
344 } 360 }
345 .icon{ 361 .icon{
346 color: #B7BAC0; 362 color: #B7BAC0;
347 - font-size: 40rpx; 363 + font-size: 30rpx;
  364 + margin-right: 20rpx;
348 } 365 }
349 } 366 }
350 -.vio_list{  
351 - width: 100%; 367 +
  368 +.list {
352 padding: 0 30rpx 30rpx; 369 padding: 0 30rpx 30rpx;
353 - .vio_li{  
354 - width: 100%;  
355 - // min-height: 235rpx; 370 + .item {
356 background: #FFFFFF; 371 background: #FFFFFF;
357 - border-radius: 10rpx;  
358 - &+.vio_li{  
359 - margin-top: 20rpx; 372 + border-radius: 20rpx;
  373 + padding: 30rpx;
  374 + & + .item {
  375 + margin-top: 30rpx;
360 } 376 }
361 - .vio_li_msg{  
362 - width: 100%;  
363 - padding: 30rpx;  
364 - .vio_li_tit{  
365 - font-size: 28rpx;  
366 - color: #7D8087;  
367 - display: flex;  
368 - align-items: center;  
369 - margin-bottom: 20rpx;  
370 - .li_type{  
371 - width: 14rpx;  
372 - height: 14rpx;  
373 - background: #2D81FF;  
374 - border-radius: 50%;  
375 - margin-right: 10rpx;  
376 - }  
377 - .li_name{  
378 - font-size: 32rpx;  
379 - color: #545D71;  
380 - }  
381 - .li_tip{  
382 - font-size: 26rpx;  
383 - // color: #2D81FF;  
384 - // background: rgba(#2D81FF, .1);  
385 - padding: 2rpx 14rpx;  
386 - line-height: 30rpx;  
387 - margin-left: 10rpx;  
388 -  
389 - text{  
390 - // opacity: 1;  
391 - }  
392 - }  
393 - .identification{  
394 - font-size: 26rpx;  
395 - // color: #2D81FF;  
396 - // background: rgba(#2D81FF, .1);  
397 - padding: 2rpx 14rpx;  
398 - line-height: 30rpx;  
399 - margin-left: 10rpx; 377 + &-top {
  378 + display: flex;
  379 + align-items: center;
  380 + .tab {
  381 + border: 1px solid #2E86FE;
  382 + border-radius: 2rpx;
  383 + font-size: 22rpx;
  384 + font-family: PingFang SC;
  385 + font-weight: 400;
  386 + color: #2E86FE;
  387 + padding: 4rpx 10rpx;
  388 + margin-right: 10rpx;
  389 + & .bg {
  390 + border: 1px solid #FF7E00;
  391 + color: #FF7E00;
400 } 392 }
401 } 393 }
402 - .vio_li_inr{ 394 +
  395 +
  396 + .name {
403 font-size: 30rpx; 397 font-size: 30rpx;
404 - color: #545D71; 398 + font-family: PingFang SC;
  399 + font-weight: 500;
  400 + color: #323232;
  401 + flex: 1;
  402 + }
  403 + .state {
  404 + background: linear-gradient(0deg, #0AC49C 0%, #34D5AA 100%);
  405 + border-radius: 21rpx 21rpx 0 21rpx;
  406 + padding: 5rpx 20rpx;
  407 + font-size: 22rpx;
  408 + font-family: PingFang SC;
  409 + font-weight: 500;
  410 + color: #FFFFFF;
  411 + & .bg {
  412 + background: linear-gradient(0deg, #0088FF 0%, #2C9DFF 100%);
  413 + }
  414 + & .bg1 {
  415 + background: linear-gradient(0deg, #BEBEBE 0%, #AAAAAA 100%);
  416 + }
405 } 417 }
406 } 418 }
407 - .li_time{  
408 - width: 100%;  
409 - height: 80rpx;  
410 - border-top: 1rpx solid #eee;  
411 - font-size: 28rpx;  
412 - color: #545D71;  
413 - padding: 0 28rpx; 419 + &-title {
414 display: flex; 420 display: flex;
415 align-items: center; 421 align-items: center;
  422 + font-size: 26rpx;
  423 + font-family: PingFang SC;
  424 + font-weight: 400;
  425 + color: #646464;
  426 + margin-top: 30rpx;
  427 + .icon {
  428 + width: 12rpx;
  429 + height: 12rpx;
  430 + background: #2D81FF;
  431 + border-radius: 50%;
  432 + margin-right: 10rpx;
  433 + }
  434 + }
  435 + &-remarks {
  436 + font-size: 26rpx;
  437 + font-family: PingFang SC;
  438 + font-weight: 400;
  439 + color: #646464;
  440 + margin-top: 30rpx;
  441 + }
  442 + &-time {
  443 + font-size: 24rpx;
  444 + font-family: PingFang SC;
  445 + font-weight: 400;
  446 + color: #979797;
  447 + margin-top: 30rpx;
416 } 448 }
417 } 449 }
418 } 450 }