<template>
	<view class="container">
		<view v-if="list.length > 0" class="list-box flex_item" v-for="(ls,index) in list" :key='index' @click="nav(index)">
			<image :src="ls.image_input[0]"></image>
			<view class="list-item">
				<view class="item-box flex">
					<view class="title">{{ls.title}}</view><!-- 
					<view class="time">{{ls.add_time}}</view> -->
				</view>
				<view class="info flex">
					<view class="clamp text-info">{{ls.synopsis}}</view>
					<view class="info-tip"></view>
				</view>
			</view>
		</view>
		<view class="empty-box" v-show="list.length === 0"><empty></empty></view>
	</view>
</template>
<script>
import { article } from '@/api/index.js';
import empty from '@/components/empty';
export default {
	components: {
		empty
	},
	data() {
		return {
			list:''
		};
	},
	onLoad(option){
	   this.loadDate();
	},
	onShow() {
		
	},
	methods: {
		async loadDate(){
			let obj = this;
			article({
				page:1,
				limit:10000
			},2).then(({ data }) => {
				console.log(data)
			});
		},
		nav(index){
			uni.navigateTo({
				url: '/pages/index/informationDetails?id=' + this.list[index].id
			})
		},
	}
};
</script>

<style lang="scss" scoped>
page {
	min-height: 100%;
	background-color: #ffffff;
	.container {
		background-color: #FFFFFF;
		width: 100%;
		padding: 25rpx 25rpx;
		
	}
}
.empty-box{
	margin-top: 100rpx;
	width: 100%;
	height: 500rpx;
}
.list-box{
	border-bottom: 1rpx solid #E3E3E3;
	padding: 25rpx 0rpx;
	image{
		width: 61rpx;
		height: 61rpx;
		border-radius: 100%;
	}
	.list-item{
		padding-left: 25rpx;
		width: 90%;
		.item-box{
			.title{
				font-weight: bold;
				color: #1D2023;
				font-size: 30rpx;
			}
			.time{
				font-weight: 500;
				color: #999999;
				font-size: 20rpx;
			}
		}
		.info{
			padding-top: 20rpx;
			.text-info{
				font-weight: 500;
				color: #999999;
				font-size: 24rpx;
				width: 90%;
			}
			.info-tip{
				width: 11rpx;
				height: 11rpx;
				background-color: #FB555C;
				border-radius: 100%;
			}
		}
	}
}
</style>
