css

liukangdong

2024-06-25 ebc96a1cf0424c04dceacbc42f9ad2a897223be9

 h5/pages/driver/queueUpRecord.vue

@@ -1,140 +1,147 @@
<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">
            <view class="status">作业中</view>
            <image class="avatar" src="@/static/driver/ic_truck@2x.png" mode=""></image>
            <view class="content">
               <view class="id_card">皖A</view>
               <view class="line">
                  <view class="address">4号月台</view>
                  <view class="time">
                     <u-icon class="mr6" name="clock" color="#4d98a8"></u-icon>
                     <text>01:02:02</text>
                  </view>
               </view>
            </view>
         </view>
         <view class="item active">
            <view class="status padding">作业中</view>
            <view class="me">我</view>
            <image class="avatar" src="@/static/driver/ic_truck@2x.png" mode=""></image>
            <view class="content">
               <view class="id_card">皖A</view>
               <view class="line">
                  <view class="address">4号月台</view>
                  <view class="time">
                     <u-icon class="mr6" name="clock" color="#4d98a8"></u-icon>
                     <text>01:02:02</text>
                  </view>
               </view>
            </view>
         </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">
        <view class="status">作业中</view>
        <image
          class="avatar"
          src="@/static/driver/ic_truck@2x.png"
          mode=""
        ></image>
        <view class="content">
          <view class="id_card">皖A</view>
          <view class="line">
            <view class="address">4号月台</view>
            <view class="time">
              <u-icon class="mr6" name="clock" color="#4d98a8"></u-icon>
              <text>01:02:02</text>
            </view>
          </view>
        </view>
      </view>
      <view class="item active">
        <view class="status padding">作业中</view>
        <view class="me">我</view>
        <image
          class="avatar"
          src="@/static/driver/ic_truck@2x.png"
          mode=""
        ></image>
        <view class="content">
          <view class="id_card">皖A</view>
          <view class="line">
            <view class="address">4号月台</view>
            <view class="time">
              <u-icon class="mr6" name="clock" color="#4d98a8"></u-icon>
              <text>01:02:02</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
   export default {
      data() {
         return {
				
         };
      }
   }
export default {
  data() {
    return {

    }
  }
}
</script>

<style lang="scss">
   page{
      background-color: #f7f7f7;
   }
.main_app{
   .main_name{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 104rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #111111;
      background-color: #fff;
      margin:0 -30rpx 20rpx;
   }
   .main_list{
      .item{
         display: flex;
         align-items: center;
         position: relative;
         padding: 30rpx;
         background-color: #fff;
         margin-bottom: 20rpx;
         border-radius: 8rpx;
         .status{
            position: absolute;
            top: 0;
            right: 0;
            height: 50rpx;
            line-height: 50rpx;
            padding: 0 20rpx;
            background: $uni-color-primary;
            color: #fff;
            font-size: 26rpx;
            border-radius: 0rpx 8rpx 0rpx 25rpx;
         }
         .me{
            position: absolute;
            top: 0;
            left: 0;
            background: #00BA67;
            border-radius: 8rpx 0rpx 8rpx 0rpx;
            height: 42rpx;
            line-height: 42rpx;
            width: 64rpx;
            text-align: center;
            color: #fff;
            font-size: 24rpx;
            z-index: 11;
         }
         .padding{
            background: #E9F5F6;
            color: $uni-color-primary;
         }
         .avatar{
            width: 84rpx;
            height: 84rpx;
            margin-right: 20rpx;
         }
         .content{
            flex: 1;
            .id_card{
               font-weight: 500;
               font-size: 30rpx;
               color: #111111;
            }
            .line{
               display: flex;
               justify-content: space-between;
               align-items: center;
               font-size: 26rpx;
               color: #999999;
               margin-top: 6rpx;
               .time{
                  display: flex;
                  align-items: center;
                  color: $uni-color-primary;
               }
            }
         }
      }
      .active{
         background: linear-gradient( 270deg, #FFFFFF 0%, #E1F7FE 100%);
      }
   }
	
page {
  background-color: #f7f7f7;
}
.main_app {
  .main_name {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 104rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: #111111;
    background-color: #fff;
    margin: 0 -30rpx 20rpx;
  }
  .main_list {
    .item {
      display: flex;
      align-items: center;
      position: relative;
      padding: 30rpx;
      background-color: #fff;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      .status {
        position: absolute;
        top: 0;
        right: 0;
        height: 50rpx;
        line-height: 50rpx;
        padding: 0 20rpx;
        background: $uni-color-primary;
        color: #fff;
        font-size: 26rpx;
        border-radius: 0rpx 8rpx 0rpx 25rpx;
      }
      .me {
        position: absolute;
        top: 0;
        left: 0;
        background: #00ba67;
        border-radius: 8rpx 0rpx 8rpx 0rpx;
        height: 42rpx;
        line-height: 42rpx;
        width: 64rpx;
        text-align: center;
        color: #fff;
        font-size: 24rpx;
        z-index: 11;
      }
      .padding {
        background: #e9f5f6;
        color: $uni-color-primary;
      }
      .avatar {
        width: 84rpx;
        height: 84rpx;
        margin-right: 20rpx;
      }
      .content {
        flex: 1;
        .id_card {
          font-weight: 600;
          font-size: 30rpx;
          color: #111111;
        }
        .line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 26rpx;
          color: #999999;
          margin-top: 6rpx;
          .time {
            display: flex;
            align-items: center;
            color: $uni-color-primary;
          }
        }
      }
    }
    .active {
      background: linear-gradient(270deg, #ffffff 0%, #e1f7fe 100%);
    }
  }
}
</style>