FE_huoran_server/src/pages/column/page/aboutUs.vue

<template>
  <div class="wrap index">
    <div class="actions">
      <p class="page-name">页面设置/{{ columnName }}</p>
      <div>
        <el-button type="primary" @click="preview">预览</el-button>
        <el-button @click="save(0)">保存为草稿</el-button>
        <el-button type="primary" @click="save(1)">发布</el-button>
        <el-button @click="back">放弃编辑</el-button>
      </div>
    </div>

    <div class="modules">
      <div class="relative">
        <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">
                  <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">
          <img class="texts" src="https://huorantech.com/images/about/banner-text.png" alt="">
          <div 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="cover" @click="toSet(0)">点击更换banner与链接</div>
      </div>
      <div class="intro">
        <div class="inner">
          <div class="pics c-wrap">
            <div class="text">
              <div class="title-wrap">
                <p class="title">{{ modules[1].form.title }}</p>
                <p class="brief">{{ modules[1].form.subTitle1 }}</p>
                <p class="en">{{ modules[1].form.subTitle2 }}</p>
              </div>
              <div class="desc wow fadeInLeft" v-html="modules[1].form.des"></div>
            </div>
            <img class="bg" :src="modules[1].form.pic" alt="">
            <div class="cover" style="height: 360px;" @click="toSet(1)">点击更改图片、标题概述与链接</div>
          </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 class="cover" @click="toSet(2)">点击更换标题与描述</div>
        </div>
      </div>
      <div class="culture">
        <div class="inner">
          <div class="c-wrap" style="height: 150px">
            <h6 class="i-title wow fadeInDown">{{ modules[3].form.title }}</h6>
            <p class="en">{{ modules[3].form.des }}</p>
            <div class="cover" @click="toSet(3)">点击更换标题与描述</div>
          </div>
          <ul class="list c-wrap">
            <template v-for="(item, i) in modules[4].list">
              <li v-if="item.isEnable" :key="i">
                <img :src="item.pic" alt="">
                <h6>{{ item.title }}</h6>
                <div class="text" v-html="item.des"></div>
              </li>
            </template>
            <div class="cover" @click="toSet(4)">点击更改图片、标题、概述与链接</div>
          </ul>
        </div>
      </div>

      <!-- 为什么加入我们 -->
      <div class="adv" id="part2">
        <div class="inner">
          <div class="c-wrap" style="height: 150px">
            <h6 class="i-title wow fadeInDown">{{ modules[5].form.title }}</h6>
            <p class="en">{{ modules[5].form.subTitle }}</p>
            <p class="title-des wow fadeInDown">{{ modules[5].form.des }}</p>
            <div class="cover" @click="toSet(5)">点击更换标题与描述</div>
          </div>

          <ul class="list c-wrap">
            <template v-for="(item, i) in modules[6].list">
              <li v-if="item.isEnable" :key="i">
                <img :src="item.pic" alt="">
                <h6>{{ item.title }}</h6>
                <div class="text" v-html="item.des"></div>
              </li>
            </template>
            <div class="cover" @click="toSet(6)">点击更改图片、标题、概述与链接</div>
          </ul>
        </div>
      </div>
      <!-- 合作客户 -->
      <div class="client">
        <div class="inner">
          <div class="c-wrap" style="height: 150px">
            <h6 class="i-title wow fadeInDown">{{ modules[7].form.title }}</h6>
            <p class="en">{{ modules[7].form.subTitle }}</p>
            <p class="title-des wow fadeInDown">{{ modules[7].form.des }}</p>
            <div class="cover" @click="toSet(7)">点击更换标题与描述</div>
          </div>

          <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 c-wrap">
                  <img class="bg" :src="item.pic" alt="">
                  <div class="text">
                    <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 class="cover" @click="toSet(8)">点击更改图片、标题、概述与链接</div>
                  </div>
                </div>
              </el-carousel-item>
            </template>
          </el-carousel>

          <div class="c-wrap" style="min-height: 113px;">
            <scroll class="clients" :data="modules[9].list" :class-option="{ limitMoveNum: 2, direction: 2 }">
              <ul class="client-list" ref="client">
                <template v-for="(item, i) in modules[9].list">
                  <li v-if="item.isEnable" :key="i">
                    <img :src="item.pic" alt="">
                  </li>
                </template>
              </ul>
            </scroll>
            <div class="cover" @click="toSet(9)">点击更改图片</div>
          </div>
        </div>
      </div>

      <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
    </div>

  </div>
</template>

<script>
import mixins from '@/mixins/page'
import Modules from '@/const/modules'
import scroll from 'vue-seamless-scroll'
import Util from '@/libs/util'
export default {
  mixins: [mixins],
  data () {
    return {
      isImg: Util.isImg,
      modules: Modules.aboutUs,
    }
  },
  components: {
    scroll
  },
  mounted () { },
  methods: {

  }
};
</script>

<style lang="scss" scoped>
@import '../../../styles/page/page.scss';

.wrap {
  position: relative;
  background-color: #f9f9f9;

  .banner {
    position: relative;
    height: 480px;
    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;

    .texts {
      position: absolute;
      top: 130px;
      left: 165px;
    }

    .qrcodes {
      position: absolute;
      bottom: 80px;
      left: 165px;
      display: flex;
    }
  }

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

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

  .contact {
    position: relative;
    padding: 0 0 106px 0;
    background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat;

    .inner {
      padding: 0;
    }

    .title {
      width: 419px;
      height: 258px;
      padding: 113px 0 0 43px;
      background-color: #0854fe;

      h6 {
        margin-bottom: 20px;
        font-size: 46px;
        color: #fff;
      }

      .text {
        font-size: 28px;
        color: #fff;
      }
    }

    .region {
      position: absolute;
      top: 152px;
      left: 70%;
      display: flex;
      align-items: center;
      font-size: 20px;
      color: #fff;

      img {
        margin-right: 20px;
      }
    }

    .info {
      margin: 86px 0 0 44px;

      .texts {
        display: flex;
        align-items: center;
        margin-top: 24px;
      }

      .item {
        margin-right: 75px;
      }

      .line {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        font-size: 16px;
        color: #fff;

        img {
          margin-right: 8px;
        }
      }
    }
  }

  .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 .text {
    left: 100px;
  }
}

@media (max-width: 1200px) {
  .wrap {
    .banner {
      .text {
        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;
      }
    }

    .contact {
      .info {
        margin-left: 0;

        .texts {
          flex-direction: column;
          align-items: flex-start;
        }

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

@media (max-width: 640px) {
  .wrap {
    .banner {
      .text {
        max-width: 80%;
      }
    }
  }
}
</style>