You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
2.5 KiB
103 lines
2.5 KiB
2 years ago
|
<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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 1000px) {
|
||
|
|
.history {
|
||
|
|
.inner {
|
||
|
|
width: 90%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|