css

liukangdong

2024-06-25 ebc96a1cf0424c04dceacbc42f9ad2a897223be9

 h5/pages/driver/index.vue

@@ -1,279 +1,312 @@
<template>
   <view class="main_app">
      <view class="title_wrap">
         <view class="name">某某某，欢迎登录～</view>
         <view class="btn" @click="loginOut">退出登录</view>
      </view>
      <!--  -->
      <view class="banner_wrap">
         <view class="h1">安泰物流智慧园区</view>
         <view class="h2">物流车专区</view>
         <image class="banner" src="../../static/driver/wuliuche_banner@2x.png" mode="widthFix"></image>
      </view>
      <!--  -->
      <view class="task_list">
         <view class="item">
            <view class="head">
               <view class="name">运输单222</view>
               <view class="status">
                  <view class="text">请确认任务</view>
                  <view class="time">预计等待：12小时</view>
               </view>
            </view>
            <view class="content">
               <view class="info">
                  <view class="plate">
                     <image src="@/static/driver/wuliu_ic_car@2x.png" class="icon" mode=""></image>
                     <text>皖AD</text>
                  </view>
                  <view class="plate">
                     <image src="@/static/driver/wuliu_ic_huowu@2x.png" class="icon" mode=""></image>
                     <text>3000万</text>
                  </view>
               </view>
               <view class="sub">
                  <view class="time">02-01 08:11:11</view>
                  <view class="sub_btn" @click="handleTask()">确认任务</view>
               </view>
            </view>
         </view>
      </view>
      <!--  -->
      <view class="title_wrap"><view class="name">业务办理</view></view>
      <view class="container1">
         <view class="left">
            <view class="img_wrap img1" @click="$jump('/pages/driver/reserved')">
               <image src="@/static/driver/wuliu_ic_ruyuanyuyue@2x.png" class="img"></image>
               <view class="h1">入园须知</view>
               <view class="h2">RESERVATION</view>
            </view>
            <view class="img_wrap img2" @click="$jump('/pages/driver/reservedGuide')">
               <image src="@/static/driver/wuliu_ic_zhinan@2x.png" class="img"></image>
               <view class="h1">预约指南</view>
               <view class="h2">APPOINTMENT GUIDE</view>
            </view>
         </view>
         <view class="right">
            <view class="img_wrap img2" @click="$jump('/pages/driver/reservedRecord')">
               <image src="@/static/driver/wuliu_ic_yuyuejilu@2x.png" class="img"></image>
               <view class="h1">预约记录</view>
               <view class="h2">APPOINTMENT RECORD</view>
            </view>
            <view class="img_wrap img2" @click="$jump('/pages/driver/queueUp')">
               <image src="@/static/driver/wuliu_ic_paidui@2x.png" class="img"></image>
               <view class="h1">月台排队情况</view>
               <view class="h2">HIDDEN DANGER</view>
            </view>
            <view class="img_wrap img2">
               <image src="@/static/driver/wuliu_ic_daolan@2x.png" class="img"></image>
               <view class="h1">园区导览图</view>
               <view class="h2">GUIDE MAP</view>
            </view>
         </view>
      </view>
      <!--  -->
      <view class="copyright">
         <image src="@/static/logo_s@2x.png" class="mr6" mode="widthFix" />
         <text>安徽安泰物流有限责任公司版权所有</text>
      </view>
   </view>
  <view class="main_app">
    <view class="title_wrap">
      <view class="name">某某某，欢迎登录～</view>
      <view class="btn" @click="loginOut">退出登录</view>
    </view>
    <!--  -->
    <view class="banner_wrap">
      <view class="h1">安泰物流智慧园区</view>
      <view class="h2">物流车专区</view>
      <image
        class="banner"
        src="../../static/driver/wuliuche_banner@2x.png"
        mode="widthFix"
      ></image>
    </view>
    <!--  -->
    <view class="task_list">
      <view class="item">
        <view class="head">
          <view class="name">运输单222</view>
          <view class="status">
            <view class="text">请确认任务</view>
            <view class="time">预计等待：12小时</view>
          </view>
        </view>
        <view class="content">
          <view class="info">
            <view class="plate">
              <image
                src="@/static/driver/wuliu_ic_car@2x.png"
                class="icon"
                mode=""
              ></image>
              <text>皖AD</text>
            </view>
            <view class="plate">
              <image
                src="@/static/driver/wuliu_ic_huowu@2x.png"
                class="icon"
                mode=""
              ></image>
              <text>3000万</text>
            </view>
          </view>
          <view class="sub">
            <view class="time">02-01 08:11:11</view>
            <view class="sub_btn" @click="handleTask()">确认任务</view>
          </view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="title_wrap"><view class="name">业务办理</view></view>
    <view class="container1">
      <view class="left">
        <view class="img_wrap img1" @click="$jump('/pages/driver/reserved')">
          <image
            src="@/static/driver/wuliu_ic_ruyuanyuyue@2x.png"
            class="img"
          ></image>
          <view class="h1">入园须知</view>
          <view class="h2">RESERVATION</view>
        </view>
        <view
          class="img_wrap img2"
          @click="$jump('/pages/driver/reservedGuide')"
        >
          <image
            src="@/static/driver/wuliu_ic_zhinan@2x.png"
            class="img"
          ></image>
          <view class="h1">预约指南</view>
          <view class="h2">APPOINTMENT GUIDE</view>
        </view>
      </view>
      <view class="right">
        <view
          class="img_wrap img2"
          @click="$jump('/pages/driver/reservedRecord')"
        >
          <image
            src="@/static/driver/wuliu_ic_yuyuejilu@2x.png"
            class="img"
          ></image>
          <view class="h1">预约记录</view>
          <view class="h2">APPOINTMENT RECORD</view>
        </view>
        <view class="img_wrap img2" @click="$jump('/pages/driver/queueUp')">
          <image
            src="@/static/driver/wuliu_ic_paidui@2x.png"
            class="img"
          ></image>
          <view class="h1">月台排队情况</view>
          <view class="h2">HIDDEN DANGER</view>
        </view>
        <view class="img_wrap img2">
          <image
            src="@/static/driver/wuliu_ic_daolan@2x.png"
            class="img"
          ></image>
          <view class="h1">园区导览图</view>
          <view class="h2">GUIDE MAP</view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="copyright">
      <image src="@/static/logo_s@2x.png" class="mr6" mode="widthFix" />
      <text>安徽安泰物流有限责任公司版权所有</text>
    </view>
  </view>
