FE_IASF_client/src/pages/speech/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">
      <div class="inner">
        <img :src="modules[1].form.pic" alt="" class="pic">
        <div class="texts">
          <h6 v-html="modules[1].form.title"></h6>
          <p class="en">{{ modules[1].form.subTitle }}</p>
          <div class="text" v-html="modules[1].form.des"></div>
          <div class="sign">
            <img :src="modules[2].form.pic" alt="">
          </div>
        </div>
      </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'], Util.rsa(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';

.block {
  background: url(https://new.iasf.ac.cn/images/speech/2.png) no-repeat;
}

.inner {
  display: flex;
  align-items: flex-start;

  .pic {
    max-width: 480px;
    margin-top: 2rem;
  }

  .texts {
    margin-left: 113px;
  }

  h6 {
    position: relative;
    font-size: 2rem;
    font-weight: 600;
    color: #333;
  }

  .en {
    margin: -25px 0 40px;
    font-size: 2.2rem;
    font-weight: 600;
    color: rgba(216, 216, 216, 0.34);
  }

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

  .sign {
    margin-top: 20px;
    text-align: right;

    img {
      max-width: 150px;
    }
  }
}

@media (max-width: 920px) {
  .inner {
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .pic {
      max-width: 100%;
    }

    .texts {
      margin: 20px 0 0;
    }
  }
}
</style>