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

<template>
  <div>
    <!-- banner区域 start -->
    <div class="swiper-container banner" id="banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="/img/diactivplus-banner.jpg" alt="" />
        </div>
      </div>
    </div>
    <!-- banner区域 end -->
    <div class="main">
      <div class="container about">
        <div class="section-title">
          <img src="/img/diactivplus-title-device.png" alt="" />
          <h3>品牌设备</h3>
        </div>
        <div class="content clearfix">
          <div class="cover fl">
            <img src="/img/diactivplus-about-cover.png" alt="" />
          </div>
          <div class="info fr">
            <div class="name">Diactivplus</div>
            <div class="subname">专业康复理疗系统</div>
            <div class="line"></div>
            <div class="description">
              一款专业的医疗设备，具备多重专利技术，并拥有全面的背书及医学文献知识，主要是针对组织再生治疗、肌肉康复理疗、术后康复治疗。主要运用于康复、医疗的领域。
            </div>
          </div>
        </div>
      </div>

      <!-- 设备特色 -->
      <div class="container features">
        <div class="section-title">
          <img src="/img/diactivplus-title-features.png" alt="设备特色" />
          <h3>设备特色</h3>
        </div>
        <div class="content">
          <div class="item">
            <div class="cover"><img src="/img/diactivplus-features-01.png" alt="" /></div>
            <div class="content">多重专利技术：针对理疗、美容，面部、身体管理</div>
          </div>
          <div class="item">
            <div class="cover"><img src="/img/diactivplus-features-02.png" alt="" /></div>
            <div class="content">三大能量形式：透热，电刺激，电离/离子化</div>
          </div>
          <div class="item">
            <div class="cover"><img src="/img/diactivplus-features-03.png" alt="" /></div>
            <div class="content">组织再生，肌肉紧致，能量渗透</div>
          </div>
          <div class="item">
            <div class="cover"><img src="/img/diactivplus-features-04.png" alt="" /></div>
            <div class="content">专业背书、 医学文献支持</div>
          </div>
        </div>
      </div>

      <!-- 设备疗法 -->
      <div class="container therapy">
        <div class="section-title">
          <img src="/img/diactivplus-title-therapies.png" alt="设备疗法" />
          <h3>设备疗法</h3>
        </div>
        <div class="content">
          <div class="item item-01">
            <div class="cover">
              <img src="/img/diactivplus-therapies-01.png" alt="透热疗法" />
              <div class="title only-pc">三大效应</div>
              <ul class="info only-pc">
                <li>非热：刺激运动和离子交换。增加细胞营养吸收并促进细胞代谢</li>
                <li>温热：引起血管舒张并刺激微循环</li>
                <li>高热：重组组织并增强代谢刺激</li>
              </ul>
            </div>
            <div class="section">
              <div class="title">透热疗法</div>
              <div class="subtitle">448kHz—来自细胞核心的运动</div>
              <div class="desc">诱发局部发热<br class="only-pc" />激活免疫系统，修复组织</div>
              <ul class="info">
                <li>激活免疫系统</li>
                <li>温度上升</li>
                <li>血管扩张</li>
                <li>激活淋巴系统</li>
                <li>重新平衡细胞代谢</li>
              </ul>
              <div class="title only-mobile">三大效应</div>
              <ul class="info only-mobile">
                <li>非热：刺激运动和离子交换。激活细胞营养并促进细胞代谢</li>
                <li>温热：引起血管舒张并刺激微循环</li>
                <li>高热：重组组织并增强代谢刺激</li>
              </ul>
            </div>
          </div>
          <div class="item item-02">
            <div class="cover"><img src="/img/diactivplus-therapies-02.png" alt="" /></div>
            <div class="section">
              <div class="title">电刺激疗法</div>
              <dl class="info">
                <dt>&gt;肌肉电刺激</dt>
                <dd><span>作用：</span>强化肌力，康复，防止废用性肌肉萎缩，增加局部血液循环，肌肉放松，肌肉紧致。</dd>
                <dt>&gt;干扰电流</dt>
                <dd><span>作用：</span>改善肿胀和炎症。改善肌肉受限和增强肌肉协调。刺<br />激人体自身荷尔蒙，治疗慢性疼痛。</dd>
                <dt>&gt;科兹电流</dt>
                <dd><span>作用：</span>改善肌肉萎缩，肌肉训练，肌肉刺激，辅助肌肉力量<br />训练或肌肉耐力训练，改善新陈代谢，减少肌肉紧张 。</dd>
                <dt>&gt;经皮神经电刺激</dt>
                <dd><span>作用：</span>关节炎，背部疼痛，腕管综合征，足部疼痛，分娩疼<br />痛，多发性硬化症，坐骨神经痛等 。</dd>
              </dl>
            </div>
          </div>
          <div class="item item-03">
            <div class="cover">
              <img src="/img/diactivplus-therapies-03.png" alt="" />
              <img src="/img/diactivplus-therapies-04.png" alt="" />
            </div>
            <div class="section">
              <div class="title">电针灸</div>
              <div class="desc">基于中国传统针灸技术，电流通过针头进行传导。该疗法将传统和现代的优点结合。</div>
              <div class="subtitle">功效:</div>
              <ul class="info">
                <li><span>&gt;循环：</span>血管舒张对水肿和疼痛的部位有镇痛和抗炎作用</li>
                <li><span>&gt;肌肉系统：</span> 修复肌张力不足、肌肉萎缩</li>
                <li><span>&gt;神经系统镇痛：</span>针对挛缩引起的疼痛，具有镇痛和肌肉放松效果</li>
              </ul>
            </div>
          </div>
          <div class="item item-04">
            <div class="cover"><img src="/img/diactivplus-therapies-05.png" alt="" /></div>
            <div class="section">
              <div class="title">盆底理疗的透热应用女性私密美学</div>
              <div class="desc">透热疗法结合肌肉疗法，运用最新研发的特殊探头，修复女性盆底各种健康问题。</div>
              <div class="subtitle">作用：</div>
              <ul class="info">
                <li>&gt;平衡私密激素水平，减少发生肌瘤的概率</li>
                <li>&gt;改善阴道内壁变薄，增加阴道的润滑度和弹性。</li>
                <li>&gt;改善外阴皮肤松弛、阴唇下垂和阴道萎缩，使阴唇变得饱满。</li>
                <li>该技术也适用于特定男性盆底疾病。</li>
              </ul>
            </div>
          </div>
          <div class="item item-05">
            <div class="cover"><img src="/img/diactivplus-therapies-06.png" alt="" srcset="" /></div>
            <div class="section">
              <div class="title">直流电</div>
              <div class="desc">
                利用离子电渗透疗法通过电贴片帮助产品中的活性成分渗透，主要运用于物理治疗和美容医学中。 药物的引入，整体增强了电极效应、循环效应和敏感效应。
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: '首页-艾斯佰丽官网-产品系列-DIACTIVPLUS',
    }
  },
  mounted() {
    new Swiper('#banner', {
      loop: false, // 循环模式选项
    })
  },
}
</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: #0071b7;
          font-weight: bold;
        }
        .subname {
          font-size: 30px;
          margin-top: 15px;
        }
        .line {
          width: 36px;
          height: 7px;
          background: #0071b7;
          margin: 20px 0 30px;
        }
        .description {
          text-align: justify;
          word-break: break-all;
          font-weight: lighter;
          line-height: 36px;

          margin-top: 24px;
          font-size: 20px;
        }
      }
    }

    .features {
      .content {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        .item {
          width: 269px;

          .cover {
            width: 100%;
            height: 269px;

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

          .content {
            padding: 0 12px;
            margin-top: 32px;
            font-size: 26px;
            line-height: 41px;
            text-align: justify;
            font-weight: lighter;
          }
        }
      }
    }

    .therapy {
      .content {
        .item {
          padding: 18px 32px 38px;
          background: #f5f9f9;
          margin-top: 9px;
        }

        .item-01 {
          display: flex;
          justify-content: space-between;
          flex-direction: row-reverse;

          .cover {
            width: 448px;
            img {
              display: block;
              width: 100%;
              height: 330px;
            }
            .title {
              font-size: 40px;
              font-weight: bold;
              color: #0f66a0;
              margin: 16px 0 22px;
            }
            .info {
              font-size: 25px;
              color: #000000;
              line-height: 40px;
            }
          }

          .section {
            .title {
              font-size: 42px;
              font-weight: bold;
              color: #0f66a0;
              margin: 29px 0 14px;
            }

            .subtitle {
              font-size: 33px;
              color: #000000;
            }

            .desc {
              font-size: 25px;
              line-height: 38px;
              color: #000000;
              margin: 41px 0 72px;
            }

            .info {
              font-size: 25px;
              color: #000000;
              line-height: 42px;
            }
          }
        }

        .item-02 {
          position: relative;
          .cover {
            position: absolute;
            right: 32px;
            bottom: 48px;
            img {
              display: block;
              width: 448px;
              height: 330px;
            }
          }

          .info {
            padding: 0;
            margin: 0;
            font-size: 25px;
            color: #000000;
            line-height: 36px;

            dt {
              font-weight: bold;
              color: #0f66a0;
              margin-top: 24px;
            }

            dd {
              margin: 0;
              text-align: justify;

              span {
                font-weight: bold;
                color: #0f66a0;
              }
            }
          }

          .title {
            font-size: 42px;
            font-weight: bold;
            color: #0f66a0;
            margin-bottom: 38px;
          }
        }

        .item-03 {
          display: flex;
          justify-content: space-between;
          flex-direction: row-reverse;
          .cover {
            img {
              display: block;
              width: 448px;
              height: 280px;
              &:last-child {
                margin-top: 9px;
              }
            }
          }

          .title {
            font-size: 42px;
            font-weight: bold;
            color: #0f66a0;
            margin-top: 50px;
          }

          .subtitle {
            font-size: 29px;
            font-weight: bold;
            color: #0f66a0;
          }

          .desc {
            margin: 44px 0 48px;
          }

          .desc,
          .info {
            width: 656px;
            font-size: 25px;
            color: #000000;
            line-height: 42px;
          }

          .info {
            li {
              margin-top: 8px;
            }
            span {
              font-weight: bold;
              color: #0f66a0;
            }
          }
        }

        .item-04 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: row-reverse;
          .title {
            width: 420px;
            font-size: 42px;
            font-weight: bold;
            color: #0f66a0;
            line-height: 50px;
          }

          .subtitle {
            font-weight: bold;
            font-size: 29px;
            color: #0f66a0;
          }

          .desc {
            margin: 76px 0 32px;
          }

          .desc,
          .info {
            width: 646px;
            font-size: 25px;
            color: #000000;
            line-height: 42px;
          }
        }

        .item-05 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-direction: row-reverse;

          .cover {
            margin: 136px 0;
            img {
              display: block;
              width: 448px;
              height: 330px;
            }
          }

          .title {
            font-size: 42px;
            font-weight: bold;
            color: #0f66a0;
            margin-bottom: 68px;
          }

          .desc {
            width: 629px;
            font-size: 25px;
            color: #000000;
            line-height: 42px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .main {
    .about {
      .content {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
      }

      .cover {
        width: 5.64rem;
        height: 5.57rem;
        margin-top: 0.4rem;
        float: unset !important;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .info {
        float: unset !important;
        width: 6.5rem;
        text-align: center;
        .name {
          font-size: 0.34rem;
          color: #0071b7;
          font-weight: bold;
        }
        .subname {
          font-size: 0.26rem;
          margin-top: 0.16rem;
        }
        .line {
          width: 0.4rem;
          height: 0.06rem;
          background: #0071b7;
          margin: 0.32rem auto;
        }
        .description {
          text-align: justify;
          word-break: break-all;
          font-size: 0.26rem;
          line-height: 0.48rem;
        }
      }
    }

    .features {
      & > .content {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 0.72rem;

        .item {
          width: 2.7rem;
          margin-top: 0.6rem;

          .cover {
            width: 100%;
            height: 2.7rem;

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

          .content {
            margin-top: 0.24rem;
            font-size: 0.26rem;
            line-height: 0.48rem;
            text-align: justify;
          }
        }
      }
    }

    .therapy {
      .content {
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          background: #f5f9f9;
          padding: 0.4rem 0;
          width: 6.86rem;
          margin: 0.32rem auto;
        }

        .item-01 {
          display: flex;
          flex-direction: column;
          align-items: center;
          .cover {
            width: 5.2rem;
            img {
              display: block;
              width: 4.48rem;
              width: 100%;
              height: 3.3rem;
            }
          }

          .section {
            width: 5.2rem;
            text-align: center;
            .title {
              font-size: 0.3rem;
              font-weight: bold;
              color: #0f66a0;
              margin: 0.4rem 0 0.16rem;
            }

            .subtitle {
              font-size: 0.26rem;
              color: #000000;
              margin: 0.16rem 0 0.32rem;
            }

            .desc {
              font-size: 0.26rem;
              line-height: 0.48rem;
              color: #000000;
            }

            .info {
              color: #000000;
              line-height: 0.36rem;
              font-size: 0;

              li {
                display: inline;
                font-size: 0.26rem;
              }

              &.only-mobile {
                line-height: initial;
                li {
                  display: block;
                  line-height: 0.48rem;
                }
              }
            }
          }
        }

        .item-02 {
          .cover {
            img {
              display: block;
              width: 4.48rem;
              height: 3.3rem;
            }
          }

          .info {
            padding: 0;
            margin: 0;
            width: 5.98rem;
            font-size: 0.26rem;
            color: #000000;
            line-height: 0.48rem;

            dt {
              font-weight: bold;
              color: #0f66a0;
              text-align: center;
              margin: 0.4rem 0 0.16rem;
            }

            dd {
              margin: 0;
              text-align: center;

              br {
                display: none;
              }

              span {
                font-weight: bold;
                color: #0f66a0;
              }
            }
          }

          .title {
            font-size: 0.3rem;
            font-weight: bold;
            color: #0f66a0;
            text-align: center;
            margin-top: 0.53rem;
          }
        }

        .item-03 {
          .section {
            width: 5.72rem;
            text-align: center;
          }

          .cover {
            img {
              display: block;
              width: 4.48rem;
              height: 2.8rem;
              &:last-child {
                margin-top: 0.08rem;
              }
            }
          }

          .title {
            font-size: 0.3rem;
            font-weight: bold;
            color: #0f66a0;
            margin: 0.4rem 0 0.32rem;
          }

          .subtitle {
            font-size: 0.26rem;
            font-weight: bold;
            color: #0f66a0;
            margin: 0.4rem 0 0.32rem;
          }

          .desc,
          .info {
            font-size: 0.26rem;
            color: #000000;
            line-height: 0.48rem;
          }

          .info {
            li {
              margin: 0.12rem 0;
            }
          }
        }

        .item-04 {
          .section {
            width: 5.66rem;
            text-align: center;
          }

          .cover {
            img {
              display: block;
              width: 4.48rem;
              height: 3.3rem;
            }
          }

          .title {
            font-size: 0.3rem;
            font-weight: bold;
            color: #0f66a0;
            line-height: 0.48rem;
            margin: 0.4rem 0 0.32rem;
          }

          .subtitle {
            font-weight: bold;
            font-size: 0.26rem;
            color: #0f66a0;
            margin: 0.4rem 0 0.32rem;
          }

          .desc,
          .info {
            font-size: 0.26rem;
            color: #000000;
            line-height: 0.48rem;
          }
        }

        .item-05 {
          .cover {
            img {
              display: block;
              width: 4.48rem;
              height: 3.3rem;
            }
          }

          .section {
            width: 5.72rem;
            text-align: center;
          }

          .title {
            font-size: 0.3rem;
            font-weight: bold;
            color: #0f66a0;
            margin: 0.4rem 0 0.32rem;
          }

          .desc {
            font-size: 0.26rem;
            color: #000000;
            line-height: 0.48rem;
          }
        }
      }
    }
  }
}
</style>