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";
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 {
    .inner {
        width: 1000px;
    }
    h6 {
        position: relative;
        font-size: 2.2rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
    }
    .en {
        margin-top: -25px;
        font-size: 2.2rem;
        font-family: PingFangSC-Light, PingFang SC;
        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>