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

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

    <div class="therapy-title">
      <h3>电容电阻靶向透热疗法</h3>
      <div class="en">Diathermy in capacitive and resistive application</div>
    </div>

    <div class="container row1">
      <div class="title">透热疗法应用原理：</div>
      <div class="description">CAP电容式透热疗法结合RES电阻式透热疗法，应用448kHz特定频率实现细胞的平衡、修复和再生。</div>
      <div class="content">
        <div class="section">
          <div class="item">
            <div class="name">非热：</div>
            <div class="desc">刺激运动和离子交换<br />激活细胞营养并促进细胞代谢，从而产生生物刺激效果</div>
          </div>
          <div class="item">
            <div class="name">温热：</div>
            <div class="desc">引起血管舒张，刺激微循环<br />增加组织氧合作用，促进引流<br />生物刺激作用与循环刺激作用相结合</div>
          </div>
          <div class="item">
            <div class="name">高热：</div>
            <div class="desc">重组组织，加速新陈代谢<br />在皮肤层面，胶原蛋白回缩产生立竿见影的效果<br />同时逐渐重塑皮肤深层胶原蛋白，促进新弹性纤维形成</div>
          </div>
        </div>
        <div class="section">
          <div class="cover">
            <img src="/img/binary-therapy2-cover-1.png" alt="电阻探头(RES)" />
            <div class="name">电阻探头(RES)</div>
            <div class="desc">靶向治疗人体深层组织、改善人体脂肪组织、骨骼、肌腱、脏腑等问题</div>
          </div>
          <div class="cover">
            <img src="/img/binary-therapy2-cover-2.png" alt="电容探头(CAP)" />
            <div class="name">电容探头(CAP)</div>
            <div class="desc">靶向治疗人体浅层组织、改善皮肤和肌肉状态</div>
          </div>
        </div>
      </div>

      <div class="therapy-title">
        <h3>448kHz特定频率与ROS'S智能科技相融合</h3>
        <div class="en"><span>448kHz</span> specific frequency combined with ROS'S high technology</div>
      </div>

      <div class="container row2">
        <div class="description">
          <span>448kHz</span
          >特定频率得到了医学和理疗界的广泛认可。由内到外作用于细胞和组织，有效帮助离子进行跨膜运动，使细胞的正、负离子交换恢复正常。且该频率促使组织离子产生电荷运动，增强细胞的活性
          ，根据所施加的能量大小产生不同程度的热效应，进行各种阶段的护理。
        </div>
        <div class="section">
          <img src="/img/binary-therapy2-honor1.png" alt="" />
          <img src="/img/binary-therapy2-honor2.png" alt="" />
          <img src="/img/binary-therapy2-honor3.png" alt="" />
        </div>
        <div class="desc">医学文献证明：448kHz是维持细胞最健康状态的频率。</div>
        <div class="cover"><img src="/img/binary-therapy2-case.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-container {
    margin-bottom: -120px;
  }

  .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;

      span {
        text-transform: initial;
      }
    }
  }

  .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 {
          margin-top: 88px;
          .name {
            font-size: 28px;
            font-weight: bold;
            color: #e98e19;
            line-height: 40px;
          }

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

        .cover {
          width: 343px;
          margin-top: 12px;
          img {
            display: block;
          }

          .name {
            font-size: 23px;
            font-weight: 500;
            color: #231815;
            text-align: center;
          }

          .desc {
            font-size: 20px;
            color: #231815;
            font-weight: lighter;
            margin-top: 19px;
            line-height: 38px;
          }
        }
      }
    }

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

      .section {
        display: flex;
        margin-top: 76px;

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

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

@media screen and (max-width: 768px) {
  .therapy-container {
    margin-bottom: -1rem;
  }

  .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;
    }
    .description {
      font-size: 0.26rem;
      color: #000000;
      line-height: 0.48rem;
      text-align: center;
      width: 5.92rem;
      margin: 0.16rem auto 0;

      span {
        font-weight: bold;
      }
    }

    &.row1 {
      .content {
        .item {
          width: 5.92rem;
          margin: 0 auto;
          .name {
            font-size: 0.26rem;
            font-weight: bold;
            color: #e98e19;
            line-height: 0.48rem;
            text-align: center;
            margin: 0.4rem 0 0.16rem;
          }

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

            br {
              display: none;
            }
          }
        }

        .section:nth-child(2) {
          display: flex;
          justify-content: space-between;
          width: 6.88rem;
          margin: 0 auto;
        }

        .cover {
          width: 46%;
          img {
            display: block;
            width: 2.68rem;
            height: 2rem;
          }

          .name {
            font-size: 0.26rem;
            font-weight: 500;
            color: #231815;
            text-align: center;
          }

          .desc {
            font-size: 0.2rem;
            color: #999;
            margin-top: 0.16rem;
            line-height: 0.32rem;
            text-align: center;
          }
        }
      }
    }

    &.row2 {
      .description {
        span {
          display: none;
        }
      }

      .desc {
        font-size: 0.2rem;
        color: #999;
        line-height: 0.48rem;
        text-align: center;
        margin-top: 0.24rem;
      }

      .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.12rem;
          height: 2.36rem;

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

          &:last-child {
            margin-right: 0.32rem;
          }
        }
      }

      .cover {
        width: 6.8rem;
        margin: 0.4rem auto 0;
        img {
          display: block;
          width: 100%;
        }
      }
    }
  }
}
</style>