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

<template>
  <div>
    <!-- 广告位 start-->
    <div class="advertising">
      <div class="video-container" id="videoPlayer">
        <!-- <video src="/media/binary_premium.mp4" poster="/img/about-cover-video.png"></video>
        <div class="play"></div> -->
        <!-- banner区域 start -->
        <div id="banner" class="swiper-container banner">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="/img/about-banner-01.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="/img/about-banner-02.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="/img/about-banner-03.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="/img/about-banner-04.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="/img/about-banner-05.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="/img/about-banner-06.png" alt="" />
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <!-- banner区域 end -->
      </div>
    </div>
    <!-- 广告位 end -->

    <div class="main">
      <div class="container about">
        <div class="section-title">
          <img src="/img/about-title-company.png" alt="" />
          <h3>公司介绍</h3>
        </div>
        <div class="content">
          <div class="section">
            <div class="name">Acebelle生物科技(深圳)有限公司</div>
            <div class="subtitle">ROS'S中国总代理<br/>成立于2016年<br />全球高端智能体疗设备整合服务商</div>
            <div class="description">
              致力于国际智能体疗先进设备项目的引进与研发，集项目输出、品牌推广、运营策划、终端服务等多项业务为一体拥有资深的销售专家及售后管理团队，旗下主营来自西班牙倍受美容养生界青睐的ROS'S系列产品和项目。
            </div>
          </div>
        </div>
      </div>

      <div class="container chairman">
        <div class="section-title">
          <img src="/img/about-title-president.png" alt="" />
          <h3>总裁简介</h3>
        </div>
        <div class="content clearfix">
          <div class="cover fl">
            <img src="/img/about-cover-president.png" alt="" />
          </div>
          <div class="info fl">
            <div class="name">刘聪</div>
            <div class="name-en">Chris Liu</div>
            <div class="tip">深圳艾斯佰丽集团创始人<span>|</span>西班牙ROS'S品牌大中华区执行总裁</div>
            <div class="line"></div>
            <div class="description">
              Chris自入行以来一直深耕智能体疗领域，秉承“无运动，不体疗”的宗旨和理念，把科技创新作为市场竞争的第一要素，2019年将具有44年历史的西班牙RÖS'S品牌引进中国，是国内开创“云智能体疗管理系统”第一人，RÖS'S品牌进入中国市场以来，凭借自身多项黑科技的魅力，获得了国内客户的追捧和热爱，极大地推动了国内智能体疗领域的发展，荣获CIBE最具影响力品牌。
            </div>
          </div>
        </div>
      </div>

      <div class="container culture">
        <div class="section-title">
          <img src="/img/about-title-culture.png" alt="企业文化" />
          <h3>企业文化</h3>
        </div>
        <div class="content clearfix">
          <ul class="info fl">
            <li>我们的企业愿景：成为全球最专业的智能体疗企业！</li>
            <li>我们的核心价值观：诚信 责任 专业</li>
            <li>我们的人才观：品德 价值观 信念 能力</li>
            <li>我们的经营理念：科技领先 服务至上 营销创新 品牌制胜</li>
            <li>我们的服务理念：员工比客户更重要，服务好员工才能服务好客户</li>
            <li>我们的职责：对公司负责、对客户负责、对自己负责！</li>
            <li>我们的要求是：团队、纪律、奋斗！</li>
            <li>我们的形象是：热情、有激情、绝对专业！</li>
            <li>我们不要做的是：浪费时间！</li>
            <li>我们要做的是：主动，主动，再主动！</li>
            <li>我们要实践的是：付出行动，奋斗、奋斗、再奋斗！</li>
          </ul>
          <div class="cover fr">
            <img src="/img/about-cover-culture.png" alt="企业文化" class="only-pc" />
            <img src="/img/h5-about-cover-culture.png" alt="企业文化" class="only-mobile" />
          </div>
        </div>
      </div>

      <div class="container history">
        <div class="section-title">
          <img src="/img/about-title-history.png" alt="" />
          <h3>发展历程</h3>
        </div>
        <div class="content clearfix">
          <div class="info fl">
            <dl>
              <dt>2019底</dt>
              <dd>ACEBELLE生物科技（深圳）有限公司成为ROS'S中国区总代理</dd>
            </dl>
            <dl>
              <dt>2020</dt>
              <dd>第一次参加第54届中国（上海）国际美博会，ACEBELLE强势入驻，西班 牙ROS'S正式亮相，获得《2020美业卓越之星》</dd>
              <dd>参加第55届中国（广州）国际美博会</dd>
              <dd>参加第2届中国（深圳）国际美博会，获得《中国美业杰出贡献奖》</dd>
            </dl>
            <dl>
              <dt>2021</dt>
              <dd>参加第56届中国（广州）国际美博会</dd>
              <dd>参加第57届中国（上海）上海美博会，获得《CIBE影响力品牌》</dd>
              <dd>参加第58届中国（广州）国际美博会，Binary Premium升级4.0版本</dd>
              <dd>参加厦门SpaChina中国养生与水疗峰会，Chris Liu参加总裁分享“生美器材”，受邀颁奖（年度匠心疗程大奖》——戴西Spa</dd>
              <dd>《SpaChina》专访西班牙ROS'S</dd>
            </dl>
            <dl>
              <dt>2022</dt>
              <dd>参加第59届中国（广州）国际美博会</dd>
              <dd>在青岛瑞吉酒店参加SpaChina2022中国养生与水疗峰会，Chris Liu 参加总裁分享“Spa器材与疗法新动向”</dd>
              <dd>《SpaChina》专访西班牙ROS'S总部</dd>
            </dl>
          </div>
          <div class="cover fr">
            <img src="/img/about-history-1.png" alt="" />
            <img src="/img/about-history-2.png" alt="" />
            <img src="/img/about-history-3.png" alt="" />
            <img src="/img/about-history-4.png" alt="" />
            <img src="/img/about-history-5.png" alt="" />
            <img src="/img/about-history-6.png" alt="" />
            <img src="/img/about-history-7.png" alt="" />
          </div>
        </div>
      </div>

      <div class="container device">
        <div class="section-title">
          <img src="/img/about-title-equipment.png" alt="" />
          <h3>部分设备</h3>
        </div>
        <div class="content">
          <div class="scroll-box only-mobile">
            <img src="/img/about-equipment-1.png" alt="" />
            <img src="/img/about-equipment-2.png" alt="" />
            <img src="/img/about-equipment-3.png" alt="" />
            <img src="/img/about-equipment-4.png" alt="" />
            <img src="/img/about-equipment-5.png" alt="" />
            <img src="/img/about-equipment-6.png" alt="" />
          </div>
          <div class="swiper-container only-pc" id="deviceSwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="/img/about-equipment-1.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="/img/about-equipment-2.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="/img/about-equipment-3.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="/img/about-equipment-4.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="/img/about-equipment-5.png" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="/img/about-equipment-6.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: '首页-艾斯佰丽官网-艾斯佰丽',
    }
  },
  mounted() {
    new Swiper('#banner', {
      loop: true, // 循环模式选项
      autoplay: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
    })

    new Swiper('#deviceSwiper', {
      loop: true, // 循环模式选项
      autoplay: true,
      slidesPerView: 6,
      spaceBetween: 15,
    })

    // 关于疗法 手风琴效果
    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/about-banner.png) no-repeat;
    background-position: top center;

    .video-container {
      position: relative;
      width: 960px;
      height: 540px;
      margin: 0 auto;
      margin-top: 433px;

      .swiper-container {
        width: 100%;
        height: 100%;

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

      .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 {
        height: 540px;
        background: url(/img/about-bg-company.png);
        background-size: 1200px 540px;
        overflow: hidden;
        .section {
          width: 420px;
          margin: 63px 0 0 32px;
          .name {
            font-size: 27px;
            font-weight: 800;
            color: #ffffff;
          }
          .subtitle {
            font-size: 21px;
            font-weight: 300;
            color: #ffffff;
            line-height: 40px;
            margin: 10px 0 40px;
          }
          .description {
            font-size: 21px;
            font-weight: 300;
            color: #ffffff;
            line-height: 36px;
            text-align: justify;
          }
        }
      }
    }

    .chairman {
      .cover {
        img {
          display: block;
          width: 470px;
          height: 480px;
        }
      }
      .info {
        width: 670px;
        padding-top: 20px;
        margin-left: 50px;
        .name {
          font-size: 42px;
          color: #f3920d;
        }
        .name-en {
          font-size: 25px;
          color: #000000;
          margin-top: 4px;

          span {
            font-size: 38px;
            color: #f3920d;
            font-weight: normal;
          }
        }
        .tip {
          font-size: 25px;
          color: #000;
          margin-top: 19px;
          line-height: 38px;
          span {
            margin: 0 16px;
          }
        }
        .line {
          width: 36px;
          height: 7px;
          background: #f3920d;
          margin: 20px 0 37px;
        }
        .description {
          font-size: 20px;
          color: #000;
          line-height: 38px;
          text-align: justify;
        }
      }
    }

    .history {
      .content {
        .cover {
          img {
            display: block;
            margin: 16px 0;
          }
        }

        .info {
          position: relative;

          &::before {
            content: '';
            display: block;
            width: 1px;
            height: 100%;
            background: #000;
            position: absolute;
            left: 0;
            top: 30px;
          }
          dl {
            margin: 0;
            margin-bottom: 40px;
            &:last-child {
              margin-bottom: 0;
            }
          }
          dt,
          dd {
            margin: 0;
          }

          dt {
            font-size: 42px;
            font-weight: 800;
            color: #000000;
            margin-bottom: 20px;
            margin-left: 27px;

            position: relative;

            &::before {
              content: '';
              display: block;
              width: 20px;
              height: 20px;
              background: #e5e5e5;
              border: 1px solid #090103;
              box-sizing: border-box;
              position: absolute;
              left: -37px;
              top: 50%;
              transform: translateY(-50%);
              border-radius: 50%;
            }

            &::after {
              content: '';
              display: block;
              width: 10px;
              height: 10px;
              background: #000;
              position: absolute;
              left: -32px;
              top: 50%;
              transform: translateY(-50%);
              border-radius: 50%;
            }
          }

          dd {
            position: relative;
            width: 817px;
            font-size: 25px;
            font-weight: 400;
            color: #000000;
            line-height: 50px;
            text-align: justify;
            margin-left: 70px;
            word-break: break-all;

            &::before {
              content: '';
              display: block;
              width: 45px;
              height: 1px;
              background: #000;
              position: absolute;
              top: 25px;
              left: -70px;
            }

            &::after {
              content: '';
              display: block;
              width: 6px;
              height: 6px;
              background: #000;
              position: absolute;
              top: 23px;
              left: -27px;
              border-radius: 50%;
            }
          }
        }
      }
    }

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

    .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/about-banner.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;

      .swiper-container {
        width: 100%;
        height: 100%;

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

      .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 {
      .content {
        width: 6.86rem;
        height: 10.3rem;
        margin: 0 auto;
        background: url(/img/h5-about-bg-company.png);
        background-size: 6.86rem 10.3rem;
        overflow: hidden;
        .section {
          width: 6rem;
          margin: 0 auto;
          .name {
            font-size: 0.32rem;
            font-weight: 800;
            color: #ffffff;
            text-align: center;
            margin-top: 0.48rem;
          }
          .subtitle {
            font-size: 0.24rem;
            font-weight: lighter;
            color: #ffffff;
            line-height: 0.42rem;
            margin: 0.32rem 0 0.48rem;
            text-align: center;
          }
          .description {
            font-size: 0.26rem;
            font-weight: 300;
            color: #ffffff;
            line-height: 0.48rem;
            text-align: center;
          }
        }
      }
    }

    .chairman {
      .content {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        width: 6rem;
        margin: 0 auto;
      }

      .cover {
        float: unset !important;
        margin-top: 0.4rem;
        img {
          display: block;
          width: 5.46rem;
          height: 5.57rem;
        }
      }
      .info {
        float: unset !important;
        text-align: center;
        .name {
          font-size: 0.3rem;
          color: #f3920d;
          font-weight: bold;
        }
        .name-en {
          font-size: 0.26rem;
          color: #666;
          margin-top: 0.04rem;
        }
        .tip {
          font-size: 0.26rem;
          color: #000;
          margin-top: 0.16rem;
          line-height: 0.44rem;
          span {
            font-size: 0;
            display: block;
            line-height: 0;
          }
        }
        .line {
          width: 0.4rem;
          height: 0.06rem;
          background: #f3920d;
          margin: 0.4rem auto;
        }
        .description {
          font-size: 0.26rem;
          color: #000;
          line-height: 0.48rem;
          text-align: center;
        }
      }
    }

    .history {
      .content {
        width: 6.74rem;
        margin: 0 auto;
        .cover {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin-top: 0.4rem;
          img {
            width: 2.18rem;
            display: block;
            margin-top: 0.1rem;
          }
        }

        .info {
          position: relative;

          &::before {
            content: '';
            display: block;
            width: 0.01rem;
            height: 100%;
            background: #000;
            position: absolute;
            left: 0;
            top: 0.1rem;
          }
          dl {
            margin: 0;
            margin-bottom: 0.4rem;
            &:last-child {
              margin-bottom: 0;
            }
          }
          dt,
          dd {
            margin: 0;
          }

          dt {
            font-size: 0.26rem;
            font-weight: 800;
            color: #000000;
            margin-bottom: 0.16rem;
            margin-left: 0.34rem;

            position: relative;

            &::before {
              content: '';
              display: block;
              width: 0.21rem;
              height: 0.21rem;
              background: #e5e5e5;
              border: 0.01rem solid #090103;
              box-sizing: border-box;
              position: absolute;
              left: -0.42rem;
              top: 50%;
              transform: translateY(-50%);
              border-radius: 50%;
            }

            &::after {
              content: '';
              display: block;
              width: 0.09rem;
              height: 0.09rem;
              background: #000;
              position: absolute;
              left: -0.36rem;
              top: 50%;
              transform: translateY(-50%);
              border-radius: 50%;
            }
          }

          dd {
            position: relative;
            font-size: 0.26rem;
            font-weight: 400;
            color: #000000;
            line-height: 0.48rem;
            text-align: justify;
            margin-left: 0.74rem;
            word-break: break-all;

            &::before {
              content: '';
              display: block;
              width: 0.62rem;
              height: 0.01rem;
              background: #000;
              position: absolute;
              top: 0.24rem;
              left: -0.74rem;
            }

            &::after {
              content: '';
              display: block;
              width: 0.07rem;
              height: 0.07rem;
              background: #000;
              position: absolute;
              top: 0.22rem;
              left: -0.18rem;
              border-radius: 50%;
            }
          }
        }
      }
    }

    .culture {
      .content {
        width: 6.55rem;
        margin: 0 auto;
        .info {
          float: unset !important;
          font-size: 0.26rem;
          font-weight: 400;
          color: #000000;
          line-height: 0.48rem;
        }

        .cover {
          float: unset !important;
          margin-top: 0.4rem;

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

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