From 84ad5590bafc58e17ebcf7ebdce2cd70c0c22ea9 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期五, 24 九月 2021 18:54:56 +0800
Subject: [PATCH] 日期时间新版
---
src/pages/settings/components/switchBar.vue | 46 ++++++++++++++++++++++++++++++++--------------
1 files changed, 32 insertions(+), 14 deletions(-)
diff --git a/src/pages/settings/components/switchBar.vue b/src/pages/settings/components/switchBar.vue
index 0cbc558..08aa53f 100644
--- a/src/pages/settings/components/switchBar.vue
+++ b/src/pages/settings/components/switchBar.vue
@@ -1,26 +1,17 @@
<template>
<div class="switch-bar">
<div class="name">{{ barName }}</div>
- <el-switch
- v-model="value"
- active-color="rgba(61, 104, 225, 1)"
- @change="switchChange"
- >
+ <el-switch v-model="value" active-color="#4e94ff" @change="switchChange">
</el-switch>
</div>
</template>
<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 +22,39 @@
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;
- .name {
+ .el-switch {
+ display: inline-flex;
+ align-items: center;
+ position: relative;
font-size: 14px;
+ line-height: 14px;
+ height: 14px;
+ 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;
+ }
+ }
+ .name {
+ font-size: 12px;
+ color: #4f4f4f;
+ font-weight: bold;
}
}
</style>
--
Gitblit v1.8.0