<template>
	<view class="main">
		<image src="../../static/image/image 38@2x.png" style="width: 702rpx;
height: 188rpx;" mode=""></image>
		<view class="items"  v-for="item in list">
			<view class="">
				<image src="/static/image/Group 1813@2x.png" style="width: 80rpx; height: 80rpx;margin-right:16rpx" mode=""></image>
			</view>
			<view style="display: flex;flex-direction: column;width: 100%;">
				<view class=" flexB" style="margin-bottom: 10rpx;">
					<p style="color: #0d1013e6;font-size: 32rpx;font-weight: 500;">{{item.title}}</p>
					<p class="font">{{formattedDate(item.createtime)}}</p>
				</view>
				<view class="flexB">
					<p class="one font">{{item.content}}</p>
					<p class="dian"></p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		methods: {
			formattedDate(timestamp){
			   const date = new Date(timestamp);
			   const year = date.getFullYear();  
			   const month = (date.getMonth() + 1).toString().padStart(2, '0');  
			   const day = date.getDate().toString().padStart(2, '0');  
			   const formattedDate = `${year}-${month}-${day}`;  
			   return formattedDate
			 }
		},
		onLoad() {
			uni.$u.http.post('/api/message/msg_list',{
				page:1,
				pagenum:10
			}).then(res => {
				this.list = res.data.data
			}).catch(err => {
				console.log(err);
			})
		}
	}
</script>

<style scoped lang="scss">
	.font{
		 color: #0d101366;
		 font-size: 26rpx;
		 font-weight: 400;
	}
	.flexB{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
.main{
	padding: 24rpx;
}
.one{
	width: 450rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.items{
	display: flex;
	align-items: center;
	height: 156rpx;
	border-radius: 12rpx;
	opacity: 1;
	background: #ffffffff;
	padding: 0 24rpx;
	margin-top: 20rpx;
}
.dian{
	width: 14.4rpx;
	height: 14.4rpx;
	border-radius: 35.2rpx;
	opacity: 1;
	border: 2rpx solid #ffffffff;
	background: #fc4338ff;
}
</style>