124 lines
3.1 KiB
Vue
124 lines
3.1 KiB
Vue
<template>
|
|
<div id="newDetail">
|
|
<!-- <img
|
|
v-show="mobileCheck"
|
|
:src="require('@/assets/mobile/nav.png')"
|
|
class="nav_btn"
|
|
alt=""
|
|
srcset=""
|
|
@click="showNav = true"
|
|
/>
|
|
<MoblieNav v-show="showNav" :mobile-check="mobileCheck" /> -->
|
|
<Nav
|
|
v-show="!mobileCheck"
|
|
:active-index="1"
|
|
@toViewSwiper="toViewSwiper"
|
|
></Nav>
|
|
<div class="news-container">
|
|
<div class="nav">
|
|
<div class="back" @click="goNews()">
|
|
返回
|
|
</div>
|
|
<div class="new-time-container">
|
|
<div class="new-time">
|
|
{{ res.time ? res.time : "" }}
|
|
</div>
|
|
</div>
|
|
<ul class="news-nav">
|
|
<li>
|
|
首页
|
|
</li>
|
|
<li class="next">
|
|
新闻
|
|
</li>
|
|
<li class="next">{{ res.type_text }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="news-detail-container">
|
|
<div id="news-header" class="news-header">
|
|
<div class="news-tab">{{ res.type_text }}</div>
|
|
<div class="news-title">
|
|
{{ res.title }}
|
|
</div>
|
|
</div>
|
|
<img v-if="res.img" :src="res.img" alt="top" class="news-header-img" />
|
|
<div
|
|
ref="newsEditor"
|
|
class="news-editor"
|
|
v-html="res.description"
|
|
></div>
|
|
</div>
|
|
<ul class="news-flip">
|
|
<li v-if="res.prev_id" class="news-prev" @click="goDetail(res.prev_id)">
|
|
上一篇
|
|
</li>
|
|
<li v-if="res.next_id" class="news-next" @click="goDetail(res.next_id)">
|
|
下一篇
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<img alt="top" class="news-toTop" @click="goTop()" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getNewsDetail } from "../api/data.js";
|
|
|
|
export default {
|
|
components: {
|
|
// MoblieNav: () => import("../components/m-nav.vue"),
|
|
Nav: () => import("../components/nav.vue"),
|
|
},
|
|
async asyncData({ route }) {
|
|
const data = await getNewsDetail({
|
|
id: route.query.id,
|
|
}).then();
|
|
const res = data.data;
|
|
return { res };
|
|
},
|
|
data() {
|
|
return {
|
|
mobileCheck: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
if (
|
|
navigator.userAgent.match(/Android/i) ||
|
|
navigator.userAgent.match(/webOS/i) ||
|
|
navigator.userAgent.match(/iPad/i) ||
|
|
navigator.userAgent.match(/iPhone/i) ||
|
|
navigator.userAgent.match(/iPod/i)
|
|
) {
|
|
this.mobileCheck = true;
|
|
}
|
|
},
|
|
methods: {
|
|
goNews(type) {
|
|
if (type) {
|
|
this.$router.push({ name: "news", params: { type, mNav: true } });
|
|
} else {
|
|
this.$router.push({ name: "news", params: { mNav: true } });
|
|
}
|
|
},
|
|
goHome() {
|
|
this.$router.push({ name: "index", params: { id: 0 } });
|
|
},
|
|
goDetail(id) {
|
|
window.location.href = window.location.href.split("?")[0] + "?id=" + id;
|
|
},
|
|
goTop() {
|
|
document
|
|
.getElementById("news-header")
|
|
.scrollIntoView({ behavior: "smooth" });
|
|
},
|
|
toViewSwiper(index) {
|
|
this.$router.push({ name: "index", params: { id: index } });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "../assets/scss/newDetail.scss";
|
|
</style>
|