From d7e24c64a3961040fdc7fec835c2efa5d2f106c0 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期日, 26 九月 2021 19:54:54 +0800
Subject: [PATCH] 弹层层级bug修复v2
---
src/pages/settings/views/keyboardLanguage.vue | 171 +++++++++++++++++++++++++++++---------------------------
1 files changed, 88 insertions(+), 83 deletions(-)
diff --git a/src/pages/settings/views/keyboardLanguage.vue b/src/pages/settings/views/keyboardLanguage.vue
index bdcdf56..2e30cae 100644
--- a/src/pages/settings/views/keyboardLanguage.vue
+++ b/src/pages/settings/views/keyboardLanguage.vue
@@ -1,20 +1,22 @@
<template>
<div class="all">
- <div class="cluster-content">
- <div class="cluster-center" ref="left">
+ <div class="kb-content">
+ <div class="kb-center" ref="left">
<div
class="menu-item"
v-for="(item, i) in tabList"
+ :class="activePage == i ? 'menu-item-active' : ''"
:key="i"
- @click="openRight(item, i)"
+ @click="openRight( i)"
ref="leftbar"
>
- <div>{{ item.name }}</div>
+ <span class="iconfont">{{ item.icon }}</span>
+ <span class="title">{{ item.name }}</span>
</div>
</div>
- <div class="cluster-right">
- <div class="lang" v-if="activePage == '绯荤粺璇█'">
- <div class="title">璇█鍒楄〃</div>
+ <div class="language-right">
+ <div class="lang" v-if="activePage == 0">
+ <div class="bar title">璇█鍒楄〃</div>
<div
class="bar"
v-for="(item, i) in langList"
@@ -22,13 +24,16 @@
@click="pickLang(item, i)"
>
<span class="name">{{ item.Name }}</span>
- <span class="icon iconfont" v-show="activeLang == item.Lang"
- >宸查��</span
+ <span
+ class="icon iconfont"
+ style="color: #4E94FF;font-size:16px;"
+ v-show="activeLang == item.Lang"
+ ></span
>
</div>
</div>
- <div class="lang" v-if="activePage == '閿洏绠＄悊'">
- <div class="title">閿洏甯冨眬</div>
+ <div class="lang" v-if="activePage == 1">
+ <div class="title bar">閿洏甯冨眬</div>
<div
class="bar"
v-for="(item, i) in keyboardList"
@@ -36,8 +41,12 @@
@click="pickKb(item, i)"
>
<span class="name">{{ item.name }}</span>
- <span class="icon iconfont" v-show="activeKb == item.id">宸查��</span>
- <!-- <span class="icon iconfont"></span> -->
+ <span
+ class="icon iconfont"
+ style="color: #4E94FF;font-size:16px;"
+ v-show="activeKb == item.id"
+ ></span
+ >
</div>
</div>
</div>
@@ -47,23 +56,6 @@
<script>
import {
- createSerfCluster,
- randomPwd,
- search,
- getSearchNodes,
- stopSearching,
- findCluster,
- updateClusterName,
- joinCluster,
- leave,
- getVrrp,
- setVrrp,
- createESNode,
- addESNode,
- getEsClusterInfo,
-} from "@/api/clusterManage";
-
-import {
getLangs,
setLang,
getLang,
@@ -71,25 +63,19 @@
getCurKeyboardLayout,
setKeyboardLayout,
} from "@/api/system";
-import { isIPv4 } from "@/scripts/validate";
export default {
data() {
return {
activeLang: "",
activeKb: "",
- inWifiDetail: false,
- inWireDetail: false,
langList: [],
keyboardList: [],
- tabList: [{ name: "绯荤粺璇█" }, { name: "閿洏绠＄悊" }],
- activePage: "绯荤粺璇█",
- rules: {
- deviceName: [
- { required: true, message: "璇疯緭鍏ヨ澶囧悕绉�", trigger: "change" },
- ],
- },
- value: "",
+ tabList: [
+ { name: "绯荤粺璇█", icon: "\ue6e8" },
+ { name: "閿洏绠＄悊", icon: "\ue6fe" },
+ ],
+ activePage: 0,
};
},
mounted() {
@@ -98,14 +84,12 @@
this.fetchKeyBoardList();
this.getCurKb();
},
- props: ["barName"],
methods: {
getCurKb() {
getCurKeyboardLayout().then((res) => {
this.activeKb = res.data.keyboard;
});
},
-
getCurLang() {
getLang().then((res) => {
if (res && res.success) {
@@ -128,6 +112,9 @@
});
},
pickLang(item) {
+ if (item.Lang==this.activeLang) {
+ return
+ }
setLang({
lang: item.Lang,
}).then(
@@ -141,11 +128,14 @@
);
},
pickKb(item) {
+ if (this.activeKb==item.id) {
+ return
+ }
setKeyboardLayout({
layout: item.id,
}).then(
(res) => {
- this.getCurKb()
+ this.getCurKb();
this.$message.success(res.data);
},
(err) => {
@@ -153,21 +143,8 @@
}
);
},
- openRight(item, i) {
- this.activePage = item.name;
- this.$refs["leftbar"].forEach((x) => {
- x.style.backgroundColor = "rgba(248, 248, 248, 1)";
- x.style.color = "#333";
- });
- this.$refs["leftbar"][i].style.backgroundColor = "rgb(61, 104, 225)";
- this.$refs["leftbar"][i].style.color = "white";
- },
- wifiControl(val) {},
- checkWifi() {
- this.inWifiDetail = true;
- },
- checkWire(item) {
- this.inWireDetail = true;
+ openRight(i) {
+ this.activePage = i;
},
},
};
@@ -177,45 +154,59 @@
width: 100%;
}
-.cluster-content {
+.kb-content {
+ font-weight: 700;
height: 100%;
display: flex;
flex-direction: row;
flex: 1;
flex-basis: auto;
box-sizing: border-box;
- .cluster-center {
+ .kb-center {
height: 100%;
- width: 280px;
+ width: 300px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
- padding: 10px;
- border-right: 5px solid #f8f8f8;
-
- // background-color: lavender;
+ padding: 24px 10px 0px 10px;
+ background-color: #FBFAFF;
+ border-right: 4px solid #F2F2F7;
.menu-item {
- background-color: #f8f8f8;
- height: 40px;
- margin-bottom: 10px;
+ /* background-color: #F2F2F7; */
+ height: 56px;
+ margin-bottom: 4px;
border-radius: 8px;
- line-height: 40px;
+ line-height: 56px;
box-sizing: border-box;
- font-size: 14px;
- padding: 0 20px;
+ padding: 0 20px;cursor: pointer;
display: flex;
- justify-content: space-between;
+ align-items: center;
+ color: #333;
+ .title {
+ font-size: 16px;
+ font-weight: 700;
+ }
+ .iconfont {
+ margin: 15px;
+ font-size: 24px;
+ }
+ }
+ .menu-item-active {
+ background-color: var(--colorCard);
+ color: white;
+ }
+ .menu-item:hover {
+ background-color: var(--colorCard);
+ color: white;
}
}
- .cluster-right {
+ .language-right {
flex: 1;
flex-basis: auto;
overflow: auto;
- // background-color: rgba(240, 242, 245, 1);
box-sizing: border-box;
position: relative;
- padding: 20px 40px;
- // .create-new .join-exist {
+ padding: 10px;
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)
@@ -249,15 +240,29 @@
}
.lang {
.bar {
- height: 50px;
- background-color: aliceblue;
- border-radius: 10px;
+ height: 48px;
+ background-color: #f8f8f8;
+ border-radius: 8px;
line-height: 50px;
- box-sizing: border-box;
- padding: 0 20px;
+ box-sizing: content-box;
+ padding: 0 15px 0 20px;
display: flex;
justify-content: space-between;
- margin-bottom: 10px;
+ cursor: pointer;
+ margin-bottom: 4px;
+ border: 2px solid #f8f8f8;
+ .name{
+ font-size: 14px;
+ }
+ }
+ .bar:hover{
+ border: 2px solid #4E94FF;
+ }
+ .title {
+ cursor:default ;
+ font-size: 16px;
+ justify-content: center;
+ border: 2px solid #f8f8f8 !important;
}
}
.save-btn {
--
Gitblit v1.8.0