|
|
@@ -4,51 +4,41 @@
|
|
|
<ul class="nav">
|
|
|
<div class="logo">ByteSailing</div>
|
|
|
<li class="header-bar-hover-warp nav-li" :class="isChildMenu ? 'active' : ''">
|
|
|
- <div
|
|
|
- @click="isChildMenu = !isChildMenu"
|
|
|
- class="menu-modal"
|
|
|
- >
|
|
|
+ <div @click="isChildMenu = !isChildMenu" class="menu-modal">
|
|
|
<i class="iconfont icon-icomx_gongndh" style="margin: 0 5px 0 0;"></i>
|
|
|
功能导览
|
|
|
<i class="iconfont icon-iconm_xialan1" style="margin: 0 0 0 3px;"></i>
|
|
|
</div>
|
|
|
</li>
|
|
|
<div class="auto-list">
|
|
|
- <li class="nav-li" v-for="(i,index) in barData" v-show="index < autoListChidrenNum - 1" :key="i.id">
|
|
|
- <span>{{index + i.name }}</span>
|
|
|
+ <li class="nav-li" v-for="(i, index) in barData" v-show="index < autoListChidrenNum - 1" :key="i.id">
|
|
|
+ <span>{{ index + i.name }}</span>
|
|
|
</li>
|
|
|
<li class="nav-li more-box">
|
|
|
更多
|
|
|
<i class="iconfont icon-iconm_xialan1"></i>
|
|
|
</li>
|
|
|
</div>
|
|
|
-
|
|
|
- <div
|
|
|
- class="header-bar-warp"
|
|
|
- v-if="isChildMenu"
|
|
|
- @click.stop="isChildMenu = false"
|
|
|
- >
|
|
|
+ <div class="header-bar-warp" v-if="isChildMenu" @click.stop="isChildMenu = false">
|
|
|
<div class="header-bar-hover" @click.stop>
|
|
|
<div class="header-bar-hover-content">
|
|
|
<div class="left-banner">
|
|
|
- <div class="first-order">
|
|
|
+ <div class="first-order" @click="leftBanerType = 2">
|
|
|
<el-icon size="16" color="#0084FF">
|
|
|
<edit />
|
|
|
</el-icon>
|
|
|
常用功能
|
|
|
</div>
|
|
|
- <div class="first-order">
|
|
|
+ <div class="first-order" @click="leftBanerType = 1">
|
|
|
<el-icon size="16" color="#0084FF">
|
|
|
<edit />
|
|
|
</el-icon>
|
|
|
功能菜单
|
|
|
</div>
|
|
|
<ul>
|
|
|
- <li>外贸ERP</li>
|
|
|
- <li>云仓</li>
|
|
|
- <li>办公OA</li>
|
|
|
- <li>供应链</li>
|
|
|
- <li>产品库</li>
|
|
|
+ <li v-for="i in sidebarRoutersCopy" :key="i.name" v-show="i.type == 1">{{ i.meta.title
|
|
|
+ }}</li>
|
|
|
+
|
|
|
</ul>
|
|
|
<!-- <div class="first-order">
|
|
|
<el-icon size="16" color="#0084FF">
|
|
|
@@ -57,37 +47,68 @@
|
|
|
推荐服务
|
|
|
</div> -->
|
|
|
</div>
|
|
|
- <div class="menu-warp">
|
|
|
+ <div class="menu-warp" v-if="leftBanerType == 1">
|
|
|
<div class="first-order-title">外贸ERP</div>
|
|
|
<ul class="second-level">
|
|
|
- <div
|
|
|
- v-for="(i, index) in sidebarRouters"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <li
|
|
|
- v-if="i.isNone"
|
|
|
- class="menu-ul"
|
|
|
- style="cursor: auto"
|
|
|
- ></li>
|
|
|
- <li
|
|
|
- class="menu-title"
|
|
|
- v-else-if="i.isTitle"
|
|
|
- >
|
|
|
- <!-- <i :class="'iconfont icon-' + i.meta.icon" style="position: relative;top: -1px;"></i> -->
|
|
|
-
|
|
|
+ <div v-for="(i, index) in sidebarRouters" :key="index">
|
|
|
+ <li v-if="i.isNone" class="menu-ul" style="cursor: auto"></li>
|
|
|
+ <li class="menu-title" v-else-if="i.isTitle">
|
|
|
+ <!-- <i :class="'iconfont icon-' + i.meta.icon" style="position: relative;top: -1px;"></i> -->
|
|
|
+
|
|
|
{{ i.meta && !i.hidden ? i.meta.title : '' }}
|
|
|
</li>
|
|
|
- <li
|
|
|
- v-else
|
|
|
- class="menu-ul"
|
|
|
- @click="routerPush(i)"
|
|
|
- style="cursor: pointer"
|
|
|
- >
|
|
|
+ <li v-else class="menu-ul" @click="routerPush(i)" style="cursor: pointer">
|
|
|
{{ i.meta && !i.hidden ? i.meta.title : '' }}
|
|
|
</li>
|
|
|
</div>
|
|
|
</ul>
|
|
|
</div>
|
|
|
+ <div class="menu-warp" v-else-if="leftBanerType == 2">
|
|
|
+ <div class="first-order-title">常用功能</div>
|
|
|
+ <div class="commons-warp">
|
|
|
+ <div >
|
|
|
+ <div class="header-button-box">
|
|
|
+ <span>asdasd</span>
|
|
|
+ <div class="right-icon">
|
|
|
+ <!-- <el-icon color="#46A6FF"><CirclePlus /></el-icon> -->
|
|
|
+ <el-icon color="#BBBBBB">
|
|
|
+ <Close />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="first-order-title">待添加功能</div>
|
|
|
+ <div class="all-menu-warp">
|
|
|
+ <div v-for="i in sidebarRoutersCopy" :key="i.name">
|
|
|
+ <div class="all-menu-title" v-for="j in i.children" :key="j.name">
|
|
|
+ <div class="title">
|
|
|
+ 邮箱
|
|
|
+ </div>
|
|
|
+ <div class="all-menu-lists">
|
|
|
+ <div class="header-button-box">
|
|
|
+ <span>asdasd</span>
|
|
|
+ <div class="right-icon">
|
|
|
+ <el-icon color="#46A6FF">
|
|
|
+ <CirclePlus />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="header-button-box">
|
|
|
+ <span>asdasd</span>
|
|
|
+ <div class="right-icon">
|
|
|
+ <el-icon color="#46A6FF">
|
|
|
+ <CirclePlus />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="router-list"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -115,11 +136,7 @@
|
|
|
</el-icon>
|
|
|
</el-badge>
|
|
|
|
|
|
- <el-dropdown
|
|
|
- @command="handleCommand"
|
|
|
- class="right-menu-item hover-effect"
|
|
|
- trigger="click"
|
|
|
- >
|
|
|
+ <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
|
|
|
<div class="dropdown-box">
|
|
|
{{ userData }}
|
|
|
</div>
|
|
|
@@ -147,33 +164,37 @@ import Cookies from 'js-cookie'
|
|
|
import { ElMessageBox, ElNotification } from 'element-plus'
|
|
|
import useUserStore from '@/store/modules/user'
|
|
|
import usePermissionStore from '@/store/modules/permission'
|
|
|
+import '@/components/headerBar/header.scss'
|
|
|
const router = useRouter()
|
|
|
const userStore = useUserStore()
|
|
|
const permissionStore = usePermissionStore()
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
const sidebarRouters = ref([])
|
|
|
+const sidebarRoutersCopy = ref([])
|
|
|
const input1 = ref('')
|
|
|
-const isChildMenu = ref(false)
|
|
|
+const isChildMenu = ref(true)
|
|
|
const autoListChidrenNum = ref(0)
|
|
|
const menuData = ref([])
|
|
|
+const leftBanerType = ref(2)
|
|
|
const barData = ref([
|
|
|
- {name:'首页1',id:1},
|
|
|
- {name:'首页2',id:2},
|
|
|
- {name:'首页3',id:3},
|
|
|
- {name:'首页4',id:4},
|
|
|
- {name:'首页5',id:5},
|
|
|
- {name:'首页6',id:6},
|
|
|
- {name:'首页7',id:7},
|
|
|
- {name:'首页8',id:8},
|
|
|
- {name:'首页9',id:9},
|
|
|
- {name:'首页10',id:10},
|
|
|
- {name:'首页11',id:11},
|
|
|
+ { name: '首页1', id: 1 },
|
|
|
+ { name: '首页2', id: 2 },
|
|
|
+ { name: '首页3', id: 3 },
|
|
|
+ { name: '首页4', id: 4 },
|
|
|
+ { name: '首页5', id: 5 },
|
|
|
+ { name: '首页6', id: 6 },
|
|
|
+ { name: '首页7', id: 7 },
|
|
|
+ { name: '首页8', id: 8 },
|
|
|
+ { name: '首页9', id: 9 },
|
|
|
+ { name: '首页10', id: 10 },
|
|
|
+ { name: '首页11', id: 11 },
|
|
|
])
|
|
|
const userData = ref(Cookies.get('username') || '')
|
|
|
|
|
|
const routerInit = () => {
|
|
|
//二维转一维
|
|
|
const arr = []
|
|
|
+ sidebarRoutersCopy.value = permissionStore.addRoutes
|
|
|
for (let i = 0; i < permissionStore.addRoutes.length; i++) {
|
|
|
const element = permissionStore.addRoutes[i]
|
|
|
if (element.type === 1) {
|
|
|
@@ -208,10 +229,10 @@ const routerInit = () => {
|
|
|
i++
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
- console.log(arr)
|
|
|
+ console.log(sidebarRoutersCopy)
|
|
|
sidebarRouters.value = arr
|
|
|
}
|
|
|
function handleCommand(command) {
|
|
|
@@ -238,11 +259,11 @@ function logout() {
|
|
|
location.href = '/index'
|
|
|
})
|
|
|
})
|
|
|
- .catch(() => {})
|
|
|
+ .catch(() => { })
|
|
|
}
|
|
|
//拼接url跳转
|
|
|
function routerPush(i) {
|
|
|
- if(i.hide) return
|
|
|
+ if (i.hide) return
|
|
|
router.push(i.fatherPath + '/' + i.path)
|
|
|
isChildMenu.value = false
|
|
|
}
|
|
|
@@ -255,245 +276,20 @@ function getBrowserWidth() {
|
|
|
//计算auto-list 能放下几个
|
|
|
function calcAutoListChidren() {
|
|
|
autoListChidrenNum.value = Math.floor((getBrowserWidth() - 390) / 120)
|
|
|
- console.log(autoListChidrenNum.value )
|
|
|
+ console.log(autoListChidrenNum.value)
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
routerInit()
|
|
|
window.addEventListener('resize', calcAutoListChidren);
|
|
|
-
|
|
|
- proxy.get('/getInfo').then(res=>{
|
|
|
+
|
|
|
+ proxy.get('/getInfo').then(res => {
|
|
|
userData.value = res.user.userName
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
-.header-bar-warp {
|
|
|
- position: fixed;
|
|
|
- top: 50px;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- z-index: 1100;
|
|
|
-}
|
|
|
-.header-bar {
|
|
|
- background: #20222a;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- z-index: 1100;
|
|
|
- ul,
|
|
|
- li {
|
|
|
- list-style: none;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- .avatar-wrapper {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- .menu-modal {
|
|
|
- cursor: pointer;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- .header-bar-hover {
|
|
|
- position: fixed;
|
|
|
- z-index: 205;
|
|
|
- top: 50px;
|
|
|
- left: 0px;
|
|
|
- right: 0;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.1);
|
|
|
- height: 500px;
|
|
|
-
|
|
|
- .header-bar-hover-content {
|
|
|
- display: flex;
|
|
|
- text-align: left;
|
|
|
- .left-banner {
|
|
|
- width: 230px;
|
|
|
- ul {
|
|
|
- background: #f1f1f1;
|
|
|
- li {
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- padding: 0 50px;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- .first-order {
|
|
|
- height: 50px;
|
|
|
- padding: 0 20px;
|
|
|
- line-height: 50px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- background: #f9f9f9;
|
|
|
- cursor: pointer;
|
|
|
- i {
|
|
|
- position: relative;
|
|
|
- top: 3px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-alert {
|
|
|
- line-height: 20px;
|
|
|
- text-align: center;
|
|
|
- background: #dfecff;
|
|
|
- color: #666666;
|
|
|
- font-weight: 400;
|
|
|
- margin-bottom: 20px;
|
|
|
- i {
|
|
|
- color: #46a6ff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .menu-warp {
|
|
|
- width: calc(100vw - 230px);
|
|
|
- background: #fff;
|
|
|
- overflow: hidden;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 40px;
|
|
|
- height: 500px;
|
|
|
- overflow-y: auto;
|
|
|
- .first-order-title {
|
|
|
- height: 70px;
|
|
|
- line-height: 70px;
|
|
|
- color: #333333;
|
|
|
- font-size: 15px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .second-level {
|
|
|
- overflow: hidden;
|
|
|
- height: 420px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- flex-direction: column;
|
|
|
- flex-grow: 0;
|
|
|
- flex-basis: auto;
|
|
|
- }
|
|
|
- .menu-title {
|
|
|
- font-weight: 600;
|
|
|
- color: #0084ff;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- border-bottom: 1px solid #ddd;
|
|
|
- font-size: 14px;
|
|
|
- width: 140px;
|
|
|
- margin: 0 100px 0 0;
|
|
|
- i {
|
|
|
- position: relative;
|
|
|
- top: 3px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .menu-ul {
|
|
|
- float: left;
|
|
|
- width: 140px;
|
|
|
- list-style: none;
|
|
|
- margin: 0 100px 0 0;
|
|
|
- padding: 0;
|
|
|
- height: 36px;
|
|
|
- line-height: 36px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .menu-ul:hover {
|
|
|
- color: #0084ff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .nav {
|
|
|
- display: flex;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- height: 50px;
|
|
|
- overflow: hidden;
|
|
|
- .auto-list{
|
|
|
- width: calc(100vw - 350px);
|
|
|
- li{
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .logo {
|
|
|
- color: #fff;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 50px;
|
|
|
- margin: 0 20px;
|
|
|
- }
|
|
|
- .nav-li {
|
|
|
- width: 120px;
|
|
|
- height: 50px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- text-align: center;
|
|
|
- line-height: 50px;
|
|
|
- list-style: none;
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- a {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .nav-li.active {
|
|
|
- background: #0084ff;
|
|
|
- color: #fff;
|
|
|
- a {
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .nav-li:hover{
|
|
|
- background: #444;
|
|
|
-
|
|
|
- }
|
|
|
- .nav-li.active:hover{
|
|
|
- background: #0084ff;
|
|
|
- }
|
|
|
- }
|
|
|
- header {
|
|
|
- z-index: 11205;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- height: 50px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .fr {
|
|
|
- display: flex;
|
|
|
- .input-search {
|
|
|
- margin: 12px 40px 12px 0;
|
|
|
- width: 240px;
|
|
|
- input {
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- .dropdown-box {
|
|
|
- margin: 0 24px 0 0px;
|
|
|
- line-height: 50px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .badge {
|
|
|
- margin: 15px 24px 15px 0;
|
|
|
- height: 20px;
|
|
|
- width: 20px;
|
|
|
- i {
|
|
|
- color: #bbbbbb;
|
|
|
- }
|
|
|
- }
|
|
|
- .user-img {
|
|
|
- margin: 12px 12px 12px 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-header > a {
|
|
|
- margin: 0 20px;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<style lang="scss"></style>
|
|
|
|
|
|
|
asd26269546