<template>
	<view class="bg">
		<view class="bgtop" v-if="xllist.midPic!=''" :style="{background: 'url('+$geturl(xllist.midPic)+') no-repeat'}"></view>
		
		<view class="bgboxs">
			<view class="xwtitle">
				<view class="tit">
					<view class="icon">
						<image v-if="xllist.channel_id==92" :src="$getimg('wf-x-ms-icon.png')" mode=""></image>  <!-- 美食 -->
						<image v-if="xllist.channel_id==121" :src="$getimg('wf-x-tc-icon.png')" mode=""></image>  <!-- 特产 -->
						<image v-if="xllist.channel_id==76" :src="$getimg('icon-yyyc.png')" mode=""></image>  <!-- 非遗 -->
						<image v-if="xllist.channel_id==116" :src="$getimg('wf-x-wc-icon.png')" mode=""></image>  <!-- 文创 -->
					</view>
					<view class="titwz">{{xllist.title }}</view>
				</view>
			</view>
			<view class="xwnr">
				<view class="xwnrdiv" v-html="xllist.content"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xllist: {}
			}
		},
		onLoad(option) {
			this.getDetail(option.id)
		},
		methods: {
			getDetail(id) {
				var para = {
					id: id
				};
				var url = '/newsdetail.jspx';
				var that = this;
				this.httpPost(that, url, para, function(res) {
					if (res.data.status == 200) {
						var tmp = res.data;
						if(tmp.content!=undefined){
							tmp.content = tmp.content.replace(/src="/gi, 'src="https://qyly1.csly-travel.com');
							
							tmp.content = tmp.content.replace(/<img[^>]*>/gi, function(match, capture) {
								return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/gi, 'style="max-width:100%;height:auto;width:100%;"'); // 替换style
							});
							tmp.content = tmp.content.replace(/<img[^>]*>/gi, function(match, capture) {
								return match.replace(/<img /gi, '<img style="max-width:100%;height:auto;width:100%;"'); // 替换style
							});
						}
						that.xllist = tmp;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 750rpx;
		background: #ffffff;
		overflow-x: hidden;
	}
	
	.bgtop{
		width: 100%;
		height: 460upx;
		background-size: 100% 100% !important;
	}
	
	.bgboxs{
		width: 100%;
		margin: -40rpx auto 0;
		background: #fff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		.xwtitle {
			font-size: 40upx;
			font-weight: bold;
			color: #333333;
			display: flex;
			align-items: center;
			padding: 50rpx 20rpx 0;
			position: relative;
			.tit{
				display: flex;
				align-items: center;
			}
			.icon{
				width: 62upx;
				height: 56upx;
				margin-right: 10rpx;
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
		.xwnr {
			font-size: 24upx;
			font-weight: 500;
			color: #666;
			width: 90%;
			margin: 30upx auto 0 auto;
			line-height: 1.6;
			.xwnrdiv {
				margin: 0rpx 0rpx 55rpx 0rpx;
				line-height: 2;
			}
		}
	}
</style>