caimei-authentic-website-ross/pages/brand/index.vue

<template>
  <div>
    <!-- banner区域 start -->
    <div class="swiper-container banner" id="banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="/img/brand-banner.jpg" alt="" />
        </div>
      </div>
      <!-- <div class="swiper-pagination"></div> -->
    </div>
    <!-- banner区域 end -->

    <div class="main">
      <div class="brand">
        <div class="container">
          <div class="cover">
            <img src="/img/brand-section-bg-01.png" alt="" />
          </div>
          <div class="content">
            <img class="brand-logo" src="/img/brand-logo-01.png" alt="" />
            <div class="name">云智能体疗管理系统</div>
            <a href="/product/binary-premium.html" class="link">了解设备</a>
          </div>
        </div>
      </div>
      <div class="brand">
        <div class="container">
          <div class="cover">
            <img src="/img/brand-section-bg-02.png" alt="" />
          </div>
          <div class="content">
            <img class="brand-logo" src="/img/brand-logo-02.png" alt="" />
            <div class="name">穿戴式肌肉抗衰系统</div>
            <a href="/product/kestos.html" class="link">了解设备</a>
          </div>
        </div>
      </div>
      <div class="brand">
        <div class="container">
          <div class="cover">
            <img src="/img/brand-section-bg-03.png" alt="" />
          </div>
          <div class="content">
            <img class="brand-logo" src="/img/brand-logo-03.png" alt="" />
            <div class="name">便携式康复理疗设备</div>
            <a href="/product/intradermik.html" class="link">了解设备</a>
          </div>
        </div>
      </div>
      <div class="brand">
        <div class="container">
          <div class="cover">
            <img src="/img/brand-section-bg-04.png" alt="" />
          </div>
          <div class="content">
            <img class="brand-logo" src="/img/brand-logo-04.png" alt="" />
            <div class="name">全身紧致抗衰系统</div>
            <a href="/product/mesobiolift.html" class="link">了解设备</a>
          </div>
        </div>
      </div>
      <div class="brand">
        <div class="container">
          <div class="cover">
            <img src="/img/brand-section-bg-05.png" alt="" />
          </div>
          <div class="content">
            <img class="brand-logo" src="/img/brand-logo-05.png" alt="" />
            <div class="name">创新理疗按摩系统</div>
            <a href="/product/rollaction.html" class="link">了解设备</a>
          </div>
        </div>
      </div>
      <div class="brand">
        <div class="container">
          <div class="cover">
            <img src="/img/brand-section-bg-06.png" alt="" />
          </div>
          <div class="content">
            <img class="brand-logo" src="/img/brand-logo-06.png" alt="" />
            <div class="name">专业康复理疗系统</div>
            <a href="/product/diactivplus.html" class="link">了解设备</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: '首页-艾斯佰丽官网-品牌中心',
    }
  },
  mounted() {
    new Swiper('#banner', {
      loop: false, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
    })
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .main {
    .brand {
      margin-top: 60px;

      &:first-child {
        margin-top: 120px;
      }

      .container {
        position: relative;
      }

      .cover {
        width: 880px;
        height: 420px;
      }

      .content {
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 360px;
        height: 340px;
        border: 3px solid #000000;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #fff;
        .brand-logo {
          position: relative;
          width: 346px;
          height: 154px;
          overflow: hidden;

          img {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
          }
        }

        .name {
          font-size: 29px;
          color: #000;
          margin: 24px 0 32px;
        }

        .link {
          display: block;
          width: 160px;
          height: 48px;
          background: #d2d2d2;
          opacity: 1;
          font-size: 16px;
          color: #000000;
          text-align: center;
          line-height: 48px;
          cursor: pointer;
          -webkit-transition: all 0.4s;
          transition: all 0.4s;

          &:hover {
            background: #ddd;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .main {
    .brand {
      width: 6.86rem;
      margin: 0 auto;
      margin-top: 0.4rem;

      &:first-child {
        margin-top: 0.8rem;
      }

      .cover {
        width: 100%;
        height: 3.28rem;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .content {
        position: relative;
        background: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 0.03rem solid #000;
        border-top: 0;
        padding: 0.32rem 0.4rem;
        .brand-logo {
          position: relative;
          width: 2.7rem;
          height: 1rem;
          background: skyblue;
          overflow: hidden;

          img {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            height: 0.92rem;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
          }
        }

        .name {
          font-size: 0.26rem;
          color: #505050;
        }

        .link {
          display: block;
          position: absolute;
          right: 0.4rem;
          bottom: 0.32rem;
          width: 1.8rem;
          height: 0.56rem;
          background: #d2d2d2;
          opacity: 1;
          font-size: 0.24rem;
          color: #000;
          text-align: center;
          line-height: 0.56rem;

          &:hover {
            background: #eee;
          }
        }
      }
    }
  }
}
</style>