<template>
  <view class="layout">
    <view class="name">现场照片</view>
    <view class="time">2024-01-22 14:28:36</view>
    <up-row customStyle="flex-wrap: wrap">
      <up-col span="6" v-for="(item, index) in 10" :key="item">
        <view
          class="grid-item"
          :style="{
            marginLeft: index % 2 === 1 ? '10rpx' : '',
            marginRight: index % 2 === 0 ? '10rpx' : '',
            marginBottom: '10rpx'
          }"
        >
          <text class="tip">毛重过磅</text>
          <image src="/static/img/temp/car.png" mode="'heightFix'" />
        </view>
      </up-col>
    </up-row>
  </view>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.layout {
  margin: 22.44rpx 26.54rpx;
  padding: 33rpx 18rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
  border-radius: 13rpx;
  font-family: Source Han Sans CN;
  .name {
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
    line-height: 41rpx;
  }
  .time {
    font-weight: 400;
    font-size: 21rpx;
    color: #999999;
    line-height: 41rpx;
  }
  .grid-item {
    position: relative;
    image {
      width: 100%;
    }
    .tip {
      background: rgba(0, 0, 0, 0.63);
      box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.09);
      border-radius: 0rpx 40rpx 40rpx 0rpx;
      font-weight: 400;
      font-size: 21rpx;
      color: #ffffff;
      padding: 10rpx 30rpx;
      position: absolute;
      margin-top: 40rpx;

    }
  }
}
</style>
