From a6f495032e2edd41f3fed538daaa40a3287e5754 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 15 十月 2021 17:51:32 +0800
Subject: [PATCH] 10.15bug修复
---
src/pages/settings/index/index.vue | 82 +++++++++++++++++++++++++++++-----------
1 files changed, 59 insertions(+), 23 deletions(-)
diff --git a/src/pages/settings/index/index.vue b/src/pages/settings/index/index.vue
index 1e4076b..79d3f9d 100644
--- a/src/pages/settings/index/index.vue
+++ b/src/pages/settings/index/index.vue
@@ -16,7 +16,12 @@
<div class="container-center" v-if="activeIndex == 0">
<div class="account-left" v-if="activeIndex == 0">
- <div class="account-list">
+ <div class="account-list"
+ :class="{'account-list-scroll'
+ :account_list_scroll}"
+ @mouseenter="account_list_scroll = true"
+ @mouseleave="account_list_scroll = false"
+ >
<div
class="account-card"
:class="activeAccountIndex == index ? 'account-card-active' : ''"
@@ -602,7 +607,7 @@
ref="view_6"
></deviceInfo>
</div>
- <div class="welcome-page" v-else ref="curPage">
+ <div class="welcome-page" v-else ref="curPage" @mouseup="mouseDownIndex = ''">
<div
class="search-box"
:class="showRecomand ? 'border-change' : ''"
@@ -639,6 +644,8 @@
<div
class="nav-child"
@click="openWelcome(i)"
+ @mousedown="mouseDownIndex = i"
+ :class="mouseDownIndex === i? 'nav-child-active':''"
v-for="(item, i) in menuArr"
:key="i"
>
@@ -833,6 +840,7 @@
inputHour: "",
inputMin: "",
inputSec: "",
+ mouseDownIndex:'',
inputYrs: "",
showInputNickName: false,
inputMonth: "",
@@ -878,6 +886,7 @@
],
confirmPassword: [{ validator: v4, trigger: "blur" }],
},
+ account_list_scroll: false
};
},
created(){
@@ -894,6 +903,11 @@
// }
},
mounted() {
+ window.addEventListener("message",(e)=>{
+ if(e.data.msg === '杩斿洖绯荤粺璁剧疆') {
+ this.showWelcome = true
+ }
+ })
const menu = getUrlKey("menu");
if (menu) {
this.showWelcome = false;
@@ -1640,7 +1654,7 @@
text-align: left;
box-sizing: border-box;
padding: 0 20px;
- color: #333333;
+ color: #4F4F4F;
font-size: 14px;
cursor: pointer;
}
@@ -1650,7 +1664,7 @@
text-align: left;
box-sizing: border-box;
padding: 0 20px;
- color: #333333;
+ color: #4F4F4F;
font-size: 14px;
}
.res-bar:hover {
@@ -1661,6 +1675,8 @@
}
}
.nav-items {
+ max-width: 960px;
+ margin: 0 auto;
.nav-child {
box-sizing: border-box;
background-color: rgba(251, 251, 255, 0.1);
@@ -1677,8 +1693,11 @@
cursor: pointer;
border: 2px solid #F2F2F7;
- &:hover {
+ &-active {
border: 2px solid #4E94FF;
+ }
+
+ &:hover {
background: #F2F2F7;
}
@@ -1699,7 +1718,7 @@
font-size: 16px;
font-weight: bold;
margin-top: 24px;
- color: #333333;
+ color: #4F4F4F;
}
}
}
@@ -1714,7 +1733,8 @@
flex-basis: auto;
box-sizing: border-box;
background-color: #fff;
- border-top: 1px solid #e1e0e6;
+ color: #4F4F4F;
+ border-top: 2px solid #E1E0E6;
.container-left {
height: 100%;
width: 244px;
@@ -1727,22 +1747,22 @@
height: 56px;
cursor: pointer;
border-radius: 8px;
- margin-bottom: 10px;
+ margin-bottom: 4px;
display: flex;
align-items: center;
padding: 0 20px;
.card-text {
margin-left: 20px;
- color: #333333;
+ color: #4F4F4F;
font-weight: bold;
font-size: 16px;
line-height: 22px;
height: 22px;
}
img {
- height: 40px;
- width: 40px;
+ height: 30px;
+ width: 30px;
}
.w {
display: none;
@@ -1773,15 +1793,29 @@
overflow: auto;
flex-shrink: 0;
padding: 10px;
- border-right: 4px solid #f2f2f7;
+ padding-top: 6px;
+ padding-right: 5px;
+ border-top: 4px solid #f2f2f7;
+ border-left: 4px solid #f2f2f7;
box-sizing: border-box;
background-color: #fbfaff;
- border-left: 4px solid #f2f2f7;
.account-left {
height: 100%;
.account-list {
height: calc(85%);
overflow: auto;
+ padding-right: 5px;
+ &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb { visibility: hidden; }
+ &::-webkit-scrollbar {
+ background-color: #fff;
+ }
+
+ &.account-list-scroll::-webkit-scrollbar-thumb, &.account-list-scroll::-webkit-scrollbar-track {
+ visibility: visible;
+ }
+ &.account-list-scroll::-webkit-scrollbar {
+ background-color: #f5f5f5;
+ }
}
.add-account {
color: var(--colorCard);
@@ -1818,7 +1852,7 @@
height: 19.21px;
background: #ffffff;
border-radius: 20px;
- color: #333333;
+ color: #4F4F4F;
transform: scale(0.833333);
line-height: 22.21px;
span {
@@ -1846,6 +1880,8 @@
position: relative;
padding: 30px 40px;
background: #f2f2f7;
+ border-left: 4px solid #f2f2f7;
+ border-top: 4px solid #f2f2f7;
.account-right {
height: 100%;
.account-content {
@@ -1903,7 +1939,7 @@
display: flex;
flex-direction: column;
align-items: center;
- color: #333333;
+ color: #4F4F4F;
min-width: 200px;
.user-name {
margin-bottom: 10px;
@@ -2009,7 +2045,7 @@
font-weight: bold;
font-size: 16px;
line-height: 22px;
- color: #333333;
+ color: #4F4F4F;
margin-bottom: 40px;
height: 28px;
display: flex;
@@ -2029,7 +2065,7 @@
border-radius: 8px;
padding: 0 15px 0 20px;
.el-select-dropdown__item {
- color: #333333;
+ color: #4F4F4F;
height: 32px;
font-size: 12px;
line-height: 32px;
@@ -2074,7 +2110,7 @@
width: 100%;
}
.el-select .el-input .el-select__caret {
- color: #333333;
+ color: #4F4F4F;
font-size: 14px;
font-weight: 600;
}
@@ -2098,7 +2134,7 @@
font-size: 15px;
}
.el-input__clear {
- color: #333333;
+ color: #4F4F4F;
font-size: 16px;
line-height: 48px;
}
@@ -2117,7 +2153,7 @@
line-height: 48px;
font-size: 16px;
font-weight: 600;
- color: #333333;
+ color: #4F4F4F;
height: 48px;
background: #fbfaff;
border-bottom: 2px solid #f2f2f7;
@@ -2239,7 +2275,7 @@
border-radius: 8px;
padding: 0 15px 0 20px;
.el-select-dropdown__item {
- color: #333333;
+ color: #4F4F4F;
height: 32px;
font-size: 12px;
line-height: 32px;
@@ -2291,7 +2327,7 @@
width: 100%;
}
.el-select .el-input .el-select__caret {
- color: #333333;
+ color: #4F4F4F;
font-size: 14px;
font-weight: 600;
}
@@ -2302,7 +2338,7 @@
.datetime-right {
.datetime-left {
.device-time {
- color: #333333;
+ color: #4F4F4F;
.title {
display: flex;
justify-content: center;
--
Gitblit v1.8.0