NFT/pages/index/article.vue

<template>
	<view class="center">
		<view class="bg">
			<image :src="src" mode=""></image>
		</view>
		<view class="title">
			{{ title }}
		</view>
		<view class="main flex">
			<view class="">{{ author }}</view>
			
			<view class="" style="color: #d8d9da;"><span>{{time}}</span>{{ visit }}</view>
		</view>
		<view v-html="synopsis" class="content">
			{{ synopsis }}
		</view>
	</view>
</template>

<script>
import { details } from '@/api/product.js'
export default {
	data(){
		return{
			src: '',
			title: '',
			synopsis:'',
			time:'',
			author:'',
			visit:''
		}
	},
	onLoad(option) {
		this.loadData(option.id);
	},
	methods: {
		async loadData(id){
			let obj = this;
			details({},id).then(e =>{
				console.log(e);
				obj.src = e.data.image_input[0];
				obj.title = e.data.title;
				obj.synopsis = e.data.content
				obj.time = e.data.add_time;
				obj.author = e.data.author;
				obj.visit = e.data.visit;
			})
		}
	}
}
</script>

<style lang="scss">
	.center{
		height: 100%;
	}
	.bg{
		width: 100%;
		height: 474rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.main {
		margin: 20rpx 50rpx;
		font-size: 24rpx;
		color: #000;
		span {
			display: inline-block;
			padding-right: 20rpx;
		}
	}
	.title{
		width: 90%;
		margin: 20rpx auto 0;
		font-size: 40rpx;
		font-weight: 500;
		color: #171313;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.time {
		width: 90%;
		margin: 0 auto;
		margin-top: 16rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #656b6c;
	}
	.content{
		width: 90%;
		margin:0 auto;
		margin-top: 20rpx;
		font-size: 32rpx;
		font-weight: 500;
		color:#777777;
	}
	/deep/ .content{
		img{
			width: 100%;
			height: 100%;
		}
	}
</style>