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

<template>
  <div class="breadcrumbs container">
    <ul class="list-unstyled list-inline">
      <li class="crumb-item">
        <nuxt-link :to="`/product/kind/home`">全部器件</nuxt-link><span>> </span>
      </li>
      <li class="crumb-item crumb-item-angle" v-for="(k, index) in actives">
        <!-- <i class="angle"></i>-->
        <nuxt-link :to="`/product/kind/${k.id}`">
          <span :title="k.nameCn">{{k.nameCn | nameFilter}}</span> <i class="fa fa-angle-down td-icon"></i>
        </nuxt-link><span v-if="index<actives.length-1">> </span>
        <div class="crumb-drop crumb-drop-angle" v-if="k.bothers">
          <div><i class="angle"></i></div>
          <ul class="list-unstyled list-inline" role="menu">
            <li v-for="(b, index) in k.bothers" :style="index == k.bothers.length-1?'border-right: none;': ''"><nuxt-link :to="`/product/kind/${b.id}`"><span>{{b.nameCn}}</span> </nuxt-link></li>
          </ul>
        </div>
        <i class="icon-glass"></i>
      </li>
    </ul>
    <div class="breadcrumbs-children" v-if="firstChildrenKinds.length">
      <div class="inline-block text-ellipse" v-for="item in firstChildrenKinds">
        <nuxt-link :to="`/product/kind/${item.id}`" class="item" :title="item.nameCn">{{item.nameCn}}</nuxt-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    filters: {
      nameFilter: function (title) {
        if (title === '') {
          return title
        }
        let len = 0
        let index = 0
        for (let i = 0; i < title.length; i++) {
          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
            len = len + 2
          } else {
            len++
          }
          if (len > 20) {
            index = i
            break
          }
        }
        if (index > 0) {
          return title.substring(0, index) + '...'
        } else {
          return title
        }
      }
    },
    computed: {
      actives () {
        return this.$store.state.product.kind.kindsParentWithBother.data
      },
      firstChildrenKinds () {
        return this.$store.state.product.kind.firstChildren.data
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* breadcrumbs */
  .breadcrumbs {
    margin-top: 20px;
  }
  .breadcrumbs ul.list-unstyled.list-inline {
    margin-left: 0px;
    margin-bottom: 10px;
  }
  .breadcrumbs ul.list-inline.list-unstyled li.crumb-item {
    position: relative;
    padding: 0;
    height: 30px;
    line-height: 30px;
    span{
      padding: 0 6px;
    }
  }
/*  .breadcrumbs ul li.crumb-item-angle {
    margin-left: -5px;
  }*/
  .breadcrumbs ul li.crumb-item>a {
    border: 1px solid #ddd;
    display: inline-block;
    background: #fff;
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    padding-right: 15px;
    cursor: pointer;
    text-decoration: none;
    color: #666;
    font-size: 14px;
  }
  .breadcrumbs ul li.crumb-item:hover>a span,.breadcrumbs ul li.crumb-item:hover>a i{
    color: #0056d7;
  }
  .breadcrumbs ul li.crumb-item>a i{
    margin-right: 10px;
  }
  .breadcrumbs ul li.crumb-item:hover>a i{
    transform: rotate(-180deg);
  }
  .crumb-drop-angle div{
    width: 133px;
    height: 10px;
    display: none;
  }
  /* .crumb-drop-angle .angle {
     position: absolute;
     background-color: #404040;
     opacity: 0.6;
     left: 35px;
     top: 32px;
     height: 10px;
     width: 10px;
     transform: rotate(45deg);
     -ms-transform: rotate(45deg); 	!* IE 9 *!
     -moz-transform: rotate(45deg); 	!* Firefox *!
     -webkit-transform: rotate(45deg); !* Safari 和 Chrome *!
     -o-transform: rotate(45deg); 	!* Opera *!
     display: none;
     z-index: 98;
   }*/
  .crumb-drop-angle .angle{
    position: absolute;
    top: 29px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid #404040;
    z-index: 115;
    opacity: 0.9;
  }
  .breadcrumbs ul li.crumb-item .crumb-drop ul{
    padding: 15px 0px;
    position: absolute;
    top: 36px;
    display: none;
    z-index: 100;
    width: 403px;
    background-color: #404040;
    opacity: 0.9;
    max-height: 170px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  /*滚动条样式*/
  .breadcrumbs ul li.crumb-item .crumb-drop ul::-webkit-scrollbar {/*滚动条整体样式*/
    width: 12px;     /*高宽分别对应横竖滚动条的尺寸*/
  }
  .breadcrumbs ul li.crumb-item .crumb-drop ul::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 3px;
    background: #606060;
    border-left: 1px solid #0d0c0f;
    border-right: 1px solid #0d0c0f;
  }
  .breadcrumbs ul li.crumb-item .crumb-drop ul::-webkit-scrollbar-track {/*滚动条里面轨道*/
    border-radius: 0;
    border: 1px solid #0d0c0f;
    background: #161618;
  }
  .breadcrumbs ul li.crumb-item .crumb-drop li {
    float: left;
    line-height: 20px;
    height: 20px;
    width: 133px;
    border-right: 1px dashed #fff;
    &:nth-child(3n){
      border-right: none;
    }
  }
  .breadcrumbs ul li.crumb-item .crumb-drop li a {
    display: inline-block;
    font-size: 14px;
    width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    color: #fff;
    padding-left: 10px;
    &:hover{
      color: rgba(255,255,255,0.5);
      border: none;
      span{
        color: rgba(255,255,255,0.5);
        text-decoration: underline;
      }
    }
  }
  li{
    list-style: none;
  }
  .breadcrumbs ul li.crumb-item:hover .crumb-drop {
    ul, div ,.angle{
      display: block;
    }
  }

  .breadcrumbs ul li.crumb-item:hover>a {
    border-color: #f50;
    background: #ffffff;
    z-index: 101;
  }
  .breadcrumbs ul li.crumb-item a{
    color: #323232;
  }
  .breadcrumbs ul li.crumb-item a:hover{
    color: #0056d7;
    border: 1px solid #0056d7;
  }
  /* sl_warp */
  .main-content .sl-wrap .sl-key>span {
    color: #323232;
    font-size: 14px;
  }
  .main-content .sl-wrap .sl-value ul li a{
    color: #323232;
    font-size: 14px;
  }
  .main-content .sl-wrap .sl-value ul li a:hover{
    color: #5078cb;
  }
  .main-content .sl-wrap .sl-value .sl-selected a {
    color: #666;
    text-decoration: none;
  }
  .main-content .sl-wrap .sl-value .sl-selected:HOVER a {
    color: #f50;
  }
  .main-content .sl-wrap .sl-value .sl-selected span {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
    height: 100%;
    width: 20px;
    text-align: center;
    background: #ccc;
    color: #fff;
  }
  .main-content .sl-wrap .sl-value .sl-selected:HOVER span {
    background: #f50;
  }
  .main-content .sl-wrap .sl-value ul {
    margin-bottom: 0;
  }
  .main-content .sl-wrap .sl-value ul.list-inline li {
    width: 16.6666%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .main-content .sl-wrap .sl-value ul, .main-content .sl-set .sl-value ul{
    min-height: 25px;
  }
  .main-content .sl-more a {
    position: relative;
    display: inline-block;
    margin-top: -1px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px 0 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #FFF #DDD #DDD;
    background: #fff;
    cursor: pointer;
    -webkit-transition: border-color .15s ease-in-out;
    -moz-transition: border-color .15s ease-in-out;
    transition: border-color .15s ease-in-out;
  }
  .main-content .sl-more:hover a {
    color: #f39800;
    border-color: #FFF #f39800 #f39800;
    text-decoration: none;
  }
  .main-content .sl-more a:focus {
    text-decoration: none;
    color: #f39800;
  }
  .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th,
  .table>thead>tr>td, .table>thead>tr>th {
    padding: 10px 5px;
  }
  .pagging .pagging-count a {
    color: white !important;
    text-decoration: none !important;
  }
  .parameter-selection > div:first-child {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
  }
  .parameter-selection div:last-child {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%);
  }
  .div-table-right table thead tr td{
    width: 140px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
  }
  thead tr {
    /*background-image: url("static/img/product/th-tr-bg.png");
        background-repeat: repeat-x;*/
    background: linear-gradient(rgb(93, 134, 220), rgb(12, 53, 136));
    color: #fff;
    height: 48px;
  }
  .table>thead>tr>th{
    padding:5px 5px;
  }
  /* scroll */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: #ededed;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 5px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #959595;
  }
  .container {
    position: relative;
    width: 1190px;
  }
  [split-dropdown] {
    position: relative;
  }
  [split-dropdown-toggle] {
    position: absolute;
    display: none;
    border: 1px solid #ccc;
    background: #fff;
    z-index: 100;
    top: 40px !important;
  }
  .drop-down-list a{
    padding: 0 10px;
  }
  .drop-down-list li:hover,.dropdown-menu li:hover a{
    background: #5078cb;
  }
  .drop-down-list li:hover a,.dropdown-menu li:hover a{
    color: #fff;
  }
  tr.properties-hint-tr > td.properties-hint-td > div {
    /*position: relative;
        left: -25em;*/
    text-align: left;
    margin-left: 38em;
  }
  /*修改样式*/
  .main-content .table-bordered thead tr{
    background: none;
    line-height: 40px;
    height: 40px;
    color: #323232;
  }
  .div-table-left table thead tr td,.div-table-right table thead tr td{
    border-bottom: none;
  }
  .div-table-left table tbody tr td,.div-table-right table tbody tr td{
    font-size: 12px;
  }
  .div-table-left table tr td{
    border-right: none;
  }
  .div-table-right table thead tr td:first-child{
    border-left: none;
  }
  .table-bordered{
    border: none;
  }
  .div-table-right table thead tr td:hover span{
    color: #5078cb;
  }
  .td-icon{
    font-size: 20px;
    position: relative;
    top: 2px;
    margin-left: 10px;
  }
  .div-table-right table thead tr td:hover span.fa-angle-down{
    transform: rotate(-180deg);
  }
  .div-table-right table .td-properties{
    text-align: center;
  }
  .div-table-right table .td-properties i,.div-table-left table i{
    color: #5078cb;
  }
  .div-table-right table .td-properties{
    border-bottom: none;
  }
  .div-table-left .table{
    margin-bottom: 0;
  }
  .div-table-right tbody tr td:first-child{
    border-left: none;
  }
  .text-length-more{
    width: 100px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
  }
  .breadcrumbs-children {
    padding: 20px 0;
    background: #fff;
    border: 1px solid #ddd;
    .inline-block {
      width: 20%;
      text-align: center;
      padding: 0 5px;
      &:nth-child(n + 6) {
        margin-top: 18px;
      }
      .item {
        color: #666;
        &:hover {
          color: #f54802;
        }
      }
    }
  }
</style>