<!DOCTYPE html>
|
<html lang="zh-CN">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<include file="common:header" />
|
<include file="common:title" />
|
<include file="common:element-plus" />
|
<include file="common:html-header" />
|
<style>
|
.blog-container {
|
padding: 50px 0;
|
}
|
|
.blog-title {
|
text-align: center;
|
font-size: 24px;
|
font-weight: bold;
|
}
|
|
.blog-time {
|
text-align: center;
|
font-size: 14px;
|
margin-top: 10px;
|
}
|
|
.blog-content {
|
margin: 20px 0;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="main-container" id="vue_item" v-cloak>
|
<!-- 顶部 导航栏 -->
|
<include file="common:top-header" />
|
|
<!-- 背景图-->
|
<div class="breadcumb-area">
|
<div class="container">
|
<div class="row">
|
<div class="col-md-12 txtc text-center ccase">
|
<div class="brpt">
|
<h2>{{ $t('message.header.blog') }}</h2>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 内容 -->
|
<div class="blog-container">
|
<div class="container" v-if="language=='zh-cn'">
|
<el-page-header @back="goBack">
|
<template #content>
|
<span class="text-large font-600 mr-3"> {{ $t('message.header.blog') }} </span>
|
</template>
|
</el-page-header>
|
<div class="blog-title" v-if="language=='zh-cn'">{{info.title}}</div>
|
<div class="blog-time">{{formatDate(info.create_time)}}</div>
|
<div class="blog-content" v-html="info.content"></div>
|
</div>
|
<div class="container" v-else>
|
<el-page-header @back="goBack">
|
<template #content>
|
<span class="text-large font-600 mr-3"> {{ $t('message.header.blog') }} </span>
|
</template>
|
</el-page-header>
|
<div class="blog-title">{{info.en_title}}</div>
|
<div class="blog-time">{{formatDate(info.create_time)}}</div>
|
<div class="blog-content" v-html="info.en_content"></div>
|
</div>
|
</div>
|
|
<!-- 底部 -->
|
<include file="common:footer" />
|
</div>
|
|
<input type="hidden" id="id" value="{$id}">
|
<!-- Vue App -->
|
<script src="/static/vue/mixin.js"></script>
|
<script>
|
var language = localStorage.getItem('changjiang-park-lang') || 'zh-cn';
|
var blog_id = $('#id').val();
|
const App = {
|
mixins: [sharedMixin],
|
data() {
|
return {
|
blog_id: blog_id,
|
language: language,
|
info: [],
|
};
|
},
|
computed: {
|
|
},
|
mounted() {
|
this.getBlogInfo();
|
},
|
created() {
|
},
|
methods: {
|
formatDate(time) {
|
return moment(time * 1000).format("YYYY-MM-DD");
|
},
|
|
goBack() {
|
window.history.back();
|
},
|
|
/////进入博客详情/////
|
gotoBlogDetail(id) {
|
window.location.href = '/home/blog/detail/id/' + id + '.html';
|
},
|
|
// 获取公告列表
|
getBlogInfo() {
|
let that = this;
|
const loading = this.$loading({
|
lock: true,
|
text: '获取中',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.2)'
|
});
|
let url = "/home/blog/get_blog_info.html"
|
postRequest(url, { id: that.blog_id }).then(res => {
|
loading.close();
|
if (res.data.code == 200) {
|
that.info = res.data.data;
|
}
|
}).catch(() => {
|
//取消,不做处理
|
});
|
},
|
},
|
};
|
const app = Vue.createApp(App);
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
app.component(key, component)
|
}
|
app.use(ElementPlus, {
|
locale: ElementPlusLocaleZhCn,
|
});
|
app.use(i18n);
|
app.mount("#vue_item");
|
</script>
|
</body>
|
|
<include file="common:html-css-js" />
|
|
</html>
|
