<template>
	<view class="newDetail">
		<view class="title">
			{{info.title}}
		</view>
		<view class="categoryName">
			{{info.categoryName}}
		</view>
		<view class="newsInfo">
			<view class="author">
				作者：{{info.author}}
			</view>
			<view class="createTime">
				时间：{{info.createTime}}
			</view>
		</view>
		<view class="img">
			<image class="image" :src="baseUrl+info.imgUrl" mode=""></image>
		</view>
		<view class="content" v-html="info.content"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{},
				baseUrl:uni.$u.http.config.baseURL
			}
		},
		onLoad(option) {
			this.getDetail(option.id)
		},
		methods: {
			getDetail(id){
				uni.$u.http.get("/iot/news/"+id).then(res=>{
					this.info=res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.newDetail{
	height: 100vh;
	background-color: #fff;
	padding: 30rpx;
	box-sizing: border-box;
	background-color: #fff;
	.title{
		font-weight: 900;
		font-size: 40rpx;
	}
	.categoryName{
		background-color: #2b7;
		color:#fff;
		display: inline;
		font-size: 22rpx;
		padding:5rpx 10rpx;
		border-radius: 8rpx;
	}
	.newsInfo{
		display: flex;
		font-size: 26rpx;
		font-weight: 400;
		margin: 20rpx 0;
		color: #616161;
		.author{
			margin-right: 20rpx;
		}
		.createTime{
			margin-right: 20rpx;
		}
	}
	.img{
		width: 100%;
		height: 300rpx;
		overflow: hidden;
		margin: 40rpx 0; 
		.image{
			width: 100%;
			height: 100%;
		}
	}
	.content{
		line-height: 60rpx;
		padding:0 20rpx;
	}
}
</style>
