测测

README.md

@@ -0,0 +1,68 @@
+# caimei-authentic-website
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
+
+## Special Directories
+
+You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
+
+### `assets`
+
+The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
+
+### `components`
+
+The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
+
+### `layouts`
+
+Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
+
+### `pages`
+
+This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
+
+### `plugins`
+
+The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
+
+### `static`
+
+This directory contains your static files. Each file inside this directory is mapped to `/`.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
+
+### `store`
+
+This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).

pages/brand/ross.vue

@@ -0,0 +1,888 @@
+<template>
+  <div>
+    <!-- 广告位 start-->
+    <div class="advertising">
+      <div class="video-container" id="videoPlayer">
+        <video src="/media/binary_premium.mp4" poster="/img/brand-ross-video-cover.png"></video>
+        <div class="play"></div>
+      </div>
+    </div>
+    <!-- 广告位 end -->
+
+    <div class="main">
+      <div class="container about">
+        <div class="section-title">
+          <img src="/img/ross-title-about.png" alt="" />
+          <h3>公司介绍</h3>
+        </div>
+        <div class="content">
+          <div class="clearfix about-swiper">
+            <div class="swiper fl">
+              <div class="swiper-container" id="aboutSwiepr">
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide">
+                    <img src="/img/ross-about-banner-01.png" alt="" />
+                  </div>
+                  <div class="swiper-slide">
+                    <img src="/img/ross-about-banner-02.png" alt="" />
+                  </div>
+                  <div class="swiper-slide">
+                    <img src="/img/ross-about-banner-03.png" alt="" />
+                  </div>
+                </div>
+                <!-- 如果需要导航按钮 -->
+                <div class="swiper-prev"></div>
+                <div class="swiper-next"></div>
+              </div>
+            </div>
+            <div class="section fl">
+              <div class="title">RÖS'S ESTÉTICA公司简介</div>
+              <div class="description">
+                ROS'S中国区总代理为深圳艾斯佰丽生物科技有限公司<br />RÖS'S品牌创立于1978年，总部位于西班牙巴塞罗那，是一家专注于二进制先进科技研发、制造和销售的智能创新研发型企业。获得欧盟CE、国际ISO9001等系列认证，旗下拥有Binary Premium，Kestos T2，Rollaction，Intradermik等多系列先进智能科技设备。
+              </div>
+            </div>
+          </div>
+          <ul class="more-content">
+            <li><img src="/img/ross-about-item-01.png" alt="" /></li>
+            <li><img src="/img/ross-about-item-02.png" alt="" /></li>
+            <li><img src="/img/ross-about-item-03.png" alt="" /></li>
+            <li><img src="/img/ross-about-item-04.png" alt="" /></li>
+            <li><img src="/img/ross-about-item-05.png" alt="" /></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="container chairman">
+        <div class="section-title">
+          <img src="/img/ross-title-chairman.png" alt="" />
+          <h3>董事长简介</h3>
+        </div>
+        <div class="content clearfix">
+          <div class="cover fl">
+            <img src="/img/ross-chairman-cover.png" alt="" />
+          </div>
+          <div class="info fl">
+            <div class="name">Carlos moliner</div>
+            <div class="name-en">RÖS'S ESTÉTICA</div>
+            <div class="tip">RÖS'S ESTÉTICA董事长<span>|</span>RÖS'S品牌创始人</div>
+            <div class="line"></div>
+            <div class="description">
+              RÖS'S品牌创立于1978年，总部位于西班牙巴塞罗那，是一家专注于二进制先进科技研发、制造和销售的智能创新研发型企业。获得欧盟CE、国际ISO
+              9001等系列认证，旗下拥有Binary Premium，Kestos T2，Rollaction，Intradermik等多系列先进智能科技设备。
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="container word">
+        <div class="section-title">
+          <img src="/img/ross-title-word.png" alt="遍布世界各地" />
+          <h3>遍布世界各地</h3>
+        </div>
+        <div class="content">
+          <img src="/img/ross-word-cover.png" alt="遍布世界各地" class="only-pc" />
+          <img src="/img/ross-word-cover-h5.jpg" alt="遍布世界各地" class="only-mobile" />
+        </div>
+      </div>
+
+      <div class="container brand-activity">
+        <div class="section-title">
+          <img src="/img/ross-title-activity.png" alt="" />
+          <h3>品牌活动</h3>
+        </div>
+        <div class="content clearfix">
+          <div class="item">
+            <img src="/img/ross-brand-activity-01.png" alt="全球专业美容盛会" />
+            <div class="cover">
+              <div class="title">· COSMO BEAUTY Barcelona （全球专业美容盛会)</div>
+            </div>
+          </div>
+          <div class="item no-mr">
+            <img src="/img/ross-brand-activity-02.png" alt="最佳创新奖" />
+            <div class="cover">
+              <div class="title">· 最佳创新奖</div>
+            </div>
+          </div>
+          <div class="item">
+            <img src="/img/ross-brand-activity-03.png" alt="最佳治疗奖项" />
+            <div class="cover">
+              <div class="title">· 最佳治疗奖项</div>
+            </div>
+          </div>
+          <div class="item">
+            <img src="/img/ross-brand-activity-04.png" alt="著名的拉丁美洲刊物SPA GUIDE 采访了卡洛斯·莫利纳先生" />
+            <div class="cover">
+              <div class="title">· 著名的拉丁美洲刊物SPA GUIDE 采访了卡洛斯·莫利纳先生</div>
+            </div>
+          </div>
+          <div class="item no-mr">
+            <img src="/img/ross-brand-activity-05.png" alt="品牌展会" />
+            <div class="cover">
+              <div class="title">· 品牌展会</div>
+            </div>
+          </div>
+          <div class="item no-mb">
+            <img src="/img/ross-brand-activity-06.png" alt="国外合作商展会" />
+            <div class="cover">
+              <div class="title">· 国外合作商展会</div>
+            </div>
+          </div>
+          <div class="item no-mr no-mb">
+            <img src="/img/ross-brand-activity-07.png" alt="专业培训团队" />
+            <div class="cover">
+              <div class="title">· 专业培训团队</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="container honor">
+        <div class="section-title">
+          <img src="/img/ross-title-honor.png" alt="" />
+          <h3>荣誉证书</h3>
+        </div>
+        <div class="content">
+          <div class="scroll-box only-mobile">
+            <img src="/img/ross-honor-01.png" alt="" />
+            <img src="/img/ross-honor-02.png" alt="" />
+            <img src="/img/ross-honor-03.png" alt="" />
+            <img src="/img/ross-honor-04.png" alt="" />
+            <img src="/img/ross-honor-05.png" alt="" />
+          </div>
+          <div class="swiper-container only-pc" id="honorSwiper">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
+                <img src="/img/ross-honor-01.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-honor-02.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-honor-03.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-honor-04.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-honor-05.png" alt="" />
+              </div>
+            </div>
+          </div>
+          <!-- 如果需要导航按钮 -->
+          <div class="swiper-prev"></div>
+          <div class="swiper-next"></div>
+        </div>
+      </div>
+
+      <div class="container device">
+        <div class="section-title">
+          <img src="/img/ross-title-device.png" alt="" />
+          <h3>部分设备</h3>
+        </div>
+        <div class="content">
+          <div class="scroll-box only-mobile">
+            <img src="/img/ross-device-01.png" alt="" />
+            <img src="/img/ross-device-02.png" alt="" />
+            <img src="/img/ross-device-03.png" alt="" />
+            <img src="/img/ross-device-04.png" alt="" />
+            <img src="/img/ross-device-05.png" alt="" />
+          </div>
+          <div class="swiper-container only-pc" id="deviceSwiper">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
+                <img src="/img/ross-device-01.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-device-02.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-device-03.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-device-04.png" alt="" />
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/ross-device-05.png" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: "首页-艾斯佰丽官网-ROS'S介绍",
+    }
+  },
+  mounted() {
+    var aboutSwiepr = new Swiper('#aboutSwiepr', {
+      loop: true, // 循环模式选项
+      // 如果需要前进后退按钮
+      navigation: {
+        nextEl: '#aboutSwiepr .swiper-next',
+        prevEl: '#aboutSwiepr .swiper-prev',
+      },
+    })
+
+    var honorSwiper = new Swiper('#honorSwiper', {
+      loop: true, // 循环模式选项
+      autoplay: true,
+      slidesPerView: 5,
+      spaceBetween: 24,
+      // 如果需要前进后退按钮
+      navigation: {
+        nextEl: '.honor .swiper-next',
+        prevEl: '.honor .swiper-prev',
+      },
+    })
+
+    var deviceSwiper = new Swiper('#deviceSwiper', {
+      loop: true, // 循环模式选项
+      autoplay: true,
+      slidesPerView: 5,
+      spaceBetween: 24,
+    })
+
+    // 关于疗法 手风琴效果
+    function therapyDemoAccordion() {
+      $('#therapy .item').on('mouseover', function (el) {
+        $('#therapy .hover').removeClass('hover')
+        $(this).addClass('hover')
+      })
+    }
+    therapyDemoAccordion()
+
+    // 视频播放
+    function initVideoPlayer() {
+      $('#videoPlayer')
+        .find('.play')
+        .on('click', function () {
+          $(this).hide().siblings('video').attr('controls', true).get(0).play()
+        })
+    }
+
+    initVideoPlayer()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and(min-width:768px) {
+  .advertising {
+    width: 100%;
+    height: 973px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background: #f2f2f2;
+    overflow: hidden;
+    background: url(/img/brand-ross-ad.png) no-repeat;
+    background-position: top center;
+
+    .video-container {
+      position: relative;
+      width: 960px;
+      height: 540px;
+      margin: 0 auto;
+      margin-top: 433px;
+
+      .play {
+        position: absolute;
+        width: 132px;
+        height: 132px;
+        border-radius: 50%;
+        z-index: 2;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+        cursor: pointer;
+        background: url(/img/ross-video-play.png) no-repeat center;
+      }
+
+      video {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .main {
+    .about {
+      .content {
+        .about-swiper {
+          height: 540px;
+
+          .swiper {
+            width: 720px;
+            height: 100%;
+            position: relative;
+
+            .swiper-prev,
+            .swiper-next {
+              position: absolute;
+              left: 0;
+              top: 50%;
+              -webkit-transform: translateY(-50%);
+              transform: translateY(-50%);
+              width: 48px;
+              height: 72px;
+              background-color: rgba(55, 55, 55, 0.3) !important;
+              z-index: 5;
+              cursor: pointer;
+              background: url(/img/icon-arrow-left.png) no-repeat center;
+            }
+
+            .swiper-next {
+              left: unset;
+              right: 0;
+              background: url(/img/icon-arrow-right.png) no-repeat center;
+            }
+
+            img {
+              width: 100%;
+              height: 540px;
+            }
+          }
+
+          .section {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+            flex-direction: column;
+            width: 480px;
+            height: 540px;
+            background: url(/img/icon-comma-01.png), url(/img/icon-comma-02.png);
+            background-color: #f3920d;
+            background-repeat: no-repeat;
+            background-position: 36px 36px, 353px 422px;
+            color: #fff;
+
+            .title {
+              font-size: 25px;
+              font-weight: bold;
+              padding: 0 24px;
+              width: 100%;
+              text-align: left;
+              -webkit-box-sizing: border-box;
+              box-sizing: border-box;
+            }
+
+            .description {
+              font-size: 24px;
+              font-weight: lighter;
+              line-height: 44px;
+              padding: 0 24px;
+              text-align: justify;
+              word-break: break-all;
+              margin-top: 12px;
+            }
+          }
+        }
+        .more-content {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          margin-top: 24px;
+
+          img {
+            display: block;
+            width: 233px;
+            height: 160px;
+          }
+        }
+      }
+    }
+
+    .chairman {
+      .cover {
+        img {
+          display: block;
+          width: 470px;
+          height: 480px;
+        }
+      }
+      .info {
+        padding-top: 40px;
+        margin-left: 50px;
+        width: 668px;
+        .name {
+          font-size: 41px;
+          color: #f3920d;
+          font-weight: bold;
+        }
+        .name-en {
+          font-size: 25px;
+          color: #000000;
+          margin-top: 12px;
+
+          span {
+            font-size: 38px;
+            color: #f3920d;
+            font-weight: normal;
+          }
+        }
+        .tip {
+          font-size: 25px;
+          color: #000;
+          margin-top: 76px;
+          span {
+            margin: 0 16px;
+          }
+        }
+        .line {
+          width: 36px;
+          height: 7px;
+          background: #f3920d;
+          margin: 24px 0 60px;
+        }
+        .description {
+          font-size: 20px;
+          color: #000;
+          line-height: 36px;
+        }
+      }
+    }
+
+    .word {
+      .content {
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+    }
+
+    .brand-activity {
+      .content {
+        .item {
+          position: relative;
+          float: left;
+          height: 340px;
+          width: 390px;
+          margin-right: 15px;
+          margin-bottom: 15px;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          overflow: hidden;
+
+          .cover-bg {
+            width: 100%;
+            height: 100%;
+            opacity: 1;
+            -webkit-transition: all 0.4s;
+            transition: all 0.4s;
+            background: #f3920d;
+          }
+
+          img {
+            width: 100%;
+            height: 100%;
+            opacity: 1;
+            -webkit-transition: all 0.4s;
+            transition: all 0.4s;
+          }
+
+          &.no-mb {
+            margin-bottom: 0;
+          }
+
+          &.no-mr {
+            margin-right: 0;
+          }
+
+          &:nth-child(1),
+          &:nth-child(7) {
+            width: 795px;
+          }
+
+          &:hover {
+            img {
+              -webkit-transform: scale(1.2);
+              transform: scale(1.2);
+            }
+          }
+
+          .cover {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            display: inline-block;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 19px 14px;
+
+            .title {
+              color: #fff;
+              font-size: 24px;
+              font-weight: lighter;
+              line-height: 1.5;
+            }
+          }
+        }
+      }
+    }
+
+    .honor {
+      .content {
+        position: relative;
+
+        .swiper-container {
+          width: 1070px;
+          margin: 0 auto;
+
+          img {
+            display: block;
+            width: 100%;
+          }
+        }
+
+        .swiper-prev,
+        .swiper-next {
+          position: absolute;
+          left: 0;
+          top: 50%;
+          -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+          width: 48px;
+          height: 72px;
+          background-color: rgba(55, 55, 55, 0.3) !important;
+          z-index: 5;
+          cursor: pointer;
+          background: url(/img/icon-arrow-left.png) no-repeat center;
+        }
+
+        .swiper-next {
+          left: unset;
+          right: 0;
+          background: url(/img/icon-arrow-right.png) no-repeat center;
+        }
+      }
+    }
+
+    .device {
+      .swiper-container {
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+@media screen and(max-width:768px) {
+  .advertising {
+    width: 100%;
+    height: 5.9488rem;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background: #f2f2f2;
+    overflow: hidden;
+    background: url(/img/brand-ross-ad.png) no-repeat;
+    background-position: top center;
+    background-size: 7.5rem;
+
+    .video-container {
+      position: relative;
+      width: 6.86rem;
+      height: 3.8588rem;
+      margin: 0 auto;
+      margin-top: 2.09rem;
+
+      .play {
+        position: absolute;
+        width: 0.8rem;
+        height: 0.8rem;
+        border-radius: 50%;
+        z-index: 2;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+        cursor: pointer;
+        background: url(/img/ross-video-play.png) no-repeat center;
+        background-size: 0.8rem;
+      }
+
+      video {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .main {
+    .about {
+      width: 6.86rem;
+      margin: 0 auto;
+      .content {
+        .about-swiper {
+          .swiper {
+            width: 100%;
+            float: unset !important;
+
+            .swiper-container {
+              width: 100%;
+              height: 5.14rem;
+
+              img {
+                display: block;
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+
+          .section {
+            float: unset !important;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            align-items: center;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+            flex-direction: column;
+            background: url(/img/icon-comma-01.png), url(/img/icon-comma-02.png);
+            background-color: #f3920d;
+            background-repeat: no-repeat;
+            background-size: 0.66rem;
+            background-position: 0.4rem 0.82rem, 5.86rem 2.8rem;
+            color: #fff;
+            padding: 0.4rem;
+
+            .title {
+              font-size: 0.32rem;
+              font-weight: bold;
+              width: 100%;
+              text-align: left;
+              -webkit-box-sizing: border-box;
+              box-sizing: border-box;
+              text-align: center;
+            }
+
+            .description {
+              font-size: 0.24rem;
+              line-height: 0.46rem;
+              text-align: justify;
+              word-break: break-all;
+              margin-top: 0.4rem;
+              text-align: center;
+            }
+          }
+        }
+        .more-content {
+          display: none;
+        }
+      }
+    }
+
+    .chairman {
+      width: 6.48rem;
+      margin: 0 auto;
+      .content {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+        .cover {
+          float: unset !important;
+          img {
+            display: block;
+            width: 5.46rem;
+            height: 5.57rem;
+            margin: 0 auto;
+          }
+        }
+        .info {
+          float: unset !important;
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+          flex-direction: column;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          .name {
+            font-size: 0.3rem;
+            color: #272727;
+            font-weight: bold;
+          }
+          .name-en {
+            font-size: 0.26rem;
+            color: #272727;
+            margin-top: 0.32rem;
+
+            span {
+              font-size: 0.3rem;
+              color: #f3920d;
+            }
+          }
+          .tip {
+            font-size: 0.26rem;
+            color: #272727;
+            margin-top: 0.12rem;
+            span {
+              margin: 0 0.16rem;
+            }
+          }
+          .line {
+            width: 0.4rem;
+            height: 0.06rem;
+            background: #f3920d;
+            margin: 0.4rem 0;
+          }
+          .description {
+            font-size: 0.26rem;
+            color: #666;
+            line-height: 0.48rem;
+            text-align: center;
+            margin-bottom: 0.4rem;
+          }
+        }
+      }
+    }
+
+    .word {
+      width: 6.86rem;
+      margin: 0 auto;
+      .content {
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+    }
+
+    .brand-activity {
+      width: 6.86rem;
+      margin: 0 auto;
+      .content {
+        .item {
+          position: relative;
+          float: left;
+          height: 1.94rem;
+          width: 2.23rem;
+          margin-right: 0.08rem;
+          margin-bottom: 0.08rem;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          overflow: hidden;
+
+          img {
+            width: 100%;
+            height: 100%;
+            opacity: 1;
+            -webkit-transition: all 0.4s;
+            transition: all 0.4s;
+          }
+
+          &.no-mb {
+            margin-bottom: 0;
+          }
+
+          &.no-mr {
+            margin-right: 0;
+          }
+
+          &:nth-child(1),
+          &:nth-child(7) {
+            width: 4.54rem;
+          }
+
+          &:hover {
+            img {
+              -webkit-transform: scale(1.2);
+              transform: scale(1.2);
+            }
+          }
+
+          .cover {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            display: inline-block;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 0.08rem 0.1rem;
+
+            .title {
+              color: #fff;
+              font-size: 0.22rem;
+              font-weight: lighter;
+              line-height: 1.5;
+            }
+          }
+        }
+      }
+    }
+
+    .honor {
+      .scroll-box {
+        img {
+          width: 1.96rem;
+          height: 2.83rem;
+          margin-right: 0.24rem;
+
+          &:first-child {
+            margin-left: 0.32rem;
+          }
+
+          &:last-child {
+            margin-right: 0.32rem;
+          }
+        }
+      }
+    }
+
+    .device {
+      .scroll-box {
+        img {
+          width: 1.88rem;
+          height: 2.41rem;
+          margin-right: 0.24rem;
+
+          &:first-child {
+            margin-left: 0.32rem;
+          }
+
+          &:last-child {
+            margin-right: 0.32rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages/product/binary/therapy-1.vue

@@ -0,0 +1,382 @@
+<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>

pages/product/binary/therapy-2.vue

@@ -0,0 +1,355 @@
+<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>

pages/product/binary/therapy-3.vue

@@ -0,0 +1,232 @@
+<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>

pages/product/binary/therapy-4.vue

@@ -0,0 +1,257 @@
+<template>
+  <div>
+    <!-- banner区域 start -->
+    <div class="swiper-container banner" id="banner">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">
+          <img src="/img/binary-therapy4-banner.jpg" alt="" />
+        </div>
+      </div>
+    </div>
+    <!-- banner区域 end -->
+
+    <div class="therapy-title">
+      <h3>私密健康疗法</h3>
+      <div class="en">Electrical impulse muscle tone</div>
+    </div>
+
+    <div class="container row1">
+      <div class="content">
+        <div class="section">
+          <div class="item">
+            <div class="name">独特频率448kHz</div>
+            <div class="desc">
+              作用于阴道粘膜层、真皮纤维层、肌肉层<br />刺激细胞再生<br />活化胶原新生重组<br />保护黏膜系统的同时收紧阴道<br />增加敏感度<br />非热作用还可以平衡内部菌群，起到消炎作用
+            </div>
+          </div>
+          <div class="cover only-mobile">
+            <img src="/img/binary-therapy4-cover-1.png" alt="电阻探头(RES)" />
+          </div>
+          <div class="item item2">
+            <div class="name">神经肌肉电刺激（NMES）</div>
+            <div class="desc">
+              同时刺激运动神经纤维和传入感觉神经纤维<br />利用神经细胞的电兴奋性<br />通过脉冲电流刺激支配肌肉神经促使肌肉进行等张和等长收缩<br />达到肌肉饱满和健康弹性的状态
+            </div>
+          </div>
+          <div class="cover only-mobile">
+            <img src="/img/binary-therapy4-cover-2.png" alt="电阻探头(RES)" />
+          </div>
+        </div>
+        <div class="cover only-pc">
+          <img src="/img/binary-therapy4-cover-1.png" alt="电阻探头(RES)" />
+          <img src="/img/binary-therapy4-cover-2.png" alt="电容探头(CAP)" />
+        </div>
+      </div>
+
+      <div class="therapy-title">
+        <h3>设备配件</h3>
+        <div class="en">Equipment accessories</div>
+      </div>
+
+      <div class="container row2">
+        <div class="section">
+          <img src="/img/binary-therapy4-accessories1.png" alt="" />
+          <img src="/img/binary-therapy4-accessories2.png" alt="" />
+          <img src="/img/binary-therapy4-accessories3.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 {
+    .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 {
+          &.item2 {
+            margin-top: 80px;
+          }
+
+          .name {
+            font-size: 28px;
+            font-weight: bold;
+            color: #e98e19;
+            line-height: 44px;
+          }
+
+          .desc {
+            font-size: 28px;
+            line-height: 44px;
+          }
+        }
+
+        .cover {
+          width: 380px;
+          img {
+            display: block;
+          }
+        }
+      }
+    }
+
+    &.row2 {
+      .desc {
+        font-size: 20px;
+        font-weight: 300;
+        color: #000000;
+        line-height: 74px;
+      }
+
+      .section {
+        display: flex;
+        margin-top: 76px;
+        justify-content: space-between;
+
+        img {
+          display: block;
+          margin: 0 2px;
+        }
+      }
+
+      .cover {
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .therapy-title {
+    margin: 0.8rem 0 0;
+    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: 10px;
+      text-align: center;
+    }
+  }
+
+  .container {
+    &.row1 {
+      .content {
+        .section {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
+        .item {
+          width: 6rem;
+          .name {
+            font-size: 0.26rem;
+            font-weight: bold;
+            color: #e98e19;
+            line-height: 0.48rem;
+            margin: 0.8rem 0 0.16rem;
+            text-align: center;
+          }
+
+          .desc {
+            font-size: 0.26rem;
+            line-height: 0.48rem;
+            text-align: center;
+          }
+        }
+
+        .cover {
+          width: 3.8rem;
+          margin-top: 0.32rem;
+          img {
+            display: block;
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    &.row2 {
+      .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.22rem;
+          height: 1.96rem;
+
+          &:first-child {
+            margin-left: 0.32rem;
+          }
+
+          &:last-child {
+            margin-right: 0.32rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages/product/rollaction.vue

@@ -0,0 +1,459 @@
+<template>
+  <div>
+    <!-- banner区域 start -->
+    <div class="swiper-container banner" id="banner">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">
+          <img src="/img/rollaction-banner.jpg" alt="" />
+        </div>
+      </div>
+      <!-- <div class="swiper-pagination"></div> -->
+    </div>
+    <!-- banner区域 end -->
+
+    <div class="main">
+      <div class="container about">
+        <div class="section-title">
+          <img src="/img/rollaction-title-equipment.png" alt="品牌设备" />
+          <h3>品牌设备</h3>
+        </div>
+        <div class="content clearfix">
+          <div class="cover fl">
+            <img src="/img/rollaction-about-cover.png" alt="" />
+          </div>
+          <div class="info fr">
+            <div class="name">Rollaction</div>
+            <div class="subname">创新理疗按摩系统</div>
+            <div class="line"></div>
+            <div class="description">
+              <p>一款创新理疗活化身体按摩系统，以其精准的力量和能量控制，让身体护理达到卓越的效果，专业手法和创新科技的结合实现对人体的护理。</p>
+              <p>以非侵入式方式启动人体代谢，干预人体血管、肌肉和皮肤系统，恢复人体内部协调性、平衡性。</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="container difference">
+        <div class="section-title">
+          <img src="/img/rollaction-title-differences.png" alt="技术区别" />
+          <h3>技术区别</h3>
+        </div>
+        <div class="content">
+          <div class="section">
+            <div class="cover">
+              <img src="/img/rollaction-difference-01.png" alt="其他设备技术：抽吸" />
+            </div>
+            <div class="info">
+              <div class="title">其他设备技术：抽吸</div>
+              <div class="description">传统仪器对皮肤表面进行夹、抽、吸等机械牵引动作进行按摩无法抵达组织深层，甚至造成萎缩</div>
+            </div>
+          </div>
+          <div class="section">
+            <div class="cover only-mobile">
+              <img src="/img/rollaction-difference-02.png" alt="Rollaction技术：按压" />
+            </div>
+            <div class="info">
+              <div class="title">Rollaction技术：按压</div>
+              <div class="description">作用于所有深层组织且不产生任何牵引，而是通过对从皮肤到深层肌肉的所有组织进行可控的规律性按压</div>
+            </div>
+            <div class="cover only-pc">
+              <img src="/img/rollaction-difference-02.png" alt="Rollaction技术：按压" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="container effect">
+        <div class="section-title">
+          <img src="/img/rollaction-title-effect.png" alt="技术区别" />
+          <h3>作用</h3>
+        </div>
+        <div class="content">
+          <div class="section">
+            <div class="info">
+              <div class="title">紧致皮肤</div>
+              <div class="description">Rollaction直接作用于深层脂肪，淡化橘皮纹</div>
+            </div>
+            <div class="cover">
+              <img src="/img/rollaction-effect-01.png" alt="紧致皮肤" />
+            </div>
+          </div>
+          <div class="section">
+            <div class="info">
+              <div class="title">塑形</div>
+              <div class="description">探头的滚动旋转动作溶解积聚的脂肪，并加速其通过淋巴 管排出</div>
+            </div>
+            <div class="cover">
+              <img src="/img/rollaction-effect-01.png" alt="塑形" />
+            </div>
+          </div>
+          <div class="section">
+            <div class="info">
+              <div class="title">紧实</div>
+              <div class="description">肌肉痉挛压迫到血管，阻止血液顺利到达组织。深层的理 疗活性按摩能够提供足够氧气和营养，滋养修复肌肉纤维</div>
+            </div>
+            <div class="cover">
+              <img src="/img/rollaction-effect-01.png" alt="紧实" />
+            </div>
+          </div>
+          <div class="section">
+            <div class="info">
+              <div class="title">血液系统</div>
+              <div class="description">通过机械刺激，血管壁中的肌肉纤维被激活。血液供应的 增加促进了代谢，从而改善循环系统</div>
+            </div>
+            <div class="cover">
+              <img src="/img/rollaction-effect-01.png" alt="血液系统" />
+            </div>
+          </div>
+          <div class="section">
+            <div class="info">
+              <div class="title">护理效果</div>
+              <div class="description">
+                错误姿势、久坐不动的生活方式、肌肉损伤等都会导致肌肉痉挛，阻碍供氧途。Rollaction作用于整个肌肉区域，其旋转滚动和渐进施压，有助于恢复护理区域的血液循环和神经冲动
+              </div>
+            </div>
+            <div class="cover">
+              <img src="/img/rollaction-effect-01.png" alt="护理效果" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  head() {
+    return {
+      title: '首页-艾斯佰丽官网-产品系列-ROLLACTION',
+    }
+  },
+  mounted() {
+    var bannerSwiper = new Swiper('#banner', {
+      loop: false, // 循环模式选项
+      // 如果需要分页器
+      pagination: {
+        el: '.swiper-pagination',
+      },
+    })
+  },
+}
+</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: #b62d1a;
+          font-weight: bold;
+        }
+        .subname {
+          font-size: 30px;
+          margin-top: 15px;
+        }
+        .line {
+          width: 36px;
+          height: 7px;
+          background: #b62d1a;
+          margin: 20px 0 30px;
+        }
+        .description {
+          text-align: justify;
+          word-break: break-all;
+          line-height: 36px;
+          p {
+            margin-top: 24px;
+            font-size: 20px;
+          }
+        }
+      }
+    }
+
+    .difference {
+      .content {
+        .section {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          background-color: #eeeeee;
+          padding: 20px;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          margin-top: 44px;
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          .cover {
+            -ms-flex-negative: 0;
+            flex-shrink: 0;
+            img {
+              display: -webkit-box;
+              display: -ms-flexbox;
+              display: flex;
+              width: 450px;
+            }
+          }
+
+          &:nth-child(2n-1) {
+            .info {
+              margin-left: 60px;
+              margin-right: 30px;
+            }
+          }
+
+          &:nth-child(2n) {
+            .info {
+              margin-right: 60px;
+              margin-left: 30px;
+            }
+          }
+
+          .info {
+            -webkit-box-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+            -ms-flex-negative: 0;
+            flex-shrink: 0;
+
+            .title {
+              color: #b62d1a;
+              font-size: 37px;
+              font-weight: bold;
+            }
+            .description {
+              font-size: 27px;
+              color: #434343;
+              line-height: 38px;
+              margin-top: 38px;
+            }
+          }
+        }
+      }
+    }
+
+    .effect {
+      .content {
+        .section {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-pack: justify;
+          -ms-flex-pack: justify;
+          justify-content: space-between;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          margin-top: 24px;
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          .cover {
+            -ms-flex-negative: 0;
+            flex-shrink: 0;
+            img {
+              display: -webkit-box;
+              display: -ms-flexbox;
+              display: flex;
+              width: 388px;
+            }
+          }
+
+          .info {
+            -webkit-box-flex: 1;
+            -ms-flex: 1;
+            flex: 1;
+            -ms-flex-negative: 0;
+            flex-shrink: 0;
+            margin: 0 60px;
+
+            .title {
+              color: #b62d1a;
+              font-size: 34px;
+              font-weight: bold;
+            }
+            .description {
+              font-size: 27px;
+              color: #434343;
+              line-height: 40px;
+              margin-top: 38px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .main {
+    .about {
+      .content {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        .cover {
+          margin-top: 0.4rem;
+          img {
+            display: block;
+            width: 5.46rem;
+            height: 5.57rem;
+          }
+        }
+
+        .info {
+          width: 6.5rem;
+          margin: 0 auto;
+          .name {
+            font-size: 0.34rem;
+            color: #b62d1a;
+            text-align: center;
+            font-weight: bold;
+          }
+          .subname {
+            font-size: 0.26rem;
+            margin-top: 0.16rem;
+            text-align: center;
+          }
+          .line {
+            width: 0.4rem;
+            height: 0.06rem;
+            background: #b62d1a;
+            margin: 0.32rem auto;
+          }
+          .description {
+            text-align: justify;
+            word-break: break-all;
+            color: #333333;
+            text-align: center;
+            p {
+              font-size: 0.26rem;
+              line-height: 0.48rem;
+            }
+          }
+        }
+      }
+    }
+
+    .difference {
+      .content {
+        .section {
+          width: 6.86rem;
+          background-color: #eeeeee;
+          padding: 0.4rem 0.7rem;
+          -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+          margin: 0 auto;
+          margin-top: 0.32rem;
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          .cover {
+            img {
+              display: block;
+              width: 4.5rem;
+              margin: 0 auto;
+            }
+          }
+
+          .info {
+            .title {
+              color: #b62d1a;
+              font-size: 0.3rem;
+              font-weight: bold;
+              margin: 0.4rem 0 0.32rem;
+              text-align: center;
+            }
+            .description {
+              font-size: 0.26rem;
+              color: #333;
+              line-height: 0.48rem;
+              text-align: center;
+            }
+          }
+        }
+      }
+    }
+
+    .effect {
+      .content {
+        .section {
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: flex;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: reverse;
+          -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          align-items: center;
+          width: 5.98rem;
+          margin: 0 auto;
+          text-align: center;
+          margin-top: 0.8rem;
+
+          &:first-child {
+            margin-top: 0;
+          }
+
+          .cover {
+            img {
+              width: 3.88rem;
+            }
+          }
+
+          .info {
+            .title {
+              color: #b62d1a;
+              font-size: 0.3rem;
+              font-weight: bold;
+              margin: 0.24rem 0 0.16rem;
+            }
+            .description {
+              font-size: 0.26rem;
+              color: #333;
+              line-height: 0.48rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

store/README.md

@@ -0,0 +1,10 @@
+# STORE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Vuex Store files.
+Vuex Store option is implemented in the Nuxt.js framework.
+
+Creating a file in this directory automatically activates the option in the framework.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).