update switcher

src/views/databoard/components/SelectorBtnGroup.vue

@@ -6,16 +6,27 @@
 -->
 
 <template>
-	<div class="selectorBtnGroup"></div>
+	<div class="selector-btn-group">
+		<button
+			class="btn"
+			v-for="opt in options"
+			:key="opt"
+			@click="active = opt"
+			:class="active == opt ? 'btn-active' : ''">
+			{{ opt }}
+		</button>
+	</div>
 </template>
 
 <script>
 export default {
 	name: 'SelectorBtnGroup',
 	components: {},
-	props: {},
+	props: ['options'],
 	data() {
-		return {};
+		return {
+			active: this.options[0] || 'default'
+		};
 	},
 	computed: {},
 	methods: {},
@@ -23,6 +34,36 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.selectorBtnGroup {
+button {
+	border: none;
+	appearance: none;
+	outline: none;
+	color: red;
+	font-size: 14px;
+	padding: 8px 12px;
+}
+
+button:first-child {
+	border-top-left-radius: 8px;
+	border-bottom-left-radius: 8px;
+}
+
+button:last-child {
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+}
+.selector-btn-group {
+}
+
+.btn {
+	background: #03233c;
+	color: #fff;
+	cursor: pointer;
+	transition: all 0.3s ease-out;
+
+	&.btn-active, 
+	&:hover {
+		background: #0f3d5c;
+	}
 }
 </style>

src/views/databoard/components/Switcher.vue

@@ -6,24 +6,52 @@
 -->
 
 <template>
-    <div class="switcher">
-        1/2
-    </div>
+	<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 {}
-    },
-    computed: {},
-    methods: {},
-}
+	name: 'Switcher',
+	components: {},
+	props: {},
+	data() {
+		return {
+			value: true,
+		};
+	},
+	computed: {
+		mode() {
+			return this.value ? '历史详情' : '实时数据';
+		},
+	},
+	methods: {},
+};
 </script>
 
 <style scoped lang="scss">
-.switcher {}
+.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>