FE_huoran_client/src/pages/aboutUs/index.vue

<template>
  <div class="wrap index">
    <el-carousel v-if="modules[0].list.length && modules[0].list.filter(e => e.isEnable).length" class="carousel"
      :interval="6000" height="480px" :arrow="(modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
      :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
      <template v-for="(item, i) in modules[0].list">
        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
          <div v-if="isImg(item.mediaType)" class="pic" :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div>
          <video v-else class="pic" width="100%" height="100%" autoplay muted loop>
            <source :src="item.pic" type="video/mp4">
            您的浏览器不支持 video 标签。
          </video>
          <div class="text-wrap">
            <div class="text" v-html="item.des"></div>
            <div v-if="!GTA" class="qrcodes fadeInUp">
              <div class="qrcode">
                <img width="103" :src="item.weixinPic1" alt="">
                <p class="text">{{ item.weixinText1 }}</p>
              </div>
              <div class="qrcode m-l-30">
                <img width="103" :src="item.weixinPic2" alt="">
                <p class="text">{{ item.weixinText2 }}</p>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </template>
    </el-carousel>

    <div v-else class="banner fadeInUp">
      <img class="texts" src="https://huorantech.com/images/about/banner-text.png" alt="">
      <div v-if="!GTA" class="qrcodes">
        <div class="qrcode">
          <img width="103" src="https://huorantech.com/images/about/qrcode.jpg" alt="">
          <p class="text">扫一扫，关注公众号</p>
        </div>
        <div class="qrcode m-l-30">
          <img width="103" src="@/assets/images/mini-program-sm.jpg" alt="">
          <p class="text">扫一扫，登录职站商城</p>
        </div>
      </div>
    </div>

    <div class="intro">
      <div class="inner">
        <div class="pics">
          <div class="text">
            <div class="title-wrap">
              <p class="title fadeInLeft">{{ modules[1].form.title }}</p>
              <p class="brief fadeInLeft">{{ modules[1].form.subTitle1 }}</p>
              <p class="en fadeInRight">{{ modules[1].form.subTitle2 }}</p>
            </div>
            <div class="desc animate" v-html="modules[1].form.des"></div>
          </div>
          <img class="bg fadeInRight" :src="modules[1].form.pic" alt="">
        </div>
      </div>
    </div>
    <div class="service-intro">
      <div class="inner">
        <h6>{{ modules[2].form.title }}</h6>
        <p class="text">{{ modules[2].form.des }}</p>
      </div>
    </div>
    <div class="culture">
      <div class="inner">
        <h6 class="i-title animate">{{ modules[3].form.title }}</h6>
        <p class="en fadeInUp">{{ modules[3].form.des }}</p>
        <ul class="list">
          <template v-for="(item, i) in modules[4].list">
            <li v-if="item.isEnable" :key="i" class="fadeInUp">
              <img :src="item.pic" alt="">
              <h6>{{ item.title }}</h6>
              <div class="text" v-html="item.des"></div>
            </li>
          </template>
        </ul>
      </div>
    </div>

    <!-- 为什么加入我们 -->
    <div class="adv" id="part2">
      <div class="inner">
        <h6 class="i-title animate">{{ modules[5].form.title }}</h6>
        <p class="en fadeInUp">{{ modules[5].form.subTitle }}</p>
        <p class="title-des animate">{{ modules[5].form.des }}</p>

        <ul class="list">
          <template v-for="(item, i) in modules[6].list">
            <li v-if="item.isEnable" :key="i" class="fadeInUp">
              <img :src="item.pic" alt="">
              <h6>{{ item.title }}</h6>
              <div class="text" v-html="item.des"></div>
            </li>
          </template>
        </ul>
      </div>
    </div>
    <!-- 合作客户 -->
    <div class="client">
      <div class="inner">
        <h6 class="i-title animate">{{ modules[7].form.title }}</h6>
        <p class="en fadeInUp">{{ modules[7].form.subTitle }}</p>
        <p class="title-des animate">{{ modules[7].form.des }}</p>


        <el-carousel class="carousel" height="372px" :interval="6000"
          :arrow="(modules[8] && modules[8].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
          :indicator-position="modules[8].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
          <template v-for="(item, i) in modules[8].list">
            <el-carousel-item v-if="item.isEnable" :key="i">
              <div class="client-pic" :class="{ 'cursor-pointer': isLink(item.link.linkName) }" @click="openLink(item)">
                <img class="bg fadeInLeft" :src="item.pic" alt="">
                <div class="text fadeInRight">
                  <div class="c-title1">
                    <img src="https://huorantech.com/images/index/comma1.png" alt="">
                    {{ item.title }}
                  </div>
                  <div class="text" v-html="item.des"></div>
                  <div class="c-title2">
                    {{ item.subTitle }}
                    <img src="https://huorantech.com/images/index/comma2.png" alt="">
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </template>
        </el-carousel>


        <scroll class="clients" :data="clients" :class-option="{ limitMoveNum: 2, direction: 2 }">
          <ul class="client-list" ref="client">
            <template v-for="item in modules[9].list">
              <li v-if="item.isEnable" :key="item">
                <img :src="item.pic" alt="">
              </li>
            </template>
          </ul>
        </scroll>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins/page'
