RedDragonfly/pages/production/production.vue

<template>
	<view class="production">
		<view class="nav">
			<view class="btn" :class="{activate : activate}" @click="activate = !activate">
				运行中
			</view>
			<view class="btn" :class="{activate : !activate}" @click="activate = !activate">
				未运行
			</view>
		</view>
		<view class="bom">
			<in-service v-show="activate"></in-service>
			<not-run v-show= '!activate'></not-run>
		</view>
	</view>
</template>

<script>
	import InService from './InService.vue'
	import NotRun from './NotRun.vue'
	import {production} from '../../api/production.js'
	export default {
		data() {
			return {
				activate: true,
			};
		},
		onReachBottom(){
			console.log(1111);
		},
		components: {
			InService,
			NotRun
		},
		created() {

		}
	}
</script>

<style lang="scss">
	.production {
		height: 100%;

		.nav {
			height: 80rpx;
			display: flex;
			background-color: #f6f6f6;
			color: #000000;

			view {
				flex: 1;
				height: 100%;
				line-height: 80rpx;
				text-align: center;

				&.activate {
					background-color: #85d691;
					color: #f6f6f6;
				}
			}
		}
		.bom{
			height: calc(100% - 80rpx);
			overflow-y: scroll;
		}
	}
</style>