<template>
	<view>
		<view class="header">
			<view
				:class="[{ active: selectCount == 1 }]"
				@click="switchUpper(1)"
			>
				专题
			</view>
			<view
				:class="[{ active: selectCount == 2 }]"
				@click="switchUpper(2)"
			>
				资讯
			</view>
		</view>
		<view class="lower-cont">
			<view class="single-info">
				<h4 class="tit">我是内容</h4>
				<h4 class="time">2023-10-31 14:51:23</h4>
			</view>
			<view class="single-info">
				<h4 class="tit">我是内容</h4>
				<h4 class="time">2023-10-31 14:51:23</h4>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectCount: 1
			}
		},
		methods: {
			switchUpper (count) {
				this.selectCount = count
			}
		}
	}
</script>

<style lang="scss">
	body{
		background: linear-gradient(#E5F1FD, #fff);
	}
	.header{
		width: 95%;
		margin: 25rpx auto;
		margin-top: 60rpx;
		display: flex;
		view{
			width: 15%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #B7B7BC;
			font-size: 14px;
		}
		.active{
			color: #000;
			font-weight: bold;
			font-size: 18px;
		}
	}
	.lower-cont{
		width: 90%;
		margin: 25rpx auto;
		margin-top: 0;
		box-sizing: border-box;
		padding: 15rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.single-info{
			width: 100%;
			box-sizing: border-box;
			padding: 15rpx 25rpx;
			border-bottom: 1px solid #F5F5F5;
			display: flex;
			flex-direction: column;
			.tit{
				margin-bottom: 10rpx;
			}
			.time{
				font-weight: normal;
				color: #BEBEBE;
				font-size: 12px;
			}
		}
		.single-info:last-child{
			border-bottom: none;
		}
	}
</style>
