From feaf0a9778879ef211c5587a513ba4cbdabb52d0 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期四, 23 六月 2022 17:42:58 +0800
Subject: [PATCH] bug修复
---
src/pages/settings/components/switchBar.vue | 67 +++++++++++++++++++++++++++------
1 files changed, 54 insertions(+), 13 deletions(-)
diff --git a/src/pages/settings/components/switchBar.vue b/src/pages/settings/components/switchBar.vue
index 0cbc558..d68bec7 100644
--- a/src/pages/settings/components/switchBar.vue
+++ b/src/pages/settings/components/switchBar.vue
@@ -2,8 +2,9 @@
<div class="switch-bar">
<div class="name">{{ barName }}</div>
<el-switch
- v-model="value"
- active-color="rgba(61, 104, 225, 1)"
+ v-model="barValue"
+ active-color="var(--colorCard)"
+ :width="30"
@change="switchChange"
>
</el-switch>
@@ -12,15 +13,21 @@
<script>
export default {
- data() {
- return {
- // value: false,
- };
- },
- props: ["barName","value"],
+ name: "switchBar",
+ props: ["barName", "value"],
methods: {
switchChange(val) {
- this.$emit("switchChange",val);
+ this.$emit("switchChange", val);
+ },
+ },
+ computed: {
+ barValue: {
+ get() {
+ return this.value;
+ },
+ set(newValue) {
+ return newValue;
+ },
},
},
};
@@ -31,12 +38,46 @@
align-items: center;
height: 50px;
padding: 0 25px;
- background-color: rgba(248, 248, 248, 1);
justify-content: space-between;
- border-radius: 12px;
- margin-bottom: 10px;
+ border-radius: 8px;
+
+ margin-bottom: 4px;
+ .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