Skip to content

G
gs1
Commit 5481547e by Tang
Options

feat: 导航栏修改，引入icons

parent f07b1e4a
Showing with 60 additions and 41 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>
<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,7 +69,7 @@ export default {
}
// style: { flex:'1 1 490px'},
const classNames = ["gs-dropdown-rect"];
if(nav.class){
if (nav.class) {
classNames.push(...nav.class)
}
return (
......@@ -77,7 +77,7 @@ export default {
<div
class="rect-title gs-hover"
vOn:click={() => {
this.$emit("itemClick", { ...nav, root: { ...this.nav } });
this.$emit("itemClick", {...nav, root: {...this.nav}});
}}
>
<span class="pointer">
......@@ -101,7 +101,7 @@ export default {
<div class="gs-dropdown-item">
<span
vOn:click={() => {
this.$emit("itemClick", { ...item, root: { ...this.nav } });
this.$emit("itemClick", {...item, root: {...this.nav}});
}}
class="pointer link-item gs-hover"
>
......@@ -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
......@@ -20,25 +20,22 @@
<template v-for="nav in navList">
<li
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"
:class="{ active: currentNav === nav.id }"
@click="handleNavClick(nav, $event)"
>
<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
>
<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
......@@ -46,7 +43,7 @@
:key="nav.id"
@click="handleNavClick(nav, $event)"
class="gs-nav-item nav-item"
:class="{ active: currentNav === nav.id }"
:active_nav="currentNav === nav.id"
>
<a class="nav-link" href="javascript:void(0)">{{
nav.name
......@@ -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: {
......@@ -147,7 +145,10 @@ export default {
});
},
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);
......@@ -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