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

<template>
  <div class="wrap">
    <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">
        <div class="single-banner">
          <img class="banner-img" :src="modules[0].form.pic" alt="" />
          <div class="texts">
            <h6 class="banner-title">{{ modules[0].form.title }}</h6>
          </div>
        </div>
        <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
      </div>

      <div class="block history gray">
        <div class="inner c-wrap">
          <div class="texts wow fadeInDown" data-wow-delay="0.5s">
            <div class="left">
              <h2 v-html="modules[1].form.title"></h2>
              <div class="line"></div>
              <div class="des" v-html="modules[1].form.des"></div>
            </div>
            <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
          </div>
          <div class="cover" @click="toSet(1)">点击更改图片、标题概述与链接</div>
        </div>
      </div>

      <div class="block">
        <div class="inner">
          <div class="core">
            <img :src="modules[2].form.pic" alt="" class="pic">
            <div class="texts">
              <div class="core-title" v-html="modules[2].form.title"></div>
              <div class="line"></div>
              <div class="text" v-html="modules[2].form.des"></div>
            </div>
            <div class="cover" @click="toSet(2)">点击更换图片、标题、描述与链接</div>
          </div>
          <div class="core">
            <img :src="modules[3].form.pic" alt="" class="pic">
            <div class="texts">
              <div class="core-title" v-html="modules[3].form.title"></div>
              <div class="line"></div>
              <div class="text" v-html="modules[3].form.des"></div>
            </div>
            <div class="cover" @click="toSet(3)">点击更换图片、标题、描述与链接</div>
          </div>
        </div>
      </div>

      <div class="block fac">
        <div class="inner">
          <div class="event">
            <h6 v-html="modules[4].form.title"></h6>
            <p class="en">{{ modules[4].form.subTitle }}</p>
            <div class="text" v-html="modules[4].form.des"></div>
            <img src="@/assets/images/arrow.png" alt="">
            <div class="cover" @click="toSet(4)">点击更换标题、小标题、描述与链接</div>
          </div>
          <ul class="l-card">
            <li>
              <img :src="modules[5].form.pic" alt="" class="pic" />
              <div class="texts">
                <h6>{{ modules[5].form.title }}</h6>
                <div class="text" v-html="modules[5].form.des"></div>
              </div>
              <div class="cover" @click="toSet(5)">点击更换图片、标题、描述与链接</div>
            </li>
            <li>
              <img :src="modules[6].form.pic" alt="" class="pic" />
              <div class="texts">
                <h6>{{ modules[6].form.title }}</h6>
                <div class="text" v-html="modules[6].form.des"></div>
              </div>
              <div class="cover" @click="toSet(6)">点击更换图片、标题、描述与链接</div>
            </li>
            <li>
              <img :src="modules[7].form.pic" alt="" class="pic" />
              <div class="texts">
                <h6>{{ modules[7].form.title }}</h6>
                <div class="text" v-html="modules[7].form.des"></div>
              </div>
              <div class="cover" @click="toSet(7)">点击更换图片、标题、描述与链接</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="block scan gray">
        <div class="c-wrap">
          <h2 class="b-title" v-html="modules[8].form.title"></h2>
          <p class="intro">{{ modules[8].form.des }}</p>
          <div class="cover" @click="toSet(8)">点击更换标题与描述</div>
        </div>
        <div class="scan-inner">
          <div class="left">
            <div class="c-wrap">
              <template v-for="(item, i) in modules[9].list">
                <div v-if="item.isEnable" class="line" :key="i">
                  <img v-if="item.pic" :src="item.pic" alt="" class="icon">
                  <p class="text">{{ item.title }}</p>
                </div>
              </template>
              <div class="cover" @click="toSet(9)">点击更换标题</div>
            </div>
            <ul class="total">
              <li>
                <p class="num">{{ modules[10].form.title }}</p>
                <p class="text">{{ modules[10].form.des }}</p>
                <div class="cover" style="width: 100px;" @click="toSet(10)">标题描述</div>
              </li>
              <li>
                <p class="num">{{ modules[11].form.title }}</p>
                <p class="text">{{ modules[11].form.des }}</p>
                <div class="cover" style="width: 100px;" @click="toSet(11)">标题描述</div>
              </li>
              <li>
                <p class="num">{{ modules[12].form.title }}</p>
                <p class="text">{{ modules[12].form.des }}</p>
                <div class="cover" style="width: 100px;" @click="toSet(12)">标题描述</div>
              </li>
            </ul>
          </div>
          <div class="c-wrap">
            <img :src="modules[13].form.pic" alt="" class="pic" />
            <div class="cover" @click="toSet(13)">点击更换图片</div>
          </div>
        </div>
      </div>
    </div>

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

