boying/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: #e7e7e8;"><span>{{time}}</span></view>
		</view>
		<view v-html="content" class="content">
			{{ content }}
		</view>
	</view>
</template>

<script>
import { details } from '@/api/index.js';
import { mapState, mapMutations } from 'vuex';
import { getTime } from '@/utils/rocessor.js'
export default {
	data(){
		return{
			src: '',
			title: '',
			content:'',
			time:'',
			author:'',
			visit:''
		}
	},
	computed: {
		...mapState(['baseURL']),
	},
	onLoad(option) {
		uni.setNavigationBarTitle({
			title:this.$t('foo.tgxq')
		})
		this.loadData(option.id);
	},
	methods: {
		async loadData(id){
			let obj = this;
			details({},id).then(e =>{
				console.log(e);
				let time = getTime(e.data.updatetime)
				obj.src = this.baseURL + e.data.coverimage;
				obj.title = e.data.title;
				obj.content = e.data.content
				obj.time = 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: #fff;
		span {
			display: inline-block;
			padding-right: 20rpx;
		}
	}
	.title{
		width: 90%;
		margin: 20rpx auto 0;
		font-size: 40rpx;
		font-weight: 500;
		color: #ffffff;
		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: #ffffff;
	}
	.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>