Skip to content

G
gs1
Commit d9a8b424 by tang
Options

feat: 头部导航更新

parent 495f0b18
Showing with 386 additions and 275 deletions
src/components/layout/header/HeaderDropdown.vue
......@@ -6,13 +6,20 @@ export default {
nav: Object,
},
data() {
return {};
return {
rows:ROW_NUM
};
},
computed: {
rowNum() {
return ROW_NUM - 1;
return this.rows - 1;
},
},
created() {
if(this.nav.rowNum){
this.rows = this.nav.rowNum
}
},
methods: {
// 目前只支持两级子代 主要是设计图布局不递归
renderDropdown() {
......@@ -130,8 +137,8 @@ export default {
color: #04408d;
line-height: 25px;
padding-bottom: 10px;
margin-bottom: 29px;
border-bottom: 1px solid rgba(4, 64, 141, 0.18);
//margin-bottom: 29px;
//border-bottom: 1px solid rgba(4, 64, 141, 0.18);
}
.navbar-dropdown-menu-inner {
......@@ -142,14 +149,21 @@ export default {
}
.gs-dropdown-rect {
flex:1 0 auto;
display: flex;
flex-direction: column;
padding-right: 75px;
margin-bottom: 20px;
padding-top: 28px;
border-top: 1px solid rgba(4, 64, 141, 0.18);
.gs-dropdown-col{
border-top: none;
}
.rect-title {
font-weight: 500;
color: #04408d;
font-weight: 600;
color: #002C6C;
line-height: 22px;
font-size: 16px;
padding-bottom: 13px;
......@@ -162,11 +176,13 @@ export default {
}
.gs-dropdown-col {
flex:1 0 auto;
display: flex;
flex-direction: column;
padding-top: 35px;
padding-right: 75px;
margin-bottom: 20px;
border-top: 1px solid rgba(4, 64, 141, 0.18);
&.no-padding-top {
padding-top: 0;
......@@ -176,10 +192,18 @@ export default {
.gs-dropdown-item {
//width: 180px;
padding: 7px 0;
font-weight: 400;
font-size: 14px;
color: #414345;
color: #00799E;
line-height: 20px;
}
}
@media (max-width: 992px) {
.gs-dropdown-rect{
padding-top: 0;
}
.gs-dropdown-rect,.gs-dropdown-col{
border-top: none;
}
}
</style>
src/components/layout/header/index.vue
......@@ -192,6 +192,7 @@ export default {
<style lang="scss">
.navbar {
background: #fff;
font-family: "Microsoft YaHei";
}
.gs-header-nav {
......@@ -218,10 +219,11 @@ export default {
&::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
left: 15px;
right: 15px;
bottom: 0;
height: 2px;
height: 3px;
border-radius: 1.5px;
background-color: #f26335;
}
}
......@@ -230,7 +232,7 @@ export default {
display: inline-block;
position: relative;
font-size: 14px;
font-weight: bold;
font-weight: 600;
color: #002c6c;
padding: 10px 15px;
// margin: 0 16px;
......@@ -294,6 +296,11 @@ export default {
.gs-header-nav .gs-nav-item.nav-item {
> a {
padding: 10px 10px;
&.show::after {
left: 10px;
right: 10px;
}
}
}
}
......
src/components/layout/header/mock.js
......@@ -14,6 +14,7 @@ export const nav = [
name: "机构概况",
index: 1,
link: "/Org",
rowNum: 4,
children: [
{
id: uuid("gs_nav"),
......@@ -143,7 +144,7 @@ export const nav = [
},
{
id: uuid("gs_nav"),
name: "国际物品编码组织",
name: "国际物品编码组织（GS1）",
index: 0,
link: "/Org/BranchMsg",
breadcrumb: [
......@@ -171,14 +172,15 @@ export const nav = [
name: "业务大厅",
index: 2,
link: "/Business",
rowNum: 5,
children: [
{
id: uuid("gs_nav"),
name: "我还不是系统成员",
name: "我还不是系统成员（企业初次申请）",
nameInHeaderNav: "我还不是系统成员",
index: 2,
link: "",
breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "我还不是系统成员" }],
breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "我还不是系统成员（企业初次申请）" }],
children: [
{
id: uuid("gs_nav"),
......@@ -202,74 +204,61 @@ export const nav = [
{ name: "操作指南" },
],
},
{
id: uuid("gs_nav"),
name: "我要申请商品条码",
index: 2,
link: "/Business/Guide1",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "我要通报编码信息" },
],
},
{
id: uuid("gs_nav"),
name: "我要编码",
index: 2,
link: "/Business/Guide2",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "我要编码" },
],
},
{
id: uuid("gs_nav"),
name: "我要通报编码信息",
index: 2,
link: "/Business/Guide3",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "我要通报编码信息" },
],
},
{
id: uuid("gs_nav"),
name: "微信共享",
index: 2,
link: "/Business/Guide4",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "微信共享" },
],
},
{
id: uuid("gs_nav"),
name: "我要咨询",
index: 2,
link: "/Business/Guide7",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "我要咨询" },
],
},
{
id: uuid("gs_nav"),
name: "常见问题",
index: 2,
link: "/Business/Guide8",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "常见问题" },
],
},
// {
// id: uuid("gs_nav"),
// name: "我要申请商品条码",
// index: 2,
// link: "/Business/Guide1",
// breadcrumb: [
// { name: "业务大厅", path: "/Business" },
// { name: "操作指南", path: "/Business/Guide" },
// { name: "我要申请商品条码" },
// ],
// },
// {
// id: uuid("gs_nav"),
// name: "我要编码",
// index: 2,
// link: "/Business/Guide2",
// breadcrumb: [
// { name: "业务大厅", path: "/Business" },
// { name: "操作指南", path: "/Business/Guide" },
// { name: "我要编码" },
// ],
// },
// {
// id: uuid("gs_nav"),
// name: "微信共享",
// index: 2,
// link: "/Business/Guide4",
// breadcrumb: [
// { name: "业务大厅", path: "/Business" },
// { name: "操作指南", path: "/Business/Guide" },
// { name: "微信共享" },
// ],
// },
// {
// id: uuid("gs_nav"),
// name: "我要咨询",
// index: 2,
// link: "/Business/Guide7",
// breadcrumb: [
// { name: "业务大厅", path: "/Business" },
// { name: "操作指南", path: "/Business/Guide" },
// { name: "我要咨询" },
// ],
// },
// {
// id: uuid("gs_nav"),
// name: "常见问题",
// index: 2,
// link: "/Business/Guide8",
// breadcrumb: [
// { name: "业务大厅", path: "/Business" },
// { name: "操作指南", path: "/Business/Guide" },
// { name: "常见问题" },
// ],
// },
{
id: uuid("gs_nav"),
name: "收费公示",
......@@ -281,33 +270,33 @@ export const nav = [
{ name: "收费公示" },
],
},
{
id: uuid("gs_nav"),
name: "收费目录清单",
index: 2,
link: "/Business/Corppay",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "收费目录清单" },
],
},
{
id: uuid("gs_nav"),
name: "其他增值服务费",
index: 2,
link: "/Business/serviceFee",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "其他增值服务费" },
],
},
// {
// id: uuid("gs_nav"),
// name: "收费目录清单",
// index: 2,
// link: "/Business/Corppay",
// breadcrumb: [
// { name: "业务大厅", path: "/Business" },
// { name: "我还不是系统成员", path: "/Business/Register" },
// { name: "收费目录清单" },
// ],
// },
// {
// id: uuid("gs_nav"),
// name: "其他增值服务费",
// index: 2,
// link: "/Business/serviceFee",
// breadcrumb: [
// { name: "业务大厅", path: "/Business" },
// { name: "我还不是系统成员", path: "/Business/Register" },
// { name: "其他增值服务费" },
// ],
// },
{
id: uuid("gs_nav"),
name: "条码注册公告",
index: 2,
link: "/Business/Notice",
link: "/Business/Notice?id=zhuce",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
......@@ -318,97 +307,117 @@ export const nav = [
id: uuid("gs_nav"),
name: "条码注销公告",
index: 2,
link: "/Business/Notice",
link: "/Business/Notice?id=zhuxiao",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "条码注销公告" },
],
},
// {
// id: uuid("gs_nav"),
// name: "我要续展",
// index: 2,
// link: "/Business/Renewal",
// breadcrumb: [
// { name: "业务大厅", path: "/Business" },
// { name: "我是系统成员", path: "/Service/Training" },
// { name: "我要续展" },
// ],
// },
// {
// id: uuid("gs_nav"),
// name: "零售商品",
// index: 2,
// link: "/Business/Code1",
// breadcrumb: [
// { name: "业务大厅", path: "/Business" },
// { name: "我是系统成员", path: "/Business/Register" },
// { name: "我要编码", path: "/Business/Code1?id=1-1" },
// { name: "零售商品" },
// ],
// },
// {
// id: uuid("gs_nav"),
// name: "非零售商品",
// index: 2,
// link: "/Business/Code2",
// breadcrumb: [
// { name: "业务大厅", path: "/Business" },
// { name: "我是系统成员", path: "/Business/Register" },
// { name: "我要编码", path: "/Business/Code1?id=1-1" },
// { name: "非零售商品" },
// ],
// },
// {
// id: uuid("gs_nav"),
// name: "物流单元",
// index: 2,
// link: "/Business/Code3",
// breadcrumb: [
// { name: "业务大厅", path: "/Business" },
// { name: "我是系统成员", path: "/Business/Register" },
// { name: "我要编码", path: "/Business/Code1?id=1-1" },
// { name: "物流单元" },
// ],
// },
],
},
{
id: uuid("gs_nav"),
name: "我是系统成员（成员专区）",
nameInHeaderNav: "我是系统成员",
index: 2,
link: "/Business",
breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "我是系统成员（成员专区）" }],
children: [
{
id: uuid("gs_nav"),
name: "我要续展",
index: 2,
link: "/Business/Renewal",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我是系统成员", path: "/Service/Training" },
{ name: "我要续展" },
],
},
{
id: uuid("gs_nav"),
name: "零售商品",
name: "我要培训——现场培训/线上培训",
index: 2,
link: "/Business/Code1",
link: "/Business/Guide5",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我是系统成员", path: "/Business/Register" },
{ name: "我要编码", path: "/Business/Code1?id=1-1" },
{ name: "零售商品" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "我要培训——现场培训/线上培训" },
],
},
{
id: uuid("gs_nav"),
name: "非零售商品",
name: "我要续展",
index: 2,
link: "/Business/Code2",
link: "/Business/Guide6",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我是系统成员", path: "/Business/Register" },
{ name: "我要编码", path: "/Business/Code1?id=1-1" },
{ name: "非零售商品" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "我要续展" },
],
},
{
id: uuid("gs_nav"),
name: "物流单元",
name: "我要编码（零售商品、非零售商品、物流单元）",
index: 2,
link: "/Business/Code3",
link: "/Business/Code1",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我是系统成员", path: "/Business/Register" },
{ name: "我要编码", path: "/Business/Code1?id=1-1" },
{ name: "物流单元" },
{ name: "我要编码（零售商品、非零售商品、物流单元）" },
],
},
],
},
{
id: uuid("gs_nav"),
name: "我是系统成员",
nameInHeaderNav: "我是系统成员",
index: 2,
link: "/Business",
breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "我还不是系统成员" }],
children: [
{
id: uuid("gs_nav"),
name: "我要培训",
name: "我要通报编码信息（领取条码卡、激活条码卡、通报编码信息）",
index: 2,
link: "/Business/Guide5",
link: "/Business/Guide3",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "我要培训" },
{ name: "我要通报编码信息（领取条码卡、激活条码卡、通报编码信息）" },
],
},
{
id: uuid("gs_nav"),
name: "我要续展",
index: 2,
link: "/Business/Guide6",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "操作指南", path: "/Business/Guide" },
{ name: "我要续展" },
],
},
{
id: uuid("gs_nav"),
name: "我要生成商品二维码",
index: 2,
link: "/Business/2dcode",
......@@ -440,6 +449,12 @@ export const nav = [
{ name: "条码微站" },
],
},
{
id: uuid("gs_nav"),
name: "条码商桥",
index: 2,
link: "http://so.anccnet.com/Home/Login",
},
],
},
{
......@@ -477,10 +492,10 @@ export const nav = [
{
id: uuid("gs_nav"),
name: "办理其他业务",
nameInHeaderNav: "办理其他业务",
nameInHeaderNav: "跨境业务办理专区",
index: 2,
link: "/Business",
breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "我还不是系统成员" }],
breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "跨境业务办理专区" }],
children: [
{
id: uuid("gs_nav"),
......@@ -493,50 +508,6 @@ export const nav = [
{ name: "全球参与方位置代码（GLN）业务办理" },
],
},
{
id: uuid("gs_nav"),
name: "办理产品电子代码（EPC）",
index: 2,
link: "/Business/cpdzdm",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "办理其他业务", path: "/Business/GLN" },
{ name: "办理产品电子代码（EPC）" },
],
},
{
id: uuid("gs_nav"),
name: "办理资产标识代码",
index: 2,
link: "/Business/GIAI",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "办理其他业务", path: "/Business/GLN" },
{ name: "办理资产标识代码" },
],
},
{
id: uuid("gs_nav"),
name: "办理全球服务关系代码",
index: 2,
link: "/Business/GSRN",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "办理其他业务", path: "/Business/GLN" },
{ name: "办理全球服务关系代码" },
],
},
{
id: uuid("gs_nav"),
name: "办理动物管理者代码",
index: 2,
link: "/Business/Animalcode",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "办理其他业务", path: "/Business/GLN" },
{ name: "办理动物管理者代码" },
],
},
],
}
],
......@@ -548,6 +519,7 @@ export const nav = [
name: "资讯中心",
index: 5,
link: "/News/index",
rowNum: 4,
children: [
{
id: uuid("gs_nav"),
......@@ -753,6 +725,7 @@ export const nav = [
name: "知识中心",
index: 6,
link: "/Knowledge",
rowNum: 6,
children: [
{
id: uuid("gs_nav"),
......@@ -816,49 +789,48 @@ export const nav = [
},
{
id: uuid("gs_nav"),
name: "标准文献",
index: 2,
link: "/Knowledge/Standard",
name: "常见知识",
index: 5,
link: "/Knowledge/xts",
breadcrumb: [
{ name: "技术与标准", path: "/Knowledge" },
{ name: "技术知识", path: "/Knowledge/" },
{ name: "标准文献" },
{ name: "常见知识" },
],
},
{
id: uuid("gs_nav"),
name: "专业术语",
index: 3,
link: "/Knowledge/Glossary",
name: "小贴士",
index: 4,
link: "/Knowledge/xts",
breadcrumb: [
{ name: "技术与标准", path: "/Knowledge" },
{ name: "技术知识", path: "/Knowledge/" },
{ name: "专业术语" },
{ name: "小贴士" },
],
},
{
id: uuid("gs_nav"),
name: "小贴士",
index: 4,
link: "/Knowledge/xts",
name: "标准文献",
index: 2,
link: "/Knowledge/Standard",
breadcrumb: [
{ name: "技术与标准", path: "/Knowledge" },
{ name: "技术知识", path: "/Knowledge/" },
{ name: "小贴士" },
{ name: "标准文献" },
],
},
{
id: uuid("gs_nav"),
name: "常见知识",
index: 5,
link: "/Knowledge/xts",
name: "专业术语",
index: 3,
link: "/Knowledge/Glossary",
breadcrumb: [
{ name: "技术与标准", path: "/Knowledge" },
{ name: "技术知识", path: "/Knowledge/" },
{ name: "常见知识" },
{ name: "专业术语" },
],
},
],
},
{
......
src/components/layout/header/search.js
......@@ -5,6 +5,7 @@ export default {
name: "条码查询",
index: 3,
link: "/search",
rowNum: 5,
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
......
src/components/layout/header/service.js
import {uuid} from "@/utils/utils";
import search from "./search.js";
export default {
id: "4",
name: "服务中心",
index: 4,
link: "/Service",
rowNum: 7,
breadcrumb: [
{ name: "服务中心", path: "/Service/BarcodeV" },
{ name: "产品服务", path: "/Service/BarcodeV" },
......@@ -79,58 +79,6 @@ export default {
},
{
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/软件检测服务",
index: 2,
link: "/Service/jcyxz/Barcode",
......@@ -209,6 +157,166 @@ export default {
},
{
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标准服务提供商",
index: 3,
link: "/Service/Partners/index",
......@@ -264,7 +372,6 @@ export default {
},
]
},
...JSON.parse(JSON.stringify(search.children)),
{
id: uuid("gs_nav"),
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