<!-- 
    filename: Switcher.vue
    author: liubin
    date: 2023-12-05 14:29:29
    description: 开关
-->

<template>
	<div class="switcher" style="display: flex; align-items: center; gap: 12px">
		<el-switch v-model="value"></el-switch>
		<span style="color: #fff; font-size: 16px">{{ mode }}</span>
		;
	</div>
</template>

<script>
export default {
	name: 'Switcher',
	components: {},
	props: {},
	data() {
		return {
			value: true,
		};
	},
	computed: {
		mode() {
			return this.value ? '历史详情' : '实时数据';
		},
	},
	methods: {},
};
</script>

<style scoped lang="scss">
.switcher {
	:deep(.el-switch__core) {
        border: none;
        background-color: #213d566b;
        
		&::after {
            background-color: #02457e;
		}
	}
    
	:deep(.is-checked) {
        .el-switch__core {
            border: none;
            background-color: #b4fffc;

			&::after {
				background-color: #08d8cd;
			}
		}
	}
}
</style>
