From 6a5962fe9544005dba620b00fb36c25fe2da4e76 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期二, 16 十一月 2021 15:24:46 +0800
Subject: [PATCH] 后端没修改的情况下添加默认背景图
---
src/pages/vindicate/views/updateSettings.vue | 97 ++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 88 insertions(+), 9 deletions(-)
diff --git a/src/pages/vindicate/views/updateSettings.vue b/src/pages/vindicate/views/updateSettings.vue
index 65355e6..aeb3ad3 100644
--- a/src/pages/vindicate/views/updateSettings.vue
+++ b/src/pages/vindicate/views/updateSettings.vue
@@ -17,14 +17,22 @@
</div>
<div class="cluster-right">
<div class="net-set" v-if="activePage == 0">
- <el-radio-group
+ <!-- <el-radio-group
v-model="radio2"
size="medium"
fill="rgba(61, 104, 225, 1)"
>
<el-radio-button label="妫�鏌ユ洿鏂�"></el-radio-button>
<el-radio-button label="涓婁紶鏇存柊"></el-radio-button>
- </el-radio-group>
+ </el-radio-group> -->
+
+ <div class="button-group">
+ <div class="bottom">
+ <div class="top" :class="{ 'toggle':radio2 !== '妫�鏌ユ洿鏂�' }"></div>
+ <div class="label-left" :class="{ 'toggle':radio2 == '妫�鏌ユ洿鏂�' }" @click="radio2 = '妫�鏌ユ洿鏂�'">妫�鏌ユ洿鏂�</div>
+ <div class="label-right" :class="{ 'toggle':radio2 !== '妫�鏌ユ洿鏂�' }" @click="radio2 = '涓婁紶鏇存柊'">涓婁紶鏇存柊</div>
+ </div>
+ </div>
<div class="update-center" v-if="radio2 == '妫�鏌ユ洿鏂�'">
<img v-if="!upgrading&&hasNewVersion||checking"
@@ -372,16 +380,16 @@
flex: 1;
flex-basis: auto;
box-sizing: border-box;
- border-top:2px solid #E1E0E6 ;
- border-left:2px solid #E1E0E6 ;
+ border-top:4px solid rgb(242, 242, 247) ;
+ border-left:4px solid rgb(242, 242, 247) ;
.cluster-center {
height: 100%;
width: 300px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
- padding: 24px 10px 0 10px;
- border-right: 4px solid #f8f8f8;
+ padding: 9px 10px 0 10px;
+ border-right: 4px solid rgb(242, 242, 247);
.menu-item {
height: 56px;
@@ -464,7 +472,7 @@
justify-content: start;
height: 95%;
padding: 0 30px;
- .el-radio-group {
+ /* .el-radio-group {
margin-top:33px ;
.el-radio-button__inner {
font-size: 14px;
@@ -489,6 +497,62 @@
color: white !important;
}
}
+ } */
+ .button-group {
+ margin: 0 auto;
+ margin-top: 30px;
+ width: 168px;
+ height: 28px;
+ .bottom {
+ position: relative;
+ height: 100%;
+ background: #F2F2F7;
+ border-radius: 20px;
+ cursor: pointer;
+ .top {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 84px;
+ height: 28px;
+ background: #4E94FF;
+ border-radius: 20px;
+ transition: all .2s linear;
+ &.toggle {
+ left: 84px;
+ }
+ }
+ .label-left {
+ position: absolute;
+ width: 84px;
+ height: 28px;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ font-size: 14px;
+ line-height: 28px;
+ font-weight: 700;
+ color: #333333;
+ &.toggle {
+ color: #fff;
+ }
+ }
+ .label-right {
+ position: absolute;
+ width: 84px;
+ height: 28px;
+ top: 0;
+ right: 0;
+ z-index: 1;
+ font-size: 14px;
+ line-height: 28px;
+ font-weight: 700;
+ color: #333333;
+ &.toggle {
+ color: #fff;
+ }
+ }
+ }
}
@keyframes spin {
from {
@@ -697,12 +761,12 @@
}
}
.wifi {
- padding: 10px 0 0 10px;
+ padding: 10px 10px 0 10px;
.bar {
display: flex;
align-items: center;
height: 50px;
- background-color: #f8f8f8;
+ background-color: #F2F2F7;
justify-content: space-between;
border-radius: 12px;
margin-bottom: 4px;
@@ -724,9 +788,24 @@
height: 14px;
margin-right: 17px;
}
+
+ .el-switch__core {
+ width: 30px !important;
+ height: 14px !important;
+ &::after {
+ top: 0px !important;
+ left: 0px !important;
+ width: 12px !important;
+ height: 12px !important;
+ }
+ }
+
.is-checked .el-switch__core{
background-color: var(--colorCard) !important;
border: 1px solid var(--colorCard) !important;
+ &::after {
+ margin-left: 16px
+ }
}
}
--
Gitblit v1.8.0