mall-web-ssr/components/product/KindBox.vue

<template>
  <div class="component">
    <div class="component-content">
      <div class="box-first" id="box-first" >
        <!-- <div class="box-item">类目：</div>-->
        <div class="box-kind" :class="boxFirstFixed == true ? 'isFixed' :''">
          <ul id="letter-nav">
            <!--| orderBy : 'namelength'-->
            <li class="text-num" v-for="(kind, index) in kinds" :style="index <= 6 || boxFirstFixed == true? 'border-bottom: 1px dashed #ccc;': 'border-bottom: 1px dashed #f1f4fb;'">
              <img class="content-thumbnail-list" :src="imgList[index]"><a :title="kind.nameCn"  @click="scrollTo(kind.id)">{{kind.nameCn}}</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="showKindId"></div>
      <div class="box-catagory clearfix" v-for="(kind, index) in kinds">
        <div class="box">
          <div class="box-title" :id="kind.id">
            <div class="box-smtitle">
              <div>
                <nuxt-link :to="`/product/kind/${kind.id}`"> <img class="content-thumbnail" :src=kindLogo[index]><span :title="kind.nameCn">{{kind.nameCn}}</span></nuxt-link>
              </div>
            </div>
          </div>
          <div class="box-content">
            <div class="box-subcatagory">
              <div class="childkind" v-for="child in kind.children">
                <dl class="dl-horizontal" style="background: #f1f4fb;">
                  <dt class="dt-title">
                  <ul>
                    <li>
                      <nuxt-link :to="`/product/kind/${child.id}`" :title="child.nameCn"><span>{{child.nameCn}}</span><i class="iconfont icon-arrow-right icon-sm pull-right"></i></nuxt-link>
                    </li>
                  </ul>
                  </dt>
                  <dd>
                    <ul class="list-unstyled list-inline">
                      <li v-if="leaf.nameCn.length<=15" v-for="leaf in child.children">
                        <nuxt-link :to="`/product/kind/${leaf.id}`" :title="leaf.nameCn"><span>{{leaf.nameCn}}</span></nuxt-link>
                      </li>
                      <li  style="width: 35%" v-if="leaf.nameCn.length>15" v-for="leaf in child.children">
                        <nuxt-link :to="`/product/kind/${leaf.id}`" :title="leaf.nameCn">{{leaf.nameCn}}</nuxt-link>
                      </li>
                      <li v-if="!child.children || !child.children.length">
                        <span style="margin-left: 25%;">—</span>
                      </li>
                    </ul>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { scrollTo } from '~utils/scroll'
  export default {
    name: 'kind-box',
    data () {
      return {
        boxFirstFixed: false,
        imgList: [
          '/images/component/component-logo/component01.png',
          '/images/component/component-logo/component02.png',
          '/images/component/component-logo/component03.png',
          '/images/component/component-logo/component04.png',
          '/images/component/component-logo/component05.png',
          '/images/component/component-logo/component06.png',
          '/images/component/component-logo/component07.png',
          '/images/component/component-logo/component08.png',
          '/images/component/component-logo/component09.png',
          '/images/component/component-logo/component010.png',
          '/images/component/component-logo/component011.png',
          '/images/component/component-logo/component012.png',
          '/images/component/component-logo/component013.png',
          '/images/component/component-logo/component014.png'
        ],
        kindLogo: [
          '/images/component/component-logo/component001.png',
          '/images/component/component-logo/component002.png',
          '/images/component/component-logo/component003.png',
          '/images/component/component-logo/component004.png',
          '/images/component/component-logo/component005.png',
          '/images/component/component-logo/component006.png',
          '/images/component/component-logo/component007.png',
          '/images/component/component-logo/component008.png',
          '/images/component/component-logo/component009.png',
          '/images/component/component-logo/component0010.png',
          '/images/component/component-logo/component0011.png',
          '/images/component/component-logo/component0012.png',
          '/images/component/component-logo/component0013.png',
          '/images/component/component-logo/component0014.png'
        ]
      }
    },
    computed: {
      kinds () {
        return this.$store.state.product.kind.kinds.data
      }
    },
    mounted () {
      window.addEventListener('scroll', () => {
        this.handleScroll()
      })
    },
    methods: {
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        var offsetTop = document.querySelector('#box-first').offsetTop
        if (scrollTop > offsetTop) {
          this.boxFirstFixed = true
        } else {
          this.boxFirstFixed = false
        }
      },
      scrollTo: function (el) {
        scrollTo(document.getElementById(el), 10, {offset: -58})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .component{
    width: 100%;
    min-width:1190px;
    padding: 0;
    background: #efeeec;
    .component-content{
      width:1190px;
      margin: 0 auto;
    }
  }
  .box {
    margin-bottom: 20px;
    -webkit-box-shadow: 0 6px 10px #c8c8c8;
    -moz-box-shadow: 0 6px 10px #c8c8c8;
    box-shadow: 0 6px 10px #c8c8c8;
  }
  .box .box-title {
    width: 100%;
    height: 50px;
    background-color: #689cff;
  }
  .box .box-smtitle span {
    display: inline-block;
    text-align: left;
    padding-left: 30px;
    width: 186px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    font-weight: 100;
  }
  .box .box-title a {
    color: #FFF;
    font-weight: bolder;
  }
  .box .box-title h4 {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 30px;
  }
  .box .box-content {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
  .box .box-content .box-subcatagory {
    background-color: #f1f4fb;
    border-radius: 5px;
  }
  .box .box-content .box-subcatagory .childkind {
    border-bottom: 1px dashed #ccc;
  }
  .box .box-content .box-subcatagory .childkind:last-child {
    border-bottom: none;
  }
  .box .box-content .box-subcatagory dl, .box .box-content .box-subcatagory ul
  {
    padding-bottom: 0px;
    margin-bottom: 0px;
    background-color: #fff;
  }
  .content-thumbnail{
    position: relative;
    left: 20px;
    top: -1px;
  }
  .content-thumbnail-list{
    position: relative;
    top: -2px;
  }
  .box .box-content .box-subcatagory dl dt {
    width: 186px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    li {
      float: left;
      list-style: none;
      width: 186px;
      color: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .pull-right {
        float: right!important;
        padding-right: 12px;
      }
      .iconfont {
        font-size: 16px;
        font-style: normal;
        color: #5079cb;
        -webkit-font-smoothing: antialiased;
      }
    }
    &:hover{
      background-color: #3c7cf5;
      .iconfont{
        color: #fff;
      }
      span{
        color: #fff;
      }
    }
  }
  .box .box-content .box-subcatagory dl dt span{
    width: 125px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 20px;
    color: #5079cb;
  }
  .box .box-content .box-subcatagory dl dt a {
    color: #000;
    font-size: 14px;
    font-weight: 500;
  }
  .box .box-content .box-subcatagory dl dt a:hover {
    color: #6493FF;
  }
  .box .box-content .box-subcatagory dl dd {
    margin-left: 190px;
  }
  .box .box-content .box-subcatagory .list-inline {
    margin-left: 0;
    padding-left: 7px;
  }
  .box .box-content .box-subcatagory .list-inline>li {
    width: 20%;
    vertical-align: top;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
  }
  .box .box-content .box-subcatagory .list-inline>li a {
    color: #000;
    font-size: 14px;
    font-weight: 500;
  }
  .box .box-content .box-subcatagory .list-inline>li a:hover {
    color: #f54802;
    span{
      text-decoration: underline;
      color: #f54802;
    }
  }

  .box-first{
    .isFixed {
      padding-top: 10px;
      width: 1190px;
      height: 106px!important;
      margin: 0 auto;
      position: fixed;
      top: 0px;
      margin-left: -1px;
      z-index:999;
      border: #c8c8c8 1px solid;
      box-shadow: 0px 6px 10px #c8c8c8;
    }
  }
  /*.box-first .box-item {
    float: left;
    width: 55px;
    margin-left: 30px;
    font-size: 14px;
    padding-top: 10px;
  }*/
  .box-first .box-kind {
    height: 100px;
    font-size: 14px;
    /*background-color: #f1f4fb;*/
  }
  #letter-nav ul, #letter-nav li {
    list-style-type: none;
  }
  #letter-nav{
    margin-top: -9px;
  }
  #letter-nav li {
    float: left;
    width: 14.285%;
    padding: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    background-color: #f1f4fb;
    &:hover{
      border-bottom: 1px solid #5079cb !important;
      background-color: #fff;
    }
  }
  #letter-nav li a {
    color: #000;
    padding: 5px;
    border-radius: 5px;
  }
  #letter-nav li a:hover {
    color: #333;
    cursor: pointer;
    text-decoration: none;
  }
  .box-first{
    border: #c8c8c8 1px solid;
    box-shadow: 0 6px 10px #c8c8c8;
    width: 1190px;
    display: inline-block;
    margin-top: 16px;
    margin-bottom: 16px;
    padding-top: 10px;
    min-height: 108px;
  }
</style>