Skip to content

G
gs1
Commit 81573d7e by Tang
Options

Merge branch 'master' of https://gitee.com/gs1-office-web-sit/gs1

parents 99e471fc b08e3b37
Showing with 546 additions and 71 deletions
src/components/layout/header/mock.js
...@@ -25,6 +25,16 @@ export const nav = [ ...@@ -25,6 +25,16 @@ export const nav = [
children: [ children: [
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "中心简介",
index: 0,
link: "/Org/Intro",
breadcrumb: [
{name: "机构概况", path: "/service"},
{name: "中心简介"},
],
},
{
id: uuid("gs_nav"),
name: "地方编码分支机构", name: "地方编码分支机构",
index: 0, index: 0,
link: "/Org/Branch", link: "/Org/Branch",
...@@ -38,6 +48,25 @@ export const nav = [ ...@@ -38,6 +48,25 @@ export const nav = [
], ],
}, },
{ {
id: "1-1",
name: "质量管理体系",
index: 2,
link: "/Org/ISO",
children: [
{
id: uuid("gs_nav"),
name: "指导思想",
index: 0,
link: "/Org/ISO/Ideology",
breadcrumb: [
{name: "机构概况", path: "/Org/Intro"},
{name: "质量管理体系", path: "/Org/ISO"},
{name: "指导思想"},
],
},
],
},
{
id: "2", id: "2",
name: "业务大厅", name: "业务大厅",
index: 2, index: 2,
......
src/router/index.js
...@@ -41,6 +41,22 @@ const routes = [ ...@@ -41,6 +41,22 @@ const routes = [
component: () => import("@/views/Org/index"), component: () => import("@/views/Org/index"),
children: [ children: [
{ {
path: "/Org/Intro",
name: "Intro",
meta: {
name: "中心简介",
},
component: () => import("@/views/Org/Intro.vue"),
},
{
path: "/Org/Departments",
name: "Departments",
meta: {
name: "内设机构",
},
component: () => import("@/views/Org/Departments.vue"),
},
{
path: "/Org/Branch", path: "/Org/Branch",
name: "Branch", name: "Branch",
meta: { meta: {
...@@ -48,6 +64,40 @@ const routes = [ ...@@ -48,6 +64,40 @@ const routes = [
}, },
component: () => import("@/views/Org/Branch.vue"), component: () => import("@/views/Org/Branch.vue"),
}, },
{
path: "/Org/ISO",
name: "ISO",
meta: {
name: "质量管理体系",
},
redirect: '/Org/ISO/Ideology',
},
],
},
{
path: "/Org/ISO",
name: "ISO",
meta: {
name: "质量管理体系",
},
component: () => import("@/views/Org/index"),
children: [
{
path: "/Org/ISO/Ideology",
name: "Ideology",
meta: {
name: "指导思想",
},
component: () => import("@/views/Org/ISO/Ideology.vue"),
},
{
path: "/Org/ISO/Policy",
name: "Policy",
meta: {
name: "质量方针",
},
component: () => import("@/views/Org/ISO/Policy.vue"),
},
], ],
}, },
{ {
......
src/utils/utils.js
...@@ -35,6 +35,3 @@ export function uuid(prefix) { ...@@ -35,6 +35,3 @@ export function uuid(prefix) {
return prefix + '_' + random + unique + String(time); return prefix + '_' + random + unique + String(time);
} }
export function getDocumentTitle(content) {
return "链通万家 | " + content
}
src/views/Home/index.vue
...@@ -266,7 +266,7 @@ ...@@ -266,7 +266,7 @@
<div class="cate">业务大厅</div> <div class="cate">业务大厅</div>
<div class="row"> <div class="row">
<div class="col-lg-6 wbsxtcy bgWhite"> <div class="col-lg-6 wbsxtcy bgWhite">
<div class="ywdt-cate"> <div class="ywdt-cate ywdt-cate-bj1">
<span>我还不是系统成员</span> <span>我还不是系统成员</span>
<span>（企业初次申请）</span> <span>（企业初次申请）</span>
</div> </div>
...@@ -284,7 +284,7 @@ ...@@ -284,7 +284,7 @@
</div> </div>
</div> </div>
<div class="col-lg-6 wsxtcy bgWhite"> <div class="col-lg-6 wsxtcy bgWhite">
<div class="ywdt-cate"> <div class="ywdt-cate ywdt-cate-bj2">
<span>我是系统成员</span> <span>我是系统成员</span>
<span>（成员专区）</span> <span>（成员专区）</span>
</div> </div>
...@@ -303,7 +303,7 @@ ...@@ -303,7 +303,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-6 wsylqy bgWhite"> <div class="col-lg-6 wsylqy bgWhite">
<div class="ywdt-cate"> <div class="ywdt-cate ywdt-cate-bj1">
<span>我是医疗企业</span> <span>我是医疗企业</span>
</div> </div>
<div class="row ywdt-kj"> <div class="row ywdt-kj">
...@@ -319,7 +319,7 @@ ...@@ -319,7 +319,7 @@
</div> </div>
</div> </div>
<div class="col-lg-6 kjywblzq bgWhite"> <div class="col-lg-6 kjywblzq bgWhite">
<div class="ywdt-cate"> <div class="ywdt-cate ywdt-cate-bj2">
<span>跨境业务办理专区</span> <span>跨境业务办理专区</span>
</div> </div>
<div class="row ywdt-kj"> <div class="row ywdt-kj">
...@@ -481,27 +481,37 @@ ...@@ -481,27 +481,37 @@
<div class="spqqsfz-cate-left">商品全球身份证</div> <div class="spqqsfz-cate-left">商品全球身份证</div>
<div class="spqqsfz-cate-right">更多></div> <div class="spqqsfz-cate-right">更多></div>
</div> </div>
<div class="spqqsfz-cont"> <div class="spqqsfz-cont row">
<div class="spqqsfz-cont-left col-lg-3">
<img src="../../assets/image/home/spqqsfz-tp.png" alt="" />
</div>
<div class="spqqsfz-cont-right col-lg-9">
<img src="../../assets/image/home/spqqsfz-bj2.png" alt="" />
<div class="right-cont">
<div class="row"> <div class="row">
<div class="col offset-lg-4">kiddy color重彩油画棒A14018</div> <div class="col offset-2 offset-lg-3">
kiddy color重彩油画棒A14018
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-8 offset-lg-4"> <div class="col-8 offset-2 offset-lg-3">
<div class="pp">品牌：kiddy color</div> <div class="pp">品牌：kiddy color</div>
<div class="jhl">净含量：一盒</div> <div class="jhl">净含量：一盒</div>
</div> </div>
<div class="col-8 offset-lg-4"> <div class="col-8 offset-2 offset-lg-3">
公司名称：梁介福(广东)药业有限公司 公司名称：梁介福(广东)药业有限公司
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col offset-lg-4"> <div class="col offset-2 offset-lg-3">
<button>更多商品信息</button> <button>更多商品信息</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<!-- 首页下半部 --> <!-- 首页下半部 -->
<div class="home-bottom"> <div class="home-bottom">
<div class="container"> <div class="container">
...@@ -1001,10 +1011,16 @@ export default { ...@@ -1001,10 +1011,16 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
background: url("../../assets/image/home/ywdt-cate.png") no-repeat 100%
100%;
height: 73px; height: 73px;
padding-left: 24px; padding-left: 24px;
&.ywdt-cate-bj1 {
background: url("../../assets/image/home/ywdt-cate-bj1.png") no-repeat;
background-size: cover;
}
&.ywdt-cate-bj2 {
background: url("../../assets/image/home/ywdt-cate-bj2.png") no-repeat;
background-size: cover;
}
span { span {
&:nth-child(1) { &:nth-child(1) {
color: #0e2c6b; color: #0e2c6b;
...@@ -1118,8 +1134,8 @@ export default { ...@@ -1118,8 +1134,8 @@ export default {
} }
.spqqsfz { .spqqsfz {
background: #2f579c url("../../assets/image/home/spqqsfz-bj.png") no-repeat; background: #2f579c url("../../assets/image/home/spqqsfz-bj.png") no-repeat;
height: 433px; padding: 30px 0;
background-size: auto 100%; // height: 433px;
background-position: center; background-position: center;
.spqqsfz-cate { .spqqsfz-cate {
display: flex; display: flex;
...@@ -1127,13 +1143,35 @@ export default { ...@@ -1127,13 +1143,35 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
color: #ffffff; color: #ffffff;
font-size: 24px; font-size: 24px;
padding: 30px 0; margin-bottom: 30px;
} }
.spqqsfz-cont { .spqqsfz-cont {
background: url("../../assets/image/home/spqqsfz-bj2.png") no-repeat; // background: #fff url("../../assets/image/home/spqqsfz-bj2.png") no-repeat;
position: relative;
background: #fff;
border-radius: 6px;
> * {
padding: 0;
height: 300px; height: 300px;
background-size: 100% 100%; }
background-position: center; .spqqsfz-cont-left {
img {
width: 100%;
height: 100%;
}
}
.spqqsfz-cont-right {
position: relative;
img {
width: 100%;
height: 100%;
}
.right-cont {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
...@@ -1170,6 +1208,8 @@ export default { ...@@ -1170,6 +1208,8 @@ export default {
} }
} }
} }
}
}
.home-bottom { .home-bottom {
padding: 40px 0; padding: 40px 0;
.row { .row {
......
src/views/Org/Branch.vue
<template> <template>
<div class="branch"> <div class="branch">
<div class="cate-name">地方编码分支机构</div> <div class="cate-name">地方编码分支机构</div>
<div class="alert alert-danger d-flex align-items-center" role="alert"> <div class="alert alert-danger d-flex align-items-center" role="alert">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
...@@ -65,7 +64,6 @@ ...@@ -65,7 +64,6 @@
华东 华东
</button> </button>
</li> </li>
</ul> </ul>
<div class="tab-content" id="myTabContent"> <div class="tab-content" id="myTabContent">
<div <div
...@@ -74,7 +72,7 @@ ...@@ -74,7 +72,7 @@
role="tabpanel" role="tabpanel"
aria-labelledby="home-tab" aria-labelledby="home-tab"
> >
<fzzx/> <fzzx />
</div> </div>
<div <div
class="tab-pane fade" class="tab-pane fade"
...@@ -82,7 +80,7 @@ ...@@ -82,7 +80,7 @@
role="tabpanel" role="tabpanel"
aria-labelledby="profile-tab" aria-labelledby="profile-tab"
> >
<fzzx/> <fzzx />
</div> </div>
<div <div
class="tab-pane fade" class="tab-pane fade"
...@@ -90,13 +88,13 @@ ...@@ -90,13 +88,13 @@
role="tabpanel" role="tabpanel"
aria-labelledby="contact-tab" aria-labelledby="contact-tab"
> >
<fzzx/> <fzzx />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import fzzx from './comps/fzzx.vue' import fzzx from "./comps/fzzx.vue";
export default { export default {
components: { components: {
...@@ -124,21 +122,22 @@ export default { ...@@ -124,21 +122,22 @@ export default {
.alert-danger { .alert-danger {
@include alert-variant(#fef1ec, none, #f26335); @include alert-variant(#fef1ec, none, #f26335);
} }
.nav-tabs{ .nav-tabs {
background: #FFFFFF; background: #ffffff;
box-shadow: 0px 3px 10px 0px rgba(4, 64, 141, 0.1); box-shadow: 0px 3px 10px 0px rgba(4, 64, 141, 0.1);
border-radius: 2px; border-radius: 2px;
.nav-link{ .nav-link {
border: 0; border: 0;
color: #454545; color: #454545;
&.active, &:hover{ &.active,
border-bottom: 3px solid #F26335; &:hover {
color: #04408D; border-bottom: 3px solid #f26335;
color: #04408d;
} }
} }
} }
.tab-pane{ .tab-pane {
background: #FFFFFF; background: #ffffff;
border-radius: 4px; border-radius: 4px;
margin-top: 20px; margin-top: 20px;
} }
......
src/views/Org/Departments.vue 0 → 100644
<template>
<div class="guide">
<div class="guide-msg container">
<div class="msg-cont">
<div class="nsjg">
<cate :father="bgsCate"></cate>
<p>承担编码中心日常运行管理、政策研究、相关法律事务等工作，承担文秘、档案、保密、督办、安保及后勤工作。</p>
</div>
<div class="nsjg">
<cate :father="bmglbCate"></cate>
<p>承担对全国商品条码系统成员的注册、续展、注销等业务管理工作，开展对地方分中心（办事处）业务方面的指导、管理及考核相关工作，开展编码管理规章制度研究和制修订等工作。</p>
</div>
<div class="nsjg">
<cate :father="jsyjbCate"></cate>
<p>承担支撑物品编码事业发展的基础性、前瞻性技术研究，开展全球统一标识系统技术体系、物品编码技术、物联网技术、二维码技术、物流与电子商务等方面标准化及应用研究工作，承担编码中心科研管理工作，承担全国物品编码标准化技术委员会秘书处工作和全国物流信息管理标准化技术委员会秘书处工作。</p>
</div>
<div class="nsjg">
<cate :father="yjtgbCate"></cate>
<p>负责对物品编码相关工作的宣传和应用推广，承担与政府部门、行业组织及企业的沟通联络工作，负责全球统一标识系统在各行业、领域的推广应用，负责编码中心国际交流合作与外事工作。</p>
</div>
<div class="nsjg">
<cate :father="xxhbCate"></cate>
<p>负责编码中心信息化工作的统一管理；负责信息化相关的采购工作；负责编码中心网站、公共信息系统、基础数据库、数据中心等公共基础设施的建设、管理与维护工作；负责编码中心网络安全保障与网络保密管理工作；负责信息化领域的技术跟踪与研究工作。</p>
</div>
<div class="nsjg">
<cate :father="cpkfyybCate"></cate>
<p>承担物品编码与自动识别技术研究成果转化，搭建零售商与供应商沟通合作平台，承担商品信息服务产品的开发与市场化运营工作，开展商品相关信息服务和增值服务工作。</p>
</div>
<div class="nsjg">
<cate :father="cyfwbCate"></cate>
<p>承担商品条码工作服务体系建立与维护工作，指导和监督地方分中心（办事处）服务清单执行情况，开展条码及自动识别技术教育培训和咨询工作。</p>
</div>
<div class="nsjg">
<cate :father="zljcbCate"></cate>
<p>统一组织管理全国商品条码质量服务工作，实施服务性检验及市场调查，负责条码、射频识别等检测技术研究及标准化工作，开展条码、射频识别相关检验服务及技术培训。</p>
</div>
<div class="nsjg">
<cate :father="rlzybCate"></cate>
<p>承担编码中心人力资源规划、管理与人才队伍建设工作，承担干部任免、岗位设置、工资管理、教育培训、职称管理及退休人员管理等工作。</p>
</div>
<div class="nsjg">
<cate :father="cwbCate"></cate>
<p>承担条码收费、财务核算、预决算、内部审计、国有资产管理、分支机构条码经营管理等工作，承担科研项目经费管理工作。</p>
</div>
<div class="nsjg">
<cate :father="dwbgsCate"></cate>
<p>承担党委日常工作，负责党务、纪检监察、工青妇等工作。</p>
</div>
</div>
</div>
</div>
</template>
<script>
import cate from "../comps/cate.vue";
export default {
components: {
cate,
},
data() {
return {
bgsCate: {
name: "办公室",
ico: "",
},
bmglbCate: {
name: "编码管理部",
ico: "",
},
jsyjbCate: {
name: "技术研究部",
ico: "",
},
yjtgbCate: {
name: "应用推广部",
ico: "",
},
xxhbCate: {
name: "信息化部",
ico: "",
},
cpkfyybCate: {
name: "产品开发运营部",
ico: "",
},
cyfwbCate: {
name: "成员服务部",
ico: "",
},
zljcbCate: {
name: "质量检测部",
ico: "",
},
rlzybCate: {
name: "人力资源部",
ico: "",
},
cwbCate: {
name: "产品开发运营部",
ico: "",
},
dwbgsCate: {
name: "党委办公室（纪委办公室）",
ico: "",
},
};
},
};
</script>
<style lang="scss">
.guide {
@include module-box;
.guide-msg {
margin: 30px 0;
font-size: 14px;
.msg-title {
color: rgba(0, 121, 158, 1);
margin-bottom: 20px;
}
.msg-cont {
line-height: 23px;
color: rgba(102, 102, 102, 1);
p {
margin-left: 15px;
text-indent: 32px;
line-height: 28px;
}
}
}
}
</style>
\ No newline at end of file
src/views/Org/ISO/Ideology.vue 0 → 100644
<template>
<div class="guide">
<cate :father="lsspCate"></cate>
<div class="guide-msg container">
<div class="msg-cont">
中国物品编码中心是统一组织、协调、管理我国商品条码、物品编码与自动识别技术的专门机构，隶属于国家市场监督管理总局，1988年成立，1991年4月代表我国加入国际物品编码组织（GS1），负责推广国际通用的、开放的、跨行业的全球统一标识系统和供应链管理标准，向社会提供公共服务平台和标准化解决方案。
</div>
</div>
</div>
</template>
<script>
import cate from "../../comps/cate.vue";
export default {
components: {
cate,
},
data() {
return {
lsspCate: {
name: "质量管理体系",
ico: "",
},
};
},
};
</script>
<style lang="scss">
.guide {
@include module-box;
.guide-msg {
margin: 30px 0;
font-size: 14px;
.msg-title {
color: rgba(0, 121, 158, 1);
margin-bottom: 20px;
}
.msg-cont {
line-height: 23px;
color: rgba(102, 102, 102, 1);
}
}
}
</style>
\ No newline at end of file
src/views/Org/ISO/Policy.vue 0 → 100644
<template>
<div class="guide">
<cate :father="lsspCate"></cate>
<div class="guide-msg container">
<div class="msg-cont">
中国物品编码中心是统一组织、协调、管理我国商品条码、物品编码与自动识别技术的专门机构，隶属于国家市场监督管理总局，1988年成立，1991年4月代表我国加入国际物品编码组织（GS1），负责推广国际通用的、开放的、跨行业的全球统一标识系统和供应链管理标准，向社会提供公共服务平台和标准化解决方案。
</div>
</div>
</div>
</template>
<script>
import cate from "../../comps/cate.vue";
export default {
components: {
cate,
},
data() {
return {
lsspCate: {
name: "质量方针",
ico: "",
},
};
},
};
</script>
<style lang="scss">
.guide {
@include module-box;
.guide-msg {
margin: 30px 0;
font-size: 14px;
.msg-title {
color: rgba(0, 121, 158, 1);
margin-bottom: 20px;
}
.msg-cont {
line-height: 23px;
color: rgba(102, 102, 102, 1);
}
}
}
</style>
\ No newline at end of file
src/views/Org/Intro.vue 0 → 100644
<template>
<div class="guide">
<div class="guide-msg container">
<div class="msg-cont">
<p>
中国物品编码中心是统一组织、协调、管理我国商品条码、物品编码与自动识别技术的专门机构，隶属于国家市场监督管理总局，1988年成立，1991年4月代表我国加入国际物品编码组织（GS1），负责推广国际通用的、开放的、跨行业的全球统一标识系统和供应链管理标准，向社会提供公共服务平台和标准化解决方案。
</p>
<p>
中国物品编码中心在全国设有47个分支机构，形成了覆盖全国的集编码管理、技术研发、标准制定、应用推广以及技术服务为一体的工作体系。物品编码与自动识别技术已广泛应用于零售、制造、物流、电子商务、移动商务、电子政务、医疗卫生、产品质量追溯、图书音像等国民经济和社会发展的诸多领域。全球统一标识系统是全球应用最为广泛的商务语言，商品条码是其基础和核心。截至目前，编码中心累计向70多万家企业提供了商品条码服务，全国有上亿种商品上印有商品条码。
</p>
<p>中国物品编码中心的主要职责是：</p>
<p>
（一）负责拟订并组织实施全国商品条码、物品编码、产品电子代码与标识工作的规章制度及工作规划。
</p>
<p>
（二）统一组织、协调全国条码工作，承担全国商品条码、物品编码、产品电子代码与标识管理的实施工作，并负责统一注册、统一赋码。
</p>
<p>
（三）履行国际物品编码组织（GS1）成员职责，参加有关国际组织的各项活动，按照国际通用规则推广、应用和发展全球统一标识系统及相关技术。
</p>
<p>
（四）组织建立国家物品编码体系及自动识别技术标识体系，开展物品编码、条码、二维码、射频等自动识别技术研究。
</p>
<p>
（五）承担物品编码及自动识别技术领域相关国家标准和技术规范的制修订工作。
</p>
<p>
（六）承担国家物品编码与标识体系的推广应用工作，承担市场监管相关业务领域中的编码与标识服务工作。
</p>
<p>
（七）承担国家物品编码信息数据库的建设和管理，组织开展相关信息服务工作。
</p>
<p>
（八）组织开展对全国商品条码系统成员的培训、咨询及条码质量检测等技术服务工作。
</p>
<p>（九）承办国家市场监督管理总局交办的其他工作。</p>
<div class="zzjg">
<cate :father="zzjgCate"></cate>
<img src="../../assets/image/home/zzjg-tp.jpg" alt="" />
</div>
<div class="zzjg">
<cate :father="lxdzCate"></cate>
<p>北京东城区安外大街东侧138号皇城国际中心B座3-6层 （邮编：100011)</p>
</div>
<div class="map">
<cate :father="mapCate"></cate>
</div>
</div>
</div>
</div>
</template>
<script>
import cate from "../comps/cate.vue";
export default {
components: {
cate,
},
data() {
return {
zzjgCate: {
name: "组织架构：",
ico: "",
},
lxdzCate: {
name: "联系地址：",
ico: "",
},
mapCate: {
name: "乘车及驾车路线图：",
ico: "",
},
};
},
};
</script>
<style lang="scss">
.guide {
@include module-box;
.guide-msg {
margin: 30px 0;
font-size: 14px;
.msg-title {
color: rgba(0, 121, 158, 1);
margin-bottom: 20px;
}
.msg-cont {
line-height: 23px;
color: rgba(102, 102, 102, 1);
p {
margin-left: 15px;
text-indent: 32px;
line-height: 28px;
}
.zzjg {
img {
width: 100%;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/Org/index.vue
<template> <template>
<div class="org container"> <div class="org container">
<breadcrumb/> <breadcrumb />
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
<left/> <left :routeList="routes" :currentRoute="$route" />
</div> </div>
<div class="col-lg-9"> <div class="col-lg-9">
<router-view></router-view> <router-view></router-view>
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
</div> </div>
</template> </template>
<script> <script>
import left from '../comps/left.vue' import left from "../comps/left.vue";
import breadcrumb from '../comps/breadcrumb.vue' import breadcrumb from "../comps/breadcrumb.vue";
export default { export default {
components: { components: {
...@@ -21,12 +21,29 @@ export default { ...@@ -21,12 +21,29 @@ export default {
breadcrumb, breadcrumb,
}, },
data() { data() {
return {}; return {
};
},
computed: {
routes() {
var routes = {
children: this.$router.options.routes,
};
var route = this.$route.matched;
for (var i = 0; i < route.length -1; i++) {
routes = routes.children.find(el => el.name === route[i].name);
}
return routes.children;
},
}, },
created() { created() {
console.log(this.$route, "this.$route"); console.log(this.routes, "this.$route");
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.org {
padding-bottom: 20px;
}
</style> </style>
\ No newline at end of file
src/views/comps/breadcrumb.vue
<template> <template>
<div class="bread-crumb">
<nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb"> <nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<template v-for="item in bread"> <template v-for="item in bread">
<li class="breadcrumb-item" v-if="!item.active" :key="item.path"> <li class="breadcrumb-item" v-if="!item.active" :key="item.path">
<a :href="item.path">{{ item.name }}</a> <a :href="item.path">{{ item.name }}</a>
</li> </li>
<li class="breadcrumb-item active" v-else :key="item.path" aria-current="page">{{ item.name }}</li> <li
class="breadcrumb-item active"
v-else
:key="item.path"
aria-current="page"
>
{{ item.name }}
</li>
</template> </template>
</ol> </ol>
</nav> </nav>
</div>
</template> </template>
<script> <script>
import {mapState} from 'vuex' import { mapState } from "vuex";
export default { export default {
computed: { computed: {
...mapState('system',['breadcrumb']), ...mapState("system", ["breadcrumb"]),
bread() { bread() {
const bread = [...this.breadcrumb]; const bread = [...this.breadcrumb];
bread[bread.length - 1].active = true; bread[bread.length - 1].active = true;
return bread return bread;
}, },
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
.breadcrumb { .bread-crumb {
margin-bottom: 20px; .breadcrumb {
margin: 20px 0;
&-item { &-item {
font-size: 12px; font-size: 12px;
} }
a { a {
color: #00799E; color: #00799e;
text-decoration: none; text-decoration: none;
} }
}
} }
</style> </style>
src/views/comps/left.vue
...@@ -2,30 +2,32 @@ ...@@ -2,30 +2,32 @@
<div class="left"> <div class="left">
<div class="list-group"> <div class="list-group">
<a <a
href="#" :class="[
class="list-group-item list-group-item-action" 'list-group-item',
aria-current="true" 'list-group-item-action',
{ active: tmp.name === currentRoute.name },
]"
v-for="(tmp, i) in routeList"
:key="i"
@click="jump(i)"
>{{ tmp.meta.name }}</a
> >
中心简介
</a>
<a href="#" class="list-group-item list-group-item-action">中心领导</a>
<a href="#" class="list-group-item list-group-item-action">内设机构</a>
<a href="#" class="list-group-item list-group-item-action"
>质检中心/协会/杂志社/标委会/其他</a
>
<a class="list-group-item list-group-item-action active"
>地方编码分支机构</a
>
<a class="list-group-item list-group-item-action"
>国际物品编码组织（GS1）</a
>
<a class="list-group-item list-group-item-action"
>国际物品编码组织（GS1）成员网站</a
>
<a class="list-group-item list-group-item-action">质量管理体系</a>
</div> </div>
</div> </div>
</template> </template>
<script>
export default {
props: ["routeList", "currentRoute"],
methods: {
jump(i) {
console.log(i, "i");
this.$router.push({
path: this.routeList[i].path,
});
},
},
};
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.left { .left {
background: #fff; background: #fff;
...@@ -35,7 +37,7 @@ ...@@ -35,7 +37,7 @@
.list-group-item { .list-group-item {
border: 0; border: 0;
font-size: 14px; font-size: 14px;
padding: .8rem 1rem; padding: 0.8rem 1rem;
&.active { &.active {
background: rgba(242, 99, 53, 0.1); background: rgba(242, 99, 53, 0.1);
color: #f26335; color: #f26335;
......
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