<!--委托详情-->
<template>
  <view>
    <!--导航栏 navbar-->
    <u-navbar :title="title" id="header"
              :border-bottom="false"
              :background="{backgroundColor: 'whitesmoke'}">
    </u-navbar>

    <view class="body" :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
      <view class="tip u-m-b-20">剩余59分1秒自动取消上架单</view>
      <view class="u-p-r-30 u-p-l-30">
        <view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 u-m-b-20">
          <view class="u-border-bottom u-l-height-44 u-flex">
            <text class="u-flex-1">款式明细</text>
            <text>总共50款</text>
          </view>
          <view class="u-p-t-20 u-p-b-20">
            加厚荷兰绒绒布布料(3)
          </view>
          <view class="item u-flex">
            <view class="item-img"></view>
            <view class="u-flex-1 u-p-l-20">
              <view class="item-title u-line-1 u-font-28">男装-上装-青年-时尚休闲</view>
              <view class="u-flex u-m-t-6 u-m-b-6">
                <view class="u-m-r-40 label u-font-24">款号</view>
                <view class="u-line-1 u-flex-1 content u-font-24">
                  11
                </view>
              </view>
              <view class="u-flex u-m-t-6 u-m-b-6">
                <view class="u-m-r-40 label u-font-24">所选面料</view>
                <view class="u-line-1 u-flex-1 content u-font-24">
                  11
                </view>
              </view>
              <view class="item-tags">
                <view class="item-tag u-font-20">
                  标签
                </view>
                <view class="item-tag u-font-20">
                  标签
                </view>
              </view>
            </view>
          </view>
          <view class="u-p-b-20 u-border-bottom text-center" @click="toggle">
            <text>展开<u-icon name="arrow-down" size="22" color="#000"></u-icon></text>
          </view>
          <view class="price text-right u-m-t-30 u-p-r-30">
            总金额 <text class="price-num u-m-l-40">2000</text>元
          </view>
        </view>
        <!--订单信息-->
        <view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 u-m-b-20">
          <view class="u-border-bottom u-l-height-44">订单信息</view>
          <view class="u-flex u-m-t-18 u-m-b-8">
            <view class="u-m-r-40 label">订单编号</view>
            <view class="u-line-1 u-flex-1 content">
              11
            </view>
          </view>
          <view class="u-flex u-m-t-18 u-m-b-8">
            <view class="u-m-r-40 label">创建时间</view>
            <view class="u-line-1 u-flex-1 content" >
              111
            </view>付款时间
          </view>
          <view class="u-flex u-m-t-18 u-m-b-8">
            <view class="u-m-r-40 label">付款时间</view>
            <view class="u-line-1 u-flex-1 content">
              11
            </view>
          </view>
        </view>
      </view>

    </view>
    <view class="footer" id="footer">
      <view class="footer-btn">
        <view class="button button-default">
          立刻付款
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dom from "@/mixins/dom";
export default {
  name: "entrustItem",
  mixins:[dom],
  data(){
    return {
      title: '待付款',
      detail:{

      }
    }
  },
  methods:{
    toggle(){}
  }
}
</script>

<style scoped lang="scss">
$h-color: #AF8D66;
$color: rgba(175,141,102,0.10);
$main-color: #fff;
.bg-fff{ background: #fff;}
.u-l-height-44{ line-height: 88rpx}
.tip{
  background: #DDA973;
  color: #000;
  font-size: 32rpx; line-height: 80rpx;
  text-align: center;
}
.price{
  background: #fcfaf7;
  line-height: 80rpx;
  border: 1px solid rgba(68,53,37,0.10);
  border-radius: 8rpx;
  &-num{
    color: $h-color;
  }
}

.item{
  width: 100%;
  margin-bottom: 40rpx;
  &--round{
    border-radius: 16rpx;
    border: 1px solid rgba(0,0,0,0.10);
  }
  &--status{
    left: 0;
    top: 0;
    position: absolute;
  }
  &-img{
    width: 160rpx;
    height: 160rpx;
    //height: 100%
  }
  &-title{}
  &-desc{}
  &-tags{

  }
  &-tag{
    padding: 6rpx 2px;
    background: $color;
    text-align: center;
    color: $h-color;
    display: inline-block;
    margin-right: 10rpx;
  }
}

.label{
  color: rgba(0,0,0,0.40);
  font-size: 28rpx;
  min-width: 140rpx;
}
.context{
  color: #000;
  font-size: 28rpx;
}
.body{
  position: absolute;
  background: rgba(239,239,239,0.61);
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow-y: auto;
}

.footer {
  position: fixed;
  width: 100%;
  bottom: 0;

  z-index: 998;
  background: #fff;
  box-shadow: 0px -4rpx 6rpx 0px rgba(178,182,214,0.10);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .footer-btn{
    padding: 20rpx 60rpx;
    .button{
      border: 1px solid #333;
      border-radius: 44rpx;
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 34rpx;
      &-default{
        background: #333;
        color: #fff;
      }
    }
  }
}
</style>