import Util from '@/libs/util'
import scroll from 'vue-seamless-scroll'
import ScrollReveal from 'scrollreveal'
export default {
  mixins: [mixins],
  data () {
    return {
      isImg: Util.isImg,
      active: '',
      clients: [1, 2, 3, 4, 5],
      sr: null,
    }
  },
  components: {
    scroll
  },
  mounted () {

  },
  methods: {
    // 初始化动画
    initAnimate () {
      const sr = ScrollReveal()
      sr.reveal('.animate', {
        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
        // origin: 'bottom', // 动画开始的方向
        distance: '50px',//移动距离
        duration: 1000, // 动画持续时间
        scale: 0.8,
        // viewFactor: 100,
      })

      sr.reveal('.fadeInUp', {
        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
        origin: 'top', // 动画开始的方向
        distance: '100px',//移动距离
        duration: 1000, // 动画持续时间
        // scale: 0.8,
        // viewFactor: 100,
      })

      sr.reveal('.fadeInDown', {
        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
        origin: 'bottom', // 动画开始的方向
        distance: '100px',//移动距离
        duration: 1000, // 动画持续时间
        // scale: 0.8,
        // viewFactor: 100,
      })

      sr.reveal('.fadeInLeft', {
        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
        origin: this.$store.getters.getModelType ? 'left' : 'top', // 动画开始的方向
        distance: '100px',//移动距离
        duration: 1000, // 动画持续时间
        // scale: 0.8,
        // viewFactor: 100,
      })

      sr.reveal('.fadeInRight', {
        reset: true, // 滚动鼠标时，动画开关（如果为true, 动画可以执行n次）
        origin: this.$store.getters.getModelType ? 'right' : 'bottom', // 动画开始的方向
        distance: '100px',//移动距离
        duration: 1000, // 动画持续时间
        // scale: 0.8,
        // viewFactor: 100,
      })
    },
    // 获取文章详情
    getInfo () {
      // 预览/详情
      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
        if (data.length) {
          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
          const json = JSON.parse(this.preview ?
            data :
            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
          this.modules = json
          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
          this.$nextTick(this.initAnimate)
        }
      }).catch(err => { })
    },
    // 问卷调查
    toQues () {
      window.open('https://www.wjx.cn/vm/wB0RcMm.aspx')
    },
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  position: relative;
  background-color: #f9f9f9;

  .banner {
    position: relative;
    height: 480px;
    padding: 110px 0 0 165px;
    background: url(https://huorantech.com/images/about/banner1.png) 0 0 / auto no-repeat,
      url(https://huorantech.com/images/about/banner2.png) (90% 37px) / auto no-repeat;
    background-color: #0f5bed;

    .qrcodes {
      display: flex;
      margin-top: 25px;
    }
  }

  .carousel {
    .pic {
      height: 100%;
      background-position: center center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    /deep/.el-carousel__container {
      height: 100%;
    }

    .text-wrap {
      position: absolute;
      top: 50%;
      left: 165px;
      color: #fff;
      transform: translateY(-50%);
    }

    .qrcodes {
      display: flex;
      margin-top: 10px;
    }
  }

  .qrcode {
    text-align: center;

    .text {
      margin-top: 10px;
      font-size: 12px;
      color: #fff;
      white-space: nowrap;
    }
  }

  .i-title {
    z-index: 1;
    position: relative;
    margin-bottom: 37px;
    font-size: 30px;
    text-align: center;
    color: #0b1d30;

    &:after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      width: 30px;
      height: 4px;
      transform: translate(-50%);
      background-color: #006eff;
    }
  }

  .inner {
    position: relative;
    width: 1200px;
    padding: 107px 0 87px;
    margin: 0 auto;
  }

  .en {
    position: absolute;
    top: 80px;
    left: 50%;
    width: 100%;
    text-align: center;
    font-size: 46px;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #d4daea;
    transform: translate(-50%);
  }

  .title-des {
    margin: -10px 0 40px;
    font-size: 18px;
    text-align: center;
    color: #5a6b7e;
  }

  .pics {
    display: flex;
    justify-content: space-between;

    .text {
      width: 470px;
    }

    .title-wrap {
      position: relative;
    }

    .title {
      z-index: 2;
      position: relative;
      font-size: 30px;
      color: #0b1d30;
      font-weight: bold;
    }

    .brief {
      margin: 20px 0 30px;
      font-size: 24px;
      color: #0b1d30;
    }

    .en {
      top: -30px;
      text-align: left;
      color: #e5e5e5;
    }

    .desc {
      font-size: 15px;
      color: #535c6e;
      line-height: 25px;
    }
  }

  .service-intro {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 153px;
    margin-top: -240px;
    color: #fff;
    background: url(https://huorantech.com/images/about/about2.png) 0 0 / cover no-repeat;

    .inner {
      padding: 0;
    }

    h6 {
      margin-bottom: 15px;
      font-size: 26px;
    }

    .text {
      font-size: 16px;
    }
  }

  .culture {
    position: relative;
    background: #fff url(https://huorantech.com/images/about/about3.png) 0 0/100% 100% no-repeat;

    .inner {
      padding-bottom: 112px;
    }

    .list {
      display: flex;
      margin: 80px 0 20px;

      li {
        width: 33.33%;
        padding: 50px 35px 74px;
        margin-right: 57px;
        text-align: center;
        box-shadow: 0px 6px 11px 0px rgba(193, 202, 217, 0.38);
        border-radius: 8px;
        background-color: #f9faff;
        border: 2px solid #ffffff;

        &:last-child {
          margin-right: 0;
        }

        &:hover {
          img {
            transform: rotateY(180deg);
          }

          .text {
            transform: scale(1.1);
          }
        }
      }

      img {
        width: 70px;
        transition: 0.6s;
      }

      h6 {
        margin: 10px 0 16px;
        font-size: 26px;
        line-height: 28px;
        color: #0b1d30;
        transition: 0.3s;
      }

      .text {
        font-size: 14px;
        color: #637493;
        transition: 0.3s;
      }
    }
  }

  .progress {
    .inner {
      width: auto;
    }

    .list {
      display: flex;
      justify-content: center;
      margin-top: 200px;
    }

    li {
      position: relative;
      max-width: 180px;
      margin-right: 80px;
      text-align: center;

      h6 {
        margin: 20px 0 10px;
        font-size: 40px;
        font-family: dinBold;
        font-weight: bold;
        color: #2d67f6;
        line-height: 48px;
      }

      .text {
        font-size: 15px;
        color: #565656;
      }

      &:after {
        content: '';
        position: absolute;
        top: 9px;
        left: 76px;
        width: 168px;
        height: 1px;
        border: 3px solid;
        border-image: linear-gradient(209deg, rgba(32, 101, 255, 0.01), rgba(32, 101, 255, 1), rgba(32, 101, 255, 0)) 3 3;
      }

      &:nth-child(2) {
        margin-right: 75px;

        &:after {
          left: 82px;
        }
      }

      &:nth-child(3) {
        margin-right: 67px;

        &:after {
          left: 93px;
        }
      }

      &:nth-child(4) {
        margin-right: 51px;
      }

      &:nth-child(5) {
        margin-right: 27px;

        &:after {
          left: 108px;
        }
      }

      &:last-child {
        margin-right: 0;
      }

      &:nth-child(even) {
        margin-top: -130px;

        .arrow {
          transform: rotateX(180deg);
        }

        .text {
          margin: 10px 0 20px;
        }

        &:after {
          top: 139px;
        }
      }

      &:last-child:after {
        display: none;
      }
    }
  }

  .about {
    padding: 130px 0 200px;
    background: url(https://huorantech.com/images/index/about2.png) (bottom right) / auto no-repeat,
      url(https://huorantech.com/images/index/about1.png) 0 0 / cover no-repeat;

    .inner {
      padding: 0;
    }

    .a-title {
      z-index: 2;
      position: relative;
      font-size: 30px;
      color: #fff;

      &:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 30px;
        height: 4px;
        background-color: #fff;
      }
    }

    .a-en {
      position: absolute;
      top: -28px;
      font-size: 46px;
      color: #b6c4d9;
      opacity: 0.7;
    }

    .a-gene {
      margin: 50px 0 30px;
      font-size: 34px;
      line-height: 58px;
      color: #fff;
    }

    .text {
      width: 800px;
      font-size: 18px;
      line-height: 33px;
      color: #fff;
    }
  }

  .adv {
    position: relative;
    background: #fff url(https://huorantech.com/images/index/index7.png) 0 0/100% 100% no-repeat;

    .list {
      display: flex;

      li {
        width: 33.33%;
        padding: 107px 35px 30px;
        margin-right: 57px;
        text-align: center;
        box-shadow: 0px 6px 11px 0px rgba(193, 202, 217, 0.38);
        border-radius: 8px;
        background-color: #f9faff;
        border: 2px solid #ffffff;

        &:last-child {
          margin-right: 0;
        }

        &:hover {
          img {
            transform: rotateY(180deg);
          }

          h6 {
            transform: scale(1.1);
          }
        }
      }

      img {
        width: 70px;
        transition: 0.6s;
      }

      h6 {
        margin: 10px 0 16px;
        font-size: 26px;
        line-height: 28px;
        color: #0b1d30;
        transition: 0.3s;
      }

      .text {
        font-size: 14px;
        color: #637493;
        transition: 0.3s;
      }
    }
  }

  .service {
    position: relative;
    background: #0653ff url(https://huorantech.com/images/index/service4.png) 0 0/100% 100% no-repeat;

    .i-title {
      color: #fff;
    }

    .en {
      color: #467df9;
    }

    .service-pic {
      display: flex;
      align-items: center;

      .text {
        margin-left: 78px;
      }
    }

    .s-title {
      margin-bottom: 30px;
      font-size: 20px;
      color: #fff;
    }

    .service-list {
      li {
        display: flex;
        align-items: center;
        margin: 15px 0;
        font-size: 18px;
        color: #fff;

        &:before {
          content: '';
          width: 12px;
          height: 12px;
          margin-right: 26px;
          border: 2px solid #fff;
          border-radius: 50%;
        }
      }
    }

    .list {
      display: flex;

      li {
        width: 33.33%;
        padding: 50px 35px;
        margin-right: 20px;
        text-align: center;
        box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
        border-radius: 10px;
        background-color: #f9faff;

        &:last-child {
          margin-right: 0;
        }

        &:hover {
          img {
            transform: rotateY(180deg);
          }

          h6 {
            transform: scale(1.1);
          }
        }
      }

      img {
        width: 64px;
        transition: 0.6s;
      }

      h6 {
        margin: 10px 0 16px;
        font-size: 18px;
        line-height: 28px;
        color: #0b1d30;
        transition: 0.3s;
      }

      .text {
        font-size: 14px;
        color: #757f92;
      }
    }
  }

  .title-intro {
    position: relative;
    display: flex;
    align-items: flex-end;
    margin-bottom: 30px;

    .text-title {
      padding-left: 12px;
      margin-left: 12px;
      font-size: 26px;
      line-height: 1;
      color: #0b1d30;
      border-left: 1px solid #dee4f1;
    }
  }

  .product {
    background: url(https://huorantech.com/images/index/pro-bg1.png) (right 828px) / auto no-repeat,
      url(https://huorantech.com/images/index/pro-bg8.png) (left bottom) / auto no-repeat;
    background-color: #fff;

    .list {
      display: flex;
      margin: 40px 0 110px;

      li {
        width: 33.33%;
        padding: 50px 35px;
        margin-right: 20px;
        text-align: center;
        box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
        border-radius: 10px;
        background-color: #fff;

        &:last-child {
          margin-right: 0;
        }

        &:hover {
          img {
            transform: rotateY(180deg);
          }

          .text {
            transform: scale(1.1);
          }
        }
      }

      img {
        width: 70px;
        transition: 0.6s;
      }

      h6 {
        margin: 10px 0 16px;
        font-size: 18px;
        line-height: 28px;
        color: #0b1d30;
        transition: 0.3s;
      }

      .text {
        font-size: 14px;
        color: #757f92;
        transition: 0.3s;
      }
    }

    .carousel {
      width: 500px;
      margin-left: 50px;

      .car-img {
        width: 100%;
        height: 100%;
      }
    }

    .arrow {
      position: absolute;
      top: 157px;
      width: 21px;
      height: 21px;
      background: url(https://huorantech.com/images/index/arrow.png) no-repeat;
      cursor: pointer;

      &:hover {
        background-image: url(https://huorantech.com/images/index/arrow-active.png);
      }
    }

    .a-left {
      left: 32px;
      transform: rotate(180deg);
    }

    .a-right {
      right: 6px;
    }

    .pro-bg1 {
      position: relative;
      width: 594px;
      height: 365px;

      img {
        position: absolute;
        transition: 0.5s;
      }

      .bg1 {
        top: 23px;
        left: 0;
      }

      .bg2 {
        bottom: 0;
        right: 8px;
      }

      .bg3 {
        top: 256px;
        right: 0;
      }

      &:hover {
        .bg1 {
          transform: scale(1.1);
        }

        .bg2 {
          transform: scale(1.3);
        }

        .bg3 {
          transform: scale(1.3);
        }
      }
    }

    .pro-bg2 {
      position: relative;
      width: 594px;
      height: 365px;

      img {
        position: absolute;
        transition: 0.5s;
      }

      .bg1 {
        top: 23px;
        right: 0;
      }

      .bg2 {
        bottom: 0;
        left: 8px;
      }

      .bg3 {
        top: 256px;
        left: 0;
      }

      &:hover {
        .bg1 {
          transform: scale(1.1);
        }

        .bg2 {
          transform: scale(1.3);
        }

        .bg3 {
          transform: scale(1.3);
        }
      }
    }
  }

  .parner {
    background: #fff url(https://huorantech.com/images/index/parner.png) 0 0 / cover no-repeat;

    .i-title,
    .brief {
      color: #fff;
    }

    .en {
      color: #465779;
    }
  }

  .chart {
    height: 600px;
  }

  .client {
    background: url(https://huorantech.com/images/index/client.png) 0 0 / cover no-repeat;
  }

  .client-pic {
    display: flex;
    padding: 32px 55px 32px 32px;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(226, 226, 226, 0.25);

    .bg {
      width: 453px;
      height: 308px;
      margin-right: 47px;
    }

    .c-title1 {
      display: flex;
      align-items: center;
      font-size: 30px;
      color: #efefef;

      img {
        margin-right: 19px;
      }
    }

    .c-title2 {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 18px;
      color: #535c6e;

      img {
        margin-left: 19px;
      }
    }

    .text {
      margin: 22px 0;
      font-size: 18px;
      color: #535c6e;
      line-height: 33px;
    }
  }

  .clients {
    width: 1200px;
    margin-top: 30px;
    overflow: hidden;
  }

  .client-list {
    display: flex;

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

    li {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 231px;
      height: 102px;
      margin: 0 11px 11px 0;
      background-color: #fff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.04);
      border: 1px solid #ececec;
    }
  }

  .pics {
    display: flex;
    justify-content: space-between;

    .icon {
      width: 60px;
    }

    .text {
      width: 450px;
    }

    h6 {
      margin: 30px 0 10px;
      font-size: 28px;
      color: #0b1d30;
    }

    .desc {
      font-size: 15px;
      color: #0b1d30;
      line-height: 28px;
    }
  }

  .none {
    padding: 50px 0;
    text-align: center;

    img {
      width: 324px;
      margin-bottom: 42px;
    }

    .text {
      font-size: 12px;
      color: #333;
    }
  }

  @keyframes rotate {
    0% {
      transform: rotate(0);
    }

    50% {
      transform: rotate(180deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}

@media (max-width: 1730px) {
  .wrap {
    .banner {
      padding-left: 120px;
    }

    .carousel {
      .text-wrap {
        left: 120px;
      }
    }
  }
}

@media (max-width: 1200px) {
  .wrap {
    .banner {
      padding-left: 30px;
    }

    .carousel {
      .text-wrap {
        left: 30px;
      }
    }

    .inner {
      width: 90%;
    }

    .pics {
      flex-direction: column;

      .text {
        width: 100%;
        margin-bottom: 20px;
      }

      img {
        display: none;
      }
    }

    .service-intro {
      margin-top: 0;
    }

    .service {
      .service-pic {
        flex-direction: column;

        .text {
          margin: 0 0 30px 0;
        }
      }
    }

    .culture,
    .adv,
    .service,
    .product {
      .list {
        flex-direction: column;

        li {
          width: 100%;
          margin: 0 0 20px 0;
        }
      }
    }

    .adv {
      .list {
        li {
          padding-top: 30px;
        }
      }
    }

    .client-pic {
      flex-direction: column;

      .bg {
        width: auto;
        height: auto;
        max-width: 100%;
        margin-right: 0;
      }
    }

    .clients {
      width: 100%;
    }
  }
}

@media (max-width: 640px) {
  .wrap {
    .banner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 380px;
      padding: 0 30px;
      background: #0f5bed url(https://huorantech.com/images/about/banner1.png) 0 0 / auto no-repeat;

      // background-color: #0f5bed;
      .texts {
        max-width: 100%;
      }
    }
  }
}
</style>