<template>
  <view>
    <!-- <u-navbar title="" :border-bottom="false" :background="background">
    </u-navbar> -->
    <view>
      <u-image height="750rpx" src="@/static/images/brank/deImg.png"></u-image>
    </view>
    <view class="u-p-r-30 u-p-l-30">
      <!--款式信息 -->
      <view class="bg-fff u-p-t-20 u-p-r-30 u-p-b-30 u-p-l-30 item">
        <view class="u-border-bottom u-line-88">款式信息</view>
        <view class="fabric u-m-t-24">
          <text class="textStyle1">产品款号</text>
          <text class="textStyle2">AS23124</text>
        </view>
        <view class="fabric u-m-t-8">
          <text class="textStyle1">面料供应商</text>
          <text class="textStyle2">AS23124</text>
        </view>
      </view>
      <!-- 面料信息 -->
      <view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 item">
        <view class="u-border-bottom u-line-88">面料信息</view>
        <view class="u-m-t-30 u-m-b-56">
          <material :item="item"></material>
        </view>
        <!-- 其他颜色 -->
        <view class="u-flex">
          <view class="overflow u-flex-1">
            <view>其他颜色</view>
            <view>
              <view class="image u-m-r-10">
                <image src="" style="width: 100%; height: 100%"></image>
                <view class="image-tip u-line-1">颜色</view>
              </view>
              <view class="image u-m-r-10">
                <image src="" style="width: 100%; height: 100%"></image>
                <view class="image-tip u-line-1">颜色</view>
              </view>
              <view class="image u-m-r-10">
                <image src="" style="width: 100%; height: 100%"></image>
                <view class="image-tip u-line-1">颜色</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="sampling">
      <u-button>我要采购布样</u-button>
    </view>
  </view>
</template>

<script>
import material from "./components/hs-material-thumbnail.vue";
export default {
  components: { material },
  data() {
    return {
      item: {},
    };
  },
};
</script>

<style scoped lang="scss">
$h-color: #af8d66;
$activeColor: #dda973;
$color: rgba(175, 141, 102, 0.1);
$main-color: #fff;
// 款式信息
.textStyle1 {
  display: inline-block;
  width: 160rpx;
  color: rgba(0, 0, 0, 0.4);
}
.textStyle2 {
  margin-left: 40rpx;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 500;
  color: #333333;
}
// 我要采购布样
.sampling {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 100rpx;
  background: #ffffff;
  box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1);
  .u-btn {
    width: 630rpx;
    height: 88rpx;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 44rpx;
    color: white;
  }
}

.u-line-88 {
  line-height: 88rpx;
}
.bg-fff {
  position: relative;
  top: -10rpx;
  background: #fff;
}
.item {
  width: 100%;
  margin-bottom: 28rpx;

  &--round {
    border-radius: 16rpx;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  &-tag {
    padding: 6rpx 2px;
    background: $color;
    text-align: center;
    color: $h-color;
    display: inline-block;
    margin-right: 10rpx;
  }
}

.image {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  display: inline-block;
  &-tip {
    text-align: center;
    width: 100%;
    height: 40rpx;
    line-height: 40rpx;
    background: rgba(255, 255, 255, 0.8);
    font-size: 24rpx;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.overflow {
  overflow-x: auto;
  white-space: nowrap;
}
</style>
