Skip to content

G
gs1
Commit e45fc667 by 林家欣
Options

咨询中心详情页切图完成

parent 47dfa941
Showing with 532 additions and 26 deletions
src/router/index.js
......@@ -489,6 +489,14 @@ const routes = [
]
},
{
path: "/News/msg",
name: "msg",
meta: {
name: "资讯中心详情",
},
component: () => import("@/views/News/msg.vue"),
},
{
path: "/News/Health",
name: "Health",
meta: {
......
src/views/News/Center.vue
<template>
<div class="center">
<div class="Center">
<div class="picNews-top">
<cate :father="zxhdCate"></cate>
<div class="container">
......@@ -61,7 +61,7 @@ export default {
};
</script>
<style lang="scss">
.center {
.Center {
@media screen and (min-width: 992px) {
.picNews-ul {
justify-content: space-between;
......@@ -75,7 +75,7 @@ export default {
}
</style>
<style lang="scss" scoped>
.center {
.Center {
ul {
padding: 0;
margin: 0;
......
src/views/News/PicNews.vue
......@@ -4,7 +4,7 @@
<cate :father="tpzxCate"></cate>
<div class="container">
<ul class="picNews-ul">
<li v-for="(tmp, i) in 4" :key="i">
<li v-for="(tmp, i) in 4" :key="i" @click="jump">
<div class="picNews-li-tp">
<img src="../../assets/image/news/tpzx-tp1.jpg" alt="" />
</div>
......@@ -33,6 +33,8 @@
</div>
</template>
<script>
import { mapMutations } from "vuex";
import cate from "../comps/cate.vue";
import pages from "../comps/pages.vue";
export default {
......@@ -48,7 +50,23 @@ export default {
},
};
},
methods: {},
methods: {
...mapMutations({
setMatche: "setMatche",
}),
jump() {
const matche = [
{
name: "图片资讯",
path: "/News/PicNews",
},
];
this.setMatche(matche);
this.$router.push({
path: "/News/msg",
});
},
},
};
</script>
<style lang="scss">
......@@ -72,31 +90,30 @@ export default {
margin: 0;
}
.picNews-ul {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
li {
width: 216px;
background: #ffffff;
box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
border-radius: 4px;
margin-bottom: 30px;
img {
width: 100%;
}
.picNews-li-bt {
width: 90%;
margin: 0 auto;
text-align: center;
color: #414345;
font-size: 14px;
padding: 14px 0;
}
display: flex;
flex-wrap: wrap;
margin-top: 30px;
li {
width: 216px;
background: #ffffff;
box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
border-radius: 4px;
margin-bottom: 30px;
img {
width: 100%;
}
.picNews-li-bt {
width: 90%;
margin: 0 auto;
text-align: center;
color: #414345;
font-size: 14px;
padding: 14px 0;
}
}
}
.picNews-top {
@include module-box;
}
.picNews-bottom {
@include module-box;
......
src/views/News/comps/list2.vue 0 → 100644
<template>
<div class="list">
<div v-for="(tmp, i) in list" :key="i" class="list-li">
<div>
<span></span>
<span>{{tmp.name}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['list'],
}
</script>
<style lang="scss" scoped>
.list {
margin: 0;
padding: 0;
.list-li {
display: flex;
justify-content: space-between;
padding: 10px 0;
margin: 0;
>div {
flex: 1;
display: flex;
align-items: center;
@include ellipsis;
font-size: 13px;
span {
display: inline-block;
&:nth-child(1) {
width: 4px;
height: 4px;
background: #f26335;
border-radius: 50%;
margin-right: 10px;
}
&:nth-child(2) {
flex: 1;
@include ellipsis;
cursor: pointer;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/News/msg.vue 0 → 100644
<template>
<div class="msg container">
<breadcrumb />
<div class="row">
<div class="col-lg-9">
<div class="msg-cont">
<div class="container">
<div class="msg-title">
中国主导的首个二维码码制国际标准正式发布
</div>
<div class="msg-head">
<div class="msg-head-left">
<span>作者：董晓文 邓惠朋 王琳</span>
<span>日期：2021/08/31</span>
<span>编辑：黄雪松</span>
<span>来源：中国物品编码中心应用推广部</span>
</div>
<div class="msg-head-right">
<span>分享至：</span>
<img src="../../assets/image/news/icon_weibo.png" alt="" />
<img src="../../assets/image/news/icon_weixin.png" alt="" />
</div>
</div>
<div class="msg-text">
<p>
2021年8月27日，国际标准化组织（ISO）和国际电工协会（IEC）正式发布汉信码ISO/IEC国际标准——ISO/IEC
20830:2021《信息技术 自动识别与数据采集技术
汉信码条码符号规范》。该国际标准是中国提出并主导制订的第一个二维码码制国际标准，是我国自动识别与数据采集技术发展的重大突破，填补了我国国际标准制修订领域的空白，彻底解决了我国二维码技术“卡脖子”的难题。
</p>
<p>
汉信码由中国物品编码中心牵头自主研制，是拥有完全自主知识产权的二维码码制，具有知识产权免费、支持任意语言编码、汉字信息编码能力超强、极强抗污损、抗畸变识读能力、识读速度快、信息密度高、信息容量大、纠错能力强等突出特点，达到国际领先水平。汉信码实现了我国二维码底层技术的后来居上，可在我国多个领域行业实现规模化应用，为我国应用二维码技术提供了可靠的核心技术支撑。
</p>
<p>
汉信码ISO/IEC国际标准的发布，是我国自动识别与数据采集技术领域自主创新的重要里程碑，是“国家标准走出去”战略的成功典范，大大提升了中国在国际二维码技术领域中的话语权,为我国二维码技术发展谱写了辉煌的篇章。
</p>
<p class="strong">延伸阅读：</p>
<p>
2003年，中国物品编码中心为了解决国际二维码垄断问题，申请国家“十五”重要技术标准研究课题，立志要做出中国人自己的二维码。2007年，由中国物品编码中心牵头研发的我国第一个拥有完全自主知识产权的国家二维码标准——《汉信码》（GB/T
21049-2007）正式发布。从我国国家标准到国际标准，汉信码的研发历程浓缩了我国技术崛起的历史。
</p>
<p class="strong">从国标到AIM标准，走向国际的第一步</p>
<p>
2011年，汉信码更进一步，成为国际自动识别制造商协会（AIM
Global）正式的码制标准。汉信码AIM国际标准的制定和发布，标志着汉信码（Han
Xin
code）正式获得了国际自动识别技术产业界和主要自动识别技术企业的认可和支持，成为国际主流码制之一。AIM
Global盛赞汉信码技术，并鼓励中国尽快将汉信码上升成为ISO标准。
</p>
<p class="strong">成为ISO/IEC国际标准，确立国际权威地位</p>
<p>
国际标准化组织（ISO）和国际电工协会（IEC）是全球公认的国际标准化组织。2015年，汉信码标准在ISO/IEC
JTC1/SC31（ISO/IEC信息技术委员会自动识别与数据采集技术分技术委员会）成功立项。
</p>
<p>
随后的几年中，汉信码ISO国际标准项目共经历了四个阶段的意见征集与修订。2021年7月28日，汉信码ISO国际标准项目获全票通过。8月27日，汉信码ISO国际标准
ISO/IEC 20830《信息技术 自动识别与数据采集技术
汉信码条码符号规范》（Information technology — Automatic
identification and data capture techniques — Han Xin Code bar
code symbology specification）正式出版。
</p>
</div>
</div>
</div>
<div class="xglj">
<div class="container">
<div class="cate">
<span>相关连接</span>
<span>更多>></span>
</div>
<list :list="xglj.data" />
</div>
</div>
</div>
<div class="col-lg-3">
<div class="top10">
<div class="container">
<div class="cate">
<span>8月资讯排行TOP10</span>
</div>
<div class="top10-ul">
<div v-for="(tmp, i) in top10.data" :key="i" class="top10-li">
<div v-if="i<3">
<img :src="require(`../../assets/image/news/icon_${i+1}.png`)" alt="" >
<span class="no"></span>
<span class="name">{{ tmp.name }}</span>
</div>
<div v-else>
<span class="no">{{i+1}}</span>
<span class="name">{{ tmp.name }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="ggtz">
<div class="container">
<div class="cate">
<span>公告通知</span>
</div>
<list2 :list="top10.data" />
</div>
</div>
<div class="zttj">
<div class="container">
<div class="cate">
<span>专题推荐</span>
</div>
<list2 :list="top10.data" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
import breadcrumb from "../comps/breadcrumb.vue";
import list from "./comps/list.vue";
import list2 from "./comps/list2.vue";
export default {
components: {
breadcrumb,
list,
list2,
},
computed: {
...mapState({
matche: (state) => state.matche,
}),
},
data() {
return {
routeList: [
{
name: "资讯中心",
path: "",
active: "",
children: [
{
name: "图片资讯",
path: "/News/PicNews",
active: "PicNews",
},
{
name: "综合报道",
path: "/News/Composite",
active: "Composite",
},
{
name: "中心活动",
path: "/News/Center",
active: "Center",
},
{
name: "地方动态",
path: "/News/Local",
active: "Local",
},
{
name: "国际追踪",
path: "/News/International",
active: "International",
},
{
name: "标准科研动态",
path: "/News/Research",
active: "Research",
},
{
name: "行业应用",
path: "",
active: "",
},
{
name: "深度专题",
path: "",
active: "",
},
{
name: "精彩视频",
path: "",
active: "",
},
{
name: "公告通知",
path: "",
active: "",
},
],
},
{
name: "应用领域",
path: "",
active: "",
children: [
{
name: "零售",
path: "",
active: "",
},
{
name: "物流",
path: "",
active: "",
},
{
name: "医疗卫生",
path: "/News/Health",
active: "Health",
},
{
name: "食品安全追溯",
path: "",
active: "",
},
{
name: "电子商务",
path: "",
active: "",
},
{
name: "移动商务",
path: "",
active: "",
},
{
name: "物联网",
path: "",
active: "",
},
{
name: "其他",
path: "",
active: "",
},
],
},
],
breadcrumb: [{ name: "资讯中心", path: "/News/index" }],
msg: {
title: "中国石油物资采购中心赴中国物品编码中心交流座谈",
},
xglj: {
data: [
{
name: "中国石油物资采购中心赴中国物品编码中心交流座谈",
time: "2020年10月20日",
},
{
name: "中国石油物资采购中心赴中国物品编码中心交流座谈",
time: "2020年10月20日",
},
],
},
top10: {
data: [
{
name: "中国石油物资采购中心赴中国物品编码中心交流座谈",
},
{
name: "中国石油物资采购中心赴中国物品编码中心交流座谈",
},
{
name: "中国石油物资采购中心赴中国物品编码中心交流座谈",
},
{
name: "中国石油物资采购中心赴中国物品编码中心交流座谈",
},
{
name: "中国石油物资采购中心赴中国物品编码中心交流座谈",
},
],
},
};
},
created() {
this.breadcrumb = this.breadcrumb.concat(this.matche);
this.breadcrumb.push({
name: this.msg.title,
});
console.log(this.breadcrumb, this.matche, "this.$route");
this.$store.commit("system/SET_BREADCRUMB", this.breadcrumb);
},
methods: {},
};
</script>
<style lang="scss">
.msg {
.list {
.row {
&:last-child {
border-bottom: none;
}
}
}
}
</style>
<style lang="scss" scoped>
.msg {
padding-bottom: 20px;
.cate {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #c5d8ee;
padding: 15px 0;
span {
&:nth-child(1) {
font-size: 16px;
color: #454545;
}
&:nth-child(2) {
color: #f26335;
font-size: 12px;
cursor: pointer;
}
}
}
.msg-cont {
@include module-box;
padding: 30px 0;
.msg-title {
color: #454545;
font-size: 26px;
}
.msg-head {
border-bottom: 1px dashed #c5d8ee;
padding: 20px 0;
display: flex;
justify-content: space-between;
font-size: 12px;
.msg-head-left {
span {
margin-right: 25px;
&:last-child {
margin: 0;
}
}
}
.msg-head-right {
display: flex;
align-items: center;
img {
margin-left: 14px;
}
}
}
.msg-text {
margin-top: 20px;
p {
text-indent: 25px;
font-size: 14px;
}
.strong {
font-size: 14px;
font-weight: bold;
}
}
}
.xglj {
@include module-box;
margin-top: 20px;
padding-bottom: 20px;
}
.top10 {
position: relative;
@include module-box;
.top10-ul {
margin: 0;
padding: 0;
.top10-li {
display: flex;
justify-content: space-between;
padding: 10px 0;
margin: 0;
> div {
flex: 1;
display: flex;
align-items: center;
@include ellipsis;
font-size: 13px;
img{
position: absolute;
left: -4px;
}
span {
display: inline-block;
&.no {
width: 20px;
}
&.name {
flex: 1;
@include ellipsis;
cursor: pointer;
}
}
}
}
}
}
.ggtz {
@include module-box;
margin-top: 20px;
}
.zttj {
@include module-box;
margin-top: 20px;
}
}
</style>
src/vuex/mutation-types.js 0 → 100644
export const SET_MATCHE = 'setMatche';
src/vuex/store.js
......@@ -6,7 +6,24 @@ import system from "./system/index.js"
Vue.use(Vuex)
import {
SET_MATCHE,
} from './mutation-types';
const state = {
matche: localStorage.getItem('matche') ? JSON.parse(localStorage.getItem('matche')) : [],
};
const mutations = {
[SET_MATCHE](state, data) {
localStorage.setItem('matche', JSON.stringify(data));
state.matche = data;
},
};
export default new Vuex.Store({
state,
mutations,
modules: {
user,
system
......
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