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

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

    <div class="container row1">
      <div class="therapy-title">
        <h3>免疫力助推发烧疗法</h3>
        <div class="en">Immune boosting with bracelets fever therapy</div>
      </div>
      <div class="content">
        <div class="title">免疫力助推发烧疗法全身应用原理：</div>
        <div class="desc">
          采用448kHz频率，通过特定的免疫力助推手环作用于人体四肢，渗透诱发全身细胞进行跨膜运动，
          使人体通过内生热的方式提升基础体温至42℃，持续12小时，激活免疫系统。
        </div>
        <div class="section problem">
          <div class="item">
            <div class="name">免疫力下降</div>
            <div class="info">每当体温降低1℃，白细胞所提供的免疫力便会减少37%</div>
          </div>
          <div class="item">
            <div class="name">血液循环变差</div>
            <div class="info">低体温的人，手脚末梢血管会紧缩，血液流通不畅</div>
          </div>
          <div class="item">
            <div class="name">基础代谢率下降</div>
            <div class="info">体温降低1℃，基础代谢率就会减少30%</div>
          </div>
          <div class="item">
            <div class="name">容易产生轻度疾病</div>
            <div class="info">低体温会影响自主神经和激素的平衡 进而引起肩膀僵硬、头痛、晕眩、手脚冰凉等代谢综合征</div>
          </div>
        </div>
        <div class="cover">
          <img src="/img/binary-therapy1-cover.png" alt="" />
        </div>
      </div>
    </div>

    <div class="container row2">
      <div class="therapy-title">
        <h3>免疫力助推发烧手环</h3>
        <div class="en">Immune boosting with bracelets</div>
      </div>
      <div class="content">
        <div class="section">
          <div class="desc">
            <p>免疫力助推手环已获得国际专利认证。</p>
            <p>
              2022年初，ROS'S在西班牙巴塞罗那展会上大放异彩，旗下发烧疗法对于提高人体免疫力的有效性获得政府高度认可，并获得官方认证，被授予<span>《最佳治疗奖》</span>和<span>《最佳创新奖》</span>。
            </p>
            <p>
              免疫力助推发烧疗法<span>30分钟</span>，体温最高可达<span>42℃</span>，维持<span>8-12小时</span>，
              体温每升高<span>1℃</span>，基础代谢会提高<span>13%</span>，免疫力提升<span>5-6倍</span>
            </p>
          </div>
          <div class="product">
            <div class="item">
              <div class="cover"><img src="/img/binary-therapy1-img1.png" alt="发烧手环" /></div>
              <div class="name">发烧手环</div>
              <div class="subtitle">传输能量到达身体，提升基础体温促进血液循环，增强代谢</div>
            </div>
            <div class="item">
              <div class="cover"><img src="/img/binary-therapy1-img2.png" alt="发烧绑带" /></div>
              <div class="name">发烧绑带</div>
              <div class="subtitle">固定手环到身体部位传输能量</div>
            </div>
          </div>
        </div>
        <div class="cover"><img src="/img/binary-therapy1-honor.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 {
    &.row1 {
      .title {
        font-size: 33px;
        font-weight: bold;
        color: #000000;
      }
      .desc {
        font-size: 29px;
        color: #000000;
        line-height: 42px;
        margin-top: 24px;
      }

      .problem {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        position: relative;
        margin-top: 56px;
        &::after {
          content: '';
          display: block;
          height: 380px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translateY(-50%);
          border-right: 2px dashed #6e7f89;
        }
        .item {
          width: 509px;
          margin-top: 52px;
          .name {
            font-size: 27px;
            font-weight: bold;
            color: #e98e19;
          }
          .info {
            font-size: 25px;
            color: #000000;
            line-height: 40px;
            text-align: justify;
            margin-top: 16px;
          }
        }
      }

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

    &.row2 {
      .content {
        .section {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .desc {
            width: 833px;
            p {
              font-size: 29px;
              color: #000000;
              line-height: 55px;

              span {
                font-weight: bold;
              }

              &:last-child {
                margin-top: 132px;

                span {
                  font-weight: bold;
                  color: #e98e19;
                }
              }
            }
          }
          .product {
            width: 289px;
            .cover {
              img {
                display: block;
                width: 289px;
              }
            }

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

            .subtitle {
              font-size: 20px;
              color: #000000;
              font-weight: lighter;
              text-align: center;
              margin-top: 12px;
            }
          }
        }

        .cover {
          margin-top: 56px;
          img {
            display: block;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .therapy-title {
    margin: 0.81rem 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 {
    &.row1 {
      .title {
        font-size: 0.26rem;
        font-weight: bold;
        color: #000000;
        text-align: center;
      }
      .desc {
        font-size: 0.26rem;
        color: #000000;
        line-height: 0.48rem;
        text-align: center;
        width: 6.24rem;
        margin: 0.16rem auto 0;
      }

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

      .cover {
        width: 6.9rem;
        margin: 0.4rem auto 0;
        img {
          display: block;
          width: 100%;
        }
      }
    }

    &.row2 {
      .content {
        .section {
          position: relative;
          .desc {
            width: 6.2rem;
            margin: 0 auto;
            p {
              font-size: 0.26rem;
              color: #000000;
              line-height: 0.48rem;
              text-align: center;

              &:last-child {
                margin-top: 4.2rem;

                span {
                  font-weight: bold;
                  color: #e98e19;
                }
              }
            }
          }
          .product {
            position: absolute;
            top: 3.15rem;
            left: 50%;
            transform: translateX(-50%);
            width: 6.2rem;
            display: flex;
            justify-content: space-between;

            .item {
              width: 46%;
            }

            .cover {
              margin: 0;
              img {
                display: block;
                width: 2.6rem;
                height: 1.66rem;
              }
            }

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

            .subtitle {
              font-size: 0.2rem;
              color: #999;
              text-align: center;
              margin-top: 0.16rem;
            }
          }
        }

        & > .cover {
          margin-left: 0.3rem;
          margin-top: 0.4rem;
          overflow-y: scroll;

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

          img {
            height: 3.1rem;
            display: block;
          }
        }
      }
    }
  }
}
</style>