<template>
	<view class="info-box">
		<view v-if="list.length === 0" class="nothing-info">
			<image src="../../static/img/fz_icon_wc/fz_icon_wc.png" class="image"></image>
			<view class="zw">暂无消息</view>
			<view class="noinfo">还没有消失通知</view>
		</view>
		<view v-else class="card-list">
			<view v-for="(item, index) in list" :key="index">
				<view class="time-class">{{item.time}}</view>
				<view v-for="(item1, index1) in item.item"  :key="index1">
					<u-card :title="item1.title" :thumb="item1.thumb" :border="false">
						<view class="" slot="body">
							{{item1.content}}
						</view>
					</u-card>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				list: [
					// {
					// 	time: '2021-01-12  14:23:12',
					// 	item: [
					// 		{
					// 			title: '短视频服务抖达人正式上线',
					// 			thumb: '../../static/img/xx_icon_tz/xx_icon_tz.png',
					// 			content: '抖达人是一款短视频服务型的APP，致力于扶持视频创作者、助力商家打造爆款视频和品牌宣传，真正做到帮助大家达到流量变现。邀请好友一起使用抖达人，塑造专属自己的资源圈，让短视频创业更简单！'
					// 		},
					// 		{
					// 			title: '短视频服务抖达人正式上线',
					// 			thumb: '../../static/img/xx_icon_tz/xx_icon_tz.png',
					// 			content: '抖达人是一款短视频服务型的APP，致力于扶持视频创作者、助力商家打造爆款视频和品牌宣传，真正做到帮助大家达到流量变现。邀请好友一起使用抖达人，塑造专属自己的资源圈，让短视频创业更简单！'
					// 		}
					// 	]
					// },
					// {
					// 	time: '2021-01-12  14:23:12',
					// 	item: [
					// 		{
					// 			title: '短视频服务抖达人正式上线',
					// 			thumb: '../../static/img/xx_icon_tz/xx_icon_tz.png',
					// 			content: '抖达人是一款短视频服务型的APP，致力于扶持视频创作者、助力商家打造爆款视频和品牌宣传，真正做到帮助大家达到流量变现。邀请好友一起使用抖达人，塑造专属自己的资源圈，让短视频创业更简单！'
					// 		},
					// 		{
					// 			title: '短视频服务抖达人正式上线',
					// 			thumb: '../../static/img/xx_icon_tz/xx_icon_tz.png',
					// 			content: '抖达人是一款短视频服务型的APP，致力于扶持视频创作者、助力商家打造爆款视频和品牌宣传，真正做到帮助大家达到流量变现。邀请好友一起使用抖达人，塑造专属自己的资源圈，让短视频创业更简单！'
					// 		}
					// 	]
					// }
				]
			}
		}
	}
</script>

<style scoped lang="scss">
	.info-box {
		height: 100%;
	}
	.nothing-info {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		& .image {
			// width: 170rpx;
			// height: 200rpx;
		}
		& .zw {
			margin-top: 100rpx;
			font-size: 40rpx;
			font-weight: 400;
			color: #CED6F1;
			line-height: 56rpx;
			letter-spacing: 1rpx;
		}
		& .noinfo {
			margin-top: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #9496B1;
			line-height: 40rpx;
		}
	}
	.card-list {
		.time-class {
			color: #FFFFFF;
			font-size: 28rpx;
			text-align: center;
			margin-top: 30rpx;
		}
		& /deep/ .u-card {
			font-size: 28rpx;
			font-weight: 400;
			padding: 30rpx;
			background-color: #2B3062;
		}
		& /deep/ .u-card__head  {
			margin-bottom: 25rpx;
			border-bottom: 1rpx solid #576699;
			padding: 0 0 20rpx 0 !important;
			& /deep/ .u-card__head--left {
				display: flex;
				align-items: center;
				& /deep/ .u-card__head--left__title {
					color: #FFFFFF !important;
				}
			}
		}
		& /deep/ .u-card__body {
			padding: 0 !important;
			color: #9093B7;
		}
	}
</style>
