mall-web-ssr/components/mobile/Home.vue

<template>
  <div class="home">
    <div class="home-header">
      <div class="home-top">
        <p>
          <span>搜品牌</span> |
          <span>搜现货</span> |
          <span>搜好店</span> |
          <span>搜规格书</span>
        </p>
      </div>
      <div class="home-search">
        <ul>
          <li :class="activeType=='model'?'active':''" @click="activeType='model'"><span>型号</span></li>
          <li :class="activeType=='brand'?'active':''" @click="activeType='brand'"><span>品牌</span></li>
          <li :class="activeType=='shops'?'active':''" @click="activeType='shops'"><span>商家</span></li>
        </ul>
        <div class="home-input">
          <input type="text" placeholder="请输入您要查找的型号或品牌" v-model="keyword"
                 @focus.stop.prevent="onFocus()"/>
          <span @click="onSearch()"><i class="fa fa-camera-retro"></i></span>
        </div>
      </div>
    </div>
    <div class="home-main">
      <nuxt-link to="/mobile/brand" class="home-main-content">
        <div>
          <img src="/imgs/home/brand@2x.png" alt="1">
        </div>
        <h2>4036万</h2>
        <p>品牌</p>
      </nuxt-link>
      <nuxt-link to="/mobile/brand" class="home-main-content">
        <div>
          <img src="/imgs/home/modelbrand@2x.png" alt="1">
        </div>
        <h2>3250万</h2>
        <p>型号</p>
      </nuxt-link>
      <nuxt-link to="/brand" class="home-main-content">
        <div>
          <img src="/imgs/home/bookbrand@2x.png" alt="1">
        </div>
        <h2>926万</h2>
        <p>规格书</p>
      </nuxt-link>
      <nuxt-link to="/mobile/shop" class="home-main-content">
        <div>
          <img src="/imgs/home/shopbrand@2x.png" alt="1">
        </div>
        <p>店铺列表</p>
      </nuxt-link>
      <nuxt-link to="/mobile/user" class="home-main-content">
        <div>
          <img src="/imgs/home/storebrand@2x.png" alt="1">
        </div>
        <p>我的收藏</p>
      </nuxt-link>
      <nuxt-link to="/brand" class="home-main-content">
        <div>
          <img src="/imgs/home/phonebrand@2x.png" alt="1">
        </div>
        <p>联系我们</p>
      </nuxt-link>
    </div>
    <div class="home-search-list" v-if="associate && keyword">
      <div>
        <div class="search-list-top">
          <h5>历史搜索：<i class="fa fa-camera-retro"></i></h5>
          <div class="search-list-item">
            <a href="#">smk212121288</a>
            <a href="#">CPU</a>
            <a href="#">CPU</a>
            <a href="#">CPU</a>
            <a href="#">CPU</a>
            <a href="#">CPU</a>
          </div>
        </div>
        <div class="search-list-bottom">
          <h5><i class="fa fa-camera-retro"></i>热搜器件</h5>
          <span v-for="item in hotwords">
          <nuxt-link to="item.url" >{{item.name}}</nuxt-link>
        </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      keyword: '',
      activeType: 'model',
      associate: ''
    }
  },
  props: {
    hotwords: {
      type: Array,
      default () {
        return [
          {name: 'SCT2080KEC', url: '/product/component/1100400300009990'},
          {name: '电池组', url: '/product/kind/346'},
          {name: 'Vishay', url: '/product/brand/30327265e42a871be050007f01003d96'},
          {name: 'Panasonic', url: '/product/brand/30327265e47d871be050007f01003d96'}
        ]
      }
    }
  },
  methods: {
    onFocus () {
      this.associate = true
    },
    onSearch () {
      if (this.keyword) {
        this.$router.push({path: '/mobile/search?w=' + encodeURIComponent(this.keyword)})
      }
    }
  },
  created () {
    this.$store.dispatch('resetSearchKeywords')
  }
}
</script>

