<template>
  <div class="page_homeIndex">
    <div class="homeTitle">
      <div class="homeTitleLeft">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" />
        </van-dropdown-menu>
      </div>
      <div class="homeTitleRight">
        <van-icon class="iconOne" name="search" />
        <van-icon class="iconOne" name="comment-o" />
        <van-icon class="iconOne" name="add-o" />
      </div>
    </div>
    <div class="banner">
      <img src="../../assets/images/homebanner.jpg" alt />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 0,
      option1: [
        { text: "新款商品", value: 0 },
        { text: "全部商品全部商品全部商品全部商品全部商品全部商品", value: 1 },
        { text: "活动商品", value: 2 }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.page_homeIndex {
  .homeTitle {
    height: 3.125rem;
    padding: 0 1.125rem;
    display: flex;
    justify-content: space-between;
  }
  .homeTitleLeft {
    width: 60%;
  }
  .homeTitleRight {
    width: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /deep/ .van-dropdown-menu__item {
    justify-content: left;
  }
  .van-hairline--top-bottom {
    position: static;
  }
  .iconOne {
    font-size: 1.5rem;
  }
  .banner {
    padding: 0 1.125rem;
    img {
      height: 6.75rem;
      width: 100%;
    }
  }
}
</style>
<style lang="scss">
</style>
