uni-zhihuikuangshan/components/t-o-news/t-o-news.vue

<template>
	<view>
		<!-- tab -->
		<view class="tab">
			<view class="item" @click="change_active(1)">
				<view class="icon">
					<image v-if="active != 1" src="./icon/icon_1.png" mode=""></image>
					<image v-if="active == 1" src="./icon/icon_1_active.png" style="width: 115rpx;height: 80rpx;"
						mode=""></image>
				</view>
				<view class="title">
					<view class="text" :style="active==1?'color:#009FE8;font-weight:700;':'' ">闭环管理</view>
					<view class="tip" :style="active==1?'color:#3a3a3a;':'' ">PDCA循环管理</view>
				</view>
			</view>
			<view class="item" @click="change_active(2)">
				<view class="icon">
					<image v-if="active != 2" src="./icon/icon_2.png" mode=""></image>
					<image v-if="active == 2" src="./icon/icon_2_active.png" style="width: 115rpx;height: 80rpx;"
						mode=""></image>
				</view>
				<view class="title">
					<view class="text" :style="active==2?'color:#009FE8;font-weight:700;':'' ">记录管理</view>
					<view class="tip" :style="active==2?'color:#3a3a3a;':'' ">全部消息一览</view>
				</view>
			</view>
			<view class="item" @click="change_active(3)">
				<view class="icon">
					<image v-if="active != 3" src="./icon/icon_3.png" mode=""></image>
					<image v-if="active == 3" src="./icon/icon_3_active.png" style="width: 115rpx;height: 80rpx;"
						mode=""></image>
				</view>
				<view class="title">
					<view class="text" :style="active==3?'color:#009FE8;font-weight:700;':'' ">宣传展板</view>
					<view class="tip" :style="active==3?'color:#3a3a3a;':'' ">企业文化宣传展示</view>
				</view>
			</view>
		</view>

		<!-- content -->
		<view class="content">
			<view v-if="active == 1">
				<t-o-news-tab-1></t-o-news-tab-1>
			</view>
			<view v-if="active == 2">
				<t-o-news-tab-2></t-o-news-tab-2>
			</view>
			<view v-if="active == 3">
				<t-o-news-tab-3></t-o-news-tab-3>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "t-o-news",
		data() {
			return {
				active: 1
			};
		},
		methods: {
			change_active(item) {
				this.active = item
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2FAF7;
	}

	.tab {
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 25rpx 50rpx;

		display: flex;
		justify-content: space-between;
		align-items: center;

		.item {
			text-align: center;

			.icon {
				height: 80rpx;

				image {
					width: 95rpx;
					height: 66rpx;
				}
			}

			.title {
				margin-top: 10rpx;

				.text {
					font-size: 30rpx;
					color: #727272;
				}

				.tip {
					margin-top: 5rpx;
					font-size: 24rpx;
					color: #979797;
				}
			}
		}
	}
	
	.content{
		margin-top: 20rpx;
	}
</style>