caimei-authentic-website-ross/pages/product/binary/therapy-4.vue

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

    <div class="therapy-title">
      <h3>私密健康疗法</h3>
      <div class="en">Electrical impulse muscle tone</div>
    </div>

    <div class="container row1">
      <div class="content">
        <div class="section">
          <div class="item">
            <div class="name">独特频率448kHz</div>
            <div class="desc">
              作用于阴道粘膜层、真皮纤维层、肌肉层<br />刺激细胞再生<br />活化胶原新生重组<br />保护黏膜系统的同时收紧阴道<br />增加敏感度<br />非热作用还可以平衡内部菌群，起到消炎作用
            </div>
          </div>
          <div class="cover only-mobile">
            <img src="/img/binary-therapy4-cover-1.png" alt="电阻探头(RES)" />
          </div>
          <div class="item item2">
            <div class="name">神经肌肉电刺激（NMES）</div>
            <div class="desc">
              同时刺激运动神经纤维和传入感觉神经纤维<br />利用神经细胞的电兴奋性<br />通过脉冲电流刺激支配肌肉神经促使肌肉进行等张和等长收缩<br />达到肌肉饱满和健康弹性的状态
            </div>
          </div>
          <div class="cover only-mobile">
            <img src="/img/binary-therapy4-cover-2.png" alt="电阻探头(RES)" />
          </div>
        </div>
        <div class="cover only-pc">
          <img src="/img/binary-therapy4-cover-1.png" alt="电阻探头(RES)" />
          <img src="/img/binary-therapy4-cover-2.png" alt="电容探头(CAP)" />
        </div>
      </div>

      <div class="therapy-title">
        <h3>设备配件</h3>
        <div class="en">Equipment accessories</div>
      </div>

      <div class="container row2">
        <div class="section">
          <img src="/img/binary-therapy4-accessories1.png" alt="" />
          <img src="/img/binary-therapy4-accessories2.png" alt="" />
          <img src="/img/binary-therapy4-accessories3.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: '首页-艾斯佰丽官网-私密健康疗法',
    }
  },
  mounted() {
    new Swiper('#banner', {
      loop: false, // 循环模式选项
    })
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .therapy-title {
    margin: 130px 0 104px;
    h3 {
      font-size: 42px;
      font-weight: bold;
      color: #000000;
      text-align: center;
    }
    .en {
      font-size: 21px;
      color: #000000;
      text-transform: uppercase;
      margin-top: 17px;
      text-align: center;
    }
  }

  .container {
    .title {
      font-size: 33px;
      font-weight: bold;
      color: #000000;
    }
    .description {
      font-size: 29px;
      color: #000000;
      line-height: 42px;
      margin-top: 24px;

      span {
        font-weight: bold;
      }
    }

    &.row1 {
      .content {
        display: flex;
        justify-content: space-between;
        .item {
          &.item2 {
            margin-top: 80px;
          }

          .name {
            font-size: 28px;
            font-weight: bold;
            color: #e98e19;
            line-height: 44px;
          }

          .desc {
            font-size: 28px;
            line-height: 44px;
          }
        }

        .cover {
          width: 380px;
          img {
            display: block;
          }
        }
      }
    }

    &.row2 {
      .desc {
        font-size: 20px;
        font-weight: 300;
        color: #000000;
        line-height: 74px;
      }

      .section {
        display: flex;
        margin-top: 76px;
        justify-content: space-between;

        img {
          display: block;
          margin: 0 2px;
        }
      }

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

@media screen and (max-width: 768px) {
  .therapy-title {
    margin: 0.8rem 0 0;
    h3 {
      font-size: 0.34rem;
      font-weight: bold;
      color: #000000;
      text-align: center;
    }
    .en {
      font-size: 0.22rem;
      color: #000000;
      text-transform: uppercase;
      margin-top: 10px;
      text-align: center;
    }
  }

  .container {
    &.row1 {
      .content {
        .section {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .item {
          width: 6rem;
          .name {
            font-size: 0.26rem;
            font-weight: bold;
            color: #e98e19;
            line-height: 0.48rem;
            margin: 0.8rem 0 0.16rem;
            text-align: center;
          }

          .desc {
            font-size: 0.26rem;
            line-height: 0.48rem;
            text-align: center;
          }
        }

        .cover {
          width: 3.8rem;
          margin-top: 0.32rem;
          img {
            display: block;
            width: 100%;
          }
        }
      }
    }

    &.row2 {
      .section {
        overflow-y: scroll;
        margin-top: 0.4rem;
        white-space: nowrap;
        font-size: 0;

        &::-webkit-scrollbar {
          display: none;
        }

        img {
          display: inline-block;
          margin-right: 0.22rem;
          height: 1.96rem;

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

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