From b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 21 七月 2021 16:40:17 +0800
Subject: [PATCH] all
---
src/pages/settings/views/keyboardLanguage.vue | 151 +++++++++++++++++++++++++++-----------------------
1 files changed, 82 insertions(+), 69 deletions(-)
diff --git a/src/pages/settings/views/keyboardLanguage.vue b/src/pages/settings/views/keyboardLanguage.vue
index e8ee1da..a7e17b8 100644
--- a/src/pages/settings/views/keyboardLanguage.vue
+++ b/src/pages/settings/views/keyboardLanguage.vue
@@ -1,31 +1,52 @@
<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)"
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="language-right">
+ <div class="lang" v-if="activePage == 0">
<div class="title">璇█鍒楄〃</div>
- <div class="bar" v-for="(item, i) in langList" :key="i" @click="pickLang(item, i)">
+ <div
+ class="bar"
+ v-for="(item, i) in langList"
+ :key="i"
+ @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: #3d68e1;font-size:18px;"
+ v-show="activeLang == item.Lang"
+ ></span
+ >
</div>
</div>
- <div class="lang" v-if="activePage == '閿洏绠＄悊'">
+ <div class="lang" v-if="activePage == 1">
<div class="title">閿洏甯冨眬</div>
- <div class="bar" v-for="(item, i) in keyboardList" :key="i" @click="pickKb(item, i)">
+ <div
+ class="bar"
+ v-for="(item, i) in keyboardList"
+ :key="i"
+ @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: #3d68e1;font-size:18px;"
+ v-show="activeKb == item.id"
+ ></span
+ >
</div>
</div>
</div>
@@ -35,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,
@@ -59,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() {
@@ -86,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) {
@@ -116,6 +112,9 @@
});
},
pickLang(item) {
+ if (item.Lang==this.activeLang) {
+ return
+ }
setLang({
lang: item.Lang,
}).then(
@@ -129,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) => {
@@ -142,20 +144,7 @@
);
},
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;
+ this.activePage = i;
},
},
};
@@ -165,14 +154,14 @@
width: 100%;
}
-.cluster-content {
+.kb-content {
height: 100%;
display: flex;
flex-direction: row;
flex: 1;
flex-basis: auto;
box-sizing: border-box;
- .cluster-center {
+ .kb-center {
height: 100%;
width: 280px;
overflow: auto;
@@ -180,30 +169,41 @@
flex-shrink: 0;
padding: 10px;
border-right: 5px solid #f8f8f8;
-
- // background-color: lavender;
.menu-item {
background-color: #f8f8f8;
- height: 40px;
+ height: 50px;
margin-bottom: 10px;
border-radius: 8px;
- line-height: 40px;
+ line-height: 50px;
box-sizing: border-box;
font-size: 14px;
padding: 0 20px;
display: flex;
- justify-content: space-between;
+ align-items: center;
+ .title {
+ font-size: 16px;
+ }
+ .iconfont {
+ margin-right: 10px;
+ font-size: 19px;
+ }
+ }
+ .menu-item-active {
+ background-color: #3d68e1;
+ color: white;
+ }
+ .menu-item:hover {
+ background-color: #3d68e1;
+ 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 {
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)
@@ -236,16 +236,29 @@
max-width: none !important;
}
.lang {
+ .title {
+ height: 30px;
+ line-height: 30px;
+ font-size: 16px;
+ margin-bottom: 10px;
+ }
.bar {
- height: 50px;
- background-color: aliceblue;
+ height: 48px;
+ background-color: #f8f8f8;
border-radius: 10px;
line-height: 50px;
box-sizing: border-box;
padding: 0 20px;
display: flex;
justify-content: space-between;
- margin-bottom: 10px;
+ cursor: pointer;
+ margin-bottom: 12px;
+ .name{
+ font-size: 15px;
+ }
+ }
+ .bar:hover{
+ background-color: #e9e9e9;
}
}
.save-btn {
--
Gitblit v1.8.0