From 4ff29e301de38488db0ff04f0209c99e37cf30b4 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期二, 07 十二月 2021 18:56:34 +0800
Subject: [PATCH] 对比库管理
---
src/pages/settings/components/switchBar.vue | 73 ++++++++++++++++++++++++------------
1 files changed, 48 insertions(+), 25 deletions(-)
diff --git a/src/pages/settings/components/switchBar.vue b/src/pages/settings/components/switchBar.vue
index 08aa53f..d68bec7 100644
--- a/src/pages/settings/components/switchBar.vue
+++ b/src/pages/settings/components/switchBar.vue
@@ -1,17 +1,33 @@
<template>
<div class="switch-bar">
<div class="name">{{ barName }}</div>
- <el-switch v-model="value" active-color="#4e94ff" @change="switchChange">
+ <el-switch
+ v-model="barValue"
+ active-color="var(--colorCard)"
+ :width="30"
+ @change="switchChange"
+ >
</el-switch>
</div>
</template>
<script>
export default {
+ name: "switchBar",
props: ["barName", "value"],
methods: {
switchChange(val) {
this.$emit("switchChange", val);
+ },
+ },
+ computed: {
+ barValue: {
+ get() {
+ return this.value;
+ },
+ set(newValue) {
+ return newValue;
+ },
},
},
};
@@ -23,33 +39,40 @@
height: 50px;
padding: 0 25px;
justify-content: space-between;
- border-radius: 12px;
- margin-bottom: 10px;
- .el-switch {
- display: inline-flex;
- align-items: center;
+ 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;
- 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