| | |
| | | </div> |
| | | <div class="vol-menu"> |
| | | <el-scrollbar style="height: 100%"> |
| | | <VolMenu :currentMenuId="currentMenuId" :on-select="onSelect" :enable="true" :open-select="false" |
| | | :isCollapse="isCollapse" :list="menuOptions"></VolMenu> |
| | | <VolMenu |
| | | :currentMenuId="currentMenuId" |
| | | :on-select="onSelect" |
| | | :enable="true" |
| | | :open-select="false" |
| | | :isCollapse="isCollapse" |
| | | :list="menuOptions" |
| | | ></VolMenu> |
| | | </el-scrollbar> |
| | | <div |
| | | class="version-number" |
| | | v-show="!isCollapse" |
| | | style=" |
| | | text-align: center; |
| | | padding: 10px 0; |
| | | color: #888; |
| | | font-size: 16px; |
| | | " |
| | | > |
| | | çæ¬ï¼05.17.01<br /> |
| | | ä¸ä¸æºå¨äººçæææ<br /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="vol-container" :style="{ left: menuWidth - 1 + 'px' }"> |
| | |
| | | </div> |
| | | <div class="header-info"> |
| | | <div class="h-link"> |
| | | <a href="javascript:void(0)" @click="to(item)" v-for="(item, index) in links.filter((c) => { |
| | | return c.icon; |
| | | })" :key="index"> |
| | | <a |
| | | href="javascript:void(0)" |
| | | @click="to(item)" |
| | | v-for="(item, index) in links.filter((c) => { |
| | | return c.icon; |
| | | })" |
| | | :key="index" |
| | | > |
| | | <span> {{ item.text }}</span> |
| | | </a> |
| | | |
| | | </div> |
| | | <div> |
| | | <img class="user-header" :src="userImg" :onerror="errorImg" /> |
| | |
| | | <span id="index-date"></span> |
| | | </div> |
| | | <div class="settings"> |
| | | <i style="font-size: 20px" class="el-icon-s-tools" @click="drawer_model = true" /> |
| | | <i |
| | | style="font-size: 20px" |
| | | class="el-icon-s-tools" |
| | | @click="drawer_model = true" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="vol-path"> |
| | | <el-tabs @tab-click="selectNav" @tab-remove="removeNav" @contextmenu.prevent="bindRightClickMenu(false)" |
| | | type="border-card" class="header-navigation" v-model="selectId" :strtch="false"> |
| | | <el-tab-pane v-for="(item, navIndex) in navigation" type="card" :name="navIndex + ''" :closable="navIndex > 0" |
| | | :key="navIndex" :label="item.name"> |
| | | <el-tabs |
| | | @tab-click="selectNav" |
| | | @tab-remove="removeNav" |
| | | @contextmenu.prevent="bindRightClickMenu(false)" |
| | | type="border-card" |
| | | class="header-navigation" |
| | | v-model="selectId" |
| | | :strtch="false" |
| | | > |
| | | <el-tab-pane |
| | | v-for="(item, navIndex) in navigation" |
| | | type="card" |
| | | :name="navIndex + ''" |
| | | :closable="navIndex > 0" |
| | | :key="navIndex" |
| | | :label="item.name" |
| | | > |
| | | <span style="display: none">{{ navIndex }}</span> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | <!-- å³é®èå --> |
| | | <div v-show="contextMenuVisible"> |
| | | <ul :style="{ left: menuLeft + 'px', top: menuTop + 'px' }" class="contextMenu"> |
| | | <ul |
| | | :style="{ left: menuLeft + 'px', top: menuTop + 'px' }" |
| | | class="contextMenu" |
| | | > |
| | | <li v-show="visibleItem.all"> |
| | | <el-button link @click="closeTabs()"> |
| | | <i class="el-icon-close"></i> |
| | | {{ |
| | | navigation.length == 2 ? "å
³éèå" : "å
³éææ" |
| | | }}</el-button> |
| | | }}</el-button |
| | | > |
| | | </li> |
| | | <li v-show="visibleItem.left"> |
| | | <el-button link @click="closeTabs('left')"><i class="el-icon-back"></i>å
³é左边</el-button> |
| | | <el-button link @click="closeTabs('left')" |
| | | ><i class="el-icon-back"></i>å
³é左边</el-button |
| | | > |
| | | </li> |
| | | <li v-show="visibleItem.right"> |
| | | <el-button link @click="closeTabs('right')"> |
| | | <i class="el-icon-right"></i>å
³éå³è¾¹</el-button> |
| | | <i class="el-icon-right"></i>å
³éå³è¾¹</el-button |
| | | > |
| | | </li> |
| | | <li v-show="visibleItem.other"> |
| | | <el-button link @click="closeTabs('other')"><i class="el-icon-right"></i>å
³éå
¶ä» |
| | | <el-button link @click="closeTabs('other')" |
| | | ><i class="el-icon-right"></i>å
³éå
¶ä» |
| | | </el-button> |
| | | </li> |
| | | </ul> |
| | |
| | | <loading v-show="$store.getters.isLoading()"></loading> |
| | | <router-view v-slot="{ Component }"> |
| | | <keep-alive> |
| | | <component :is="Component" :key="$route.name" |
| | | v-if="!$route.meta || ($route.meta && !$route.meta.hasOwnProperty('keepAlive'))" /> |
| | | <component |
| | | :is="Component" |
| | | :key="$route.name" |
| | | v-if=" |
| | | !$route.meta || |
| | | ($route.meta && !$route.meta.hasOwnProperty('keepAlive')) |
| | | " |
| | | /> |
| | | </keep-alive> |
| | | <component :is="Component" :key="$route.name" v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')" /> |
| | | <component |
| | | :is="Component" |
| | | :key="$route.name" |
| | | v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')" |
| | | /> |
| | | </router-view> |
| | | </el-scrollbar> |
| | | </div> |
| | | </div> |
| | | <el-drawer title="鿩䏻é¢" v-model="drawer_model" direction="rtl" destroy-on-close> |
| | | <el-drawer |
| | | title="鿩䏻é¢" |
| | | v-model="drawer_model" |
| | | direction="rtl" |
| | | destroy-on-close |
| | | > |
| | | <div class="theme-selector"> |
| | | <div @click="changeTheme(item.name)" class="item" v-for="(item, index) in theme_color" :key="index" |
| | | :style="{ background: item.color }"> |
| | | <div v-show="item.leftColor" :style="{ background: item.leftColor }" style="height: 100%; width: 20px" |
| | | class="t-left"></div> |
| | | <div |
| | | @click="changeTheme(item.name)" |
| | | class="item" |
| | | v-for="(item, index) in theme_color" |
| | | :key="index" |
| | | :style="{ background: item.color }" |
| | | > |
| | | <div |
| | | v-show="item.leftColor" |
| | | :style="{ background: item.leftColor }" |
| | | style="height: 100%; width: 20px" |
| | | class="t-left" |
| | | ></div> |
| | | <div class="t-right"></div> |
| | | </div> |
| | | </div> |
| | | </el-drawer> |
| | | |
| | | <el-drawer title="æ¶æ¯å表" v-model="messageModel" direction="rtl" destroy-on-close> |
| | | <el-drawer |
| | | title="æ¶æ¯å表" |
| | | v-model="messageModel" |
| | | direction="rtl" |
| | | destroy-on-close |
| | | > |
| | | <Message :list="messageList"></Message> |
| | | </el-drawer> |
| | | </div> |
| | |
| | | padding: 0; |
| | | } |
| | | |
| | | .vol-menu { |
| | | position: relative; |
| | | height: calc(100% - 60px); /* Adjust this based on your header height */ |
| | | } |
| | | |
| | | .version-number { |
| | | position: absolute; |
| | | bottom: 0; |
| | | width: 100%; |
| | | } |
| | | |
| | | .contextMenu { |
| | | width: 120px; |
| | | margin: 0; |
| | |
| | | letter-spacing: 1px; |
| | | } |
| | | |
| | | .el-tabs.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:last-child, |
| | | .el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:nth-child(2) { |
| | | .el-tabs.el-tabs--top.el-tabs--border-card.header-navigation |
| | | > .el-tabs__header |
| | | .el-tabs__item:last-child, |
| | | .el-tabs--top.el-tabs--border-card.header-navigation |
| | | > .el-tabs__header |
| | | .el-tabs__item:nth-child(2) { |
| | | padding: 0; |
| | | } |
| | | |