Skip to content

G
gs1
Commit da7cd6de by tang
Options

feat: 头部导航【40%】

parent ce48f3fd
Showing with 316 additions and 79 deletions
public/index.html
......@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="referrer" content="never">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<!-- <link rel="shortcut icon" href="/favicon.ico"/> -->
<title>中国物品编码中心</title>
</head>
......
src/components/layout/header.vue deleted 100644 → 0
<template>
<header>
<div class="logo"></div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input
class="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success" type="submit">
Search
</button>
</form>
</div>
</div>
</nav>
<div class="user"></div>
</header>
</template>
<script>
export default {
data() {
return {};
},
created() {},
};
</script>
<style lang="scss">
</style>
src/components/layout/header/HeaderBtn.vue 0 → 100644
<template>
<div class="header-btn move-btn">
<el-button type="primary" style="padding: 9px 30px;margin-right: 6px" size="small">注册/登录</el-button>
<!-- Toggler -->
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggler -->
</div>
</template>
<script>
export default {
name: "HeaderBtn"
}
</script>
<style scoped>
</style>
src/components/layout/header/index.vue 0 → 100644
<template>
<header class="navbar navbar-expand-lg navbar-end gs-header-nav">
<div class="container">
<nav class="navbar-nav-wrap">
<!-- Default Logo -->
<a class="navbar-brand" href="/Home" aria-label="Front">
<img class="navbar-brand-logo" src="../../../assets/image/head/logo.png" alt="Logo">
</a>
<!-- End Default Logo -->
<!-- Collapse -->
<div class="navbar-collapse collapse" id="navbarNavDropdown">
<div class="navbar-absolute-top-scroller">
<ul class="navbar-nav">
<!-- Nav items-->
<li v-for="nav in navList"
class="gs-nav-item nav-item"
:key="nav.id"
:class="{'active':currentNav===nav.id}"
@click="handleNavClick(nav)">
<a :id="`gs-nav-item-${nav.id}`" class="nav-link"
aria-current="page"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false">{{ nav.name }}</a>
<!-- Sub Menu -->
<div v-if="nav.children.length>0" class="dropdown-menu w-100"
:aria-labelledby="`gs-nav-item-${nav.id}`">
<div class="row">
<div class="col-lg-6 d-none d-lg-block">
<!-- Banner Image -->
<div class="navbar-dropdown-menu-banner">
<div class="navbar-dropdown-menu-banner-content">
<div class="mb-4">
<span class="h2 d-block">Branding Works</span>
<p>Experience a level of our quality in both design &amp; customization works.</p>
</div>
<a class="btn btn-primary btn-transition" href="#">Learn more <i
class="bi-chevron-right small"></i></a>
</div>
</div>
<!-- End Banner Image -->
</div>
<!-- End Col -->
<div class="col-lg-6">
<div class="navbar-dropdown-menu-inner">
<div class="row">
<div class="col-sm mb-3 mb-sm-0">
<span class="dropdown-header">Classic</span>
<a class="dropdown-item " href="#">Corporate</a>
<a class="dropdown-item " href="#">Analytics <span
class="badge bg-primary rounded-pill ms-1">Hot</span></a>
<a class="dropdown-item " href="#">Studio</a>
<a class="dropdown-item " href="#">Marketing</a>
<a class="dropdown-item " href="#">Advertisement</a>
<a class="dropdown-item " href="#">Consulting</a>
<a class="dropdown-item " href="#">Portfolio</a>
<a class="dropdown-item " href="#">Software</a>
<a class="dropdown-item " href="#">Business</a>
</div>
<!-- End Col -->
<div class="col-sm">
<div class="mb-3">
<span class="dropdown-header">App</span>
<a class="dropdown-item " href="#">UI Kit</a>
<a class="dropdown-item " href="#">SaaS</a>
<a class="dropdown-item " href="#">Workflow</a>
<a class="dropdown-item " href="#">Payment</a>
<a class="dropdown-item " href="#">Tool</a>
</div>
<span class="dropdown-header">Onepage</span>
<a class="dropdown-item " href="#">Corporate</a>
<a class="dropdown-item " href="#">SaaS <span
class="badge bg-primary rounded-pill ms-1">Hot</span></a>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Sub Menu -->
</li>
<!-- Nav items End-->
</ul>
</div>
</div>
<!-- End Collapse -->
<!-- Button -->
<HeaderBtn/>
<!-- End Button -->
</nav>
</div>
</header>
</template>
<script>
import HeaderBtn from "./HeaderBtn.vue";
import {nav} from "./mock";
export default {
components: {HeaderBtn},
data() {
return {
navList: nav,
currentNav: '0',
};
},
methods: {
handleNavClick(nav) {
this.currentNav = nav.id;
}
},
};
</script>
<style lang="scss">
.gs-header-nav {
.navbar-nav-wrap {
position: relative;
display: flex;
flex-wrap: wrap;
flex-basis: 100%;
align-items: center;
}
.header-btn {
display: flex;
align-items: center;
}
// 导航item样式
.gs-nav-item.nav-item {
&.active > a {
color: #F26335;
}
> a {
font-size: 14px;
font-weight: bold;
color: #002C6C;
padding: 10px 8px;
margin: 0 16px;
}
}
.navbar-toggler {
padding: .5rem .5rem
}
.navbar-toggler:focus {
box-shadow: none
}
.navbar-toggler .navbar-toggler-text {
color: #21325b
}
.navbar-toggler .navbar-toggler-default {
display: flex
}
.navbar-toggler .navbar-toggler-toggled {
display: none
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-default {
display: none
}
.navbar-toggler[aria-expanded=true] .navbar-toggler-toggled {
display: flex
}
.navbar-topbar .navbar-toggler {
margin-left: 0;
font-size: .875rem
}
}
@media (max-width: 1400px) {
//导航item边距
.gs-header-nav .gs-nav-item.nav-item {
> a {
margin: 0 8px;
}
}
}
@media (max-width: 1200px) {
//导航item边距
.gs-header-nav .gs-nav-item.nav-item {
> a {
margin: 0 2px;
}
}
}
@media (max-width: 992px) {
.gs-header-nav .move-btn {
position: absolute;
top: 24px;
right: 0;
}
}
@media (min-width: 992px) {
.navbar-expand-lg.navbar-end .navbar-absolute-top-scroller,
.navbar-expand-lg.navbar-end .navbar-sticky-top-scroller {
margin-left: auto;
}
}
</style>
src/components/layout/header/mock.js 0 → 100644
export const nav = [
{
id: '0',
name: '首页',
index: 0,
link: '/home',
children: []
}, {
id: '1',
name: '机构概况',
index: 1,
link: '/home',
children: [{}]
}, {
id: '2',
name: '业务大厅',
index: 2,
link: '/home',
children: [{}]
}, {
id: '3',
name: '条码查询',
index: 3,
link: '/home',
children: [{}]
}, {
id: '4',
name: '服务中心',
index: 4,
link: '/home',
children: [{}]
}, {
id: '5',
name: '资讯中心',
index: 5,
link: '/home',
children: [{}]
}, {
id: '6',
name: '知识中心',
index: 6,
link: '/home',
children: [{}]
},
{
id: '7',
name: '党建文化',
index: 7,
link: '/home',
children: [{}]
}, {
id: '8',
name: '成员专区',
index: 8,
link: '/home',
children: [{}]
},
]
src/components/main.vue
......@@ -7,7 +7,7 @@
</template>
<script>
import Header from "./layout/header.vue";
import Header from "./layout/header/index.vue";
// import Footer from "./layout/footer.vue"
export default {
components: {
......
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