From e7de3ae6f46341e2714351793914dcc0b3c3b74e Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 15 十月 2021 17:51:44 +0800
Subject: [PATCH] Merge branch 'bhomebus' of http://192.168.5.5:10010/r/web/vue-smart-ai into bhomebus
---
src/pages/settings/views/NetSettings.vue | 105 ++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 76 insertions(+), 29 deletions(-)
diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index 84a1f90..a8262ae 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -79,7 +79,7 @@
</div>
</div>
</div>
- <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail">
+ <div class="wifi-detail" v-if="activePage == 1 && inWifiDetail" ref="ipvHolder">
<div class="title">鏃犵嚎缃戠粶</div>
<div class="btns">
<div class="cancel">鍒犻櫎</div>
@@ -91,7 +91,6 @@
<el-form
:model="wifiForm"
- :rules="wifiFormRules"
ref="wifiForm"
class="join-form"
>
@@ -119,12 +118,14 @@
<switchBar
:barName="`楂樼骇璁剧疆`"
- @switchChange="highClassSetting"
:value="isHighClass"
></switchBar>
- <div class="general-box" style="margin-bottom: 20px">
- <div class="in-title">IPV4</div>
+ <div class="general-box fold" :class="{'hidden':IPV4_hid}" >
+ <div class="in-title">IPV4
+ <span class="icon iconfont icon-fold"
+ @click="toggleFold('IPV4_hid')"></span>
+ </div>
<el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form">
<el-form-item>
@@ -178,10 +179,13 @@
</el-form>
</div>
- <div class="general-box" style="margin-bottom: 20px">
- <div class="in-title">IPV6</div>
+ <div class="general-box fold" :class="{'hidden':IPV6_hid}" ref="ipv6Holder">
+ <div class="in-title">IPV6
+ <span class="icon iconfont icon-fold"
+ @click="toggleFold('IPV6_hid')"></span>
+ </div>
- <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv4Form">
+ <el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv6Form">
<el-form-item>
<div class="p-title">鏂规硶</div>
<el-select v-model="value" placeholder="璇烽�夋嫨" size="small" :popper-append-to-body="false">
@@ -204,18 +208,18 @@
<div class="p-title">鍓嶇紑</div>
<div style="display: flex; width: 100%">
<el-input
- v-model="wifiForm.password"
+ v-model="ipv6Form.prefix"
placeholder
size="small"
></el-input>
<div class="ad">
- <i class="el-icon-remove-outline"></i>
+ <i class="el-icon-remove-outline" @click="minusPrefix"></i>
</div>
<div class="ad">
- <i class="el-icon-circle-plus-outline"></i>
+ <i class="el-icon-circle-plus-outline" @click="+(ipv6Form.prefix)++"></i>
</div>
- <div class="ad"><i class="el-icon-refresh-left"></i></div>
+ <div class="ad"><i class="el-icon-refresh-left" @click="ipv6Form.prefix=''"></i></div>
</div>
</el-form-item>
@@ -415,6 +419,8 @@
},
],
value: "",
+ IPV4_hid: false,
+ IPV6_hid: false
};
},
components: {
@@ -426,6 +432,10 @@
this.fetchWireList();
},
methods: {
+ minusPrefix(){
+ debugger
+ this.ipv6Form.prefix
+ },
switchNetCard(item) {
if (item.active) {
upNetCard({ ifname: item.name }).then(
@@ -490,10 +500,15 @@
});
},
openRight(i) {
- this.activePage = i;
+ if (i == 0) {
+ this.ruleForm.deviceName = "";
+ this.ruleForm.port = "";
+ this.getCurServer()
+ }
if (i == 1) {
this.inWifiDetail = false;
}
+ this.activePage = i;
},
saveWire(ifname) {
let data = {
@@ -550,6 +565,17 @@
this.openWireDetail(item);
});
},
+ toggleFold(tog) {
+ const demo = this.$refs.ipvHolder
+ if(!(this.IPV4_hid&&!this.IPV6_hid)){
+ setTimeout(() => {
+ demo.scrollIntoView({block: "end", inline: "nearest",behavior: 'smooth'})
+ }, 300);
+ }
+ this[tog] = !this[tog]
+
+
+ }
},
computed: {
showStatus() {
@@ -638,10 +664,11 @@
box-sizing: border-box;
flex-shrink: 0;
padding: 10px;
+ padding-top: 6px;
border-right: 4px solid #f2f2f7;
border-left: 4px solid #f2f2f7;
+ border-top: 4px solid #f2f2f7;
.menu-item {
- background: #f2f2f7;
height: 56px;
margin-bottom: 4px;
border-radius: 8px;
@@ -652,6 +679,11 @@
padding: 0 20px;
display: flex;
justify-content: space-between;
+
+ &:hover {
+ background: #f2f2f7;
+ }
+
.item-left {
display: flex;
align-items: center;
@@ -666,7 +698,7 @@
}
}
.menu-item-active {
- background-color: var(--colorCard);
+ background-color: var(--colorCard) !important;
color: #ffffff;
}
}
@@ -677,11 +709,13 @@
box-sizing: border-box;
position: relative;
padding: 10px;
+ padding-top: 6px;
+ border-top: 4px solid #f2f2f7;
.title {
height: 48px;
font-size: 16px;
line-height: 48px;
- color: #333333;
+ color: #4F4F4F;
font-weight: bold; background: #F2F2F7;
border-radius: 8px;
margin-bottom: 10px;
@@ -711,7 +745,7 @@
border: 2px solid #409eff !important;
}
.el-select-dropdown__item {
- color: #333333;
+ color: #4F4F4F;
height: 32px;
font-size: 12px;
line-height: 32px;
@@ -760,7 +794,7 @@
width: 100%;
}
.el-select .el-input .el-select__caret {
- color: #333333;
+ color: #4F4F4F;
font-size: 14px;
font-weight: 600;
}
@@ -777,7 +811,7 @@
}
.switch-bar .name {
font-size: 14px;
- color: #333;
+ color: #4F4F4F;
font-weight: bold;
}
.wifi-option {
@@ -793,7 +827,7 @@
border-radius: 8px;
.name {
font-size: 14px;
- color: #333;
+ color: #4F4F4F;
font-weight: bold;
.icon {
color: #4e94ff;
@@ -822,17 +856,30 @@
.wifi-detail {
max-width: 454px;
margin: 0 auto;
- .title {
- background: #f2f2f7;
- border-radius: 8px;
- height: 48px;
- margin-bottom: 4px;
- }
+ transition: all 0.3s linear 0s;
.general-box {
+ overflow: hidden;
+ transition: all 0.3s linear 0s;
background: #f2f2f7;
border-radius: 8px;
padding-bottom: 10px;
-
+ margin-bottom: 20px;
+ &.fold {
+ height: 342px;
+ .icon-fold {
+ display: inline-block;
+ font-size: 14px;
+ margin-left: 360px;
+ transition: all 0.3s linear 0s;
+ cursor: pointer;
+ }
+ }
+ &.hidden {
+ height: 34px;
+ .icon-fold {
+ transform: rotate(180deg);
+ }
+ }
.el-form-item {
margin-bottom: 0px;
}
@@ -841,7 +888,7 @@
padding: 14px 20px;
font-weight: bold;
font-size: 14px;
- color: #333333;
+ color: #4F4F4F;
}
.ip-input-container {
max-width: none !important;
@@ -907,7 +954,7 @@
font-size: 15px;
font-weight: bold;
font-size: 14px;
- color: #333333;
+ color: #4F4F4F;
}
.right {
display: flex;
--
Gitblit v1.8.0