jp-xqjy/pages/news/detalis.vue

<template>
	<view>
		<view class="article">
			<view class="article-tit">
				{{detail.title}}
			</view>
			<view class="article-row">
				<view class="article-time">{{detail.createTime}}</view>
				<view class="article-see">
					<u-icon custom-prefix="custom-icon" name="eye-line"></u-icon>
					<span>321</span>
				</view>
			</view>
			<view class="article-con" v-html="detail.content">
				 
			</view>
			<view class="article-foot">
				<view class="u-flex">
					<view class="article-btn">
						<u-icon custom-prefix="custom-icon" name="zoom-in-line"></u-icon>
						<span>放大</span>
					</view>
					<view class="article-btn">
						<u-icon custom-prefix="custom-icon" name="zoom-out-line"></u-icon>
						<span>缩小</span>
					</view>
				</view>

				<view class="article-btn">
					<u-icon custom-prefix="custom-icon" name="align-top"></u-icon>
					<span>回顶</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/news.js'
	
	export default {
		data() {
			return {
				
				pageTitle: '文章详情',
				isLoading: false,
				id: '',
				detail: {},
			}
		
		},
		onLoad(op) {
			
			this.id =op.id;
			this.getDetail();
		},
		methods: {
			getDetail() {
			    API.newsdetail({id:this.id}).then(response => {
			        this.isLoading = false;
			        this.detail = response.data;
				  
			
			    }).catch(error => {
			        this.isLoading = false;
			        mui.toast(error);
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.article{
		padding: 15px;
		.article-tit{
			font-size: 20px;
			margin-bottom:10px;
		}
		.article-row{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #888;
			font-size: 12px;
			border-bottom: 1px solid #F1F1F1;
			padding-bottom: 15px;
			.article-time{}
			.article-see{
				span{
					margin-left:3px;
				}
			}
		}
		.article-con{
			padding: 15px 0 35px;
			font-size: 14px;
			line-height: 28px;
			img{
				width: 100%;
				margin: 10px 0;
			}
		}
		
		.article-foot{
			height: 50px;
			position:fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			border-top: 1px solid #f7f7f7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:0 15px;
			.article-btn{
				background: #E5E7EA;
				padding:6px 10px;
				color: #606875;
				border-radius: 8px;
				span{
					margin-left: 3px;
				}
			}
			.u-flex .article-btn{
				margin-right: 10px;
			}
		}
	}
</style>