<script>
import mixins from '@/mixins/page'
import Modules from '@/const/modules'
export default {
  mixins: [mixins],
  data () {
    return {
      modules: Modules.overview
    }
  },
  mounted () { },
  methods: {

  }
};
</script>

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

.history {
  h2 {
    font-size: 1rem;
    color: #333;
  }

  .texts {
    display: flex;
    justify-content: space-between;
    padding: 5.125rem 3.5625rem 1.875rem;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 6.25rem 0px 0px 0px;
    transition: 0.3s;

    &:hover {
      transform: scale(1.05);
    }
  }

  .left {
    width: 43.4375rem;
  }

  .line {
    width: 53px;
    height: 3px;
    margin: 18px 0;
    background: #0280f1;
  }

  .des {
    font-size: 0.9rem;
    color: #181818;
    line-height: 31px;
    -webkit-line-clamp: 6;
  }

  .bg {
    margin: -122px 0 0 0;
    border-top-right-radius: 40px;
  }
}

.core {
  position: relative;
  height: 370px;
  margin-bottom: 40px;

  &:last-child {
    .texts {
      left: 40px;
      right: auto;
    }
  }

  .pic {
    width: 100%;
    height: 100%;
  }

  .texts {
    position: absolute;
    top: 80px;
    right: 40px;
    width: 500px;
    color: #fff;
  }

  .core-title {
    font-size: 1.4rem;
    font-family: PingFangSC-Medium, PingFang SC;
  }

  .line {
    width: 136px;
    height: 3px;
    margin: 20px 0;
    background: #ffffff;
    opacity: 0.56;
  }

  .text {
    font-size: 1rem;
    line-height: 1.6;
  }
}

.fac {
  .event {
    position: relative;
    padding: 70px 250px 70px 60px;
    background: url(https://huorantech.com/images/overview/16.png) 0 0/100% no-repeat;

    h6 {
      font-size: 2.2rem;
      font-family: PingFangSC-Medium, PingFang SC;
      color: #333;
    }

    .en {
      margin-top: -10px;
      font-size: 2rem;
      font-family: AppleSystemUIFont;
      color: #e4e4e4;
    }

    .text {
      margin: 15px 0;
      font-size: 1rem;
      color: #333;
    }
  }

  .l-card {
    display: flex;
    margin-top: 20px;

    li {
      position: relative;
      width: calc((100% - 40px) / 3);
      height: 380px;
      margin-right: 20px;

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

    .pic {
      width: 100%;
      height: 100%;
    }

    .texts {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 140px 30px 0;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.5);
    }

    h6 {
      margin-bottom: 15px;
      font-size: 2rem;
      font-family: PingFangSC-Medium, PingFang SC;
    }

    .text {
      font-size: 1rem;
      font-family: PingFangSC-Medium, PingFang SC;
      line-height: 2;
      @include mul-ellipsis(4);
    }
  }
}

.scan {
  .scan-inner {
    display: flex;
    padding-left: 20%;
  }

  .left {
    width: 30%;
    margin-right: 80px;
  }

  .line {
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    .icon {
      width: 50px;
      height: 50px;
      margin-right: 20px;
    }

    .text {
      font-size: 1rem;
      font-family: PingFangSC-Medium, PingFang SC;
      color: #333;
      line-height: 2;
      @include mul-ellipsis(2);
    }
  }

  .total {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;

    li {
      position: relative;
    }

    .num {
      margin-bottom: 10px;
      font-size: 2rem;
      font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN;
      font-weight: 800;
      color: #1583ff;
    }

    .text {
      font-size: 1rem;
      color: #333;
    }
  }

  .pic {
    width: 70%;
    height: 700px;
  }
}
</style>