caimei-authentic-website-ross/pages/product/kestos.vue

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

    <div class="main">
      <div class="container about">
        <div class="section-title">
          <img src="/img/kestos-title-equipment.png" alt="品牌设备" />
          <h3>品牌设备</h3>
        </div>
        <div class="content clearfix">
          <div class="cover fl">
            <img src="/img/kestos-title-about.png" alt="" />
          </div>
          <div class="info fr">
            <div class="name">Kestos T2</div>
            <div class="subname">穿戴式肌肉抗衰系统</div>
            <div class="line"></div>
            <div class="description">
              是一款采用远近红外线与神经肌肉电刺激联合应用的专业塑形理疗系统。红外线具有较强的温控效应和共振效应，易被人体吸收转化为内能，促进血液循环，强化各组织之间的新陈代谢，增加组织的再生能力。而神经肌肉电刺激促进肌肉进行等张和等长训练，达到肌肉饱满和健康弹性状态。
            </div>
          </div>
        </div>
      </div>
      <div class="container therapy">
        <div class="section-title">
          <img src="/img/kestos-title-introduction.png" alt="疗法介绍" />
          <h3>疗法介绍</h3>
        </div>
        <div class="content">
          <img src="/img/kestos-therapy-01.png" alt="" />
          <img src="/img/kestos-therapy-02.png" alt="" />
          <img src="/img/kestos-therapy-03.png" alt="" />
        </div>
      </div>
      <div class="container program">
        <div class="section-title">
          <img src="/img/kestos-title-programs.png" alt="14种程序" />
          <h3>14种程序</h3>
        </div>
        <div class="content">
          <img src="/img/kestos-program.png" alt="" />
        </div>
      </div>
      <div class="container device">
        <div class="section-title">
          <img src="/img/kestos-title-accessories.png" alt="设备配件" />
          <h3>设备配件</h3>
        </div>
        <div class="content">
          <div class="scroll-box only-mobile">
            <img src="/img/kestos-device-01.png" alt="" />
            <img src="/img/kestos-device-02.png" alt="" />
            <img src="/img/kestos-device-03.png" alt="" />
            <img src="/img/kestos-device-04.png" alt="" />
          </div>
          <div class="swiper-container only-pc" id="deviceSwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="/img/kestos-device-01.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="/img/kestos-device-02.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="/img/kestos-device-03.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="/img/kestos-device-04.png" alt="" />
              </div>
            </div>
          </div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-prev"></div>
          <div class="swiper-next"></div>
        </div>
      </div>
    </div>
  </div>
</template>

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

    var deviceSwiper = new Swiper('#deviceSwiper', {
      loop: true, // 循环模式选项
      autoplay: true,
      slidesPerView: 4,
      spaceBetween: 34,
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.device .swiper-next',
        prevEl: '.device .swiper-prev',
      },
    })
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .main {
    .about {
      .cover {
        img {
          display: block;
          width: 470px;
          height: 480px;
        }
      }

      .info {
        width: 660px;
        padding-top: 65px;

        .name {
          font-size: 50px;
          color: #7d8bb0;
          font-weight: bold;
        }
        .subname {
          font-size: 30px;
          margin-top: 15px;
        }
        .line {
          width: 36px;
          height: 7px;
          background: #7d8bb0;
          margin: 20px 0 30px;
        }
        .description {
          font-size: 20px;
          text-align: justify;
          word-break: break-all;
          line-height: 36px;
          p {
            margin-top: 24px;
          }
        }
      }
    }

    .therapy {
      .content {
        img {
          display: block;
          width: 100%;
          margin-top: 3px;

          &:first-child {
            margin-top: 0;
          }
        }
      }
    }

    .program {
      .content {
        img {
          display: block;
          width: 100%;
        }
      }
    }

    .device {
      .content {
        .swiper-container {
          width: 100%;

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

@media screen and (max-width: 768px) {
  .main {
    .about {
      .content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .cover {
          margin-top: 0.4rem;
          img {
            display: block;
            width: 5.46rem;
            height: 5.57rem;
          }
        }

        .info {
          width: 6.5rem;
          margin: 0 auto;
          .name {
            font-size: 0.34rem;
            color: #7d8bb0;
            text-align: center;
            font-weight: bold;
          }
          .subname {
            font-size: 0.26rem;
            margin-top: 0.16rem;
            text-align: center;
          }
          .line {
            width: 0.4rem;
            height: 0.06rem;
            background: #7d8bb0;
            margin: 0.32rem auto;
          }
          .description {
            text-align: justify;
            word-break: break-all;
            color: #333333;
            text-align: center;
            font-size: 0.26rem;
            line-height: 0.48rem;
          }
        }
      }
    }

    .therapy {
      width: 6.86rem;
      margin: 0 auto;
      .content {
        img {
          display: block;
          width: 100%;
          margin-top: 0.32rem;

          &:first-child {
            margin-top: 0;
          }
        }
      }
    }

    .program {
      width: 6.86rem;
      margin: 0 auto;
      .content {
        img {
          display: block;
          width: 100%;
        }
      }
    }

    .device {
      .scroll-box {
        img {
          width: 2.74rem;
          height: 2.53rem;
          margin-right: 0.24rem;

          &:first-child {
            margin-left: 0.32rem;
          }

          &:last-child {
            margin-right: 0.32rem;
          }
        }
      }
    }
  }
}
</style>