app-station-control-frontend_v1/pages/service-recode/index.vue

<template>
	<view class="content">
		<view class="service_header_box">
			<!-- <view class="service_header_left">
				<view class="service_header_left_title">
				</view>
				<view class="service_header_left_btn">
				</view> 
			</view> -->
			<view class="service_header_right">
				<view class="btn" :class="isSlecte?'active':''" @click="isSlecte=true">
					换电记录
				</view>
				<view class="btn" :class="!isSlecte?'active':''" @click="isSlecte=false">
					充电记录
				</view>
			</view>
		</view>
		<view class="recharge" v-if="!isSlecte">
			<recharge></recharge>
		</view>
		<view class="change" v-else>
			<change></change>
		</view>
	</view>
</template>

<script>
	import change from "./components/change.vue"
	import recharge from "./components/recharge.vue"
	export default {
		components:{
			change,recharge
		},
		data() {
			return {
				isSlecte:true,
			}
		},
		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;
				}
			}
		}
		::v-deep .uni-forms-item__label{
				font-size: 14px;
				color: white;
			}
	}
</style>