<template>
  <view class="item">
    <view class="flex-between orderNum">
      <text>订单号：20211018154423824347</text>
      <text style="color: #446dfc">待退款</text>
    </view>
    <view class="flex-between remarks"> 商家备注：20211018154423824347 </view>
    <view class="consigneeInfo">
      <text style="margin-right: 40rpx">信息</text>
      <text style="margin-right: 20rpx">13312341234</text>
      <view class="flex-between" style="color: #446dfc">
        <u-icon name="phone-circle-o" style="margin-right: 10rpx"></u-icon>
        联系收货人
      </view>
    </view>
    <view class="flex-between goodsInfo">
      <view class="goodsImg">
        <image
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mallManage/user.png"
          mode="aspectFill"
          class="img"
        />
      </view>
      <view class="goodsBox">
        <view class="goodsName">测试商品</view>
        <view class="weight">重量：</view>
        <view class="flex-between">
          <text>x1</text>
          <text>￥0.01</text>
        </view>
      </view>
    </view>
    <view class="priceBox">
      <text>合计：</text>
      <text style="color: #111">￥0.01</text>
      <text>（含运费￥0.01）</text>
    </view>
    <view class="btnBox">
      <button class="btn">备注</button>
      <button class="btn">拒绝</button>
      <button class="btn">同意</button>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    data: Object,
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item {
  width: 700rpx;
  //   height: 480rpx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 10rpx auto;
  .orderNum {
    font-size: 26rpx;
    color: #333;
    margin-bottom: 20rpx;
  }
  .remarks {
    font-size: 26rpx;
    color: #333;
    margin-bottom: 20rpx;
  }
  .consigneeInfo {
    width: 100%;
    height: 70rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    background-color: #f7f7f7;
    font-size: 24rpx;
    border-radius: 6rpx;
    margin-bottom: 20rpx;
  }
  .goodsInfo {
    margin-bottom: 30rpx;
  }
  .goodsImg {
    width: 160rpx;
    height: 160rpx;
    border-radius: 6rpx;
    overflow: hidden;
    box-shadow: 0rpx 0rpx 10rpx 0px rgba(36, 36, 36, 0.2);
    margin-right: 20rpx;
    .img {
      width: 100%;
      height: 100%;
      border-radius: 6rpx;
    }
  }
  .goodsBox {
    width: 480rpx;
    height: 160rpx;
    font-size: 24rpx;
    color: #333;
    .goodsName {
      height: 45%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
    .weight {
      height: 35%;
    }
  }
  .priceBox {
    text-align: right;
    color: #808080;
    font-size: 24rpx;
    margin-bottom: 30rpx;
  }
  .btnBox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .btn {
      //   width: 90rpx;
      //   height: 50rpx;
      border-radius: 30rpx;
      border: 2rpx solid #f7f7f7;
      margin: 0 0 0 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22rpx;
      color: #111;
    }
  }
}
</style>