| | |
| | | <div class="vol-aside" :style="{ width: menuWidth + 'px' }"> |
| | | <div class="header" :style="{ width: menuWidth - 1 + 'px' }"> |
| | | <img v-show="!isCollapse" src="@/assets/imgs/logo.png" /> |
| | | <i @click="toggleLeft" class=" collapse-menu" :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" /> |
| | | <i @click="toggleLeft" class=" collapse-menu" :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" /> |
| | | </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> |
| | | </div> |
| | | <div class="vol-container" :style="{ left: menuWidth - 1 + 'px' }"> |
| | | <div class="vol-header"> |
| | | <div class="project-name">Vol开发框架Vue3版本</div> |
| | | <div class="project-name">WIDESEA_WMS</div> |
| | | <div class="header-text"> |
| | | <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 v-if="!item.icon"> {{ item.text }}</span> |
| | | <i v-else :class="item.icon"></i> |
| | | </a> |
| | |
| | | </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 v-if="!item.icon"> {{ item.text }}</span> |
| | | <i v-else :class="item.icon"></i> |
| | | </a> |
| | |
| | | <a><i class="el-icon-message-solid"></i></a> |
| | | </div> |
| | | <div> |
| | | <img class="user-header" :src="userImg" @error="($e) => { $e.target.src = errorImg; }"/> |
| | | <img class="user-header" :src="userImg" @error="($e) => { $e.target.src = errorImg; }" /> |
| | | </div> |
| | | <div class="user"> |
| | | <span>{{ userName }}</span> |
| | | <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 |
| | | > |
| | | <el-button link @click="closeTabs('right')"> |
| | | <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> |
| | |
| | | { name: "white", color: "#fff" }, |
| | | ]); |
| | | const links = ref([ |
| | | { |
| | | text: "框架视频", |
| | | path: "https://www.cctalk.com/m/group/90268531", |
| | | id: -3, |
| | | }, |
| | | { text: "大屏数据", path: "/bigdata", id: -3 }, |
| | | { |
| | | text: "框架文档", |
| | | path: "http://v2.volcore.xyz/document/guide", |
| | | id: -2, |
| | | }, { |
| | | text: "框架企业版", |
| | | path: "http://pro.volcore.xyz/", |
| | | id: 10, |
| | | }, |
| | | //{ |
| | | // text: "框架视频", |
| | | // path: "https://www.cctalk.com/m/group/90268531", |
| | | // id: -3, |
| | | //}, |
| | | //{ text: "大屏数据", path: "/bigdata", id: -3 }, |
| | | //{ |
| | | // text: "框架文档", |
| | | // path: "http://v2.volcore.xyz/document/guide", |
| | | // id: -2, |
| | | //}, { |
| | | // text: "框架企业版", |
| | | // path: "http://pro.volcore.xyz/", |
| | | // id: 10, |
| | | //}, |
| | | { text: "个人中心", path: "/UserInfo", id: -1, icon: "el-icon-s-custom" }, |
| | | { |
| | | text: "安全退出", |
| | |
| | | font-size: 14px; |
| | | color: #333; |
| | | box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%); |
| | | i,button{ |
| | | |
| | | i, |
| | | button { |
| | | font-size: 14px !important; |
| | | } |
| | | } |
| | |
| | | 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; |
| | | } |
| | | |