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 | 421 +++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 349 insertions(+), 72 deletions(-)
diff --git a/src/pages/vindicate/views/updateSettings.vue b/src/pages/vindicate/views/updateSettings.vue
index 10e68fb..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>
@@ -47,8 +59,14 @@
<div class="desc desc-suc" v-if="!checking && !hasNewVersion">
褰撳墠宸茬粡鏄渶鏂扮増鏈�
</div>
+
+
+ <div class="text-desc" v-if="hasNewVersion && !checking&& !upgrading">
+ {{verText}}
+ </div>
+
<el-button
- v-if="hasNewVersion && !checking"
+ v-if="hasNewVersion && !checking&&!upgrading"
:loading="upgrading"
type="primary"
style="width: 150px"
@@ -56,21 +74,38 @@
@click="upgradeNewVersion"
>鏇存柊</el-button
>
-
- <div class="text-desc" v-if="hasNewVersion && !checking&& !upgrading">
- {{verText}}
- </div>
</div>
+
+
+
<div class="upload-center" v-if="radio2 == '涓婁紶鏇存柊'">
+ <div class="upload-info"><img src="/images/vindicate/閾炬帴 1.png" style="width: 14px;"> 涓婁紶瀹夎杞欢</div>
<div class="upload-top">
- <el-upload
+
+ <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"
- >
+ >
<i class="el-icon-upload"></i>
<div
class="el-upload__text"
@@ -83,6 +118,8 @@
<div class="el-upload__tip" slot="tip"></div>
</el-upload>
+ </div>
+
<span
class="icon iconfont spin-bg"
:class="shengjiing ? 'spin-bg-rot' : ''"
@@ -91,6 +128,7 @@
>
<div class="desc" v-if="shengjiing">姝ｅ湪杩涜鏇存柊鈥︹��</div>
<el-button
+ v-if="!upgrading"
type="primary"
style="width: 150px; font-size: 15px"
@click="upgrade"
@@ -104,7 +142,6 @@
<div class="cur-version">褰撳墠鐗堟湰锛歿{ curVersionName }}</div>
</div>
-
<div class="wifi" v-if="activePage == 1">
<div class="content">
<div class="title">绯荤粺鏇存柊璁剧疆</div>
@@ -169,7 +206,8 @@
upgrading: false,
checking: true,
newVersionName: "",
- hasNewVersion: true,
+ hasNewVersion: false,
+ upStatus:'',
sysSetList: [
{ title: "鑷姩娓呯悊杞欢鍖呯紦瀛�", val: false, name: "sys_auto_clean" },
{ title: "鏇存柊鎻愰啋", val: false, name: "sys_update_notice" },
@@ -182,8 +220,8 @@
],
pkgID: "",
tabList: [
- { name: "绯荤粺鏇存柊", icon: "\ue6f2" },
- { name: "鏇存柊璁剧疆", icon: "\ue6db" },
+ { name: "绯荤粺鏇存柊", icon: "\ue735" },
+ { name: "鏇存柊璁剧疆", icon: "\ue733" },
],
};
},
@@ -252,7 +290,18 @@
uploadUpgradePkg(param).then((res) => {
this.upgrading = false;
this.pkgID = res.data.id;
- });
+ this.upStatus = 1
+ setTimeout(() => {
+ this.upStatus =''
+ }, 2000);
+ }).catch(()=>{
+ this.upgrading = false;
+ this.$refs.myUpload.clearFiles()
+ this.upStatus = 0
+ setTimeout(() => {
+ this.upStatus =''
+ }, 2000);
+ })
},
upgrade() {
this.shengjiing = true;
@@ -315,12 +364,14 @@
}
});
},
+
},
};
</script>
<style lang="scss">
.all {
width: 100%;
+ background-color: #FBFAFF;
}
.update-set-content {
height: 100%;
@@ -329,43 +380,53 @@
flex: 1;
flex-basis: auto;
box-sizing: border-box;
+ border-top:4px solid rgb(242, 242, 247) ;
+ border-left:4px solid rgb(242, 242, 247) ;
.cluster-center {
height: 100%;
- width: 280px;
+ width: 300px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
- padding: 10px;
- border-right: 5px solid #f8f8f8;
+ padding: 9px 10px 0 10px;
+ border-right: 4px solid rgb(242, 242, 247);
.menu-item {
- background-color: #f8f8f8;
- height: 50px;
- margin-bottom: 10px;
+ height: 56px;
+ margin-bottom: 4px;
border-radius: 8px;
- line-height: 50px;
- box-sizing: border-box;
- font-size: 14px;
+ line-height: 56px;
+ box-sizing: border-box;
cursor: pointer;
- padding: 0 20px;
+ padding: 0 15px;
display: flex;
justify-content: space-between;
.con {
.iconfont {
+ font-size: 20px;
+ line-height: 32px;
+ width: 32px;
+ height: 26px;
margin-right: 10px;
+ color: #333;
}
.menu-text {
- font-size: 15px;
+ font-size: 16px;
+ font-weight: 700;
}
}
}
- .menu-item-active {
- color: #fff;
- background-color: rgba(61, 104, 225, 1);
+ .menu-item-active {
+ background-color: var(--colorCard) !important;
+ .iconfont {
+ color: #fff !important;
+ }
+ .menu-text {
+ color: #fff;
+ }
}
- .menu-item:hover {
- color: #fff;
- background-color: rgba(61, 104, 225, 1);
+ .menu-item:hover {
+ background-color: #F2F2F7;
}
}
.cluster-right {
@@ -374,7 +435,6 @@
overflow: auto;
box-sizing: border-box;
position: relative;
- padding: 20px 40px;
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)
@@ -409,8 +469,91 @@
.net-set {
display: flex;
flex-direction: column;
- justify-content: space-between;
+ justify-content: start;
height: 95%;
+ padding: 0 30px;
+ /* .el-radio-group {
+ margin-top:33px ;
+ .el-radio-button__inner {
+ font-size: 14px;
+ width: 84px;
+ height: 28px;
+ padding: 0;
+ border-radius: 20px;
+ text-align: center;
+ line-height: 28px;
+ background: #F2F2F7 !important;
+ border: none !important;
+ box-shadow:none !important;
+ &:hover {
+ color: var(--colorCard) !important;
+ }
+
+ }
+ & label.is-active .el-radio-button__inner {
+ background: var(--colorCard) !important;
+ border: none !important;
+ &:hover {
+ 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 {
transform: rotate(0deg);
@@ -421,20 +564,18 @@
}
.spin-bg {
- color: rgb(206, 205, 205);
- font-size: 100px;
- margin-bottom: 20px;
+
+ width: 60px;
+ margin-top: 60px;
+ margin-bottom:15px ;
}
.spin-bg-rot {
animation: spin 0.8s linear infinite;
}
.desc {
- height: 20px;
- line-height: 20px;
- font-size: 15px;
- color: rgb(231, 121, 58);
- margin-bottom: 20px;
- font-weight: 600;
+ font-weight: bold;
+ font-size: 16px;
+ color: #333333;
}
.update-center {
display: flex;
@@ -442,26 +583,82 @@
align-items: center;
.desc-suc {
- color: #3a8120;
+ color: #333;
+ border-radius: 8px;
}
.el-button {
- width: 100px;
+ margin-top: 48px;
+ width: 150px;
+ height: 40px;
+ border-radius: 25px;
font-size: 15px;
+ background: var(--colorCard) !important;
+ border: none !important;
+ &:hover {
+ color: white !important;
+ }
}
.text-desc{
- width: 260px;
+ width: 90%;
+ height: 150px;
margin-top: 20px;
- background-color: rgba(250, 250, 250, 1);
- border: 1px dashed rgba(220, 220, 220, 1);
- height: 100px;
- padding: 10px 20px;
- color: rgba(94, 94, 94, 1);
+ background-color: #F2F2F7;
+ padding: 20px 30px;
+ color: #333;
text-align: left;
- font-size: 14px;
- border-radius:5px ;
+ font-size: 12px;
+ border-radius:8px ;
}
}
.upload-center {
+ margin-top:44px ;
+ .upload-info {
+ margin-bottom:20px ;
+ text-align: left;
+ font-weight: bold;
+ font-size: 14px;
+ color: #333333;
+ }
+ .upload-container {
+ position: relative;
+ width: 412px;
+ 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;
+ width: 100%;
+ height: 174px;
+ top: 0;
+ left: 0;
+ background-color: #fff;
+ font-weight: bold;
+ font-size: 10px;
+
+ transition: all 1000ms linear 0;
+ -o-transition: all 1000ms linear 0; /*鍏煎parsto鍐呮牳*/
+ -moz-transition: all 1000ms linear 0; /*鍏煎gecko鍐呮牳*/
+ -webkit-transition: all 1000ms linear 0; /*鍏煎webkit鍐呮牳*/
+ }
+ .upload-icon {
+ display: block;
+ margin-top: 32px;
+ margin-bottom:42px ;
+ font-size: 50px;
+ }
+ }
+
.update-center {
height: 160px;
@@ -480,7 +677,13 @@
margin-bottom: 10px;
}
.el-button {
- width: 120px;
+ width: 150px;
+ height: 40px;
+ background: var(--colorCard) !important;
+ border: none !important;
+ &:hover {
+ color: white !important;
+ }
}
.el-button--small {
font-size: 14px;
@@ -493,8 +696,47 @@
box-sizing: border-box;
flex-direction: column;
+ .el-upload {
+ width: 340px !important;
+ height: 117.87px !important;
+ margin: 28px auto;
+ .el-upload-dragger {
+ width: 100% !important;
+ height: 100% !important;
+ i {
+ display: none !important;
+ }
+ .el-upload__text {
+ color: #828282 !important;
+ margin-top: 52px !important;
+ font-size: 14px !important;
+ }
+ .el-loading-text {
+ font-size: 14px !important;
+ color: #333333 !important;
+ }
+ }
+ }
+
+ .el-upload.el-upload--text .el-upload-dragger:hover {
+ border-color: var(--colorCard) !important;
+ }
+
+ em {
+ color: var(--colorCard) !important;
+ }
+
.uploader-btn {
- margin-top: 15px;
+ width: 150px;
+ height: 40px;
+ margin-top: 158px;
+ margin-bottom:25px ;
+ background: var(--colorCard) !important;
+ border: none !important;
+ border-radius: 25px !important;
+ &:hover {
+ color: white !important;
+ }
}
}
.up-text {
@@ -511,35 +753,63 @@
}
}
.cur-version {
+ position: absolute;
+ bottom: 50px;
+ left: 50%;
+ transform: translateX(-50%);
font-size: 14px;
}
}
.wifi {
- .content {
- margin-bottom: 20px;
- }
+ padding: 10px 10px 0 10px;
.bar {
display: flex;
align-items: center;
height: 50px;
- padding: 0 25px;
- background-color: #f8f8f8;
+ background-color: #F2F2F7;
justify-content: space-between;
border-radius: 12px;
- margin-bottom: 10px;
+ margin-bottom: 4px;
+ padding-left:20px ;
.name {
- font-size: 15px;
+ font-size: 14px;
+ font-weight: 700;
}
}
.title {
text-align: left;
- padding: 10px;
+ padding: 17px 0 17px 25px;
font-size: 16px;
+ color:#333;
+ font-weight: 700;
+ }
+ .el-switch{
+ width: 40px;
+ 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
+ }
}
}
.save-btn {
- background-color: #3d68e1;
width: 240px;
height: 40px;
margin: 0 auto;
@@ -548,7 +818,14 @@
line-height: 40px;
font-size: 14px;
margin-top: 20px;
+ background: var(--colorCard) !important;
+ border: none !important;
+ &:hover {
+ color: white !important;
+ }
}
}
+
}
+
</style>
--
Gitblit v1.8.0