dreamland/lib/dever/components/content.vue

<template name="dever-content">
	<view>
		<block v-for="(v, k) in item" :key="k">
			
			<view :class="[skeleton ? 'grace-skeletons-img' : 'grace-img-in']" v-if="v.type == 'pic'">
				<image :src="v.content" class="grace-art-img" mode="widthFix" @click="Dever.viewPic(pics, v.content)" style="height:auto"></image>
			</view>
			
			<view :class="[skeleton ? 'grace-skeletons' : 'grace-art-content']" v-else-if="v.type == 'html'">
				<mp-html :content="v.content" ref="article"></mp-html>
			</view>
			
		</block>
	</view>
</template>

<script>
import mpHtml from "@/lib/mp-html/mp-html.vue";
export default {
	props: {
		skeleton : {
			type    : Boolean,
			value	: false
		},
		item : {
			type    : Array,
			value	: null
		},
		pics : {
			type    : Array,
			value	: null
		},
	},
	methods:{
		
	},
	components: {
		mpHtml
	},
}
</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:26rpx;}
</style>