app-station-control-frontend_v1/pages/fault-alarm/index.vue

<template>
	<view class="content">
		<view class="service_header_box">
			<!-- <view class="service_header_left">
				
			</view> -->
			<view class="service_header_right">
				<view class="btn" :class="!isSlecte?'active':''" @click="isSlecte=false">
					当前告警
				</view>
				<view class="btn" :class="isSlecte?'active':''" @click="isSlecte=true">
					 告警记录
				</view>
				
			</view>
		</view>
		<view class="recharge" v-if="!isSlecte">
			<FireAlarm :isSlecte="isSlecte"></FireAlarm>
		</view>
		<view class="change" v-else>
			<Fault :isSlecte="isSlecte"></Fault>
		</view>
	</view>
</template>

<script>
	import Fault from "./components/Fault.vue"
	import FireAlarm from "./components/FireAlarm.vue"
	export default {
		components:{
			Fault,FireAlarm
		},
		data() {
			return {
				isSlecte:false,
			}
		},
		mounted() {
			let showpage = this.$storage.getJson('gotoname')
			if(showpage){
				this.isSlecte = false
			}
		},
		methods: {
			
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		color:white;
		font-size: 24px;
		.service_header_box{
			display: flex;
			justify-content: space-between;
			.service_header_left{
				display: flex;
				.service_header_left_title{
					font-size: 12px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #A8ADC8;
					height: 32px;
					line-height: 32px;
					margin-right: 10px;
				}
				.service_header_left_btn{
					width: 88px;
					height: 32px;
					border-radius: 2px 2px 2px 2px;
					border: 1px solid #91FDB9;
					color: #91FDB9;
					font-size: 14px;
					text-align: center;
					line-height: 32px;
				}
			}
			.service_header_right {
				display: flex;
			
				.btn {
					width: 100px;
					height: 48px;
					background: #263042;
					border-radius: 0px 2px 2px 0px;
					font-size: 16px;
					text-align: center;
					line-height: 48px;
				}
			
				.active {
					background: #91FDB9;
					border-radius: 2px 0px 0px 2px;
					color: black;
				}
			}
		}
		
	}
</style>