css

liukangdong

2024-06-25 ebc96a1cf0424c04dceacbc42f9ad2a897223be9

 h5/pages/driver/index.vue

@@ -8,7 +8,11 @@
      <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>
      <image
        class="banner"
        src="../../static/driver/wuliuche_banner@2x.png"
        mode="widthFix"
      ></image>
      </view>
      <!--  -->
      <view class="task_list">
@@ -23,11 +27,19 @@
            <view class="content">
               <view class="info">
                  <view class="plate">
                     <image src="@/static/driver/wuliu_ic_car@2x.png" class="icon" mode=""></image>
              <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>
              <image
                src="@/static/driver/wuliu_ic_huowu@2x.png"
                class="icon"
                mode=""
              ></image>
                     <text>3000万</text>
                  </view>
               </view>
@@ -43,29 +55,50 @@
      <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>
          <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="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="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>
          <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>
          <image
            src="@/static/driver/wuliu_ic_daolan@2x.png"
            class="img"
          ></image>
               <view class="h1">园区导览图</view>
               <view class="h2">GUIDE MAP</view>
            </view>
@@ -84,7 +117,7 @@
      data() {
         return {
            
         };
    }
      },
      methods: {
         handleTask(){
@@ -103,7 +136,7 @@
   align-items: center;
   margin-bottom: 24rpx;
   .name {
      font-weight: 500;
    font-weight: 600;
      font-size: 34rpx;
      color: #222222;
   }
@@ -136,14 +169,14 @@
      margin-bottom: 14rpx;
   }
   .h2{
      font-weight: 500;
    font-weight: 600;
      font-size: 28rpx;
      width: 192rpx;
      color: $uni-color-primary;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      background: #FFFFFF;
    background: #ffffff;
      box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(39,155,170,0.31);
      border-radius: 24rpx;
   }
@@ -170,7 +203,7 @@
      border-radius: 8rpx;
      overflow: hidden;
      .h1 {
         font-weight: 500;
      font-weight: 600;
         font-size: 32rpx;
         color: #222222;
         line-height: 48rpx;
@@ -204,14 +237,14 @@
.task_list{
   margin-bottom: 48rpx;
   .item{
      background: #FFFFFF;
    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%);
      background: linear-gradient(270deg, #fefeff 0%, #e1f7fe 100%);
         padding: 20rpx 30rpx;
         .name{
            font-weight: 600;
@@ -220,7 +253,7 @@
         }
         .status{
            color: $uni-color-primary;
            font-weight: 500;
        font-weight: 600;
            .time{
               font-size: 24rpx;
               font-weight: 360;
@@ -255,7 +288,7 @@
               height: 68rpx;
               line-height: 68rpx;
               padding: 0 34rpx;
               color: #FFFFFF;
          color: #ffffff;
               background: $uni-color-primary;
               box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(39,155,170,0.4);
               border-radius: 40rpx;