<template>
    <view class='container'>
		<view class="list">
			
			<view @click="$wskj.to('/pages/home/msg/systemmsg')" class="item">
				<view class="left">
					<image src="@/static/home/system.svg"></image>
					<view>
						<text class="fs-36">系统消息</text>
					</view>
				</view>
				<view class="right">
					<view class="dot">
						<text>9</text>
					</view>
					<image src="@/static/right.png"></image>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
import { mapState } from "vuex"
export default {
    data() {
        return {
			tongzhi: {},
			sysmnews: {}
        };
    },
    onLoad() {
		this.getnewslist()
    },
    computed: {
    	...mapState(['home'])
    },
    methods: {
		getnewslist(){
			const params = {
				url: '/api/index/newslist',
				data: {
					
				}
			}
			this.$request(params).then(res => {
				// console.log(res)
				this.tongzhi = res.data.tongzhi
				this.sysmnews = res.data.sysmnews
			}).catch(err => {
					
			})
		},
    },
};
</script>

<style scoped>
	.list {
		
	}
	.item {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #f5f5f5;
	}
	.left {
		display: flex;
		align-items: center;
	}
	.left > image {
		width: 88rpx;
		height: 88rpx;
		margin-right: 20rpx;
	}
	.left > view {
		display: flex;
		flex-direction: column;
	}
	.left > view>text:nth-child(2) {
		margin-top: 10rpx;
	}
	
	.right {
		display: flex;
		align-items: center;
	}
	.dot {
		padding: 5rpx 10rpx;
		background-color: #FE2C24;
		border-radius: 50%;
		color: #FFF;
		font-size: 16rpx;
	}
	.right > image {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
	}
</style>
