FE_IASF_client/src/pages/devHistory/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">
      <div class="inner">
        <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>
        <h6 style="font-size: 1.6rem">{{ modules[2].form.title }}</h6>
        <p class="en" style="margin-top: -15px;font-size: 1.6rem">{{ modules[2].form.subTitle }}</p>
        <div class="text" v-html="modules[2].form.des"></div>
      </div>
    </div>
  </div>
</template>

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

    };
  },
  watch: {
    '$route.query' () {
      this.id = this.$route.query.id
      this.getInfo()
    }
  },
  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[0][
              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 {
  .inner {
    width: 1000px;
  }

  h6 {
    position: relative;
    font-size: 2.2rem;
    font-weight: 500;
    color: #333333;
  }

  .en {
    margin-top: -25px;
    font-size: 2.2rem;
    font-weight: 300;
    color: #e3e3e3;
  }

  .text {
    max-width: 1200px;
    margin: 30px 0;
    overflow: auto;

    /deep/ img {
      width: 100% !important;
      height: auto;
    }
  }
}

@media (max-width: 1200px) {
  .tab-content {
    width: 90%;

    span {
      font-size: 1.35rem;
    }
  }

  .block {
    padding: 1.25rem 0;

    .inner {
      width: 90%;

      h2 {
        font-size: 1.5rem;
      }

      p {
        font-size: 1rem;
        margin: 10px 0 1.25rem;
      }

      .event {
        flex-direction: column;

        .time {
          width: 100%;

          li {
            width: 100%;
            justify-content: flex-start;
          }
        }

        .right {
          margin-top: 1.25rem;
          width: 100%;

          h6 {
            font-size: 2rem;
          }

          .list {
            li {
              padding: 1.25rem;
              flex-direction: column;
              align-items: flex-start;

              .texts {
                width: 100%;
              }

              .pic {
                width: 100%;
                height: auto;
              }
            }
          }
        }
      }
    }
  }
}
</style>