Skip to content

G
gs1
Commit 021dc96e by tang
Options

feat: 头部样式更新

parent d9a8b424
Showing with 105 additions and 38 deletions
src/components/layout/header/HeaderDropdown.vue
...@@ -67,8 +67,13 @@ export default { ...@@ -67,8 +67,13 @@ export default {
if (itemBox.length > 0) { if (itemBox.length > 0) {
children.push(this.renderItemBox([...itemBox], true)); children.push(this.renderItemBox([...itemBox], true));
} }
// style: { flex:'1 1 490px'},
const classNames = ["gs-dropdown-rect"];
if(nav.class){
classNames.push(...nav.class)
}
return ( return (
<div class="gs-dropdown-rect"> <div class={classNames.join(" ").trim()} style={{...nav.style}}>
<div <div
class="rect-title gs-hover" class="rect-title gs-hover"
vOn:click={() => { vOn:click={() => {
...@@ -88,7 +93,7 @@ export default { ...@@ -88,7 +93,7 @@ export default {
renderItemBox(items, isChild = false) { renderItemBox(items, isChild = false) {
const classNames = ["gs-dropdown-col", isChild ? "no-padding-top" : ""]; const classNames = ["gs-dropdown-col", isChild ? "no-padding-top" : ""];
return ( return (
<div class={classNames.join(" ").trim()}> <div class={classNames.join(" ").trim()} style={items[0].style}>
{items.map((item) => { {items.map((item) => {
return ( return (
<div class="gs-dropdown-item"> <div class="gs-dropdown-item">
...@@ -149,7 +154,7 @@ export default { ...@@ -149,7 +154,7 @@ export default {
} }
.gs-dropdown-rect { .gs-dropdown-rect {
flex:1 0 auto; //flex:1 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-right: 75px; padding-right: 75px;
...@@ -172,15 +177,16 @@ export default { ...@@ -172,15 +177,16 @@ export default {
.rect-body { .rect-body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start;
} }
} }
.gs-dropdown-col { .gs-dropdown-col {
flex:1 0 auto; //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: 60px;
margin-bottom: 20px; margin-bottom: 20px;
border-top: 1px solid rgba(4, 64, 141, 0.18); border-top: 1px solid rgba(4, 64, 141, 0.18);
...@@ -199,11 +205,35 @@ export default { ...@@ -199,11 +205,35 @@ export default {
} }
@media (max-width: 992px) { @media (max-width: 992px) {
.navbar-dropdown-menu-inner,.rect-body{
flex-direction: column;
}
.gs-dropdown-rect{ .gs-dropdown-rect{
padding-top: 0; padding-top: 0;
flex-direction: column;
flex: 1!important;
}
.gs-dropdown-col{
flex: 1!important;
} }
.gs-dropdown-rect,.gs-dropdown-col{ .gs-dropdown-rect,.gs-dropdown-col{
border-top: none; border-top: none;
padding-right: 0;
}
}
@media (min-width: 1400px) {
.service_xtcy_custom,.service_cxfw_custom{
flex:1 0 auto;
}
}
@media (max-width: 1399px){
.service_xtcy_custom{
flex:1 0 490px;
}
.service_cxfw_custom{
flex:1 0 260px;
} }
} }
</style> </style>
src/components/layout/header/mock.js
...@@ -22,6 +22,7 @@ export const nav = [ ...@@ -22,6 +22,7 @@ export const nav = [
nameInHeaderNav: "机构概况", nameInHeaderNav: "机构概况",
index: 0, index: 0,
link: "/Org", link: "/Org",
style: { flex:'1 0 auto' },
breadcrumb: [{ name: "机构概况", path: "/Org" }, { name: "中心简介" }], breadcrumb: [{ name: "机构概况", path: "/Org" }, { name: "中心简介" }],
children: [ children: [
{ {
...@@ -29,6 +30,7 @@ export const nav = [ ...@@ -29,6 +30,7 @@ export const nav = [
name: "中心简介", name: "中心简介",
index: 0, index: 0,
link: "/Org/Intro", link: "/Org/Intro",
style: { paddingRight:'160px' },
breadcrumb: [ breadcrumb: [
{ name: "机构概况", path: "/Org" }, { name: "机构概况", path: "/Org" },
{ name: "中心简介" }, { name: "中心简介" },
...@@ -177,9 +179,10 @@ export const nav = [ ...@@ -177,9 +179,10 @@ export const nav = [
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "我还不是系统成员（企业初次申请）", name: "我还不是系统成员（企业初次申请）",
nameInHeaderNav: "我还不是系统成员", nameInHeaderNav: "我还不是系统成员（企业初次申请）",
index: 2, index: 2,
link: "", link: "",
style: { flex:'0 0 356.24px'},
breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "我还不是系统成员（企业初次申请）" }], breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "我还不是系统成员（企业初次申请）" }],
children: [ children: [
{ {
...@@ -366,9 +369,10 @@ export const nav = [ ...@@ -366,9 +369,10 @@ export const nav = [
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "我是系统成员（成员专区）", name: "我是系统成员（成员专区）",
nameInHeaderNav: "我是系统成员", nameInHeaderNav: "我是系统成员（成员专区）",
index: 2, index: 2,
link: "/Business", link: "/Business",
class:['service_xtcy_custom'],
breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "我是系统成员（成员专区）" }], breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "我是系统成员（成员专区）" }],
children: [ children: [
{ {
...@@ -495,10 +499,22 @@ export const nav = [ ...@@ -495,10 +499,22 @@ export const nav = [
nameInHeaderNav: "跨境业务办理专区", nameInHeaderNav: "跨境业务办理专区",
index: 2, index: 2,
link: "/Business", link: "/Business",
style: { flex:'1 0 auto' },
breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "跨境业务办理专区" }], breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "跨境业务办理专区" }],
children: [ children: [
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "全球法人机构识别编码（LEI）业务办理",
index: 2,
link: "/Business/GLN",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "办理其他业务", path: "/Business/GLN" },
{ name: "全球参与方位置代码（GLN）业务办理" },
],
},
{
id: uuid("gs_nav"),
name: "全球参与方位置代码（GLN）业务办理", name: "全球参与方位置代码（GLN）业务办理",
index: 2, index: 2,
link: "/Business/GLN", link: "/Business/GLN",
...@@ -526,12 +542,14 @@ export const nav = [ ...@@ -526,12 +542,14 @@ export const nav = [
name: "资讯中心", name: "资讯中心",
index: 5, index: 5,
link: "/News/index", link: "/News/index",
style:{flex:'1 0 620px'},
children: [ children: [
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "图片资讯", name: "图片资讯",
index: 5, index: 5,
link: "/News/PicNews", link: "/News/PicNews",
style:{paddingRight:'160px'},
breadcrumb: [ breadcrumb: [
{ name: "资讯中心", path: "/News/index" }, { name: "资讯中心", path: "/News/index" },
{ name: "图片资讯" }, { name: "图片资讯" },
...@@ -572,6 +590,7 @@ export const nav = [ ...@@ -572,6 +590,7 @@ export const nav = [
name: "国际追踪", name: "国际追踪",
index: 5, index: 5,
link: "/News/International", link: "/News/International",
style:{paddingRight:'132px'},
breadcrumb: [ breadcrumb: [
{ name: "资讯中心", path: "/News/index" }, { name: "资讯中心", path: "/News/index" },
{ name: "国际追踪" }, { name: "国际追踪" },
...@@ -635,12 +654,14 @@ export const nav = [ ...@@ -635,12 +654,14 @@ export const nav = [
name: "应用领域", name: "应用领域",
index: 5, index: 5,
link: "/News", link: "/News",
style:{flex:'1 0 auto'},
children: [ children: [
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "零售", name: "零售",
index: 5, index: 5,
link: "/News/Retail", link: "/News/Retail",
style:{paddingRight:'132px'},
breadcrumb: [ breadcrumb: [
{ name: "资讯中心", path: "/News" }, { name: "资讯中心", path: "/News" },
{ name: "零售" }, { name: "零售" },
...@@ -733,6 +754,7 @@ export const nav = [ ...@@ -733,6 +754,7 @@ export const nav = [
nameInHeaderNav: "技术与标准", nameInHeaderNav: "技术与标准",
index: 0, index: 0,
link: "/Knowledge", link: "/Knowledge",
style: { flex:'1 0 auto' },
breadcrumb: [{ name: "技术与标准", path: "/Knowledge" }, { name: "技术与标准" }], breadcrumb: [{ name: "技术与标准", path: "/Knowledge" }, { name: "技术与标准" }],
children: [ children: [
{ {
...@@ -763,6 +785,7 @@ export const nav = [ ...@@ -763,6 +785,7 @@ export const nav = [
nameInHeaderNav: "技术知识", nameInHeaderNav: "技术知识",
index: 6, index: 6,
link: "/Knowledge", link: "/Knowledge",
style: { flex:'1 0 auto' },
breadcrumb: [{ name: "技术知识", path: "/Knowledge" }, { name: "技术知识" }], breadcrumb: [{ name: "技术知识", path: "/Knowledge" }, { name: "技术知识" }],
children: [ children: [
{ {
...@@ -839,6 +862,7 @@ export const nav = [ ...@@ -839,6 +862,7 @@ export const nav = [
nameInHeaderNav: "政策法规", nameInHeaderNav: "政策法规",
index: 1, index: 1,
link: "/Knowledge/Statute", link: "/Knowledge/Statute",
style: { flex:'1 0 auto' },
breadcrumb: [{ name: "技术知识", path: "/Knowledge" }, { name: "政策法规" }], breadcrumb: [{ name: "技术知识", path: "/Knowledge" }, { name: "政策法规" }],
children: [{}] children: [{}]
}, },
......
src/components/layout/header/search.js
import {uuid} from "@/utils/utils"; import {uuid} from "@/utils/utils";
export default { export default {
id: "3", id: "3",
name: "条码查询", name: "条码查询",
index: 3, index: 3,
link: "/search", link: "/search",
rowNum: 5, rowNum: 5,
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/service" }, {name: "服务中心", path: "/service"},
{ name: "查询服务", path: "/search/tool" }, {name: "查询服务", path: "/search/tool"},
{ name: "条码信息查询" }, {name: "条码信息查询"},
], ],
children: [ children: [
{ {
...@@ -19,9 +19,9 @@ export default { ...@@ -19,9 +19,9 @@ export default {
index: 0, index: 0,
link: "/search/tool", link: "/search/tool",
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/service" }, {name: "服务中心", path: "/service"},
{ name: "查询服务", path: "/search/tool" }, {name: "查询服务", path: "/search/tool"},
{ name: "条码信息查询" }, {name: "条码信息查询"},
], ],
children: [ children: [
{ {
...@@ -29,10 +29,11 @@ export default { ...@@ -29,10 +29,11 @@ export default {
name: "境内条码信息查询", name: "境内条码信息查询",
index: 0, index: 0,
link: "/search/internal", link: "/search/internal",
style: { paddingRight:'160px' },
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/service" }, {name: "服务中心", path: "/service"},
{ name: "查询服务", path: "/search/tool" }, {name: "查询服务", path: "/search/tool"},
{ name: "境内条码信息查询" }, {name: "境内条码信息查询"},
], ],
}, },
{ {
...@@ -41,9 +42,9 @@ export default { ...@@ -41,9 +42,9 @@ export default {
index: 1, index: 1,
link: "/search/external", link: "/search/external",
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/service" }, {name: "服务中心", path: "/service"},
{ name: "查询服务", path: "/search/tool" }, {name: "查询服务", path: "/search/tool"},
{ name: "境外条码信息查询" }, {name: "境外条码信息查询"},
], ],
}, },
{ {
...@@ -52,9 +53,9 @@ export default { ...@@ -52,9 +53,9 @@ export default {
index: 2, index: 2,
link: "/search/shortcode", link: "/search/shortcode",
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/service" }, {name: "服务中心", path: "/service"},
{ name: "查询服务", path: "/search/tool" }, {name: "查询服务", path: "/search/tool"},
{ name: "缩短码查询" }, {name: "缩短码查询"},
], ],
}, },
{ {
...@@ -70,10 +71,11 @@ export default { ...@@ -70,10 +71,11 @@ export default {
name: "GLN查询", name: "GLN查询",
index: 1, index: 1,
link: "/search/gln", link: "/search/gln",
style: {flex: '1 0 auto'},
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/service" }, {name: "服务中心", path: "/service"},
{ name: "查询服务", path: "/search/tool" }, {name: "查询服务", path: "/search/tool"},
{ name: "GLN查询" }, {name: "GLN查询"},
], ],
}, },
{ {
...@@ -81,10 +83,11 @@ export default { ...@@ -81,10 +83,11 @@ export default {
name: "自行车企业代码公告查询", name: "自行车企业代码公告查询",
index: 2, index: 2,
link: "/search/bike", link: "/search/bike",
style: {flex: '1 0 auto'},
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/service" }, {name: "服务中心", path: "/service"},
{ name: "查询服务", path: "/search/tool" }, {name: "查询服务", path: "/search/tool"},
{ name: "自行车企业代码公告查询" }, {name: "自行车企业代码公告查询"},
], ],
}, },
{ {
...@@ -92,10 +95,11 @@ export default { ...@@ -92,10 +95,11 @@ export default {
name: "条码术语查询", name: "条码术语查询",
index: 3, index: 3,
link: "/search/glossary", link: "/search/glossary",
style: {flex: '1 0 auto'},
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/service" }, {name: "服务中心", path: "/service"},
{ name: "查询服务", path: "/search/tool" }, {name: "查询服务", path: "/search/tool"},
{ name: "条码术语查询" }, {name: "条码术语查询"},
], ],
}, },
{ {
...@@ -103,10 +107,11 @@ export default { ...@@ -103,10 +107,11 @@ export default {
name: "校验码计算工具", name: "校验码计算工具",
index: 4, index: 4,
link: "/search/check", link: "/search/check",
style: {flex: '1 0 auto'},
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/service" }, {name: "服务中心", path: "/service"},
{ name: "查询服务", path: "/search/tool" }, {name: "查询服务", path: "/search/tool"},
{ name: "校验码计算工具" }, {name: "校验码计算工具"},
], ],
}, },
{ {
...@@ -114,10 +119,11 @@ export default { ...@@ -114,10 +119,11 @@ export default {
name: "国家及地区前缀码查询", name: "国家及地区前缀码查询",
index: 5, index: 5,
link: "/search/country", link: "/search/country",
style: {flex: '1 0 auto'},
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/service" }, {name: "服务中心", path: "/service"},
{ name: "查询服务", path: "/search/tool" }, {name: "查询服务", path: "/search/tool"},
{ name: "国家及地区前缀码查询" }, {name: "国家及地区前缀码查询"},
], ],
}, },
], ],
......
src/components/layout/header/service.js
...@@ -17,6 +17,7 @@ export default { ...@@ -17,6 +17,7 @@ export default {
name: "产品服务", name: "产品服务",
index: 0, index: 0,
link: "/Service/BarcodeV", link: "/Service/BarcodeV",
style:{flex:'0 0 260px',paddingRight:'10px'},
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/Service/BarcodeV" }, { name: "服务中心", path: "/Service/BarcodeV" },
{ name: "产品服务", path: "/Service/BarcodeV" }, { name: "产品服务", path: "/Service/BarcodeV" },
...@@ -82,6 +83,7 @@ export default { ...@@ -82,6 +83,7 @@ export default {
name: "条码/RFID/软件检测服务", name: "条码/RFID/软件检测服务",
index: 2, index: 2,
link: "/Service/jcyxz/Barcode", link: "/Service/jcyxz/Barcode",
style:{flex:'0 0 290px',paddingRight:'50px'},
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/Service/BarcodeV" }, { name: "服务中心", path: "/Service/BarcodeV" },
{ name: "条码/RFID/软件检测服务" }, { name: "条码/RFID/软件检测服务" },
...@@ -161,6 +163,7 @@ export default { ...@@ -161,6 +163,7 @@ export default {
nameInHeaderNav: "查询服务", nameInHeaderNav: "查询服务",
index: 0, index: 0,
link: "/search/tool", link: "/search/tool",
class:['service_cxfw_custom'],
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/service" }, { name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" }, { name: "查询服务", path: "/search/tool" },
...@@ -268,6 +271,7 @@ export default { ...@@ -268,6 +271,7 @@ export default {
name: "软件下载", name: "软件下载",
index: 1, index: 1,
link: "/Service/Book", link: "/Service/Book",
style:{flex:'0 0 260px'},
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/Service/Book" }, { name: "服务中心", path: "/Service/Book" },
{ name: "软件下载" }, { name: "软件下载" },
...@@ -320,6 +324,7 @@ export default { ...@@ -320,6 +324,7 @@ export default {
name: "GS1标准服务提供商", name: "GS1标准服务提供商",
index: 3, index: 3,
link: "/Service/Partners/index", link: "/Service/Partners/index",
style:{flex:'0 0 290px',paddingRight:'40px'},
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/Service/BarcodeV" }, { name: "服务中心", path: "/Service/BarcodeV" },
{ name: "标准服务提供商", path: "/Service/Partners/index" }, { name: "标准服务提供商", path: "/Service/Partners/index" },
...@@ -377,6 +382,7 @@ export default { ...@@ -377,6 +382,7 @@ export default {
name: "平台服务", name: "平台服务",
index: 5, index: 5,
link: "/Service/GDS", link: "/Service/GDS",
style: { flex:'1 0 auto' },
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/Service/BarcodeV" }, { name: "服务中心", path: "/Service/BarcodeV" },
{ name: "平台服务", path: "/Service/GDS" }, { name: "平台服务", path: "/Service/GDS" },
...@@ -388,6 +394,7 @@ export default { ...@@ -388,6 +394,7 @@ export default {
name: "中国商品信息服务平台", name: "中国商品信息服务平台",
index: 0, index: 0,
link: "/Service/GDS", link: "/Service/GDS",
style:{paddingRight:'0'},
breadcrumb: [ breadcrumb: [
{ name: "服务中心", path: "/Service/BarcodeV" }, { name: "服务中心", path: "/Service/BarcodeV" },
{ name: "平台服务", path: "/Service/GDS" }, { name: "平台服务", path: "/Service/GDS" },
......
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