entrustManagementItem.vue

<template>
  <view>
    <view>
      <u-image height="750rpx"></u-image>
    </view>
    <view class="u-p-t-20 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-flex">
          <text class="u-flex-1">男装-上装-青年-时尚</text>
          <text class="active">待上架</text>
        </view>
        <view class="u-flex">
          <text class="u-flex-1 u-font-28">AS23124</text>
          <text class="u-font-24">
            加入日期：2021-12-11
          </text>
        </view>
        <view class="item-tags">
          <view class="item-tag u-font-20">
            标签
          </view>
          <view class="item-tag u-font-20">
            标签
          </view>
        </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">
          <hs-material-thumbnail :item="item"></hs-material-thumbnail>
        </view>
        <view class="u-flex">
          <view class="">
            <view>主图颜色</view>
            <view class="image">
              <image src="" style="width: 100%;height: 100%"></image>
              <view class="image-tip u-line-1">颜色</view>
            </view>
          </view>
          <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>
</template>

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

<style scoped lang="scss">
$h-color: #AF8D66;
$activeColor: #DDA973;
$color: rgba(175,141,102,0.10);
$main-color: #fff;

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

  &--round{
    border-radius: 16rpx;
    border: 1px solid rgba(0,0,0,0.10);
  }
  &-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.80);
    font-size: 24rpx;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
.overflow{
  overflow-x: auto;
  white-space: nowrap;
}
</style>