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

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

    <div class="therapy-title">
      <h3>肌肉重塑疗法</h3>
      <div class="en">Electrical impulse muscle tone</div>
    </div>

    <!-- banner区域 end -->
    <div class="container">
      <div class="title">电脉冲肌肉重塑疗法原理：</div>
      <div class="desc">通过发射在中频上调制的低频可变电流来实现刺激皮肤和肌肉的微观结构，进而促进血液流动和促进营养吸收，恢复肌肉张力。</div>
      <div class="content">
        <div class="item">
          <div class="info">
            <div class="name">电脂解</div>
            <div class="desc">具有独特脉冲宽度功能的低频可变电流-约18Hz<br />直接作用于肌肉夹层中的脂肪细胞，促使其分裂并消除</div>
          </div>
          <div class="cover">
            <img src="/img/binary-therapy3-principle-1.png" alt="电脂解" />
            <div class="name">电刺激导电带</div>
          </div>
        </div>
        <div class="item">
          <div class="info">
            <div class="name">电紧致</div>
            <div class="desc">在电脉冲中设计的可变电流<br />可强烈和具有选择性地产生肌肉收缩和肌肉放松</div>
          </div>
          <div class="cover">
            <img src="/img/binary-therapy3-principle-2.png" alt="电紧致" />
            <div class="name">小电棒</div>
          </div>
        </div>
        <div class="item">
          <div class="info">
            <div class="name">电提升</div>
            <div class="desc">刺激微循环和提高规新陈代谢<br />具有组织活化新生作用</div>
          </div>
          <div class="cover">
            <img src="/img/binary-therapy3-principle-3.png" alt="电提升" />
            <div class="name">肌肉电贴片</div>
          </div>
        </div>
      </div>
      <div class="case"><img src="/img/binary-therapy3-cover.png" alt="" /></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;
    }
    .desc {
      font-size: 29px;
      color: #000000;
      line-height: 42px;
      margin-top: 24px;
    }

    .item {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 24px;
      .info {
        .name {
          font-size: 27px;
          font-weight: bold;
          color: #e98e19;
        }
        .desc {
          font-size: 25px;
          color: #000000;
          line-height: 40px;
          text-align: justify;
          margin-top: 16px;
        }
      }
      .cover {
        img {
          display: block;
        }
        .name {
          font-size: 20px;
          color: #000000;
          margin-top: 15px;
          text-align: center;
        }
      }
    }

    .case {
      margin-top: 60px;
      img {
        display: block;
        width: 100%;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .therapy-title {
    margin: 0.8rem 0 0.7rem;
    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: 0.1rem;
      text-align: center;
    }
  }

  .container {
    .title {
      font-size: 0.26rem;
      font-weight: bold;
      color: #000000;
      text-align: center;
    }
    .desc {
      width: 6.24rem;
      margin: 0 auto;
      font-size: 0.26rem;
      color: #000000;
      line-height: 0.48rem;
      margin-top: 0.16rem;
      text-align: center;
    }

    .item {
      margin-top: 24px;
      .info {
        width: 6.24rem;
        margin: 0 auto;
        .name {
          font-size: 0.26rem;
          font-weight: bold;
          color: #e98e19;
          margin: 0.4rem 0 0.16rem;
          text-align: center;
        }
        .desc {
          font-size: 0.26rem;
          color: #000000;
          line-height: 0.48rem;
          text-align: center;

          br {
            display: none;
          }
        }
      }
      .cover {
        margin-top: 0.32rem;
        img {
          display: block;
          width: 2.45rem;
          height: 1.82rem;
          margin: 0 auto;
        }
        .name {
          font-size: 0.2rem;
          color: #999;
          margin-top: 0.16rem;
          text-align: center;
        }
      }
    }

    .case {
      width: 6.9rem;
      margin: 0.8rem auto 0;
      img {
        display: block;
        width: 100%;
      }
    }
  }
}
</style>