| | |
| | | <template> |
| | | <div class="container vindicate" v-if="!showWelcome"> |
| | | |
| | | <div class="container-left"> |
| | | <div |
| | | class="left-card" |
| | |
| | | <sysInfo v-if="activePage == 3" style="width: 100%" ref="view_3"></sysInfo> |
| | | </div> |
| | | |
| | | <div class="welcome-page" v-else ref="curPage" @click="showRecomand = false"> |
| | | <div class="welcome-page" v-else ref="curPage" @click="showRecomand = false" @mouseup="mouseDownIndex = ''"> |
| | | <div |
| | | class="search-box" |
| | | :class="showRecomand ? 'border-change' : ''" |
| | |
| | | @click="openWelcome(i)" |
| | | v-for="(item, i) in menuArr" |
| | | :key="i" |
| | | @mousedown="mouseDownIndex = i" |
| | | :class="mouseDownIndex === i? 'nav-child-active':''" |
| | | > |
| | | <div class="child-info"> |
| | | <!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> --> |
| | |
| | | full: 0, |
| | | showWelcome:true, |
| | | searchText:'', |
| | | showRecomand:false |
| | | showRecomand:false, |
| | | mouseDownIndex:'' |
| | | }; |
| | | }, |
| | | created() { |
| | |
| | | // }); |
| | | } |
| | | this.getLeftPer() |
| | | console.log(99999); |
| | | window.addEventListener("message",(e)=>{ |
| | | console.log(999); |
| | | if(e.data.msg === 'changeColor') { |
| | | document.documentElement.style.setProperty('--colorCard',`${e.data.color}`) |
| | | } |
| | | } |
| | | if (e.data.msg === '返回系统维护') { |
| | | this.showWelcome = true |
| | | } |
| | | }) |
| | | }, |
| | | methods: { |
| | |
| | | } |
| | | } |
| | | .nav-items { |
| | | max-width: 960px; |
| | | margin: 0 auto; |
| | | .nav-child { |
| | | box-sizing: border-box; |
| | | background-color: rgba(251, 251, 255, 0.1); |
| | |
| | | border: 2px solid #F2F2F7; |
| | | |
| | | &:hover { |
| | | border: 2px solid #4E94FF; |
| | | background: #F2F2F7; |
| | | } |
| | | |
| | | &-active { |
| | | border: 2px solid #4E94FF; |
| | | } |
| | | |
| | | // box-shadow: 2px 2px 4px rgb(226, 226, 226); |
| | |
| | | flex: 1; |
| | | flex-basis: auto; |
| | | box-sizing: border-box; |
| | | position: relative; |
| | | |
| | | .back { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | } |
| | | |
| | | .container-left { |
| | | height: 100%; |
| | | width: 244px; |