<template>
	<view class="container">
		<view class="list" v-for="(item,index) in list" :key="index">
			<view class="item-top">
				<view class="title" :class="{'boldtitle':item.dot}">
					<view class="dot" v-if="item.dot"></view>
					<view class="u-line-1" style="max-width: 580rpx;">{{item.name}}</view>
				</view>
				<image class="arrow" src="/static/index/right-arrow.png" mode="" />
			</view>
			<view class="item-mid">
				<view class="time">{{item.time}}</view>
				<view class="from">{{item.from}}</view>
			</view>
			<view class="item-bot">
				<view class="btn"><image class="img" src="/static/answer.png" mode="" />回复列表</view>
				<view class="btn"><image class="img" src="/static/list.png" mode="" />查看记录</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '办公区管理制度',
					dot: true,
					time: '2022-05-20 18:00:00',
					from:'来自人力资源部'
				},{
					name: '关于人才招聘及新员工试用期管理实施办法',
					dot: true,
					time: '2022-05-20 18:00:00',
					from:'来自人力资源部'
				},{
					name: '关于李秀峰等人的岗位调整与任命通知',
					dot: false,
					time: '2022-05-20 18:00:00',
					from:'来自人力资源部'
				}]
			};
		},
		onLoad(options) {
		},
		onShow() {
		
		},
		methods: {},
	};
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	min-height: 100vh;
	background: #f8f8f8;
	padding: 20rpx 30rpx;
	.list{
		width: 690rpx;
		height: 253rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 12rpx 0px rgba(224,224,224,0.3);
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
		.item-top{
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.title{
				display: flex;
				align-items: center;
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #303030;
				line-height: 42rpx;
				.boldtitle{
					font-weight: 500;
					font-family: PingFangSC-Medium, PingFang SC;
				}
				.dot{
					width: 12rpx;
					height: 12rpx;
					background: #E7483C;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}
			.arrow{
				width: 12rpx;
				height: 28rpx;
			}
			
		}
		.item-mid{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 40rpx;
			margin-bottom: 30rpx;
			.time{
			}
			.from{
			}
		}
		.item-bot{
			display: flex;
			height: 90rpx;
			align-items: center;
			justify-content: center;
			border-top:1px solid #E0E0E0;
			.btn{
				flex:1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #303030;
				&:first-child{
					border-right: 1px solid #f8f8f8;
				}
				.img{
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}
			}
		}
	}
}
</style>
