<template>
	<view style="padding-top: 80px;padding-bottom: 70px;">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="dis-flex top-nav">
			<view class="back" @click="back"></view>
			<view class="title">
				文章详情
			</view>
			<view style="width: 40px;"></view>
		</view>
		<view style="padding: 20px 15px;">
			<view style="font-weight: bold;font-size: 18px;line-height: 28px;etter-spacing: 2px;">赛道很宽、需求长远，光伏等新能源领域“就业”热!</view>
			<view style="font-size: 14px;margin: 7px 0px;">中国光伏行业协会CPIA <text style="margin-left:10px;color: #999999;font-size: 12px;">2023-01-25 21:23</text></view>
			<view style="color: #999999;font-size: 12px;">发表于北京</view>
			<view class="" v-html=""></view>
			<image src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/art_1.png" ></image>
		</view>
		<view style="margin-bottom: 10px;">
			<view style="font-size: 18px;font-weight: bold;padding: 10px;color: #333;">评论</view>
			<view style="padding: 0px 10px;color: #333;">
				<view class="comment-item" v-for="(item) in 2">
					<view class="dis-flex">
						<image class="avatar2" src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/index_1.png" mode=""></image>
						<view class="name">温柔的晚风</view>
						<view style="font-size: 12px;">赞</view>
					</view>
					<view style="padding-left: 38px;font-size: 14px;margin: 5px auto 10px;">小仙女的分享，必须来看看</view>
					<view class="dis-flex" style="padding-left: 38px;">
						<view class="comment-num">3回复</view>
						<view style="color: #999999;font-size: 12px;">02-19 12:04:04</view>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<view style="font-size: 18px;font-weight: bold;padding: 10px;color: #333;">热点推荐</view>
			<view style="padding: 0px 10px;">
				<view @click="toArticle" class="list-item" v-for="(item) in 3">
					<view style="flex: 1;">
						<view class="list-title">资金火速进场，央企板块迎来高光时刻? 一图读懂那些「高分红+连年增息」，的港股低估啊啊啊啊啊啊</view>
						<view style="color: #999999;font-size: 12px;">人工智能那点事 13:05</view>
					</view>
					<image class="list-img" src="" mode=""></image>
				</view>
			</view>
		</view>
		<view class="footer-wrapper">
			<view class="input-box">
				<uni-icons type="" style="width: 20px;height: 20px;margin-left: 10px;background: #000;display: inline-block;"></uni-icons>
				<input type="text" placeholder="说点什么吧？">
			</view>
			<view class="message1">12</view>
			<view class="appreciate1">12</view>
			<view class="share"></view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js'
	export default {
		data() {
			return {
				id: null,
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getheadlinedl();
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			getheadlinedl() {
				let _this = this,
					requestData = {
						id
					};
				App._post_form('&p=headline&do=HeadlineInfo', requestData, res => {
					if (!!res.data && res.errno === 0) {
						console.log(res);
						
					}
				}, false, () => {
					
				})
			},
		}
	}
</script>

<style lang="scss">
.status_bar {
	width: 100%;
	height: var(--status-bar-height);
	padding-bottom: 15px;
	background-color: #fff;
	position: fixed;
	top: 0px;
	z-index: 99;
}
.dis-flex{
	display: flex;
	align-items: center;
}
.top-nav{
	width: 100vw;
	position: fixed;
	top: 40px;
	background: #fff;
	border-bottom: 1px solid #efefef;
	z-index: 99;
	.back{
		width: 40px;
		height: 40px;
		position: relative;
	}
	.back::before{
		content: '';
		position: absolute;
		top: 24rpx;
		left: 45rpx;
		width: 10px;
		height: 10px;
		border-top: 2px solid transparent;
		border-left: 2px solid #333;
		border-right: 2px solid transparent;
		border-bottom: 2px solid #333;
		transform: rotate(45deg);
	}
	.title{
		text-align: center;
		flex: 1;
	}
}
image{
	width: calc(100vw - 30px);
	height: 500rpx;
	
}
.comment-item{
	padding: 10px 0px;
	border-bottom: 1px solid #efefef;
	.avatar2{
		width: 30px;
		height: 30px;
		background-color: #000;
		border-radius: 50%;
		margin-right: 8px;
	}
	.name{
		font-size: 13px;
		flex: 1;
	}
	.comment-num{
		padding: 2px 8px;
		border-radius: 20px;
		background-color: #efefef;
		margin-right: 8px;
		font-size: 13px;
	}
}
.list-item{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #efefef;
	padding: 10px 4px;
	.list-title{
		display:-webkit-box;//将盒子转换为弹性盒子
		-webkit-box-orient:vertical;//文本显示方式，默认水平
		-webkit-line-clamp:2;//设置显示多少行
		overflow:hidden;
		font-size: 14px;
		color: #333;
		margin-bottom: 7px;
	}
	.list-img{
		width: 80px;
		height: 60px;
		border-radius: 8px;
		margin-left: 20px;
		background-color: #000;
	}
}
.footer-wrapper{
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: fixed;
	bottom: 0;
	z-index: 99;
	width: 100vw;
	height: 50px;
	padding-bottom: 20px;
	background-color: #FFF;
	.input-box{
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #f5f5f5;
		border-radius: 30px;
		width: 160px;
		height: 36px;
	}
	input{
		width: 120px;
		font-size: 14px;
	}
	.message1,.appreciate1{
		position: relative;
	}
	.message1::before{
		content: '✈';
		position: absolute;
		top: 0;
	}
	.appreciate1::before{
		content: '❤';
	}
	.share{
		width: 36px;
		height: 36px;
		background-color: #c25959;
		border-radius: 50%;
	}
}
</style>