</template>

<script>
   export default {
      data() {
         return {
				
         };
      },
      methods: {
         handleTask(){
            uni.navigateTo({
               url: '/pages/driver/taskConfirm'
            })
         }
      }
   }
export default {
  data() {
    return {

    }
  },
  methods: {
    handleTask() {
      uni.navigateTo({
        url: '/pages/driver/taskConfirm'
      })
    }
  }
}
</script>

<style lang="scss">
.title_wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24rpx;
   .name {
      font-weight: 500;
      font-size: 34rpx;
      color: #222222;
   }
   .btn {
      width: 144rpx;
      height: 56rpx;
      border-radius: 36rpx;
      border: 1rpx solid $uni-color-primary;
      font-size: 26rpx;
      color: $uni-color-primary;
      display: flex;
      justify-content: center;
      align-items: center;
   }
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  .name {
    font-weight: 600;
    font-size: 34rpx;
    color: #222222;
  }
  .btn {
    width: 144rpx;
    height: 56rpx;
    border-radius: 36rpx;
    border: 1rpx solid $uni-color-primary;
    font-size: 26rpx;
    color: $uni-color-primary;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.main_app {
   padding-top: 12rpx;
  padding-top: 12rpx;
}
.banner_wrap {
   padding: 54rpx 44rpx;
   color: #fff;
   position: relative;
   width: 688rpx;
   height: 270rpx;
   margin-bottom: 40rpx;
   .h1 {
      font-weight: bold;
      line-height: 66rpx;
      font-size: 44rpx;
      margin-bottom: 14rpx;
   }
   .h2{
      font-weight: 500;
      font-size: 28rpx;
      width: 192rpx;
      color: $uni-color-primary;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      background: #FFFFFF;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(39,155,170,0.31);
      border-radius: 24rpx;
   }
   .banner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: -1;
   }
  padding: 54rpx 44rpx;
  color: #fff;
  position: relative;
  width: 688rpx;
  height: 270rpx;
  margin-bottom: 40rpx;
  .h1 {
    font-weight: bold;
    line-height: 66rpx;
    font-size: 44rpx;
    margin-bottom: 14rpx;
  }
  .h2 {
    font-weight: 600;
    font-size: 28rpx;
    width: 192rpx;
    color: $uni-color-primary;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(39, 155, 170, 0.31);
    border-radius: 24rpx;
  }
  .banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
  }
}
.container1 {
   display: flex;
   flex-wrap: wrap;
   view {
      width: 336rpx;
   }
   .left {
      margin-right: 18rpx;
   }
   .img_wrap {
      position: relative;
      padding: 24rpx 0rpx 0 28rpx;
      border-radius: 8rpx;
      overflow: hidden;
      .h1 {
         font-weight: 500;
         font-size: 32rpx;
         color: #222222;
         line-height: 48rpx;
         margin-bottom: 4rpx;
      }
      .h2 {
         font-size: 22rpx;
         color: #7b9da1;
         line-height: 34rpx;
      }
      .img {
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
         z-index: -1;
      }
   }
   .img1 {
      width: 336rpx;
      height: 296rpx;
      margin-bottom: 16rpx;
   }
   .img2 {
      width: 336rpx;
      height: 140rpx;
      margin-bottom: 16rpx;
   }
  display: flex;
  flex-wrap: wrap;
  view {
    width: 336rpx;
  }
  .left {
    margin-right: 18rpx;
  }
  .img_wrap {
    position: relative;
    padding: 24rpx 0rpx 0 28rpx;
    border-radius: 8rpx;
    overflow: hidden;
    .h1 {
      font-weight: 600;
      font-size: 32rpx;
      color: #222222;
      line-height: 48rpx;
      margin-bottom: 4rpx;
    }
    .h2 {
      font-size: 22rpx;
      color: #7b9da1;
      line-height: 34rpx;
    }
    .img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
  }
  .img1 {
    width: 336rpx;
    height: 296rpx;
    margin-bottom: 16rpx;
  }
  .img2 {
    width: 336rpx;
    height: 140rpx;
    margin-bottom: 16rpx;
  }
}
.task_list{
   margin-bottom: 48rpx;
   .item{
      background: #FFFFFF;
      box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(39,155,170,0.18);
      border-radius: 16rpx;
      .head{
         display: flex;
         justify-content: space-between;
         align-items: center;
         background: linear-gradient( 270deg, #FEFEFF 0%, #E1F7FE 100%);
         padding: 20rpx 30rpx;
         .name{
            font-weight: 600;
            font-size: 36rpx;
            color: #222222;
         }
         .status{
            color: $uni-color-primary;
            font-weight: 500;
            .time{
               font-size: 24rpx;
               font-weight: 360;
            }
         }
      }
      .content{
         .info{
            display: flex;
            padding: 24rpx 30rpx;
            .plate{
               flex: 1;
               display: flex;
               align-items: center;
               .icon{
                  width: 26rpx;
                  height: 26rpx;
                  margin-right: 10rpx;
               }
            }
         }
         .sub{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30rpx 24rpx;
            .time{
               font-size: 26rpx;
               color: #999999;
            }
            .sub_btn{
               height: 68rpx;
               line-height: 68rpx;
               padding: 0 34rpx;
               color: #FFFFFF;
               background: $uni-color-primary;
               box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(39,155,170,0.4);
               border-radius: 40rpx;
            }
         }
      }
   }
.task_list {
  margin-bottom: 48rpx;
  .item {
    background: #ffffff;
    box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(39, 155, 170, 0.18);
    border-radius: 16rpx;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(270deg, #fefeff 0%, #e1f7fe 100%);
      padding: 20rpx 30rpx;
      .name {
        font-weight: 600;
        font-size: 36rpx;
        color: #222222;
      }
      .status {
        color: $uni-color-primary;
        font-weight: 600;
        .time {
          font-size: 24rpx;
          font-weight: 360;
        }
      }
    }
    .content {
      .info {
        display: flex;
        padding: 24rpx 30rpx;
        .plate {
          flex: 1;
          display: flex;
          align-items: center;
          .icon {
            width: 26rpx;
            height: 26rpx;
            margin-right: 10rpx;
          }
        }
      }
      .sub {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx 24rpx;
        .time {
          font-size: 26rpx;
          color: #999999;
        }
        .sub_btn {
          height: 68rpx;
          line-height: 68rpx;
          padding: 0 34rpx;
          color: #ffffff;
          background: $uni-color-primary;
          box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(39, 155, 170, 0.4);
          border-radius: 40rpx;
        }
      }
    }
  }
}
.copyright {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 44rpx;
   font-size: 24rpx;
   color: #666666;
   image {
      width: 40rpx;
      height: 40rpx;
   }
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 44rpx;
  font-size: 24rpx;
  color: #666666;
  image {
    width: 40rpx;
    height: 40rpx;
  }
}
</style>