<template>
  <!-- 品牌商首页 -->
  <view class="brandsindex">
    <!-- 展示图 -->
    <view id="header" class="back_img">
      <u-navbar title="" :border-bottom="false" :background="background">
        <template slot="right">
          <!-- 插槽搜索按钮 -->
          <view @click="searchCli" class="u-m-r-24 search"
            ><image
              class="hs-img"
              src="../../static/images/home/search@2x.png"
              mode=""
            ></image
          ></view>
        </template>
      </u-navbar>
    </view>
    <!-- 每日上新 -->
    <view class="everyUpdate">
      <u-card full :head-border-bottom="false" @head-click="headTab">
        <view slot="head">
          <head-title title="每日上新" subtitle="DAILY NEW"></head-title>
        </view>
        <view slot="body">
          <view class="imgList">
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
          </view>
        </view>
      </u-card>
    </view>
    <!-- 热门款式 -->
    <view class="hotstyle">
      <u-card full :head-border-bottom="false">
        <view slot="head">
          <head-title title="热门款式" subtitle="HOT STYLES"></head-title>
        </view>
        <view slot="body">
          <view class="hotFlex">
            <hot-style></hot-style>
            <hot-style></hot-style>
            <hot-style></hot-style>
            <hot-style></hot-style>
          </view>
        </view>
      </u-card>
    </view>
  </view>
</template>

<script>
import headTitle from "./components/header"; //每日更新头部的东西
import hotStyle from "./components/hotStyle"; //热门款式
export default {
  components: { headTitle, hotStyle },
  data() {
    return {
      background: { backgroundColor: "rgba(245,245,245,0)" },
    };
  },
  methods: {
    // 搜索按钮
    searchCli() {
      this.$router.push("/pages/home/search");
    },
    headTab() {
      this.$router.push("pages/brands/everyDay");
    },
  },
};
</script>

<style lang="scss" scoped>
//头部
.back_img {
  height: 486rpx;
  width: 100%;
  background: url(../../static/images/home/exhibition.png) no-repeat;
  background-size: 100% 100%;
}
.search {
  width: 60rpx;
  height: 60rpx;
}
//每日更新
.everyUpdate {
  width: 100%;
  ::v-deep .u-card__body {
    padding: 0rpx 0rpx 40rpx 36rpx !important;
  }
  ::v-deep .u-card__head {
    padding-bottom: 34rpx !important;
  }

  .imgList {
    overflow-x: auto;
    white-space: nowrap;
    image {
      width: 240rpx;
      height: 160rpx;
      border-radius: 5px;
      padding-left: 20.3rpx;
    }
  }
}
//热门款式
.hotstyle {
  ::v-deep .u-card__body {
    padding-top: 24rpx !important;
  }
  ::v-deep .u-card__head {
    padding-bottom: 0rpx !important;
  }
  width: 100%;
  .hotFlex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>
