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 | 144 ++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 121 insertions(+), 23 deletions(-)
diff --git a/src/pages/vindicate/views/updateSettings.vue b/src/pages/vindicate/views/updateSettings.vue
index 94ba62e..aeb3ad3 100644
--- a/src/pages/vindicate/views/updateSettings.vue
+++ b/src/pages/vindicate/views/updateSettings.vue
@@ -17,25 +17,37 @@
</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 == '妫�鏌ユ洿鏂�'">
- <span v-if="hasNewVersion||checking"
- class="icon iconfont spin-bg"
+ <img v-if="!upgrading&&hasNewVersion||checking"
+ class="spin-bg"
+ src="/images/vindicate/妫�娴嬪姞杞�.png"
:class="upgrading || checking ? 'spin-bg-rot' : ''"
- ></span
- >
- <span v-else
- class="icon iconfont spin-bg"
- ></span
- >
+ />
+ <img v-if="upgrading&&hasNewVersion"
+ class="spin-bg"
+ src="/images/vindicate/鍔犺浇.png"
+ />
+ <img v-if="!checking&&!hasNewVersion"
+ class="spin-bg"
+ src="/images/vindicate/宸叉槸鏈�鏂扮増鏈�.png"
+ />
<div class="desc" v-if="checking && !upgrading">
姝ｅ湪妫�娴嬬増鏈洿鏂扳�︹��
</div>
@@ -67,29 +79,30 @@
<div class="upload-center" v-if="radio2 == '涓婁紶鏇存柊'">
- <div class="upload-info"><span class="icon iconfont"></span> 涓婁紶瀹夎杞欢</div>
+ <div class="upload-info"><img src="/images/vindicate/閾炬帴 1.png" style="width: 14px;"> 涓婁紶瀹夎杞欢</div>
<div class="upload-top">
<div class="upload-container">
<div class="upload-fail " v-if="upStatus===0">
<i class="icon iconfont upload-icon">
- 
+ 
</i>
<p>涓婁紶澶辫触锛岃閲嶆柊涓婁紶銆�</p>
</div>
<div class="upload-success" v-if="upStatus===1">
<i class="icon iconfont upload-icon">
- 
+ 
</i>
<p>涓婁紶鎴愬姛锛岃鐐瑰嚮鏇存柊鎸夐挳寮�濮嬫洿鏂般��</p>
</div>
<el-upload
+ ref="myUpload"
class="upload-demo"
drag
action
- v-show="!shengjiing"
+ v-show="!shengjiing&&upStatus===''"
:http-request="uploadPkg"
:limit="1"
>
@@ -282,6 +295,8 @@
this.upStatus =''
}, 2000);
}).catch(()=>{
+ this.upgrading = false;
+ this.$refs.myUpload.clearFiles()
this.upStatus = 0
setTimeout(() => {
this.upStatus =''
@@ -365,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;
@@ -388,6 +403,8 @@
justify-content: space-between;
.con {
.iconfont {
+ font-size: 20px;
+ line-height: 32px;
width: 32px;
height: 26px;
margin-right: 10px;
@@ -455,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;
@@ -480,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 {
@@ -491,8 +564,8 @@
}
.spin-bg {
- color: rgb(206, 205, 205);
- font-size: 60px;
+
+ width: 60px;
margin-top: 60px;
margin-bottom:15px ;
}
@@ -552,6 +625,16 @@
height: 174px;
background-color: #fff;
border-radius: 8px;
+
+ .upload-fail .iconfont{
+ color: rgb(254, 109, 104);
+ }
+
+ .upload-success .iconfont{
+ color: rgb(78, 148, 255);
+ }
+
+
.upload-success,.upload-fail {
position: absolute;
z-index: 1;
@@ -678,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;
@@ -705,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