177 lines
6.5 KiB
Vue
177 lines
6.5 KiB
Vue
<template>
|
|
<div class="read">
|
|
<div v-if="newsData.detail != undefined">
|
|
<HeaderComponents></HeaderComponents>
|
|
<!--渲染标题-->
|
|
<div class="top-prove">
|
|
<h2>{{newsData.detail.title}}</h2>
|
|
<span>{{newsData.detail.publish_time}} 08:00 浏览量{{newsData.detail.viewer_count}}万</span>
|
|
</div>
|
|
<!--内容-->
|
|
<div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
|
|
<div class="intro-content" :title="introduce" ref="desc">
|
|
<span class="merchant-desc" v-if="introduce" v-html="newsData.detail.content">
|
|
{{newsData.detail.content}}
|
|
</span>
|
|
<div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
|
|
<img class="unfold_img" @click="none" src="img/open.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="comments" v-if="pd">
|
|
<h2>打开APP查看文章</h2>
|
|
</div>
|
|
|
|
<!--相关推荐-->
|
|
<RecommendedComponents judges="true" :recommendefLists="allrecommend"></RecommendedComponents>
|
|
<!--全部评论-->
|
|
<AllcommentsComponents :commentsList="allcommendef"></AllcommentsComponents>
|
|
<!--打开APP查看全部评论-->
|
|
<OpenCommentsComponents switch="true" position="block"></OpenCommentsComponents>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import HeaderComponents from "@/components/Header";
|
|
import OpenCommentsComponents from "@/components/OpenComments";
|
|
import AllcommentsComponents from "@/components/Allcomments";
|
|
import RecommendedComponents from "@/components/Recommended";
|
|
export default {
|
|
data () {
|
|
return {
|
|
id: this.$route.params.id,
|
|
pd: true,
|
|
introduce: '',
|
|
detail:{},
|
|
newsData:{},
|
|
//全部评论
|
|
allcommendef:[],
|
|
// 相关推荐
|
|
recommendef:[],
|
|
|
|
// 是否展示所有文本内容
|
|
showTotal: true,
|
|
// 显示展开还是收起
|
|
exchangeButton: true,
|
|
// 是否显示展开收起按钮
|
|
showExchangeButton: false,
|
|
};
|
|
},
|
|
|
|
mounted () {
|
|
this.init();
|
|
},
|
|
created(){
|
|
this.newsRead()
|
|
},
|
|
methods: {
|
|
//ajax
|
|
async newsRead(){
|
|
var data = await this.$http.newsService.newsService({
|
|
id:3
|
|
})
|
|
console.log(data)
|
|
this.newsData = data
|
|
this.allcommendef = data.comment
|
|
this.allrecommend= data.recommend
|
|
},
|
|
|
|
|
|
showTotalIntro () {
|
|
// console.log(this.showTotal);
|
|
this.showTotal = !this.showTotal;
|
|
this.exchangeButton = !this.exchangeButton;
|
|
},
|
|
getRem () {
|
|
// console.log('getRem');
|
|
const defaultRem = 16;
|
|
let winWidth = window.innerWidth;
|
|
// console.log('winWidth:' + winWidth);
|
|
let rem = winWidth / 375 * defaultRem;
|
|
return rem;
|
|
},
|
|
init () {
|
|
this.introduce = '“小说”一词最早出现于《庄子·外物》：「饰小说以干县令，其于大达亦远矣。」' +
|
|
'庄子所谓的「小说」，是指琐碎的言论，与小说观念相差甚远。直至东汉桓谭《新论》：「小说家合残丛小语，' +
|
|
'近取譬喻，以作短书，治身理家，有可观之辞。」班固《汉书．艺文志》将「小说家」列为十家之后，其下的定义为：' +
|
|
'「小说家者流，盖出于稗官，街谈巷语，道听途说[4]者之所造也。」才稍与小说的意义相近。而中国小说最大的特色，' +
|
|
'便自宋代开始具有文言小说与白话小说两种不同的小说系统。文言小说起源于先秦的街谈巷语，是一种小知小道的纪录。' +
|
|
'在历经魏晋南北朝及隋唐长期的发展，无论是题材或人物的描写，文言小说都有明显的进步，形成笔记与传奇两种小说类型。' +
|
|
'而白话小说则起源于唐宋时期说话人的话本，故事的取材来自民间，主要表现了百姓的生活及思想意识。' +
|
|
'但不管文言小说或白话小说都源远流长，呈现各自不同的艺术特色。';
|
|
},
|
|
none () {
|
|
this.pd= false
|
|
},
|
|
watch: {
|
|
'introduce': function () {
|
|
this.$nextTick(function () {
|
|
// console.log('nextTick');
|
|
// 判断介绍是否超过四行
|
|
let rem = parseFloat(this.getRem());
|
|
// console.log('watch 中的rem', rem);
|
|
if (!this.$refs.desc) {
|
|
// console.log('desc null');
|
|
return;
|
|
}
|
|
let descHeight = window.getComputedStyle(this.$refs.desc).height.replace('px', '');
|
|
// console.log('descHeight:' + descHeight);
|
|
// console.log('如果 descHeight 超过' + (5.25 * rem) + '就要显示展开按钮');
|
|
if (descHeight > 5.25 * rem) {
|
|
// console.log('超过了四行');
|
|
// 显示展开收起按钮
|
|
this.showExchangeButton = true;
|
|
this.exchangeButton = true;
|
|
// 不是显示所有
|
|
this.showTotal = false;
|
|
} else {
|
|
// 不显示展开收起按钮
|
|
this.showExchangeButton = false;
|
|
// 没有超过四行就显示所有
|
|
this.showTotal = true;
|
|
// console.log('showExchangeButton', this.showExchangeButton);
|
|
// console.log('showTotal', this.showTotal);
|
|
}
|
|
}.bind(this));
|
|
}
|
|
},
|
|
},
|
|
|
|
components: {
|
|
HeaderComponents,
|
|
OpenCommentsComponents,
|
|
AllcommentsComponents,
|
|
RecommendedComponents
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.comments
|
|
width 10rem
|
|
height 1.693rem
|
|
display flex
|
|
justify-content center
|
|
bottom 0
|
|
left 0
|
|
h2
|
|
width: 9.36rem
|
|
height: 1.173rem
|
|
background red
|
|
border-radius: 0.107rem
|
|
border: solid 0.027rem #d0302c
|
|
font-size: 0.373rem
|
|
display flex
|
|
justify-content center
|
|
align-items center
|
|
color: #fff
|
|
letter-spacing: 0rem
|
|
font-weight: normal
|
|
font-stretch: normal
|
|
font-family: PingFangSC-Medium
|
|
font-size: 0.373rem
|
|
@import "~!/read.styl"
|
|
</style>
|
|
|