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