mall-web-ssr/components/search/Kind.vue

<template>
  <div class="selector">
    <div class="sl-wrap">
      <div class="sl-key f14">按类目筛选：</div>
      <div class="sl-value">
        <ul class="list-inline">
          <li>
            <a href="" class="f14">射频连接器</a>
          </li>
        </ul>
      </div>
      <div class="sl-clear"></div>
      <div class="sl-ext">
        <a >
          <span >更多</span>
          <i class="fa fa-angle-down ng-scope"></i>
        </a>
      </div>
    </div>
    <div class="sl-wrap">
      <div class="sl-key f14">按品牌筛选：</div>
      <div class="sl-value">
        <ul class="list-inline">
          <li>
            <a href="" class="f14">泰科电子</a>
          </li>
        </ul>
      </div>
      <div class="sl-clear"></div>
      <div class="sl-ext">
        <a >
          <span >更多</span>
          <i class="fa fa-angle-down ng-scope"></i>
        </a>
      </div>
    </div>
  </div>

</template>
<style scoped>
  #searchResult .selector .sl-wrap {
    position: relative;
    padding: 5px 5px;
    font-size: 12px;
    line-height: 30px;
    border-bottom: 1px solid #e5e5e5;
  }
  #searchResult .selector .sl-wrap .sl-key {
    float: left;
    width: 100px;
  }
  .f14 {
    font-size: 14px;
  }
  #searchResult .selector .sl-wrap .sl-value {
    margin-left: 110px;
    margin-right: 50px;
  }
  #searchResult .selector .sl-wrap .sl-clear {
    clear: both;
  }
  #searchResult .selector .sl-wrap .sl-ext {
    width: 40px;
    top: 5px;
    position: absolute;
    right: 0;
  }
  #searchResult .selector .sl-wrap .sl-value ul {
    height: 60px;
    overflow: hidden;
    margin-bottom: 0;
  }
  .list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
  }
  .list-inline a:hover{
    text-decoration: none;
    color: #f50;
  }
  .sl-ext a{
    color: black;
  }
  .sl-ext a:hover{
    color: #5078cb;
    text-decoration: none;
  }
</style>