dreamland/pages/dream/view/news.vue

<template name="news">
	<view slot="gBody" class="grace-body">
		<!-- 标题 -->
		<text :class="['grace-art-margin', 'grace-art-title', graceSkeleton  ? 'grace-skeletons' : '']">{{item.name}}</text>
		<!-- 作者信息 -->
		<view class="grace-art-margin grace-nowrap grace-flex-vcenter">
			<view :class="['grace-art-author','grace-nowrap','grace-flex-vcenter', graceSkeleton ? 'grace-skeletons' : '']">
				<image class="grace-art-author-face" :src="item.author.avatar" mode="widthFix"></image>
				<text v-if="item.author.name" class="grace-art-author-name">{{item.author.name}}</text>
			</view>
			<text class="grace-art-btn grace-bg-green">+ 关注</text>
		</view>
		<!-- 其他基本信息 -->
		<view :class="['grace-art-info-line','grace-art-margin','grace-space-between', graceSkeleton ? 'grace-skeletons' : '']">
			<text class="grace-art-info-line-text grace-icons icon-eye" v-if="item.num_view"><text style="margin-left:2px">{{item.num_view}}</text></text>
			<text class="grace-art-info-line-text" v-if="item.date">发布于 : {{item.date}}</text>
		</view>
		<!-- 文章内容 -->
		<view class="grace-art-contents">
			<block v-for="(v, k) in item.content_array" :key="k">
			<view :class="[graceSkeleton ? 'grace-skeletons-img' : 'grace-img-in']" v-if="v.type == 'pic'">
				<image :src="v.content" class="grace-art-img" mode="widthFix" @click="Dever.viewPic(item.content_pic, v.content)"></image>
			</view>
			<view :class="[graceSkeleton ? 'grace-skeletons' : 'grace-art-content']" v-else-if="v.type == 'html'"><rich-text type="text" :nodes="v.content"></rich-text></view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	name: "news",
	props: {
		graceSkeleton : true,
		item : {
			type    : Object,
			value	: null
		},
	},
	methods:{
		stopFun : function(){return false;}
	},
}
</script>

<style>
.grace-art-margin{margin-top:20rpx;}
.grace-art-title{display:block; width:100%; font-size:38rpx; font-weight:bold; line-height:56rpx;}
.grace-skeletons{background-color:#F8F8F8; border-radius:8rpx; height:60rpx;}
.grace-skeletons-img{width:100%; background-color:#F8F8F8; height:300rpx; border-radius:8rpx;}
.grace-art-author{width:700rpx; font-size:0;}
.grace-art-author-face{width:66rpx; height:66rpx; border-radius:66rpx; margin-right:20rpx; flex-shrink:0;}
.grace-art-author-name{display:block; line-height:80rpx; font-size:26rpx;}
.grace-art-btn{width:120rpx; line-height:60rpx; text-align:center; border-radius:50rpx; font-size:26rpx; display:block; flex-shrink:0; margin-left:30rpx;}
.grace-art-info-line{}
.grace-art-info-line-text{font-size:22rpx; line-height:50rpx; color:#888888;}
.grace-art-contents{padding:20rpx 0;}
.grace-art-img{width:100%; margin:10rpx 0;}
.grace-art-content{line-height:52rpx; font-size:28rpx;}
</style>