mall-web-ssr/components/pcb/home/RecommendBrand.vue

<template>
  <div class="recommend-brand">
    <ul>
      <li>
        <div>
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p>Panasonic（松下）</p>
      </li>
      <li>
        <div>
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p>Panasonic（松下）</p>
      </li>
      <li>
        <div>
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p>Panasonic（松下）</p>
      </li>
      <li>
        <div>
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p>Panasonic（松下）</p>
      </li>
      <li>
        <div>
          <img src="/images/pcb/test-logo.png" alt="">
        </div>
        <p>Panasonic（松下）</p>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
  .recommend-brand {
    background: url('/images/pcb/recommend-brand.png') no-repeat;
    width: 1190px;
    height: 422px;
    margin: 48px auto 0;
    padding-top: 100px;
    ul {
      width: 1173px;
      height: 289px;
      margin: 0 auto;
      padding: 40px 22px;
      background: #fff;
      li {
        float: left;
        margin-left: 7px;
        width: 220px;
        height: 208px;
        -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
        -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1);
        border-radius: 4px;
        cursor: pointer;
        border: 1px solid #fff;
        &:hover {
          border-color: #fa524b;
          p {
            font-weight: bold;
          }
        }
        &:first-child {
          margin-left: 0;
        }
        div {
          width: 114px;
          height: 108px;
          line-height: 108px;
          margin: 31px auto 26px;
          img {
            max-width: 114px;
            max-height: 108px;
          }
        }
        p {
          text-align: center;
        }
      }
    }
  }
</style>