Skip to content

G
gs1
Commit 5481547e by Tang
Options

feat: 导航栏修改，引入icons

parent f07b1e4a
Showing with 129 additions and 110 deletions
package.json
......@@ -16,6 +16,7 @@
"@popperjs/core": "^2.10.1",
"@tweenjs/tween.js": "^18.5.0",
"bootstrap": "^4.6",
"bootstrap-icons": "^1.7.2",
"clear": "^0.1.0",
"core-js": "^2.6.11",
"echarts": "^4.7.0",
......
src/components/layout/header/HeaderBtn.vue
......@@ -7,14 +7,14 @@
</el-button>
<!-- Toggler -->
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
<i class="bi bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
<span class="navbar-toggler-toggled">
<i class="bi bi-x"></i>
</span>
</button>
<!-- End Toggler -->
......
src/components/layout/header/HeaderDropdown.vue
......@@ -7,7 +7,7 @@ export default {
},
data() {
return {
rows:ROW_NUM
rows: ROW_NUM
};
},
computed: {
......@@ -16,7 +16,7 @@ export default {
},
},
created() {
if(this.nav.rowNum){
if (this.nav.rowNum) {
this.rows = this.nav.rowNum
}
},
......@@ -69,23 +69,23 @@ export default {
}
// style: { flex:'1 1 490px'},
const classNames = ["gs-dropdown-rect"];
if(nav.class){
if (nav.class) {
classNames.push(...nav.class)
}
return (
<div class={classNames.join(" ").trim()} style={{...nav.style}}>
<div
class="rect-title gs-hover"
vOn:click={() => {
this.$emit("itemClick", { ...nav, root: { ...this.nav } });
}}
>
<div class={classNames.join(" ").trim()} style={{...nav.style}}>
<div
class="rect-title gs-hover"
vOn:click={() => {
this.$emit("itemClick", {...nav, root: {...this.nav}});
}}
>
<span class="pointer">
{nav.nameInHeaderNav ? nav.nameInHeaderNav : nav.name}
</span>
</div>
<div class="rect-body">{children}</div>
</div>
<div class="rect-body">{children}</div>
</div>
);
},
......@@ -93,37 +93,37 @@ export default {
renderItemBox(items, isChild = false) {
const classNames = ["gs-dropdown-col", isChild ? "no-padding-top" : ""];
return (
<div class={classNames.join(" ").trim()} style={items[0].style}>
{items.map((item) => {
// console.log(item.isHiddenMenu, 'item.isHiddenMenu');
if (item.isHiddenMenu) return
return (
<div class="gs-dropdown-item">
<div class={classNames.join(" ").trim()} style={items[0].style}>
{items.map((item) => {
// console.log(item.isHiddenMenu, 'item.isHiddenMenu');
if (item.isHiddenMenu) return
return (
<div class="gs-dropdown-item">
<span
vOn:click={() => {
this.$emit("itemClick", { ...item, root: { ...this.nav } });
}}
class="pointer link-item gs-hover"
vOn:click={() => {
this.$emit("itemClick", {...item, root: {...this.nav}});
}}
class="pointer link-item gs-hover"
>
{item.name}
</span>
</div>
);
})}
</div>
</div>
);
})}
</div>
);
},
},
render() {
return (
<div
class="dropdown-menu w-100 gs-nav-dropdown"
aria-labelledby={`gs-nav-item-${this.nav.id}`}
>
<div class="row title">{this.nav.name}</div>
<div class="row">{this.renderDropdown()}</div>
</div>
<div
class="dropdown-menu w-100 gs-nav-dropdown"
aria-labelledby={`gs-nav-item-${this.nav.id}`}
>
<div class="row title">{this.nav.name}</div>
<div class="row">{this.renderDropdown()}</div>
</div>
);
},
};
......@@ -152,6 +152,11 @@ export default {
display: flex;
flex-wrap: wrap;
padding-left: 0;
flex: 1;
}
.row {
flex: 1;
}
}
......@@ -164,7 +169,7 @@ export default {
padding-top: 28px;
border-top: 1px solid rgba(4, 64, 141, 0.18);
.gs-dropdown-col{
.gs-dropdown-col {
border-top: none;
}
......@@ -207,35 +212,35 @@ export default {
}
@media (max-width: 992px) {
.navbar-dropdown-menu-inner,.rect-body{
.navbar-dropdown-menu-inner, .rect-body {
flex-direction: column;
}
.gs-dropdown-rect{
.gs-dropdown-rect {
padding-top: 0;
flex-direction: column;
flex: 1!important;
flex: 1 !important;
}
.gs-dropdown-col{
flex: 1!important;
.gs-dropdown-col {
flex: 1 !important;
}
.gs-dropdown-rect,.gs-dropdown-col{
.gs-dropdown-rect, .gs-dropdown-col {
border-top: none;
padding-right: 0;
}
}
@media (min-width: 1400px) {
.service_xtcy_custom,.service_cxfw_custom{
flex:1 0 auto;
.service_xtcy_custom, .service_cxfw_custom {
flex: 1 0 auto;
}
}
@media (max-width: 1399px){
.service_xtcy_custom{
flex:1 0 490px;
@media (max-width: 1399px) {
.service_xtcy_custom {
flex: 1 0 490px;
}
.service_cxfw_custom{
flex:1 0 260px;
.service_cxfw_custom {
flex: 1 0 260px;
}
}
</style>
src/components/layout/header/index.vue
......@@ -5,9 +5,9 @@
<!-- Default Logo -->
<a class="navbar-brand" href="/Home" aria-label="Front">
<img
class="navbar-brand-logo"
src="../../../assets/image/head/logo.png"
alt="Logo"
class="navbar-brand-logo"
src="../../../assets/image/head/logo.png"
alt="Logo"
/>
</a>
<!-- End Default Logo -->
......@@ -19,38 +19,35 @@
<!-- Nav items-->
<template v-for="nav in navList">
<li
v-if="nav.children && nav.children.length > 0"
class="gs-nav-item nav-item"
:key="nav.id"
:class="{ active: currentNav === nav.id }"
@click="handleNavClick(nav, $event)"
v-if="nav.children && nav.children.length > 0"
@click="handleNavClick(nav, $event)"
class="gs-nav-item nav-item"
:class="{show_dropdown:showDropDown===nav.id}"
:active_nav="currentNav === nav.id"
:key="nav.id"
>
<a
:id="`gs-nav-item-${nav.id}`"
class="nav-link"
aria-current="page"
href="javascript:void(0)"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>{{ nav.name }}</a
:id="`gs-nav-item-${nav.id}`"
class="nav-link"
href="javascript:void(0)"
>{{ nav.name }}</a
>
<i class="mobile-menu-down bi bi-chevron-compact-down"></i>
<!-- Dropdown Menu -->
<HeaderDropdown :nav="nav" @itemClick="handleItemClick" />
<HeaderDropdown :nav="nav" @itemClick="handleItemClick"/>
<!-- End Dropdown Menu -->
</li>
<li
v-else
:key="nav.id"
@click="handleNavClick(nav, $event)"
class="gs-nav-item nav-item"
:class="{ active: currentNav === nav.id }"
v-else
:key="nav.id"
@click="handleNavClick(nav, $event)"
class="gs-nav-item nav-item"
:active_nav="currentNav === nav.id"
>
<a class="nav-link" href="javascript:void(0)">{{
nav.name
}}</a>
nav.name
}}</a>
</li>
</template>
......@@ -61,7 +58,7 @@
<!-- End Collapse -->
<!-- Button -->
<HeaderBtn />
<HeaderBtn/>
<!-- End Button -->
</nav>
</div>
......@@ -71,13 +68,13 @@
<script>
import HeaderBtn from "./HeaderBtn.vue";
import HeaderDropdown from "./HeaderDropdown.vue";
import { nav } from "./mock";
import {nav} from "./mock";
import Qs from "qs";
import { cleanObject } from "@/axios/parameter";
import { deepFindBreadcrumb } from "@/utils/utils";
import {cleanObject} from "@/axios/parameter";
import {deepFindBreadcrumb} from "@/utils/utils";
export default {
components: { HeaderBtn, HeaderDropdown },
components: {HeaderBtn, HeaderDropdown},
data() {
return {
// 点击事件来自头部导航
......@@ -86,6 +83,7 @@ export default {
fromDropdown: false,
currentNav: "0",
preActive: "",
showDropDown: '',
};
},
watch: {
......@@ -119,35 +117,38 @@ export default {
// 监听路由 处理nav高亮 和面包屑 和subnav
initNav() {
nav.forEach((nav_) => {
if (this.$route.path.startsWith(nav_.link)) {
this.currentNav = nav_.id;
// nav_.children &&
// nav_.children.length > 0 &&
// this.$store.commit("system/SET_SUB_NAV", nav_.children);
// console.log(nav_, this.$route, 'this.$route.path');
if (nav_.link === this.$route.path) {
nav_.breadcrumb &&
if (this.$route.path.startsWith(nav_.link)) {
this.currentNav = nav_.id;
// nav_.children &&
// nav_.children.length > 0 &&
// this.$store.commit("system/SET_SUB_NAV", nav_.children);
// console.log(nav_, this.$route, 'this.$route.path');
if (nav_.link === this.$route.path) {
nav_.breadcrumb &&
this.$store.commit("system/SET_BREADCRUMB", nav_.breadcrumb);
} else {
// TODO 去dropdown里面精确查找当前的路径
let result;
result = deepFindBreadcrumb(nav_.children, this.$route.path);
// console.log(this.$route.path, result, 'resultresultresult');
if (result.length === 0 && Object.keys(this.$route.query).length > 0) {
const queryString = Qs.stringify(cleanObject(this.$route.query));
let path = `${this.$route.path}?${queryString}`;
result = deepFindBreadcrumb(nav_.children, path);
}
result &&
} else {
// TODO 去dropdown里面精确查找当前的路径
let result;
result = deepFindBreadcrumb(nav_.children, this.$route.path);
// console.log(this.$route.path, result, 'resultresultresult');
if (result.length === 0 && Object.keys(this.$route.query).length > 0) {
const queryString = Qs.stringify(cleanObject(this.$route.query));
let path = `${this.$route.path}?${queryString}`;
result = deepFindBreadcrumb(nav_.children, path);
}
result &&
result.breadcrumb &&
this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
}
}
}
});
});
},
handleWindowClick() {
// console.log('handleWindowClick', this.fromNav, this.preActive);
console.log('handleWindowClick', this.fromNav, this.preActive);
if (!this.fromNav) {
this.showDropDown = ''
}
if (this.preActive && !this.fromNav) {
this.currentNav = this.preActive;
this.preActive = "";
......@@ -157,10 +158,12 @@ export default {
},
handleNavClick(nav) {
console.log('handleNavClick', nav)
this.showDropDown = nav.id;
if (!nav.children || nav.children.length === 0) {
this.currentNav = nav.id;
this.preActive = "";
this.$router.push({ path: nav.link });
this.$router.push({path: nav.link});
} else {
// 点击事件不来自子代导航item
if (!this.fromDropdown) {
......@@ -182,6 +185,7 @@ export default {
},
handleItemClick(item) {
console.log('handleItemClick', item)
this.fromDropdown = true;
if (item.link.startsWith("http")) {
window.open(item.link);
......@@ -189,7 +193,7 @@ export default {
// console.log(item.root)
this.updateCurrent(item.root.id);
item.breadcrumb &&
this.$store.commit("system/SET_BREADCRUMB", item.breadcrumb);
this.$store.commit("system/SET_BREADCRUMB", item.breadcrumb);
// this.$store.commit("system/SET_SUB_NAV", item.root.children);
this.$router.push({
path: item.link,
......@@ -230,7 +234,7 @@ export default {
// 导航item样式
.gs-nav-item.nav-item {
&.active > a,
&[active_nav=true] > a,
a.show {
color: #f26335;
......@@ -300,6 +304,10 @@ export default {
}
}
.show_dropdown .dropdown-menu {
display: block;
}
@media (max-width: 1400px) {
//导航item边距
// .gs-header-nav .gs-nav-item.nav-item {
......@@ -332,10 +340,12 @@ export default {
.gs-header-nav .gs-nav-item.nav-item {
position: relative;
> a {
width: 100%;
}
&.active > a,
&[active_nav=true] > a,
a.show {
color: #f26335;
......@@ -346,7 +356,8 @@ export default {
}
}
.gs-header-nav .gs-nav-item.nav-item.active .mobile-menu-down {
.gs-header-nav .gs-nav-item.nav-item.active_nav .mobile-menu-down,
.gs-header-nav .gs-nav-item.nav-item.show .mobile-menu-down, {
transform: rotate(180deg);
}
......
src/main.js
......@@ -6,11 +6,13 @@ import store from "./vuex/store";
import $ from "jquery";
import "./assets/css/_reset.css";
// import "./assets/css/main.scss";
import 'bootstrap-icons/font/bootstrap-icons.scss'
import "./assets/css/layout.scss";
import "./plugins/element.js";
import "./plugins/qrcode.js";
import ElementUI from 'element-ui'
import "./assets/css/element-variables.scss";
import GsTable from './components/table/index'
import './utils/codeTable'
// 百度地图
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment