<template>
	<view>
		<headers :showBack="false" :themeType="'white'">
			<view class="headerName">
				消息
			</view>
		</headers>
		<view class="operateBar" @click="toList('通知公告')">
			<view class="left">
				<view class="box">
					<view class="num">
						26
					</view>
					<image class="operateIcon" src="@/static/file.png" mode="widthFix"></image>
				</view>
				通知公告
			</view>
			<view class="right">
				<view class="time">
					2023-3-21
				</view>
			</view>
		</view>
		<view class="operateBar" @click="toList('任务代办')">
			<view class="left">
				<view class="box">
					<view class="num">
						26
					</view>
					<image class="operateIcon" src="@/static/file.png" mode="widthFix"></image>
				</view>
				任务代办
			</view>
			<view class="right">
				<view class="time">
					2023-3-21
				</view>
			</view>
		</view>
		<view class="operateBar" @click="toList('风险预警')">
			<view class="left">
				<view class="box">
					<view class="num">
						26
					</view>
					<image class="operateIcon" src="@/static/file.png" mode="widthFix"></image>
				</view>
				风险预警
			</view>
			<view class="right">
				<view class="time">
					2023-3-21
				</view>
			</view>
		</view>
	
		<footers :activeTab="'messageTask'"></footers>
	</view>
</template>

<script>
	import footers from "../../components/footers/footers.vue"
	import headers from "@/components/headers/headers.vue"
	
	export default {
		components: {
			footers,
			headers
		},
		data() {
			return{
				accountType: 1,
			}
		},
		methods: {
			toList(name){
				//带头部名称跳转
				uni.navigateTo({
					url: './messageList?name='+name
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.operateBar {
		background-color: #FFFFFF;
		font-size: 28rpx;
		height: 58px;
		display: flex;
		margin: 0 30rpx;
		padding: 24rpx 0;
		justify-content: space-between;
		border-bottom: 1px solid #f3f3f3;
	
		.left {
			display: flex;
			align-items: center;
			.box{
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				width: 64rpx;
				height: 64rpx;
				margin-right: 20rpx;
				.num{
					position: absolute;
					right: 0;
					top: 0;
					font-size: 16rpx;
					padding: 0 4px;
					background-color: red;
					color: #fff;
					border-radius: 24rpx;
				}
				.operateIcon {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.right{
			display: flex;
			.time{
				font-size: 24rpx;
				color: #c3c3c3;
			}
		}
		
	}
</style>