| | |
| | | |
| | | <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' : ''" |
| | |
| | | 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' : ''" |
| | |
| | | <div |
| | | class="nav-child" |
| | | @click="openWelcome(i)" |
| | | @mousedown="mouseDownIndex = i" |
| | | :class="mouseDownIndex === i? 'nav-child-active':''" |
| | | v-for="(item, i) in menuArr" |
| | | :key="i" |
| | | > |
| | |
| | | inputHour: "", |
| | | inputMin: "", |
| | | inputSec: "", |
| | | mouseDownIndex:'', |
| | | inputYrs: "", |
| | | showInputNickName: false, |
| | | inputMonth: "", |
| | |
| | | ], |
| | | confirmPassword: [{ validator: v4, trigger: "blur" }], |
| | | }, |
| | | account_list_scroll: false |
| | | }; |
| | | }, |
| | | created(){ |
| | |
| | | // } |
| | | }, |
| | | mounted() { |
| | | window.addEventListener("message",(e)=>{ |
| | | if(e.data.msg === '返回系统设置') { |
| | | this.showWelcome = true |
| | | } |
| | | }) |
| | | const menu = getUrlKey("menu"); |
| | | if (menu) { |
| | | this.showWelcome = false; |
| | |
| | | text-align: left; |
| | | box-sizing: border-box; |
| | | padding: 0 20px; |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | font-size: 14px; |
| | | cursor: pointer; |
| | | } |
| | |
| | | text-align: left; |
| | | box-sizing: border-box; |
| | | padding: 0 20px; |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | font-size: 14px; |
| | | } |
| | | .res-bar:hover { |
| | |
| | | } |
| | | } |
| | | .nav-items { |
| | | max-width: 960px; |
| | | margin: 0 auto; |
| | | .nav-child { |
| | | box-sizing: border-box; |
| | | background-color: rgba(251, 251, 255, 0.1); |
| | |
| | | cursor: pointer; |
| | | border: 2px solid #F2F2F7; |
| | | |
| | | &:hover { |
| | | &-active { |
| | | border: 2px solid #4E94FF; |
| | | } |
| | | |
| | | &:hover { |
| | | background: #F2F2F7; |
| | | } |
| | | |
| | |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | margin-top: 24px; |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | } |
| | | } |
| | | } |
| | |
| | | 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; |
| | |
| | | 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; |
| | |
| | | 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); |
| | |
| | | height: 19.21px; |
| | | background: #ffffff; |
| | | border-radius: 20px; |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | transform: scale(0.833333); |
| | | line-height: 22.21px; |
| | | span { |
| | |
| | | position: relative; |
| | | padding: 30px 40px; |
| | | background: #f2f2f7; |
| | | border-left: 4px solid #f2f2f7; |
| | | border-top: 4px solid #f2f2f7; |
| | | .account-right { |
| | | height: 100%; |
| | | .account-content { |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | min-width: 200px; |
| | | .user-name { |
| | | margin-bottom: 10px; |
| | |
| | | font-weight: bold; |
| | | font-size: 16px; |
| | | line-height: 22px; |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | margin-bottom: 40px; |
| | | height: 28px; |
| | | display: flex; |
| | |
| | | border-radius: 8px; |
| | | padding: 0 15px 0 20px; |
| | | .el-select-dropdown__item { |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | height: 32px; |
| | | font-size: 12px; |
| | | line-height: 32px; |
| | |
| | | width: 100%; |
| | | } |
| | | .el-select .el-input .el-select__caret { |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | font-size: 14px; |
| | | font-weight: 600; |
| | | } |
| | |
| | | font-size: 15px; |
| | | } |
| | | .el-input__clear { |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | font-size: 16px; |
| | | line-height: 48px; |
| | | } |
| | |
| | | line-height: 48px; |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | height: 48px; |
| | | background: #fbfaff; |
| | | border-bottom: 2px solid #f2f2f7; |
| | |
| | | border-radius: 8px; |
| | | padding: 0 15px 0 20px; |
| | | .el-select-dropdown__item { |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | height: 32px; |
| | | font-size: 12px; |
| | | line-height: 32px; |
| | |
| | | width: 100%; |
| | | } |
| | | .el-select .el-input .el-select__caret { |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | font-size: 14px; |
| | | font-weight: 600; |
| | | } |
| | |
| | | .datetime-right { |
| | | .datetime-left { |
| | | .device-time { |
| | | color: #333333; |
| | | color: #4F4F4F; |
| | | .title { |
| | | display: flex; |
| | | justify-content: center; |