zhengyi/pages/story/storyDetail.vue

<template>
	<view class="content">
		<view class="top">
			<image src="" mode=""></image>
		</view>
		<view class="detail">
			<view class="detail-top">
				<view class="tit">
					正一健康竹胎酵素饮正一健康竹胎酵素饮正
				</view>
				<view class="time">
					更新时间:2019-12-06
				</view>
			</view>
			<view class="jg">
				
			</view>
			<view class="detail-content" v-html="content">
				
			</view>
		</view>
	</view>
</template>

<script>
	import {article,details} from '@/api/index.js'
	export default {
		data() {
			return {
				content: '正一健康竹胎酵素饮正一健康竹胎酵素饮正正一健康竹胎酵素饮正一健康竹胎酵素饮正正一健康竹胎酵素饮正一健康竹胎酵素饮正正一健康竹胎酵素饮正一健康竹胎酵素饮正',
				detail: {},
			}
			
		},
		onLoad(opt) {
			if(opt.id) {
				this.getDetail(opt.id)
			}
		},
		methods: {
			getDetail(id) {
				let obj = this
				details({},id).then( res => {
					obj.content = res.data.content
					obj.detail = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}
	.content {
		background-color: #fff;
		height: 100%;
		.top {
			width: 750rpx;
			height: 668rpx;
			image {
				width: 100%;
				height: 100%;
				background-color: #999;
			}
		}
		.detail {
			position: relative;
			top: -57rpx;
			.jg {
				width: 670rpx;
				height: 2rpx;
				background: #F5F5F5;
				margin: auto;
			}
			.detail-top {
				min-height: 190rpx;
				padding: 57rpx 40rpx 40rpx;
				background-color: #fff;
				border-radius: 30rpx 30rpx 0 0;
				.tit {
					font-size: 48rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 51rpx;
				}
				.time {
					padding-top: 10rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999;
					line-height: 51rpx;
				}
			}
			.detail-content {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 48rpx;
				padding: 37rpx 40rpx;
				* {
					max-width: 100%;
				}
			}
		}
	}
</style>