<template>
	<view>
		<view class="grid-container">
			<view class="grid-item">
				<view class="icon1">
					<image src="@/static/image/event.png"></image>
				</view>
				<div class="caption">事件提醒</div>
			</view>
			<view class="grid-item">
				<view class="icon2">
					<image src="../../static/image/alarm.png"></image>
				</view>
				<div class="caption">紧急通知</div>
			</view>
			<view class="grid-item">
				<view class="icon3">
					<image src="../../static/image/policy.png"></image>
				</view>
				<div class="caption">政策通知</div>
			</view>
			<view class="grid-item">
				<view class="icon4">
					<image src="../../static/image/things.png"></image>
				</view>
				<div class="caption">事物通知</div>
			</view>
		</view>
		<scroll-view class="scoll">
			<view class="column" :style="columnStyle1" @click="selected1()">事件提醒</view>
			<view class="column" :style="columnStyle2" @click="selected2()">紧急通知</view>
			<view class="column" :style="columnStyle3" @click="selected3()">政策通知</view>
			<view class="column" :style="columnStyle4" @click="selected4()">事物通知</view>
		</scroll-view>
		<view v-if="nowcomponent === 'work'">
			<work></work>
		</view>
		<view v-if="nowcomponent === 'emergent'">
			<emergent></emergent>
		</view>
		<view v-if="nowcomponent === 'policy'">
			<policy></policy>
		</view>
		<view v-if="nowcomponent === 'thing'">
			<thing></thing>
		</view>
	</view>
</template>

<script>
	import work from '../../components/messages/work.vue';
	import emergent from '../../components/messages/emergent.vue';
	import policy from '../../components/messages/policy.vue';
	import thing from '../../components/messages/thing.vue'
	export default {
		components: {
			work,emergent,policy,thing
		},
		data() {
			return {
				nowcomponent:'',
				columnStyle1: '',
				columnStyle2: '',
				columnStyle3: '',
				columnStyle4: '',
			};
		},
		methods: {
			selected1() {
				this.nowcomponent = 'work';
				this.columnStyle1 = `color: red;`;
				this.columnStyle2 = this.columnStyle3 = this.columnStyle4 =`color:black`;
				//console.log(this.index)
			},
			selected2() {
				this.nowcomponent = 'emergent';
				this.columnStyle2 = `color: red;`;
				this.columnStyle1 = this.columnStyle3 = this.columnStyle4 =`color:black`;
			},
			selected3() {
				this.nowcomponent = 'policy';
				this.columnStyle3 = `color: red;`;
				this.columnStyle1 = this.columnStyle2 = this.columnStyle4 =`color:black`;
				
			},
			selected4() {
				this.nowcomponent = 'thing'
				this.columnStyle4 = `color: red;`;
				this.columnStyle1 = this.columnStyle2 = this.columnStyle3 =`color:black`;
				
			},
		}
	}
</script>

<style lang="scss">
.grid-container {
	background-color: #ffffff;
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: no; /* 允许换行 */
    justify-content: space-between; /* 主轴上均匀分布项目 */
    align-content: space-between; /* 交叉轴上均匀分布项目 */
    width: 100%; /* 视图宽度 */
    height: 150rpx; /* 视图高度 */
	white-space: pre-wrap;
}

.grid-item {
    flex: 0 0 calc(25%); /* 占据一半宽度减去一半的间距 */
    background-color: #ffffff; /* 背景颜色 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #ffffff;
	flex-direction: column;
}
.icon1{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: rgb(189,220,253);
	image{
		margin: 16rpx;
		width: 70rpx;
		height: 70rpx;
	}
}
.icon2{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: rgb(255,207,199);
	image{
		margin: 16rpx;
		width: 70rpx;
		height: 70rpx;
	}
}
.icon3{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: rgb(187,243,220);
	image{
		margin: 16rpx;
		width: 70rpx;
		height: 70rpx;
	}
}
.icon4{
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: rgb(202,232,252);
	image{
		margin: 16rpx;
		width: 70rpx;
		height: 70rpx;
	}
}
.scoll{
	overflow-x: auto;
	white-space: nowrap;
	width: 100%;
	height: 100rpx;
	margin-bottom: 10rpx;
	.column{
		display: inline-block;
		width: 20%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 26rpx;
		margin-left: 10rpx;
		font-weight: 100;
		color: black;
	}
}
.caption {
	text-align: center; /* 文字居中 */
	color: black;
	font-size: 26rpx;
	margin-top: 5rpx;
}
</style>