<template>
  <view>
    <!--导航栏 navbar-->
    <u-navbar title="委托详情" id="header"
              :border-bottom="false"
              :background="{backgroundColor: 'whitesmoke'}">
    </u-navbar>
    <!--主体内容-->
    <view class="body u-p-30" :style="{ bottom: footerHeight + 'px', top: headerHeight+ 'px'}">
      <view class="u-flex u-p-b-20">
        <view class="item-status">
          待寄样
        </view>
        <text class="item-status u-flex-1 text-right">
          完工日期:2020-11-11
        </text>
      </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">
            光泽度要高，90%以上
          </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">
            213.12元
          </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">
            213.12元
          </view>
        </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>
        <u-image url="https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/2dc07ee4-3b1c-45be-ae79-2bbdb61571af" width="150" height="150"></u-image>
        <u-image url="https://huansi-gdep-dev.oss-cn-hangzhou.aliyuncs.com/2dc07ee4-3b1c-45be-ae79-2bbdb61571af" width="150" height="150"></u-image>
      </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">
            光泽度要高，90%以上
          </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">
            213.12元
          </view>
        </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">
            加厚荷兰绒绒布布料
          </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">
            牛仔面料
          </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">
            牛仔面料
          </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">
            牛仔面料
          </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">
            牛仔面料
          </view>
        </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">标准1</view>
          <view class="u-line-1 u-flex-1 content">
            光泽度要高，90%以上
          </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">
            213.12元
          </view>
        </view>
      </view>
      <!--委托建模信息-->
      <view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 ">
        <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">
            2021-12-12 21:21
          </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">
            2021-12-12 21:21
          </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">
            2021-12-12
          </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">
            213.12元
          </view>
        </view>
      </view>
    </view>

    <!--底部按钮-->
    <view class="footer" id="footer">
      <view class="footer-btn">
        <!---->
        <view class="custom-style-round-circle custom-style-btn custom-style">
          <view class="custom-style-right submit">
            <view class="title">选款</view>
          </view>
        </view>

      </view>

    </view>
    <!--提示-->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import dom from "../../mixins/dom"
import HsTipTitle from "../../components/hs-tip-title/hs-tip-title";
import HsMaterialThumbnail from "../../components/hs-material-thumbnail/hs-material-thumbnail";
export default {
  name: "index",
  components: {HsMaterialThumbnail, HsTipTitle},
  mixins:[dom],
  data(){
    return {}
  },
  onLoad({id}){


  },
  mounted() {

  },
  methods:{

  }
}
</script>

<style scoped lang="scss">
@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.label{
  color: rgba(0,0,0,0.40);
  font-size: 28rpx;
  min-width: 140rpx;
}
.context{
  color: #000;
  font-size: 28rpx;
}
.u-l-height-32{
  height: 64rpx;
  line-height: 64rpx;
}
.u-l-height-44{
  height: 88rpx;
  line-height: 88rpx;
}
.u-m-l-75{ margin-left: 150rpx;}
.u-m-l-53{ margin-left: 108rpx;}
.del{
  color: #FA5353;
}
.bg-fff{
  background: #fff;
}
.body{
  background: #fafafa;
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow-y: auto;
}
.tree {
  @include vue-flex;
  flex-wrap: wrap;

  .tree-level {
    @include vue-flex;
    width: 100%;
    font-size: 32rpx;

    .active-text{
      color: #DDA973;
    }
    .tree-level-text {
      flex: 1;
      overflow: hidden;
      .tree-level-text--selected {
        font-size: 28rpx;
        color: red;
      }
    }
  }
}
.brandList-tip{
  height: 88rpx;
  background: #fcfaf7;
  border: 1px solid rgba(68,53,37,0.10);
  border-radius: 8rpx;
  line-height: 88rpx;
  padding-left: 30rpx;
}
.custom-style{
  color: #fff; height: 88rpx; line-height: 88rpx;
  @include vue-flex;
  &-btn{
    overflow: hidden;
  }
  &-round-circle{
    border-radius: 100rpx;
  }
  /*background: #000;*/
  .custom-style-left{ width: 240rpx; background: #d6d6d6; text-align: center }
  .custom-style-right{ flex: 1; background: rgba(0,0,0,0.80);text-align: center}
  .save{
    font-size: 34rpx;
    color: #000000;
  }
  .submit{
    font-weight: 500;
    font-size: 34rpx;
    //line-height: 100%;
    .title{
      //margin: 8rpx 0;
    }
    .desc{

      font-size: 20rpx;
      .color{
        color: #DDA973;
      }
    }
  }
}
.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;
  }
}
</style>
