Skip to content

G
gs1
Commit b07359d9 by Tang Committed by 林家欣
Options

feat: 导航栏修改，引入icons

parent c48673ec
Showing with 60 additions and 41 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,7 +69,7 @@ export default { ...@@ -69,7 +69,7 @@ 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 (
...@@ -77,7 +77,7 @@ export default { ...@@ -77,7 +77,7 @@ export default {
<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">
...@@ -101,7 +101,7 @@ export default { ...@@ -101,7 +101,7 @@ export default {
<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"
> >
...@@ -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
...@@ -20,25 +20,22 @@ ...@@ -20,25 +20,22 @@
<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"
@click="handleNavClick(nav, $event)"
class="gs-nav-item nav-item" class="gs-nav-item nav-item"
:class="{show_dropdown:showDropDown===nav.id}"
:active_nav="currentNav === nav.id"
:key="nav.id" :key="nav.id"
:class="{ active: currentNav === nav.id }"
@click="handleNavClick(nav, $event)"
> >
<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)"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>{{ nav.name }}</a >{{ 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
...@@ -46,7 +43,7 @@ ...@@ -46,7 +43,7 @@
: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
...@@ -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: {
...@@ -147,7 +145,10 @@ export default { ...@@ -147,7 +145,10 @@ export default {
}); });
}, },
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);
...@@ -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