From ae2d855c89ca722ac7309fdf1aa6ceed370e3b95 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 11 十月 2021 20:22:30 +0800
Subject: [PATCH] 监控ui
---
src/pages/settings/components/switchBar.vue | 60 ++++++++++++++++++++++++++++++++++++------------------------
1 files changed, 36 insertions(+), 24 deletions(-)
diff --git a/src/pages/settings/components/switchBar.vue b/src/pages/settings/components/switchBar.vue
index 08aa53f..507253f 100644
--- a/src/pages/settings/components/switchBar.vue
+++ b/src/pages/settings/components/switchBar.vue
@@ -1,7 +1,12 @@
<template>
<div class="switch-bar">
<div class="name">{{ barName }}</div>
- <el-switch v-model="value" active-color="#4e94ff" @change="switchChange">
+ <el-switch
+ v-model="value"
+ active-color="#4e94ff"
+ :width="30"
+ @change="switchChange"
+ >
</el-switch>
</div>
</template>
@@ -23,33 +28,40 @@
height: 50px;
padding: 0 25px;
justify-content: space-between;
- border-radius: 12px;
+border-radius: 8px;
+
margin-bottom: 10px;
- .el-switch {
- display: inline-flex;
- align-items: center;
+ .el-switch.is-checked .el-switch__core::after {
+ left: 100%;
+ margin-left: -12px;
+ }
+
+ .el-switch__core {
+ margin: 0;
position: relative;
- font-size: 14px;
- line-height: 14px;
+ width: 40px;
height: 14px;
+ border: 1px solid #dcdfe6;
+ outline: 0;
+ border-radius: 10px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background: #dcdfe6;
+ -webkit-transition: border-color 0.3s, background-color 0.3s;
+ transition: border-color 0.3s, background-color 0.3s;
vertical-align: middle;
- .el-switch__core {
- width: 30px !important;
- height: 14px;
- border: 1px solid #E0E0E0;
- border-radius: 20px;
- background: #E0E0E0;
- }
- .el-switch__core:after {
- top: 0px;
- left: -1px;
- width: 12px;
- height: 12px;
- background-color: #fff;
- }
- .el-switch.is-checked .el-switch__core::after {
- margin-left: -10px;
- }
+ }
+ .el-switch__core:after {
+ content: "";
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ border-radius: 100%;
+ -webkit-transition: all 0.3s;
+ transition: all 0.3s;
+ width: 12px;
+ height: 12px;
+ background-color: #fff;
}
.name {
font-size: 12px;
--
Gitblit v1.8.0