feat：门卫样式

wk

2024-07-25 c4aef9b623635d49cf87308bfb874f4141c9d448

 pages/doorkeeper-page/doorkeeper-index/doorkeeper-index.vue

@@ -1,10 +1,10 @@
<template>
      <view class="appointment">
         <view class="searchview">
            <u-search @change="change" :searchIconSize="40" placeholder="请输入车牌号" height="80" clearabled v-model="carNo" @search="search" @custom="custom" @clear="clear" >
            <u-search @change="change" :searchIconSize="40" placeholder="请输入车牌号" height="60" clearabled v-model="carNo" @search="search" @custom="custom" @clear="clear" >
            </u-search >
         </view>
         <view style="position: relative;top: -120px;">
         <view style="position: relative;top: -40px;">
            <u-empty mode="data"
               icon="http://cdn.uviewui.com/uview/empty/data.png"
               textSize="30"
@@ -18,16 +18,20 @@
               :key="index">
               <view class="first-line">
                  <view class="dispatch-receive">
                     <view class="dispatch-dept">{{ item.carNo || ''  }}</view>
                     <view class="dispatch-dept">{{ item.code || ''  }}</view>
                     <view class="black-bar"></view>
                     <view class="dispatch">{{ item.driver ||'' }}</view>
                     <view class="dispatch">{{ item.customerName ||'' }}</view>
                  </view>
                  <view class="point-number">
                     <text class="residue">{{ item.productNames || '' }}</text>
                     <text class="order-type">{{ item.productNames || '' }}</text>
                  </view>
               </view>
               <view class="second-line">
                  <view class="coal-name">
                     <view class="dispatch-dept">{{ item.carNo || ''  }}</view>
                     <view class="black-bar"></view>
                     <view class="dispatch">{{ item.driver ||'' }}</view>
                     <view class="black-bar"></view>
                     <text>{{ item.phone || '' }}</text>
                  </view>
               </view>
@@ -40,16 +44,14 @@
                  <view class="send-date">{{ item.sendDate }} {{ item.startTime || '' }}-{{item.endTime || ""}}</view>
               </view>
               <view class="fourth-line">
                  <view class="buttons">
                     <u-button text="查看"
                        type="primary"
                        class="buttonitem"
                        v-if="item.roadTransportId"
                        @click="lookRoad(item)"></u-button>
                     <u-button text="检查"
                        type="primary"
                        class="buttonitem"
                        @click="yuYueBtnClick(item)"></u-button>
                  <view class="receive"
                  v-if="item.roadTransportId"
                     @click.stop="lookRoad(item)">
                     <view class="button-image">道路运输证</view>
                  </view>
                  <view class="forward"
                     @click.stop="yuYueBtnClick(item)">
                     <view class="button-image">检查</view>
                  </view>
               </view>
            </view>
@@ -345,7 +347,7 @@
<style lang="scss" scoped>
   .searchview{
      margin: 20rpx 0;
      height: 200rpx;
      height: 100rpx;
      u-search{
         width: 100rpx;
      }
@@ -390,32 +392,7 @@
            color: #252525;
         }
      }
      @mixin fourthLine {
         width: 64%;
         height: vww(68);
         display: flex;
         align-items: center;
         position: relative;
         left: vww(102);
         bottom: vww(3);
      
         .button-img {
            width: vww(122);
            height: vww(41);
            background: url('https://mx.jzeg.cn:9096/appimg/image/banner/button.png') no-repeat;
            background-size: cover;
            font-size: 28rpx;
            font-weight: 300;
            color: #ffffff;
            text-align: center;
            line-height: vww(40);
		
         }
      }
      .fourth-line {
         @include fourthLine;
      }

      // 表格
      .uni-table-scroll {
         width: 100%;
@@ -455,13 +432,6 @@
      position: relative;
      top: vww(-120);
   }
   .buttons{
      display: flex;
      justify-content: space-between;
      .buttonitem{
         width: 30%;
      }
   }
   @mixin flex {
      display: flex;
      justify-content: space-between;
@@ -487,6 +457,7 @@
            margin: vww(10) vww(16) 0 vww(16);
            display: flex;
            justify-content: space-between;
				
   
            .dispatch-receive {
               width: 70%;
@@ -516,18 +487,24 @@
   
            .point-number {
               width: 15%;
	
               text {
                  font-size: 24rpx;
                  font-weight: 400;
                  color: #c78a64;
               .order-type {
                  color: #035cfb;
                  border: 2px solid #035cfb;
                  border-radius: 4rpx;
                  padding: vww(2) vww(4);
                  text-align: center;
               }
               // text {
               //    font-size: 24rpx;
               //    font-weight: 400;
               //    color: #c78a64;
               // }
   
               .residue {
                  font-size: 40rpx;
                  font-weight: 400;
                  color: #f81414;
               }
               // .residue {
               //    font-size: 40rpx;
               //    font-weight: 400;
               //    color: #f81414;
               // }
            }
         }
   
@@ -553,7 +530,7 @@
                  width: 2rpx;
                  height: 30rpx;
                  background: #515151;
                  margin-left: vww(12);
                  margin: 0 vww(12) ;
               }
   
               .coal-type {
@@ -584,5 +561,59 @@
               color: #515151;
            }
         }
         .fourth-line {
            width: 100%;
            height: vww(30);
            @include flex;
            justify-content: flex-start;
            position: relative;
            bottom: vww(10);
            left: 25%;
			
            .receive,
            .forward {
               width: vww(123);
               height: vww(48);
               @include flex;
               justify-content: center;
               color: #ffffff;
               font-size: 28rpx;
               position: absolute;
			
               .button-image {
                  width: 100%;
                  height: 100%;
                  background: url('../../../static/image/banner/button.png') no-repeat;
                  background-size: cover;
                  font-size: 28rpx;
                  font-weight: 300;
                  color: #ffffff;
                  text-align: center;
                  line-height: vww(45);
               }
            }
			
            .receive {
               left: vww(20);
            }
			
            .forward {
               width: vww(106);
               left: vww(140);
			
               .button-image {
                  width: 100%;
                  height: 100%;
                  background: url('../../../static/image/banner/transpartent.png') no-repeat;
                  background-size: cover;
                  font-size: 28rpx;
                  font-weight: 300;
                  color: #3b56eb;
                  text-align: center;
                  line-height: vww(45);
               }
            }
         }
			
      }
</style>