Skip to content

G
gs1
Commit d9a8b424 by tang
Options

feat: 头部导航更新

parent 495f0b18
Showing with 205 additions and 66 deletions
src/components/layout/header/HeaderDropdown.vue
...@@ -6,13 +6,20 @@ export default { ...@@ -6,13 +6,20 @@ export default {
nav: Object, nav: Object,
}, },
data() { data() {
return {}; return {
rows:ROW_NUM
};
}, },
computed: { computed: {
rowNum() { rowNum() {
return ROW_NUM - 1; return this.rows - 1;
}, },
}, },
created() {
if(this.nav.rowNum){
this.rows = this.nav.rowNum
}
},
methods: { methods: {
// 目前只支持两级子代 主要是设计图布局不递归 // 目前只支持两级子代 主要是设计图布局不递归
renderDropdown() { renderDropdown() {
...@@ -130,8 +137,8 @@ export default { ...@@ -130,8 +137,8 @@ export default {
color: #04408d; color: #04408d;
line-height: 25px; line-height: 25px;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 29px; //margin-bottom: 29px;
border-bottom: 1px solid rgba(4, 64, 141, 0.18); //border-bottom: 1px solid rgba(4, 64, 141, 0.18);
} }
.navbar-dropdown-menu-inner { .navbar-dropdown-menu-inner {
...@@ -142,14 +149,21 @@ export default { ...@@ -142,14 +149,21 @@ export default {
} }
.gs-dropdown-rect { .gs-dropdown-rect {
flex:1 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-right: 75px; padding-right: 75px;
margin-bottom: 20px; margin-bottom: 20px;
padding-top: 28px;
border-top: 1px solid rgba(4, 64, 141, 0.18);
.gs-dropdown-col{
border-top: none;
}
.rect-title { .rect-title {
font-weight: 500; font-weight: 600;
color: #04408d; color: #002C6C;
line-height: 22px; line-height: 22px;
font-size: 16px; font-size: 16px;
padding-bottom: 13px; padding-bottom: 13px;
...@@ -162,11 +176,13 @@ export default { ...@@ -162,11 +176,13 @@ export default {
} }
.gs-dropdown-col { .gs-dropdown-col {
flex:1 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: 35px; padding-top: 35px;
padding-right: 75px; padding-right: 75px;
margin-bottom: 20px; margin-bottom: 20px;
border-top: 1px solid rgba(4, 64, 141, 0.18);
&.no-padding-top { &.no-padding-top {
padding-top: 0; padding-top: 0;
...@@ -176,10 +192,18 @@ export default { ...@@ -176,10 +192,18 @@ export default {
.gs-dropdown-item { .gs-dropdown-item {
//width: 180px; //width: 180px;
padding: 7px 0; padding: 7px 0;
font-weight: 400;
font-size: 14px; font-size: 14px;
color: #414345; color: #00799E;
line-height: 20px; line-height: 20px;
} }
} }
@media (max-width: 992px) {
.gs-dropdown-rect{
padding-top: 0;
}
.gs-dropdown-rect,.gs-dropdown-col{
border-top: none;
}
}
</style> </style>
src/components/layout/header/index.vue
...@@ -192,6 +192,7 @@ export default { ...@@ -192,6 +192,7 @@ export default {
<style lang="scss"> <style lang="scss">
.navbar { .navbar {
background: #fff; background: #fff;
font-family: "Microsoft YaHei";
} }
.gs-header-nav { .gs-header-nav {
...@@ -218,10 +219,11 @@ export default { ...@@ -218,10 +219,11 @@ export default {
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
left: 8px; left: 15px;
right: 8px; right: 15px;
bottom: 0; bottom: 0;
height: 2px; height: 3px;
border-radius: 1.5px;
background-color: #f26335; background-color: #f26335;
} }
} }
...@@ -230,7 +232,7 @@ export default { ...@@ -230,7 +232,7 @@ export default {
display: inline-block; display: inline-block;
position: relative; position: relative;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: 600;
color: #002c6c; color: #002c6c;
padding: 10px 15px; padding: 10px 15px;
// margin: 0 16px; // margin: 0 16px;
...@@ -294,6 +296,11 @@ export default { ...@@ -294,6 +296,11 @@ export default {
.gs-header-nav .gs-nav-item.nav-item { .gs-header-nav .gs-nav-item.nav-item {
> a { > a {
padding: 10px 10px; padding: 10px 10px;
&.show::after {
left: 10px;
right: 10px;
}
} }
} }
} }
......
src/components/layout/header/search.js
...@@ -5,6 +5,7 @@ export default { ...@@ -5,6 +5,7 @@ export default {
name: "条码查询", name: "条码查询",
index: 3, index: 3,
link: "/search", link: "/search",
rowNum: 5,
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/service" }, { name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" }, { name: "查询服务", path: "/search/tool" },
......
src/components/layout/header/service.js
import {uuid} from "@/utils/utils"; import {uuid} from "@/utils/utils";
import search from "./search.js";
export default { export default {
id: "4", id: "4",
name: "服务中心", name: "服务中心",
index: 4, index: 4,
link: "/Service", link: "/Service",
rowNum: 7,
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/Service/BarcodeV" }, { name: "服务中心", path: "/Service/BarcodeV" },
{ name: "产品服务", path: "/Service/BarcodeV" }, { name: "产品服务", path: "/Service/BarcodeV" },
...@@ -79,58 +79,6 @@ export default { ...@@ -79,58 +79,6 @@ export default {
}, },
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "软件下载",
index: 1,
link: "/Service/Book",
breadcrumb: [
{ name: "服务中心", path: "/Service/Book" },
{ name: "软件下载" },
],
children:[
{
id: uuid("gs_nav"),
name: "中国编码",
index: 0,
link: "/Service/Book",
breadcrumb: [
{ name: "服务中心", path: "/Service/Book" },
{ name: "软件下载" },
],
},
{
id: uuid("gs_nav"),
name: "条码追溯",
index: 1,
link: "/Service/Book",
breadcrumb: [
{ name: "服务中心", path: "/Service/Book" },
{ name: "软件下载" },
],
},
{
id: uuid("gs_nav"),
name: "一扫通",
index: 2,
link: "/Service/Book",
breadcrumb: [
{ name: "服务中心", path: "/Service/Book" },
{ name: "软件下载" },
],
},
{
id: uuid("gs_nav"),
name: "汉信码生成与识读工具",
index: 3,
link: "/Service/Book",
breadcrumb: [
{ name: "服务中心", path: "/Service/Book" },
{ name: "软件下载" },
],
},
]
},
{
id: uuid("gs_nav"),
name: "条码/RFID/软件检测服务", name: "条码/RFID/软件检测服务",
index: 2, index: 2,
link: "/Service/jcyxz/Barcode", link: "/Service/jcyxz/Barcode",
...@@ -209,6 +157,166 @@ export default { ...@@ -209,6 +157,166 @@ export default {
}, },
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "条码信息查询",
nameInHeaderNav: "查询服务",
index: 0,
link: "/search/tool",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "条码信息查询" },
],
children: [
{
id: uuid("gs_nav"),
name: "境内条码信息查询",
index: 0,
link: "/search/internal",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "境内条码信息查询" },
],
},
{
id: uuid("gs_nav"),
name: "境外条码信息查询",
index: 1,
link: "/search/external",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "境外条码信息查询" },
],
},
{
id: uuid("gs_nav"),
name: "缩短码查询",
index: 2,
link: "/search/shortcode",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "缩短码查询" },
],
},
{
id: uuid("gs_nav"),
name: "追溯信息查询",
index: 3,
link: "http://www.chinatrace.org/",
},
{
id: uuid("gs_nav"),
name: "GLN查询",
index: 1,
link: "/search/gln",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "GLN查询" },
],
},
{
id: uuid("gs_nav"),
name: "自行车企业代码公告查询",
index: 2,
link: "/search/bike",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "自行车企业代码公告查询" },
],
},
{
id: uuid("gs_nav"),
name: "条码术语查询",
index: 3,
link: "/search/glossary",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "条码术语查询" },
],
},
{
id: uuid("gs_nav"),
name: "国家及地区前缀码查询",
index: 5,
link: "/search/country",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "国家及地区前缀码查询" },
],
},
{
id: uuid("gs_nav"),
name: "校验码计算工具",
index: 4,
link: "/search/check",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "校验码计算工具" },
],
},
],
},
{
id: uuid("gs_nav"),
name: "软件下载",
index: 1,
link: "/Service/Book",
breadcrumb: [
{ name: "服务中心", path: "/Service/Book" },
{ name: "软件下载" },
],
children:[
{
id: uuid("gs_nav"),
name: "中国编码",
index: 0,
link: "/Service/Book",
breadcrumb: [
{ name: "服务中心", path: "/Service/Book" },
{ name: "软件下载" },
],
},
{
id: uuid("gs_nav"),
name: "条码追溯",
index: 1,
link: "/Service/Book",
breadcrumb: [
{ name: "服务中心", path: "/Service/Book" },
{ name: "软件下载" },
],
},
{
id: uuid("gs_nav"),
name: "一扫通",
index: 2,
link: "/Service/Book",
breadcrumb: [
{ name: "服务中心", path: "/Service/Book" },
{ name: "软件下载" },
],
},
{
id: uuid("gs_nav"),
name: "汉信码生成与识读工具",
index: 3,
link: "/Service/Book",
breadcrumb: [
{ name: "服务中心", path: "/Service/Book" },
{ name: "软件下载" },
],
},
]
},
{
id: uuid("gs_nav"),
name: "GS1标准服务提供商", name: "GS1标准服务提供商",
index: 3, index: 3,
link: "/Service/Partners/index", link: "/Service/Partners/index",
...@@ -264,7 +372,6 @@ export default { ...@@ -264,7 +372,6 @@ export default {
}, },
] ]
}, },
...JSON.parse(JSON.stringify(search.children)),
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "平台服务", 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