uni-zhihuikuangshan-2/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(2)">
				<view class="icon">
					<image v-if="active != 2" src="./icon/kqq.png" mode=""></image>
					<image v-if="active == 2" src="./icon/kqq_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 ref="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 class="go_top" @click="go_top">
			<uni-icons type="top" size="22"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		name: "t-o-news",
		data() {
			return {
				active: 1
			};
		},
		methods: {
			change_active(item) {
				this.active = item
			},
			
			tab_2_onReachBottom(){
				if(this.active == 2){
					this.$refs.tab_2.nextPage();
				}
			},
			
			go_top(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			}
		}
	}
</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;
	}
	
	.go_top{
		z-index: 999;
		position: fixed;
		bottom: 150rpx;
		right: 50rpx;
		
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		// background-color: #FFFFFF;
		background-color: #EEEEEE;
		border-radius: 50%;
		
		font-weight: 700;
	}
</style>