58 lines
948 B
Vue
58 lines
948 B
Vue
<!--
|
|
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>
|