From a6f495032e2edd41f3fed538daaa40a3287e5754 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 15 十月 2021 17:51:32 +0800
Subject: [PATCH] 10.15bug修复

---
 src/pages/vindicate/views/updateSettings.vue |   70 +++++++++++++++++++++++++++++++++-
 1 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/src/pages/vindicate/views/updateSettings.vue b/src/pages/vindicate/views/updateSettings.vue
index 589f84a..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"
@@ -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 {

--
Gitblit v1.8.0