<style lang="scss" scoped>
.home{
  font-size:.28rem;
  margin-bottom:1rem;
  margin-top:.88rem;
  .home-header{
    width:100%;
    padding-top:1.3rem;
    background:#ecede2;
    padding-bottom:1rem;
    .home-top{
      text-align: center;
      margin-bottom:.4rem;
      p{
        font-size:.32rem;
        color:rgb(23,21,26);
      }
    }
    .home-search{
      width:6rem;
      line-height: .3rem;
      margin:0 auto;
      ul{
        display:inline-flex;
      li{
        flex:1;
        text-align:center;
      span{
        display:inline-block;
        width:.72rem;
        line-height:.32rem;
        height:.32rem;
        background: #fff;
        color:#000;
        border-radius: .05rem .05rem 0 0 ;
      }
      }
      li.active{
        span{
          background: #3c7cf5;
          color:#fff;
          cursor:pointer;
        }
      }
    }
    input{
      width:6rem;
      padding: 0 1.2rem 0 .16rem;
      margin-right:-1rem;
      font-size:.24rem;
      line-height: .61rem;
      border:.02rem solid #3c7cf5;
      border-radius:.05rem;
    }
    span{
      display:inline-block;
      text-align: center;
      width:1rem;
      height:.63rem;
      line-height: .63rem;
      font-size:.23rem;
      border-left:none;
      border-radius:   0 .05rem .05rem 0;
      background: #3c7cf5;
      color:#fff;
    }
    }
  }
}
.home-main{
  width:100%;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  text-align: center;
  padding-top:1rem;
  background: #f7fbff;
}
.home-main a.home-main-content {
  width:33%;
  margin-bottom:.55rem;
}
.home-main .home-main-content div{
  border-radius: .2rem;
  width:1.14rem;
  height:1.14rem;
  margin:0 auto;
  position:relative;
}
.home-main .home-main-content div:first-child{
  background:rgb(255,48,100);
}
.home-main .home-main-content:nth-child(2) div{
  background:rgb(250,103,67);
}
.home-main .home-main-content:nth-child(3) div {
  background: rgb(252, 184, 54);
}
.home-main .home-main-content:nth-child(4) div{
  background:rgb(99,147,255);
}
.home-main .home-main-content:nth-child(5) div{
  background:rgb(67,201,173);
}
.home-main .home-main-content:last-child div{
  background:rgb(135,201,79);
}
.home-main .home-main-content div>img{
  width: .8rem;
  height:.8rem;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-36%;
  margin-top:-36%;
}

.home-main .home-main-content p{
  font-size:.28rem;
  color:rgb(51,51,51);
  line-height: .52rem;
}
.home-main .home-main-content h2{
  font-size:.3rem;
  color:#ff7800;
  line-height: .32rem;
  margin:0;
  margin-top:.1rem;
}

/*  搜索记录  */
.home-search-list {
  position:absolute;
  top:4.5rem;
  width:100%;
  min-height: 4rem;
  background: #fff;
}
.home-search-list div{
  width:6.55rem;
  margin:0 auto;
  margin-top:.1rem;
  padding-bottom:.2rem;
  .search-list-top{
    h5{
      font-size:.3rem;
      position:relative;
      line-height: .4rem;
      color:rgb(102,102,102);
      i{
        position:absolute;
        right:0;
      }
    }
    .search-list-item{
      a{
        display:inline-block;
        font-size:.28rem;
        line-height: .45rem;
        color:rgb(102,102,102);
        background: #fff;
        padding:0 .1rem;
        width:2.18rem;
        overflow:hidden;
        text-overflow : ellipsis;
        &:nth-child(2){
           border-left:1px solid #a5a6a6;
           border-right:1px solid #a5a6a6;
           text-align: center;
         }
        &:nth-child(5){
           border-left:1px solid #a5a6a6;
           border-right:1px solid #a5a6a6;
           text-align: center;
         }
      }
    }
  }
  .search-list-bottom{
    margin-top:-.07rem;
    h5{
      color:rgb(255,120,0);
      font-size:.3rem;
      text-align: center;
      i{
        margin-right:.15rem;
      }
    }
    a{
      display:inline-block;
      font-size:.24rem;
      color:rgb(255,120,0);
      background: #fff;
      max-width:1.62rem;
      line-height: .35rem;
      padding:0 .1rem;
      border:1px solid rgb(255,120,0);
      overflow:hidden;
      text-overflow : ellipsis;
      margin-left:.12rem;
    }
  }
}
</style>