<template>
  <view class="goods-featured-con">
    <view class="search-con">
      <view class="search uni-flex">
        <view class="search-bar uni-flex">
          <view class="logo" />
          <view class="placeholder">搜索数字藏品</view>
        </view>
        <view class="submit">搜索</view>
      </view>
      <view class="related uni-flex">
        <view class="label">相关商品：</view>
        <scroll-view class="list-con" scroll-x>
          <view class="item">耳机</view>
          <view class="item">充电器</view>
          <view class="item">蓝牙</view>
          <view class="item">耳机</view>
          <view class="item">充电器</view>
          <view class="item">蓝牙</view>
        </scroll-view>
      </view>
    </view>
    <view class="goods-list">
      <view class="header uni-flex">
        <view class="title uni-flex">
          <m-icon icon="3dot" :size="3" className="icon" />
          <text>为您推荐</text>
        </view>
      </view>
      <view class="list-con uni-flex">
        <view class="item"></view>
        <view class="item"></view>
        <view class="item"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {};
</script>

<style lang="less">
.goods-featured-con {
  background: #ffffff;
  border-radius: 20rpx;
  > .search-con {
    padding: 40rpx 32rpx;
    border-bottom: 2px solid #f1f1f1;
    .search {
      align-items: center;
      margin-bottom: 20rpx;
    }
    .search .search-bar {
      flex: 1;
      height: 60rpx;
      align-items: center;
      background: #f1f1f1;
      border-radius: 40rpx;
      padding: 0 28rpx;
    }
    .search .logo {
      width: 28rpx;
      height: 28rpx;
      // background: url(/static/search2.png);
      background-size: contain;
      margin-right: 20rpx;
    }
    .search .placeholder {
      font-size: 12px;
      color: #aeaeae;
    }
    .search .submit {
      margin-left: 30rpx;
      color: #140603;
      font-weight: bold;
      font-size: 14px;
    }
    .related {
      align-items: center;
    }
    .related .label {
      display: inline-block;
      color: #aeaeae;
      font-size: 12px;
      font-weight: bold;
      width: 120rpx;
    }
    .related .list-con {
      display: inline-block;
      width: ~"calc(100% - 120rpx)";
      white-space: nowrap;
    }
    .related .list-con .item {
      display: inline-block;
      background: #f1f1f1;
      font-size: 10px;
      line-height: 24px;
      border-radius: 13px;
      padding: 0 15px;
      margin-right: 4px;
    }
  }
  > .goods-list {
    padding: 44rpx 32rpx;
    > .header {
      align-items: center;
      margin-bottom: 20rpx;
      .title {
        align-items: center;
        color: #140603;
        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
      }
      .title .icon{
        margin-right: 10rpx;
      }
    }
    > .list-con {
      justify-content: space-between;
      .item {
        width: 206rpx;
        height: 206rpx;
        background: #f1f1f1;
        border-radius: 8rpx;
      }
    }
  }
}
</style>