caimei-authentic-website-ross/pages/case/index.vue

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

    <div class="main container">
      <div class="case">
        <div class="section">
          <div class="title">疗法：<span>透热疗法</span></div>
          <div class="count">次数：1次</div>
          <ul class="info">
            <li>状态：易感到寒冷，腹部皮肤松弛，小肚凸 起，体温低，免疫力差；</li>
            <li>效果：小腹平整，两侧腰线紧致，皮肤褪红，基础体温升高。</li>
          </ul>
        </div>
        <div class="cover"><img src="/img/case-effect-01.png" alt="" /></div>
      </div>
      <div class="line"></div>
      <div class="case">
        <div class="section">
          <div class="title">疗法：<span>肌肉重塑疗法+透热疗法</span></div>
          <div class="count">次数：3次</div>
          <ul class="info">
            <li>状态：妊娠纹明显，腹直肌分离，小腹松弛；</li>
            <li>效果：妊娠纹面积缩小颜色减淡，腹部肌肉紧实，腰线明。</li>
          </ul>
        </div>
        <div class="cover"><img src="/img/case-effect-02.png" alt="" /></div>
      </div>
      <div class="line"></div>
      <div class="case">
        <div class="section">
          <div class="title">疗法：<span>透热疗法</span></div>
          <div class="count">次数：4次</div>
          <ul class="info">
            <li>状态：妊娠纹明显，颜色呈紫红色，腹部皮肤松弛；</li>
            <li>效果：妊娠纹缩小颜色减淡，腹部肌肉紧实。</li>
          </ul>
        </div>
        <div class="cover"><img src="/img/case-effect-03.png" alt="" /></div>
      </div>
      <div class="line"></div>
      <div class="case">
        <div class="section">
          <div class="title">疗法：<span>透热疗法+免疫力助推发烧疗法 </span></div>
          <div class="count">次数：2次</div>
          <ul class="info">
            <li>状态：身体代谢差，睡眠浅（易醒、质量差），肥胖，腹部突出明显；</li>
            <li>效果：睡眠质量改善，精神状态变好，腰围减小，皮肤紧实。</li>
          </ul>
        </div>
        <div class="cover"><img src="/img/case-effect-04.png" alt="" /></div>
      </div>
      <div class="line"></div>
      <div class="case">
        <div class="section">
          <div class="title">疗法：<span>透热疗法</span></div>
          <div class="count">次数：3次</div>
          <ul class="info">
            <li>状态：身体代谢差，肥胖，腹部脂肪堆积导致小肚突出明显；</li>
            <li>效果：小腹渐渐平坦，腰围减小，肌肉紧实。</li>
          </ul>
        </div>
        <div class="cover"><img src="/img/case-effect-05.png" alt="" /></div>
      </div>
      <div class="line"></div>
      <div class="case">
        <div class="section">
          <div class="title">疗法：<span>透热疗法</span></div>
          <div class="count">次数：3次</div>
          <ul class="info">
            <li>状态：脚被重物砸伤，挫伤处凸起明显，红黑肿胀疼痛，有炎症；</li>
            <li>效果：即时缓解疼痛，红肿消减；连续理疗后，疼痛感消失，红肿褪下。</li>
          </ul>
        </div>
        <div class="cover"><img src="/img/case-effect-06.png" alt="" /></div>
      </div>
      <div class="line"></div>
      <div class="case">
        <div class="section">
          <div class="title">疗法：<span>透热疗法+肌肉重塑疗法</span></div>
          <div class="count">次数：3次</div>
          <ul class="info">
            <li>状态：肩颈区域凸起，呈驼背现象，富贵包堆积，肩颈僵硬，肌肉紧张，慢性劳损，脂肪堆积，伴有水肿；</li>
            <li>效果：驼背现象消失，肩颈处富贵包消下，肩颈肌肉放松，肩颈活动受限问题改善。</li>
          </ul>
        </div>
        <div class="cover"><img src="/img/case-effect-07.png" alt="" /></div>
      </div>
      <div class="line"></div>
      <div class="case">
        <div class="section">
          <div class="title">疗法：<span>透热疗法+肌肉重塑疗法</span></div>
          <div class="count">次数：2次</div>
          <ul class="info">
            <li>状态：蝴蝶袖，手臂肌肉松弛，脂肪堆积；</li>
            <li>效果：手臂腋窝边肌肉下垂现象改善，脂肪团代谢，皮肤紧致。</li>
          </ul>
        </div>
        <div class="cover"><img src="/img/case-effect-08.png" alt="" /></div>
      </div>
      <div class="line"></div>
      <div class="case">
        <div class="section">
          <div class="title">疗法：<span>透热疗法</span></div>
          <div class="count">次数：5次</div>
          <ul class="info">
            <li>状态：眼袋浮肿，黑眼圈，皮肤松弛，法令纹、嘴角纹明显；</li>
            <li>效果：祛眼袋，淡化嘴角纹法令纹，面部线条明显。</li>
          </ul>
        </div>
        <div class="cover"><img src="/img/case-effect-09.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) {
  .main {
    background: #eeeeee;
    margin-top: 80px;
    .line {
      height: 1px;
      margin: 0 32px;
      background: #000;
      opacity: 0.5;
    }
    .case {
      box-sizing: border-box;
      padding: 56px 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;

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

      .title {
        font-size: 27px;
        color: #434343;

        span {
          font-size: 29px;
          font-weight: bold;
        }
      }

      .count {
        display: inline-block;
        font-size: 23px;
        color: #ffffff;
        line-height: 30px;
        height: 30px;
        background: #000;
        padding: 0 5px;
        margin-top: 12px;
      }

      .info {
        width: 482px;
        font-size: 27px;
        color: #434343;
        line-height: 40px;

        li {
          margin-top: 32px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .main {
    background: #eeeeee;
    width: 6.86rem;
    margin: 0.49rem auto;
    padding: 0.4rem 0;
    .line {
      height: 0.01rem;
      background: #000;
      opacity: 0.5;
      margin: 1rem 0.28rem 0.4rem;
    }
    .case {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      text-align: center;

      .section {
        width: 6.3rem;
        display: block;
      }

      .cover {
        img {
          display: block;
          width: 6.3rem;
        }
      }

      .title {
        font-size: 0.3rem;
        color: #434343;
        margin: 0.48rem 0 -0.24rem;

        span {
          font-size: 0.3rem;
          font-weight: bold;
          display: inline;
        }
      }

      .count {
        display: inline-block;
        font-size: 0.24rem;
        color: #ffffff;
        line-height: 0.4rem;
        height: 0.4rem;
        background: #000;
        padding: 0 0.08rem;
      }

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