css

liukangdong

2024-06-25 ebc96a1cf0424c04dceacbc42f9ad2a897223be9

 h5/pages/driver/queueUp.vue

@@ -1,98 +1,106 @@
<template>
   <view class="main_app">
      <view class="main_name">
         <text class="mr12">物流入库月台</text>
         <u-icon name="arrow-down" color="#777777"></u-icon>
      </view>
      <!--  -->
      <view class="main_list">
         <view class="item" @click="handleCheck()">
            <view class="h1">作业中车辆</view>
            <view class="h2">
               <text>4</text>
               <text class="unit">辆</text>
            </view>
            <image class="img" src="../../static/driver/ic_zuoyezhong@2x.png" mode=""></image>
         </view>
         <view class="item cyan">
            <view class="h1">作业中车辆</view>
            <view class="h2">
               <text>4</text>
               <text class="unit">辆</text>
            </view>
            <image  class="img" src="../../static/driver/ic_yiqiandao@2x.png" mode=""></image>
         </view>
      </view>
   </view>
  <view class="main_app">
    <view class="main_name">
      <text class="mr12">物流入库月台</text>
      <u-icon name="arrow-down" color="#777777"></u-icon>
    </view>
    <!--  -->
    <view class="main_list">
      <view class="item" @click="handleCheck()">
        <view class="h1">作业中车辆</view>
        <view class="h2">
          <text>4</text>
          <text class="unit">辆</text>
        </view>
        <image
          class="img"
          src="../../static/driver/ic_zuoyezhong@2x.png"
          mode=""
        ></image>
      </view>
      <view class="item cyan">
        <view class="h1">作业中车辆</view>
        <view class="h2">
          <text>4</text>
          <text class="unit">辆</text>
        </view>
        <image
          class="img"
          src="../../static/driver/ic_yiqiandao@2x.png"
          mode=""
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
   export default {
      data() {
         return {
				
         };
      },
      methods: {
         handleCheck(){
            uni.navigateTo({
               url: "/pages/driver/queueUpRecord"
            })
         }
      }
   }
export default {
  data() {
    return {

    }
  },
  methods: {
    handleCheck() {
      uni.navigateTo({
        url: "/pages/driver/queueUpRecord"
      })
    }
  }
}
</script>

<style lang="scss">
.main_app{
   .main_name{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 104rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #111111;
   }
   .main_list{
      padding: 30rpx 10rpx;
      .item{
         width: 100%;
         height: 208rpx;
         padding: 30rpx 40rpx;
         margin-bottom: 30rpx;
         position: relative;
         .h1{
            font-weight: 400;
            font-size: 34rpx;
            color: #222222;
            line-height: 50rpx;
         }
         .h2{
            font-weight: bold;
            font-size: 64rpx;
            color: #00BA67;
            line-height: 110rpx;
            .unit{
               font-weight: 400;
               font-size: 26rpx;
               margin-left: 12rpx;
            }
         }
         .img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
         }
      }
      .cyan{
         .h2{
            color: $uni-color-primary;
         }
      }
   }
.main_app {
  .main_name {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 104rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #111111;
  }
  .main_list {
    padding: 30rpx 10rpx;
    .item {
      width: 100%;
      height: 208rpx;
      padding: 30rpx 40rpx;
      margin-bottom: 30rpx;
      position: relative;
      .h1 {
        font-weight: 400;
        font-size: 34rpx;
        color: #222222;
        line-height: 50rpx;
      }
      .h2 {
        font-weight: bold;
        font-size: 64rpx;
        color: #00ba67;
        line-height: 110rpx;
        .unit {
          font-weight: 400;
          font-size: 26rpx;
          margin-left: 12rpx;
        }
      }
      .img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
    }
    .cyan {
      .h2 {
        color: $uni-color-primary;
      }
    }
  }
}
</style>