mall-web-ssr/pages/mobile/search/_keycode.vue

<template>
  <div class="search-list">
    <div class="search-item">
      <span :class="activeType=='store'?'active':''" @click="activeType='store'">仅看有货</span>
      <span :class="activeType=='support'?'active':''" @click="activeType='support'">店铺自营</span>
    </div>
    <brand-list></brand-list>
    <detail-brand></detail-brand>
    <good-list></good-list>
  </div>
</template>

<script>
  import { BrandList, DetailBrand, GoodList } from '~components/mobile/search'
  export default {
    layout: 'main',
    data () {
      return {
        activeType: 'store'
      }
    },
    components: {
      BrandList,
      DetailBrand,
      GoodList
    }
  }
</script>

<style scoped lang="scss">
  .search-list{
    margin-top:.88rem;
    width:100%;
    .search-item{
      justify-content: space-around;
      text-align: center;
      display:flex;
      span{
        display:inline-block;
        width:1.41rem;
        line-height: .76rem;
        font-size:.32rem;
        color:#666;
      }
      span.active{
        color:#3976f4;
        border-bottom:2px solid #3976f4;
      }
    }
  }

</style>