‘’

liukangdong

2024-05-24 4f9c002c8963f93376e10e58f9023ab7839e4ebc

 h5/pages/staff/vehicle/shiwai.vue

@@ -27,11 +27,26 @@
         <view class="tit">您申请的用车时段已有车辆预约</view>
         <view class="content">
            <view class="card">皖A1212</view>
            <view class="line"><text>用车时段</text><text>111111</text></view>
            <view class="line"><text>目的地</text><text>111111</text></view>
            <view class="line"><text>乘车人数</text><text>111111</text></view>
            <view class="line"><text>用车事由</text><text>111111</text></view>
            <view class="line"><text>申请人</text><text>111111</text></view>
            <view class="line">
               <text>用车时段</text>
               <text>111111</text>
            </view>
            <view class="line">
               <text>目的地</text>
               <text>111111</text>
            </view>
            <view class="line">
               <text>乘车人数</text>
               <text>111111</text>
            </view>
            <view class="line">
               <text>用车事由</text>
               <text>111111</text>
            </view>
            <view class="line">
               <text>申请人</text>
               <text>111111</text>
            </view>
         </view>
      </view>
      <view class="main_footer">
@@ -41,56 +56,88 @@
      </view>
      <!--  -->
      <!-- 选择车辆 -->
      <u-picker keyName="name" :show="isShowCar" @close="isShowCar = false" :closeOnClickOverlay="true" :columns="carList" @confirm="seletedCar" @cancel="isShowCar = false"></u-picker>
      <u-picker keyName="name" :show="isShowDate" @close="isShowDate = false" :closeOnClickOverlay="true" :columns="datetimeOp" @confirm="seletedDate" @cancel="isShowDate = false"></u-picker>
      <u-picker
         keyName="name"
         :show="isShowCar"
         @close="isShowCar = false"
         :closeOnClickOverlay="true"
         :columns="carList"
         @confirm="seletedCar"
         @cancel="isShowCar = false"
      ></u-picker>
      <u-datetime-picker
         mode="datetime"
         keyName="name"
         :show="isShowDate"
         :filter="timeFilter"
         @close="isShowDate = false"
         :closeOnClickOverlay="true"
         @confirm="seletedDate"
         @cancel="isShowDate = false"
      />
      <uni-datetime-picker
                  v-model="datetimerange"
                  type="datetimerange"
                  start="2021-3-20 12:00:00"
                  end="2021-6-20 20:00:00"
                  rangeSeparator="至"
               />
   </view>
</template>

<script>
   export default {
      data() {
         return {
            param: {},
            isShowCar: false,
            isShowDate: false,
            carList: [],
            datetimeOp: [],
         };
export default {
   data() {
      return {
         param: {},
         isShowCar: false,
         isShowDate: false,
         carList: [],
         datetimeOp: []
      };
   },
   methods: {
      seletedCar() {},
      seletedDate() {
         this.isShowDate = false;
      },
      methods: {
         seletedCar() {},
         seletedDate() {},
      timeFilter(mode, options) {
         if (mode === 'minute') {
            return options.filter(option => option === '00' || option === '30');
         }
         return options;
      }
   }
};
</script>

<style lang="scss">
.have_info{
   .tit{
      color: #ED4545;
.have_info {
   .tit {
      color: #ed4545;
      margin: 40rpx 0 24rpx;
   }
   .content{
      background: #F7F7F7;
   .content {
      background: #f7f7f7;
      border-radius: 16rpx;
      padding: 30rpx 30rpx 10rpx;
      .card{
      .card {
         margin-bottom: 30rpx;
         font-weight: 500;
         font-size: 32rpx;
         color: #222222;
         background: #F7F7F7;
         background: #f7f7f7;
         padding: 0;
      }
      .line{
      .line {
         display: flex;
         margin-bottom: 20rpx;
         text{
            &:nth-of-type(1){
         text {
            &:nth-of-type(1) {
               width: 150rpx;
               color: #888888;
            }
            &:nth-of-type(2){
            &:nth-of-type(2) {
               flex: 1;
            }
         }
@@ -145,7 +192,7 @@
         margin-top: 24rpx;
         width: 120rpx;
         height: 120rpx;
         border: 2rpx solid #E5E5E5;
         border: 2rpx solid #e5e5e5;
         background: #f7f7f7;
         color: #666666;
         font-size: 22rpx;
@@ -160,32 +207,30 @@
      }
   }
}
.main_footer{
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      padding: 20rpx 30rpx 84rpx;
      box-shadow: 0rpx -3rpx 6rpx 0rpx #EEEEEE;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn{
         width: 184rpx;
         height: 72rpx;
         line-height: 72rpx;
         text-align: center;
         background: #279BAA;
         box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
         border-radius: 36rpx;
         font-size: 30rpx;
         color: #FFFFFF;
      }
      .sel{
         color: #279BAA;
         flex: 1;
      }
		

.main_footer {
   position: absolute;
   width: 100%;
   left: 0;
   bottom: 0;
   padding: 20rpx 30rpx 84rpx;
   box-shadow: 0rpx -3rpx 6rpx 0rpx #eeeeee;
   display: flex;
   align-items: center;
   justify-content: space-between;
   .btn {
      width: 184rpx;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      background: #279baa;
      box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
      border-radius: 36rpx;
      font-size: 30rpx;
      color: #ffffff;
   }
   .sel {
      color: #279baa;
      flex: 1;
   }
}
</style>