FE_IASF_client/src/pages/overview/index.vue

<template>
  <div class="wrap">
    <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="block history gray">
      <div :class="['inner', {'cursor-pointer': isLink(modules[1].form.link.linkName)}]"
           @click="openLink(modules[1].form)">
        <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="418"
               :src="modules[1].form.pic"
               alt="">
        </div>
      </div>
    </div>

    <div class="block">
      <div class="inner">
        <div :class="['core', {'cursor-pointer': isLink(modules[2].form.link.linkName)}]"
             @click="openLink(modules[2].form)">
          <img :src="modules[2].form.pic"
               alt=""
               class="pic">
          <div class="texts">
            <h6>{{ modules[2].form.title }}</h6>
            <div class="line"></div>
            <div class="text"
                 v-html="modules[2].form.des"></div>
          </div>
        </div>
        <div :class="['core', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]"
             @click="openLink(modules[3].form)">
          <img :src="modules[3].form.pic"
               alt=""
               class="pic">
          <div class="texts">
            <h6>{{ modules[3].form.title }}</h6>
            <div class="line"></div>
            <div class="text"
                 v-html="modules[3].form.des"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="block gray fac">
      <div class="inner">
        <div class="event">
          <img src="http://10.10.11.7/images/overview/16.png"
               alt=""
               class="pic">
          <div class="texts">
            <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 v-if="isLink(modules[4].form.link.linkName)"
                 class="arrow"
                 src="@/assets/images/arrow.png"
                 alt=""
                 @click="openLink(modules[4].form)">
          </div>
        </div>
        <ul class="l-card">
          <li :class="{'cursor-pointer': isLink(modules[5].form.link.linkName)}"
              @click="openLink(modules[5].form)">
            <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>
          </li>
          <li :class="{'cursor-pointer': isLink(modules[6].form.link.linkName)}"
              @click="openLink(modules[6].form)">
            <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>
          </li>
          <li :class="{'cursor-pointer': isLink(modules[7].form.link.linkName)}"
              @click="openLink(modules[7].form)">
            <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>
          </li>
        </ul>
      </div>
    </div>

    <div class="block scan gray">
      <h2 class="b-title wow fadeInUp"
          v-html="modules[8].form.title"></h2>
      <p class="intro wow fadeInUp"
         data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
      <div class="inner scan-inner">
        <div class="left">
          <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>
          <ul class="total">
            <li>
              <p class="num">{{ modules[10].form.title }}</p>
              <p class="text">{{ modules[10].form.des }}</p>
            </li>
            <li>
              <p class="num">{{ modules[11].form.title }}</p>
              <p class="text">{{ modules[11].form.des }}</p>
            </li>
            <li>
              <p class="num">{{ modules[12].form.title }}</p>
              <p class="text">{{ modules[12].form.des }}</p>
            </li>
          </ul>
        </div>
        <img :src="modules[13].form.pic"
             alt=""
             class="pic" />
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "@/mixins/page";
import Setting from "@/setting";
import Util from "@/libs/util";
import WOW from "wow.js";
export default {
  mixins: [mixins],
  data () {
    return {

    };
  },
  mounted () {
    new WOW().init();
  },
  methods: {
    // 获取文章详情
    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);
          }
        })
        .catch((err) => { });
    },
  },
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@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: -115px -80px 0 30px;
        border-top-right-radius: 40px;
    }
}
.core {
    position: relative;
    margin-bottom: 40px;
    &:last-child {
        .texts {
            left: 40px;
            right: auto;
        }
    }
    .pic {
        width: 100%;
    }
    .texts {
        position: absolute;
        top: 80px;
        right: 40px;
        width: 500px;
        color: #fff;
    }
    h6 {
        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;
        .pic {
            width: 100%;
        }
        .texts {
            position: absolute;
            top: 70px;
            right: 300px;
            bottom: 70px;
            left: 60px;
        }
        h6 {
            position: relative;
            font-size: 2.2rem;
            font-family: PingFangSC-Medium, PingFang SC;
            color: #333;
        }
        .en {
            margin-top: -30px;
            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: 359px;
            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: 1.6rem;
            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;
    }
    .left {
        width: 45%;
        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: 1.6;
        }
    }
    .total {
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
        .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: 50%;
        // height: 700px;
    }
}
</style>