Skip to content

G
gs1
Commit 20ce2243 by 林家欣
Options

资讯中心框架搭建并创建咨询中心下图片资讯

parent 5c6f8df1
Showing with 388 additions and 27 deletions
src/components/layout/header/mock.js
...@@ -487,8 +487,45 @@ export const nav = [ ...@@ -487,8 +487,45 @@ export const nav = [
id: "5", id: "5",
name: "资讯中心", name: "资讯中心",
index: 5, index: 5,
link: "/News", link: "/News/index",
children: [], children: [
{
id: uuid("gs_nav"),
name: "资讯中心",
index: 5,
link: "/News/index",
children: [
{
id: uuid("gs_nav"),
name: "图片资讯",
index: 2,
link: "/News/PicNews",
breadcrumb: [
{ name: "资讯中心", path: "/News/index" },
{ name: "图片资讯" },
],
}
],
},
{
id: uuid("gs_nav"),
name: "应用领域",
index: 5,
link: "",
children: [
{
id: uuid("gs_nav"),
name: "零售",
index: 5,
link: "",
breadcrumb: [
{ name: "资讯中心", path: "/News/index" },
{ name: "零售" },
],
}
],
},
],
}, },
{ {
id: "6", id: "6",
...@@ -502,7 +539,7 @@ export const nav = [ ...@@ -502,7 +539,7 @@ export const nav = [
nameInHeaderNav: "技术与标准", nameInHeaderNav: "技术与标准",
index: 0, index: 0,
link: "/Knowledge", link: "/Knowledge",
breadcrumb: [{name: "技术与标准", path: "/Knowledge"}, {name: "技术与标准"}], breadcrumb: [{ name: "技术与标准", path: "/Knowledge" }, { name: "技术与标准" }],
children: [ children: [
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
...@@ -510,8 +547,8 @@ export const nav = [ ...@@ -510,8 +547,8 @@ export const nav = [
index: 0, index: 0,
link: "/Knowledge", link: "/Knowledge",
breadcrumb: [ breadcrumb: [
{name: "技术与标准", path: "/Knowledge"}, { name: "技术与标准", path: "/Knowledge" },
{name: "科研"}, { name: "科研" },
], ],
}, },
{ {
...@@ -520,8 +557,8 @@ export const nav = [ ...@@ -520,8 +557,8 @@ export const nav = [
index: 1, index: 1,
link: "/Knowledge", link: "/Knowledge",
breadcrumb: [ breadcrumb: [
{name: "技术与标准", path: "/Knowledge"}, { name: "技术与标准", path: "/Knowledge" },
{name: "标准"}, { name: "标准" },
], ],
}, },
], ],
...@@ -532,7 +569,7 @@ export const nav = [ ...@@ -532,7 +569,7 @@ export const nav = [
nameInHeaderNav: "技术知识", nameInHeaderNav: "技术知识",
index: 6, index: 6,
link: "/Knowledge", link: "/Knowledge",
breadcrumb: [{name: "技术知识", path: "/Knowledge"}, {name: "技术知识"}], breadcrumb: [{ name: "技术知识", path: "/Knowledge" }, { name: "技术知识" }],
children: [ children: [
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
...@@ -540,9 +577,9 @@ export const nav = [ ...@@ -540,9 +577,9 @@ export const nav = [
index: 0, index: 0,
link: "/Knowledge/ANCCSystem", link: "/Knowledge/ANCCSystem",
breadcrumb: [ breadcrumb: [
{name: "技术与标准", path: "/Knowledge" }, { name: "技术与标准", path: "/Knowledge" },
{name: "技术知识", path: "/Knowledge/"}, { name: "技术知识", path: "/Knowledge/" },
{name: "国家物品编码体系"}, { name: "国家物品编码体系" },
], ],
}, },
{ {
...@@ -552,8 +589,8 @@ export const nav = [ ...@@ -552,8 +589,8 @@ export const nav = [
link: "/Knowledge/GS1System2", link: "/Knowledge/GS1System2",
breadcrumb: [ breadcrumb: [
{ name: "技术与标准", path: "/Knowledge" }, { name: "技术与标准", path: "/Knowledge" },
{name: "技术知识", path: "/Knowledge/"}, { name: "技术知识", path: "/Knowledge/" },
{name: "GS1系统"}, { name: "GS1系统" },
], ],
}, },
{ {
...@@ -601,7 +638,7 @@ export const nav = [ ...@@ -601,7 +638,7 @@ export const nav = [
], ],
}, },
// 知识导航start // 知识导航start
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "商品条码", name: "商品条码",
...@@ -711,7 +748,7 @@ export const nav = [ ...@@ -711,7 +748,7 @@ export const nav = [
}, },
// 知识导航end // 知识导航end
...@@ -724,19 +761,19 @@ export const nav = [ ...@@ -724,19 +761,19 @@ export const nav = [
link: "/Knowledge/Standard", link: "/Knowledge/Standard",
breadcrumb: [ breadcrumb: [
{ name: "技术与标准", path: "/Knowledge" }, { name: "技术与标准", path: "/Knowledge" },
{name: "技术知识", path: "/Knowledge/"}, { name: "技术知识", path: "/Knowledge/" },
{name: "标准文献"}, { name: "标准文献" },
], ],
}, },
{ {
id: uuid("gs_nav"), id: uuid("gs_nav"),
name: "专业术语", name: "专业术语",
index:3, index: 3,
link: "/Knowledge/Glossary", link: "/Knowledge/Glossary",
breadcrumb: [ breadcrumb: [
{ name: "技术与标准", path: "/Knowledge" }, { name: "技术与标准", path: "/Knowledge" },
{name: "技术知识", path: "/Knowledge/"}, { name: "技术知识", path: "/Knowledge/" },
{name: "专业术语"}, { name: "专业术语" },
], ],
}, },
{ {
...@@ -746,8 +783,8 @@ export const nav = [ ...@@ -746,8 +783,8 @@ export const nav = [
link: "/Knowledge/xts", link: "/Knowledge/xts",
breadcrumb: [ breadcrumb: [
{ name: "技术与标准", path: "/Knowledge" }, { name: "技术与标准", path: "/Knowledge" },
{name: "技术知识", path: "/Knowledge/"}, { name: "技术知识", path: "/Knowledge/" },
{name: "小贴士"}, { name: "小贴士" },
], ],
}, },
{ {
...@@ -756,9 +793,9 @@ export const nav = [ ...@@ -756,9 +793,9 @@ export const nav = [
index: 5, index: 5,
link: "/Knowledge/xts", link: "/Knowledge/xts",
breadcrumb: [ breadcrumb: [
{name: "技术与标准", path: "/Knowledge" }, { name: "技术与标准", path: "/Knowledge" },
{name: "技术知识", path: "/Knowledge/"}, { name: "技术知识", path: "/Knowledge/" },
{name: "常见知识"}, { name: "常见知识" },
], ],
}, },
...@@ -776,7 +813,7 @@ export const nav = [ ...@@ -776,7 +813,7 @@ export const nav = [
nameInHeaderNav: "政策法规", nameInHeaderNav: "政策法规",
index: 1, index: 1,
link: "/Knowledge/Statute", link: "/Knowledge/Statute",
breadcrumb: [{name: "技术知识", path: "/Knowledge"}, {name: "政策法规"}], breadcrumb: [{ name: "技术知识", path: "/Knowledge" }, { name: "政策法规" }],
children: [{}] children: [{}]
}, },
], ],
......
src/router/index.js
...@@ -422,12 +422,30 @@ const routes = [ ...@@ -422,12 +422,30 @@ const routes = [
component: () => import("@/views/Business/Training.vue"), component: () => import("@/views/Business/Training.vue"),
}, },
{ {
path: "/News/index",
name: "newsIndex",
meta: {
name: "资讯中心",
},
component: () => import("@/views/News/index.vue"),
},
{
path: "/News", path: "/News",
name: "News", name: "News",
meta: { meta: {
name: "资讯中心", name: "资讯中心",
}, },
component: () => import("@/views/News/index.vue"), component: () => import("@/views/News/main.vue"),
children: [
{
path: "/News/PicNews",
name: "PicNews",
meta: {
name: "图片资讯",
},
component: () => import("@/views/News/PicNews.vue"),
},
]
}, },
{ {
path: "/Knowledge", path: "/Knowledge",
......
src/views/News/PicNews.vue 0 → 100644
<template>
<div class="picNews">
<div class="picNews-top">
<cate :father="tpzxCate"></cate>
<ul class="picNews-ul">
<li v-for="(tmp, i) in 4" :key="i">
<div class="picNews-li-tp">
<img src="../../assets/image/news/tpzx-tp1.jpg" alt="" />
</div>
<div class="picNews-li-bt">
中国物品编码中心应邀出席食品安全智慧监管研讨会
</div>
</li>
</ul>
</div>
<div class="picNews-bottom">
<div class="container">
<pages />
</div>
</div>
</div>
</template>
<script>
import cate from "../comps/cate.vue";
import pages from "../comps/pages.vue";
export default {
components: {
cate,
pages,
},
data() {
return {
tpzxCate: {
name: "图片资讯 ",
ico: "",
},
};
},
methods: {},
};
</script>
<style lang="scss">
.picNews {
@media screen and (min-width: 992px) {
.picNews-ul {
justify-content: space-between;
}
}
@media screen and (max-width: 992px) {
.picNews-ul {
justify-content: space-around;
}
}
}
</style>
<style lang="scss" scoped>
.picNews {
.picNews-top {
@include module-box;
.picNews-ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li {
width: 216px;
background: #ffffff;
box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
border-radius: 4px;
img {
width: 100%;
}
.picNews-li-bt {
width: 90%;
margin: 0 auto;
text-align: center;
color: #414345;
font-size: 14px;
padding: 14px 0;
}
}
}
}
.picNews-bottom {
@include module-box;
margin-top: 30px;
}
}
</style>
\ No newline at end of file
src/views/News/main.vue 0 → 100644
<template>
<div class="business container">
<breadcrumb />
<div class="row">
<div class="col-lg-3">
<left2 :list="routes" ref="left" />
</div>
<div class="col-lg-9">
<router-view class="marginTopLg20"></router-view>
</div>
</div>
</div>
</template>
<script>
import left2 from "../comps/left2.vue";
import breadcrumb from "../comps/breadcrumb.vue";
export default {
components: {
left2,
breadcrumb,
},
data() {
return {
routeList: [
{
name: "资讯中心",
path: "",
active: "",
children: [
{
name: "图片资讯",
path: "/News/PicNews",
active: "PicNews",
},
{
name: "综合报道",
path: "",
active: "",
},
{
name: "中心活动",
path: "",
active: "",
},
{
name: "地方动态",
path: "",
active: "",
},
{
name: "国际追踪",
path: "",
active: "",
},
{
name: "标准科研动态",
path: "",
active: "",
},
{
name: "行业应用",
path: "",
active: "",
},
{
name: "深度专题",
path: "",
active: "",
},
{
name: "精彩视频",
path: "",
active: "",
},
{
name: "公告通知",
path: "",
active: "",
},
],
},
{
name: "应用领域",
path: "",
active: "",
children: [
{
name: "零售",
path: "",
active: "",
},
{
name: "物流",
path: "",
active: "",
},
{
name: "医疗卫生",
path: "",
active: "",
},
{
name: "食品安全追溯",
path: "",
active: "",
},
{
name: "电子商务",
path: "",
active: "",
},
{
name: "移动商务",
path: "",
active: "",
},
{
name: "物联网",
path: "",
active: "",
},
{
name: "其他",
path: "",
active: "",
},
],
},
],
};
},
computed: {
routes() {
let newRouteList = [];
let originPath;
if (this.$route.meta.fatherPath) {
originPath = this.$route.meta.fatherPath;
} else {
originPath = this.$route.path;
}
const currentRoute = this.deepFindCurrentRoute(
this.routeList,
originPath
);
console.log(currentRoute, "currentRoute");
if (currentRoute.children && currentRoute.children.length > 0) {
newRouteList = currentRoute.children;
} else if (currentRoute.noneChild) {
const oldRouteList = JSON.parse(localStorage.getItem("newRouteList"));
newRouteList = oldRouteList;
} else {
newRouteList = this.routeList;
}
localStorage.setItem("newRouteList", JSON.stringify(newRouteList));
// newRouteList = this.deepFindRouteList(this.routeList, currentPath);
console.log(newRouteList, "newRouteListnewRouteList2");
return newRouteList;
},
},
created() {
console.log(this.$route, "this.$route");
},
methods: {
deepFindCurrentRoute(menuList, activePath) {
let current = [];
const deep = (arr, activePath) => {
for (let i = 0; i < arr.length; i += 1) {
if (
arr[i].path !== activePath &&
arr[i].children &&
arr[i].children.length > 0
) {
deep(arr[i].children, activePath);
} else if (arr[i].path === activePath) {
current = arr[i];
break;
}
if (current.length > 0) {
break;
}
}
};
deep(menuList, activePath);
return current;
},
deepFindRouteList(menuList, activePath) {
let current = [];
const deep = (arr, activePath) => {
for (let i = 0; i < arr.length; i += 1) {
if (
arr[i].link !== activePath &&
arr[i].children &&
arr[i].children.length > 0
) {
deep(arr[i].children, activePath);
} else if (arr[i].path === activePath) {
current = arr;
break;
}
if (current.length > 0) {
break;
}
}
};
deep(menuList, activePath);
return current;
},
},
};
</script>
<style lang="scss" scoped>
.business {
padding-bottom: 20px;
}
</style>
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