Skip to content

G
gs1
Commit 2ef0cfe5 by tang
Options

feat: 头部导航dropdown

parent da7cd6de
Showing with 161 additions and 72 deletions
src/components/layout/header/HeaderBtn.vue
<template>
<div class="header-btn move-btn">
<el-button type="primary" style="padding: 9px 30px;margin-right: 6px" size="small">注册/登录</el-button>
<el-button type="primary" style="padding: 9px 30px;margin-right: 6px" size="small" @click="handleToLogin">注册/登录
</el-button>
<!-- Toggler -->
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse"
......@@ -19,10 +20,11 @@
<script>
export default {
name: "HeaderBtn"
name: "HeaderBtn",
methods: {
handleToLogin() {
this.$router.push({path: "/login"});
}
},
}
</script>
<style scoped>
</style>
src/components/layout/header/HeaderDropdown.vue 0 → 100644
<template>
<div class="dropdown-menu w-100 gs-nav-dropdown"
:aria-labelledby="`gs-nav-item-${nav.id}`">
<div class="row title">
{{ nav.name }}
</div>
<div class="row">
<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>
</div>
</template>
<script>
export default {
name: "HeaderDropdown",
props: {
nav: Object
}
}
</script>
<style lang="scss" scoped>
// 导航item下拉
.dropdown-menu.gs-nav-dropdown {
border: none;
background: #FFFFFF;
box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
border-radius: 0px 0px 6px 6px;
padding: 20px 40px;
.title {
font-size: 18px;
font-weight: bold;
color: #04408D;
line-height: 25px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(4, 64, 141, 0.18);
}
}
</style>
src/components/layout/header/index.vue
......@@ -27,69 +27,9 @@
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 -->
<!-- Dropdown Menu -->
<HeaderDropdown v-if="nav.children.length>0" :nav="nav"/>
<!-- End Dropdown Menu -->
</li>
<!-- Nav items End-->
</ul>
......@@ -109,10 +49,11 @@
<script>
import HeaderBtn from "./HeaderBtn.vue";
import HeaderDropdown from "./HeaderDropdown.vue";
import {nav} from "./mock";
export default {
components: {HeaderBtn},
components: {HeaderBtn, HeaderDropdown},
data() {
return {
navList: nav,
......@@ -158,6 +99,7 @@ export default {
}
}
.navbar-toggler {
padding: .5rem .5rem
}
......@@ -192,6 +134,7 @@ export default {
}
}
@media (max-width: 1400px) {
//导航item边距
.gs-header-nav .gs-nav-item.nav-item {
......
src/components/layout/header/mock.js
import {uuid} from "../../../utils/utils";
export const nav = [
{
id: '0',
......@@ -21,8 +23,71 @@ export const nav = [
id: '3',
name: '条码查询',
index: 3,
link: '/home',
children: [{}]
link: '/code',
children: [
{
id: uuid('gs_nav'),
name: '条件信息查询',
index: 0,
link: '/tool',
children: [
{
id: uuid('gs_nav'),
name: '境内条码信息查询',
index: 0,
link: '/internal',
},
{
id: uuid('gs_nav'),
name: '境外条码信息查询',
index: 1,
link: '/external',
},
{
id: uuid('gs_nav'),
name: '缩短码查询',
index: 2,
link: '/shortcode',
},
{
id: uuid('gs_nav'),
name: '追溯信息查询',
index: 3,
link: 'http://www.chinatrace.org/',
}
]
},
{
id: uuid('gs_nav'),
name: 'GLN查询',
index: 1,
link: '/gln',
},
{
id: uuid('gs_nav'),
name: '自行车企业代码公告查询',
index: 2,
link: '/bike',
},
{
id: uuid('gs_nav'),
name: '条码术语查询',
index: 3,
link: '/glossary',
},{
id: uuid('gs_nav'),
name: '校验码计算工具',
index: 4,
link: '/check',
},
{
id: uuid('gs_nav'),
name: '国家及地区前缀码查询',
index: 5,
link: '/country',
},
]
}, {
id: '4',
name: '服务中心',
......
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