<template>
  <view class="card-box">
    <view class="top-flex-box">
      <view>
        <view>
          <text class="address">上海奉贤两网融合</text>
          <text class="type">(大磅)</text>
        </view>
        <view>
          <text class="number">收货单号：SHD20230901132333</text>
        </view>
        <view>
          <text class="name">陡其成</text>
        </view>
      </view>
      <view>
        <text class="btn">现场照片</text>
      </view>
    </view>
    <view>
      <text class="desc">毛重时间：2023-09-01 13:23:33</text>
    </view>
    <view class="flex-box">
      <text>毛重：2510kg</text>
      <text>单价：5元/kg</text>
    </view>
    <view class="btn-box">
      <u-button
        text="点击作废"
        color="#E8E8E8"
        :customStyle="{ color: '#999' }"
      ></u-button>
      <u-button type="primary" text="点击编辑"></u-button>
    </view>
  </view>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.card-box {
  padding: 38rpx 50rpx;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
  border-radius: 13rpx;
  margin: 0rpx 25rpx;
  margin-top: 35rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 24rpx;
  color: #000000;
  line-height: 41rpx;
  .top-flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
      border-radius: 24rpx;
      border: 1px solid #00dcee;
      padding: 10rpx 30rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #00dcee;
      line-height: 41rpx;
    }
  }
  .address {
    margin-right: 30rpx;
  }
  .type,
  .desc {
    font-size: 21rpx;
    color: #999999;
  }
  .desc {
    margin-top: 30rpx;
    display: inline-block;
  }
  .name {
    font-size: 32rpx;
    color: #000000;
  }
  .flex-box {
    font-weight: 400;
    font-size: 32rpx;
    color: #000000;
    line-height: 41rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .btn-box {
    margin-top: 60rpx;
    display: flex;
    ::v-deep button {
      border-radius: 43rpx;
    }
    ::v-deep button + button {
      margin-left: 50rpx;
    }
  }
}
</style>
