school/pages/index/message.vue

<template>
	<view class="center">
		<view class="bg">
			<image :src="image" mode=""></image>
		</view>
		<view class="title">{{ title }}</view>
		<view class="time">{{ time }}</view>
		<view class="content" v-html="content">
			{{ content }}
		</view>
	</view>
</template>

<script>
	import { details } from '@/api/index.js';
	export default {
		data() {
			return {
				title:'',
				time:'',
				content:'',
				id:'',
				image:'',
			}
		},
		onLoad(option){
			this.id = option.id;
			this.loadData();
		},
		methods:{
			async loadData(){
				const obj = this;
				details({},obj.id).then(({data}) => {
					obj.title = data.title;
					obj.time = data.add_time;
					obj.content = data.content;
					obj.image = data.image_input[0];
				})
			}
		}
	}
</script>

<style lang="scss">
.center{
	height: 100%;
}
.bg{
	width: 100%;
	height: 474rpx;
	image{
		height: 100%;
		width: 100%;
	}
}
.title {
	width: 90%;
	margin: 0 auto;
	font-size: 40rpx;
	font-weight: 500;
	color: #171313;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	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;
}

</style>