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 | 52 +++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 41 insertions(+), 11 deletions(-)
diff --git a/src/pages/settings/components/switchBar.vue b/src/pages/settings/components/switchBar.vue
index 0cbc558..507253f 100644
--- a/src/pages/settings/components/switchBar.vue
+++ b/src/pages/settings/components/switchBar.vue
@@ -3,7 +3,8 @@
<div class="name">{{ barName }}</div>
<el-switch
v-model="value"
- active-color="rgba(61, 104, 225, 1)"
+ active-color="#4e94ff"
+ :width="30"
@change="switchChange"
>
</el-switch>
@@ -12,15 +13,10 @@
<script>
export default {
- data() {
- return {
- // value: false,
- };
- },
- props: ["barName","value"],
+ props: ["barName", "value"],
methods: {
switchChange(val) {
- this.$emit("switchChange",val);
+ this.$emit("switchChange", val);
},
},
};
@@ -31,12 +27,46 @@
align-items: center;
height: 50px;
padding: 0 25px;
- background-color: rgba(248, 248, 248, 1);
justify-content: space-between;
- border-radius: 12px;
+border-radius: 8px;
+
margin-bottom: 10px;
+ .el-switch.is-checked .el-switch__core::after {
+ left: 100%;
+ margin-left: -12px;
+ }
+
+ .el-switch__core {
+ margin: 0;
+ position: relative;
+ 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: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: 14px;
+ font-size: 12px;
+ color: #4f4f4f;
+ font-weight: bold;
}
}
</style>
--
Gitblit v1.8.0