Skip to content

G
gs1
Commit b218d2bf by Lyan
Options

官网零售页面新增

parent e84375aa
Showing with 565 additions and 1 deletions
src/router/index.js
......@@ -895,6 +895,14 @@ const routes = [{
},
component: () => import("@/views/News/Retail.vue"),
},
{
path: "/News/Retailcode",
name: "Retailcode",
meta: {
name: "零售二维码",
},
component: () => import("@/views/News/Retailcode.vue"),
},
{
path: "/News/Logistics",
......
src/views/News/Retail.vue
......@@ -15,7 +15,7 @@
<div class="div2">
<div class="row">
<div class="col-lg-5">
<div class="col-lg-5" @click="goRetailCode" style="cursor: pointer;">
<p class="div-title">零售2027行动@二维码——GS1全球二维码迁移</p>
<img src="../../assets/image/news/ls2.png" alt="" />
</div>
......@@ -345,6 +345,11 @@ export default {
}
});
},
goRetailCode(){
this.$router.push({
path: '/News/Retailcode',
});
},
// 获取首页最新动态
async getHomeLatestNews() {
const params = {
......
src/views/News/Retailcode.vue 0 → 100644
<template>
<div class="">
<div class="left">
<div class="left-one">
<div class="short">G</div>
<div class="long">
<text>G</text>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0);">GS1全球二维码迁移计划（GS1 GM2D）</a>
</div>
</div>
<div class="line"></div>
<div class="left-one">
<div class="short">零</div>
<div class="long">
<text>零</text>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0);">零售2027行动</a>
</div>
</div>
<div class="line"></div>
<div class="left-one">
<div class="short">推</div>
<div class="long">
<text>推</text>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0);">全国商品二维码推广工作组</a>
</div>
</div>
<div class="line"></div>
<div class="left-one">
<div class="short">盟</div>
<div class="long">
<text>盟</text>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0);">全渠道零售生鲜产品统一编码联盟</a>
</div>
</div>
</div>
<div class="index" style="width: 100%;">
<div class="banner">
<div class="top-banner">
<div class="top-banner-text">零售2027行动@二维码<br/>—GS1全球二维码迁移</div>
<div class="top-banner-img">
<img :src='img1' />
<img :src='img2' />
<img :src='img3' />
</div>
</div>
</div>
<div class="info">随着网络信息技术的发展，零售产业面临数字化升级再造的需求，整个消费市场正逐步形成更加高效的、
线上线下无缝对接的新零售业态。二维码作为全渠道零售中不可或缺的数据载体，已成为众多数字化解决方案的关键核心。</div>
<div class="info-one info-content">
<div class="info-one-title info-content-title">
<a href="./ls.html" target="_blank">GS1全球二维码迁移计划（GS1 GM2D）</a>
</div>
<div class="info-one-info">在全球，<a href="./ls.html" target="_blank">国际物品编码组织（GS1）</a>于2020年底发起了
<a href="./ls.html" target="_blank">全球二维码迁移计划（Global Migration to 2D ，简称GM2D）</a>。
目前已经有中、美、英等全球20多个国家和地区共同加入了该计划。在中国，新零售业的迅速发展使得对二维码的应用有旺盛的需求，品牌商、
零售商、消费者以及监管机构都迫切需要在多元场景下获取更丰富准确的数据信息。</div>
<div class="info-one-target">
<div class="info-one-target-title">目标</div>
<div class="info-one-target-info">引领全球各行业广泛应用符合GS1统一标准的二维码，
以确保商品标识信息的一致性和系统间的可交互操作性，促进全球商品数字化信息统一、安全、高效地传递，实现全球贸易便利化。</div>
</div>
</div>
<div class="info-two info-content">
<div class="info-two-title info-content-title">
<a href="./lsts.html" target="_blank">零售2027行动</a>
</div>
<div class="info-two-info">
<div class="info-two-info-text">零售行业的POS端率先实现能够扫描、解析和存储包含GS1标识符的标准语法的二维码。
引领全球各行业领域向二维码过渡，以可交互操作的方式实现重点行业的领先应用。</div>
<div class="info-two-info-img"><img src="@/assets/image/retailcode/tp1@2x.png"/></div>
</div>
<div class="info-two-modular">
<div class="info-two-modular-left">
<div class="info-two-modular-left-tit">企业：从哪里开始？</div>
<div class="info-two-modular-left-onetit">零售商</div>
<div class="info-two-modular-left-oneinfo">评估当前的技术能力(如扫描设备和管理系统)，制定升级计划，以支持扫描所有二维码码制。</div>
<div style="border-top: #FF8C28 1px dashed; overflow: hidden; height: 1px;width: 574px;"></div>
<div class="info-two-modular-left-twotit">品牌商/生产商/供应商</div>
<div class="info-two-modular-left-twoinfo">组织营销主管及供应链合作伙伴，共同制定一个GS1条码应用综合策略，
以满足消费者参与和供应链参与等目标。</div>
<div style="border-top: #FF8C28 1px dashed; overflow: hidden; height: 1px;width: 603px;"></div>
<div class="info-two-modular-left-twotit">服务提供商</div>
<div class="info-two-modular-left-twoinfo" style="width:565px">考虑系统所需的升级，以支持多种条码扫描/打印，并支持最终用户实现2D解析、识读。</div>
</div>
<div class="info-two-modular-right">
<div class="info-two-modular-right-tit">中国物品编码中心可以提供的支持</div>
<div class="info-two-modular-right-oneinfo">帮助指导编码数据和二维码的选择</div>
<div style="border-top: #1988FF 1px dashed; overflow: hidden; height: 1px;width: 503px;margin-left: 62px;"></div>
<div class="info-two-modular-right-oneinfo">提供GS1标准的实施指导</div>
<div style="border-top: #1988FF 1px dashed; overflow: hidden; height: 1px;width: 522px;margin-left: 43px;"></div>
<div class="info-two-modular-right-oneinfo">提供全球广泛应用的标准化解决方案</div>
<div style="border-top: #1988FF 1px dashed; overflow: hidden; height: 1px;width: 537px;margin-left: 28px;"></div>
<div class="info-two-modular-right-oneinfo">支持与国际国内其他2D试点联系</div>
</div>
<div class="info-two-modular-img"><img src="@/assets/image/retailcode/title@2x.png"/></div>
</div>
</div>
<div class="info-three info-content">
<div class="info-three-title info-content-title">
<a>全国商品二维码推广工作组</a></div>
<div class="info-three-info">
<div class="info-three-info-text">为推进GM2D在中国的应用实施，顺应国内零售业的数字化转型升级，广泛协调消费市场中的各方需求，
中国物品编码中心邀请相关编码分支机构、重点企业及单位成立商品二维码推广工作组，以统一、组织、协调国际国内相关标准在全国的应用推广工作。
通过工作组工作，将及时了解全球二维码迁移计划发展最新情况，率先获得符合GS1全球标准体系的最新开发工具、技术支持、先进经验，共同参与相关行业指南、
技术规范的建设及应用实施，引领行业升级发展。<br/>
全国商品二维码推广工作组计划组织各地编码分支机构及有意愿、有条件的品牌商、生产商、零售商和系统服务商等相关企业共同参加。</div>
<div class="info-three-info-img"><img src="@/assets/image/retailcode/hzywj@2x.png"/></div>
</div>
<div class="info-three-explain">发送邮件至 <a href="mailto:GM2D@ancc.org.cn?subject=加入全国商品二维码推广工作组">GM2D@ancc.org.cn</a>，邮件主题注明：【加入全国商品二维码推广工作组】。</div>
</div>
<div class="info-four info-content">
<div class="info-four-title info-content-title"><a>全渠道零售生鲜产品统一编码联盟</a></div>
<div class="info-four-info">生鲜联盟由中国物品编码中心联合中国ECR委员会，面向行业优秀企业发起成立。旨在从生鲜产品源头引入符合国际标准的统一编码，
助力建立全链条监管机制，为消费者打造放心的购物体验，为生鲜零售行业全面确立产品质量安全的新标杆，持续提高供应链效率、促进生鲜行业的快速健康发展。</div>
<div class="info-four-ul">
<div class="info-four-li info-four-lione">
<div class="info-four-li-tit">重要纽带</div>
<div class="info-four-li-info">连接行业与政府的重要纽带</div>
</div>
<div class="info-four-li info-four-litwo">
<div class="info-four-li-tit">重要平台</div>
<div class="info-four-li-info">发起行业举措的重要平台</div>
</div>
<div class="info-four-li info-four-lithree">
<div class="info-four-li-tit">重要阵地</div>
<div class="info-four-li-info">推动行业最佳实践的重要阵地</div>
</div>
<div class="info-four-li info-four-lifour">
<div class="info-four-li-tit">重要窗口</div>
<div class="info-four-li-info">分享新技术·新理念的重要窗口</div>
</div>
</div>
<div class="info-four-welcome">
<div class="info-four-welcome-info">
<p>2022年10月10日，生鲜联盟启动仪式在京召开。目前，完成首批联盟成员的定向邀请。</p>
<p>第二批成员的吸纳工作正式启动，欢迎业界优秀的食品经营企业、生产企业、行业协会等相关单位积极加入！</p>
</div>
<div class="info-four-welcome-img"><img src="@/assets/image/retailcode/bz@2x (1).png"/></div>
</div>
<div class="info-four-explain">
点击下载<text><a href="./全渠道零售生鲜产品统一编码联盟成员登记表.docx" target="_blank">
《全渠道零售生鲜产品统一编码联盟成员登记表》</a></text>
，并发送邮件至<a href="mailto:GM2D@ancc.org.cn?subject=加入生鲜联盟">GM2D@ancc.org.cn</a>，邮件主题注明:【加入生鲜联盟】。
</div>
</div>
<div class="info-five info-content">
<div class="info-five-title info-content-title"><a>首批生鲜联盟成员</a></div>
<div class="info-five-borderone">
<div class="info-five-bordertwo">
<div class="info-five-bgblue">
<img src="@/assets/image/retailcode/tpfb@2x.png"/>
<img src="@/assets/image/retailcode/zsgl@2x.png"/>
<img src="@/assets/image/retailcode/wbt1@2x.png"/>
</div>
</div>
</div>
<div class="info-five-logo logoone"><img src="@/assets/image/retailcode/hm@2x.png"/></div>
<div class="info-five-logo logotwo"><img src="@/assets/image/retailcode/jd@2x.png"/></div>
<div class="info-five-logo logothree"><img src="@/assets/image/retailcode/mt@2x.png"/></div>
<div class="info-five-logo logofour"><img src="@/assets/image/retailcode/blflogo.png"/></div>
<div class="info-five-logo logofive"><img src="@/assets/image/retailcode/dfjm@2x.png"/></div>
<div class="info-five-logo logosix"><img src="@/assets/image/retailcode/szs@2x.png"/></div>
<div class="info-five-logo logoseven"><img src="@/assets/image/retailcode/hbs@2x.png"/></div>
<div class="info-five-logo logoeight"><img src="@/assets/image/retailcode/zjs@2x.png"/></div>
<div class="info-five-logo logonine"><img src="@/assets/image/retailcode/yzmc@2x.png"/></div>
<div class="info-five-logo logoten"><img src="@/assets/image/retailcode/sjnh@2x.png"/></div>
<div class="info-five-logo logoeleven"><img src="@/assets/image/retailcode/drf@2x.png"/></div>
</div>
<div class="info-six info-content">
<div class="info-six-title info-content-title"><a>相关链接</a></div>
<div class="info-six-info">
<div class="info-six-img" id="info-six-img">
<div class="info-six-img-img" id="info-six-img-img">
<a href="http://www.gs1cn.org/News/article.aspx?Id=10609" target="_blank"><img src="@/assets/image/retailcode/banner1.jpg"/></a>
<a href="http://www.gs1cn.org/News/article.aspx?id=10731" target="_blank"><img src="@/assets/image/retailcode/banner2.jpg"/></a>
<a href="http://www.gs1cn.org/News/article.aspx?id=10783" target="_blank"><img src="@/assets/image/retailcode/banner3.jpg"/></a>
</div>
<div class="info-six-img-circle">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<div class="info-six-link">
<div class="info-six-link-list">
<img src="@/assets/image/retailcode/code@2x.png"/>
<a href="http://www.2dcode.org/" target="_blank">国家二维码综合服务平台</a>
</div>
<div class="info-six-link-list">
<img src="@/assets/image/retailcode/code@2x.png"/>
<a href="http://www.gs1cn.org/News/article.aspx?id=10783" target="_blank">全渠道零售生鲜产品统一编码联盟在京成立</a>
</div>
<div class="info-six-link-list">
<img src="@/assets/image/retailcode/code@2x.png"/>
<a href="http://www.gs1cn.org/News/article.aspx?id=10799" target="_blank">全国商品二维码推广工作组GM2D浙江工作经验分享与交流专题会顺利召开</a>
</div>
<div class="info-six-link-list">
<img src="@/assets/image/retailcode/code@2x.png"/>
<a href="http://www.gs1cn.org/News/article.aspx?id=10731" target="_blank">全球二维码迁移计划取得阶段性进展 “GM2D在线”在浙江省正式上线</a>
</div>
<div class="info-six-link-list">
<img src="@/assets/image/retailcode/code@2x.png"/>
<a href="http://www.gs1cn.org/News/article.aspx?Id=10666" target="_blank">浙江全球二维码迁移计划推广初见成效</a>
</div>
<div class="info-six-link-list">
<img src="@/assets/image/retailcode/code@2x.png"/>
<a href="http://www.gs1cn.org/News/article.aspx?Id=10609" target="_blank">浙江省市场监督管理局与国际物品编码组织、中国物品编码中心三方签署…</a>
</div>
<div class="info-six-link-list">
<img src="@/assets/image/retailcode/code@2x.png"/>
<a href="http://www.gs1cn.org/News/article.aspx?Id=10609" target="_blank">全国商品二维码推广工作组第一次会议顺利召开</a>
</div>
<div class="info-six-link-list">
<img src="@/assets/image/retailcode/code@2x.png"/>
<a href="http://www.gs1cn.org/News/article.aspx?Id=10766" target="_blank">中国物品编码中心宁波分中心助力 “全球二维码迁移计划”试点培训</a>
</div>
<div class="info-six-link-list">
<img src="@/assets/image/retailcode/code@2x.png"/>
<a href="https://www.ebrun.com/20221012/501667.shtml" target="_blank">【亿邦动力】全渠道零售生鲜产品统一编码联盟在京成立</a>
</div>
<div class="info-six-link-list">
<img src="@/assets/image/retailcode/code@2x.png"/>
<a href="https://training.ancc.org.cn/#/record/5545647281c24de485098aedc5960e00" target="_blank">【精彩视频】GS1助力生鲜行业突围编码乱象困局</a>
</div>
<div class="info-six-link-list">
<img src="@/assets/image/retailcode/code@2x.png"/>
<a href="https://training.ancc.org.cn/#/record/e2d5f02aff674327858977c3f65a45e5" target="_blank">【精彩视频】生鲜产品在储运、零售中的编码应用</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import breadcrumb from "../comps/breadcrumb.vue";
export default {
components: {
breadcrumb,
},
data() {
return {
img1:require("@/assets/image/retailcode/bz1.png"),
img2:require("@/assets/image/retailcode/bz2.png"),
img3:require("@/assets/image/retailcode/bz3.png")
};
},
mounted() {
},
created(){
},
methods: {
},
};
</script>
<style scoped>
.index{background: #F0F5FA;font-family: MicrosoftYaHei;font-size: 12px;
color: #414345;line-height: 16px;padding-bottom: 1px;}
/* .headerTop{width: 1200px;margin: 0 auto;display: flex;padding: 7px 0;justify-content: flex-end;}
.headerTop-text{margin-right: 24px;}
.headerTop-content{margin-right: 24px;color: #00799E;display: flex; cursor: pointer;}
.headerTop-content a{text-decoration:none;color: #00799E;}
.headerTop-content a:hover{color: #002c6c;}
.headerTop-content img{width: 16px;height: 16px;margin-right: 8px;}
.header{width: 100%;background: #FFFFFF;box-shadow: 0px 2px 6px 0px rgba(14,44,107,0.1);
padding: 14px 0;}
.header-content{width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;}
.header-img img{width: 117px;height: 82px;}
.header-nav{display: flex;justify-content: flex-end;align-items: center;}
.header-navlist{font-size: 14px;color: #002C6C;line-height: 19px;margin-right: 28px;cursor: pointer;}
.header-navlist a{text-decoration:none;color: #002C6C;}
.header-navlist a:hover{color: #f26334;} */
.banner{width: 100%;;margin: 0 auto;}
.left{position: fixed;top: 0px;left:0px;padding: 50px 30px 0 30px;z-index: 10;}
.left-one{font-weight: bold;color: #a7a7a7;line-height: 25px;border-radius: 20px;width: fit-content;
background: #E9E9E9;box-shadow: 0px 2px 4px 0px rgba(0,45,110,0.1);font-size: 19px;}
.left-one .long,.left-one .short{padding: 8px 12px;}
.left-two{background: #2A91FF;box-shadow: 0px 2px 6px 0px rgba(0,114,248,0.33);
font-size: 14px;color: #FFFFFF;line-height: 23px;text-shadow:none;}
.line{width: 1px;height: 30px;background-color: #7e7e7e33;margin-left: 19px;}
.long{display: none;width: 43px;transition: width 1s;white-space: nowrap;overflow: hidden;}.long text{font-size: 19px;}
.long a{text-decoration:none;color: #fff;}
.left-one:nth-child(1) .long:hover{width: 300px;}.left-one:nth-child(3) .long:hover{width: 135px;}
.left-one:nth-child(5) .long:hover{width: 215px;}.left-one:nth-child(7) .long:hover{width: 270px;}
.top-banner{width: 1200px;margin: 0 auto;padding: 40px 0;}
.top-banner-text{font-size: 52px;color: #238FFB;line-height: 78px;
text-shadow: 0px 2px 3px rgba(35,143,251,0.28), 0px 1px 1px rgba(21,47,87,0.28);}
.top-banner-img{position: relative;}
.top-banner-img img:nth-child(1){width: 255px; height: 244px;margin-right: 150px;}
.top-banner-img img:nth-child(2){width: 40px; height: 26px;position: absolute;left: 13px;top: 48px;
animation: ban1 4s infinite linear;}
@keyframes ban1{0%{top: 48px;}50%{top: 78px;}100%{top: 45px;}}
.top-banner-img img:nth-child(3){width: 20px; height: 28px;position: absolute;left: 62px;top: 73px;
animation: ban2 4s infinite linear;}
@keyframes ban2{0%{top: 73px;}50%{top: 43px;}100%{top: 73px;}}
.info,.info-one,.info-two,.info-three,.info-four,.info-five,.info-six{width: 1120px;margin: 0 auto 70px auto;
padding: 45px;font-size: 18px;color: #454545;line-height: 32px;}
.info{background:url("~@/assets/image/retailcode/bannerbg.png") center top no-repeat;background-size:100% 100%}
.info-one{background:url("~@/assets/image/retailcode/01bg@2x.png") center top no-repeat;background-size:100% 100%}
.info-one-title,.info-two-title,.info-three-title,.info-four-title,.info-five-title,.info-six-title{margin-left: 142px;
text-align: center;font-size: 30px;color: #FFFFFF;line-height: 36px;margin-bottom: 70px;}
.info-content-title a{text-decoration:none;color: #fff;}
.info-content-title a:hover{text-decoration:none;color: rgb(237, 237, 237);}
.info-one-info{font-size: 18px;font-family: MicrosoftYaHei;color: #454545;line-height: 32px;margin-bottom: 30px;}
.info-one-info a{text-decoration:none;color: #454545;font-weight: 600;}
.info-one-info a:hover{text-decoration:none;color: #707070;}
.info-one-target{background:url("~@/assets/image/retailcode/targetbg.png") center top no-repeat;background-size:100% 100%;padding: 16px 32px;}
.info-one-target-title{font-size: 22px;font-family: HYYakuHei-HEW, HYYakuHei;font-weight: normal;
color: #AD5808;line-height: 30px;}
.info-one-target-info{font-size: 18px;color: #454545;line-height: 32px;}
.info-two{background:url("~@/assets/image/retailcode/02bg@2x.png") center top no-repeat;background-size:100% 100%}
.info-two-info{display: flex;justify-content: space-around;align-items: center;margin-bottom: 30px;}
.info-two-info-text{width: 500px;font-size: 18px;color: #454545;line-height: 32px;}
.info-two-info-img img{width: 340px; height: 195px;}
.info-two-modular{position: relative;height: 605px;}
.info-two-modulars{position: relative;height: 605px;display: none;}
.info-two-modular-left{position: absolute;left: 0;top: 0;width: 638px;height: 570px;z-index: 2;
background:url("~@/assets/image/retailcode/modularleft.png") center top no-repeat;background-size:100% 100%;
}
.info-two-modulars .info-two-modular-left{position: absolute;left: 0;top: 0;width: 638px;height: 570px;z-index: 2;
background:url("~@/assets/image/retailcode/left.png") center top no-repeat;background-size:100% 100%;}
.info-two-modulars .info-two-modular-left-oneinfo{font-size: 20px;line-height: 32px;padding-left: 32px;margin: 45px 0;}
.info-two-modular-left-tit,.info-two-modular-right-tit{font-size: 24px;font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;text-align: center;
font-weight: bold;color: #FFFFFF;line-height: 31px;margin-top: 14px;margin-right: 90px;}
.info-two-modular-left-onetit,.info-two-modular-left-twotit{margin-top: 47px;font-size: 20px;font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;color: #F67708;line-height: 26px;padding-left: 32px;}
.info-two-modular-left-oneinfo,.info-two-modular-left-twoinfo{font-size: 18px;color: #454545;line-height: 32px;padding-left: 32px;
margin-top: 15px;margin-bottom: 32px;width: 500px;}
.info-two-modular-left-twotit{margin-top: 32px;}
.info-two-modular-left-twoinfo{width: 523px;}
.info-two-modular-right{position: absolute;right: 0;top: 24px;width: 565px;height: 395px;
background:url("~@/assets/image/retailcode/modularright.png") center top no-repeat;background-size:100% 100%}
.info-two-modulars .info-two-modular-right{position: absolute;right: 0;top: 24px;width: 565px;height: 395px;
background:url("~@/assets/image/retailcode/right.png") center top no-repeat;background-size:100% 100%;text-align: right;}
.info-two-modulars .info-two-modular-right-onetit,.info-two-modulars .info-two-modular-right-twotit{margin-top: 13px;font-size: 18px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;font-weight: bold;color: #F67708;line-height: 24px;padding-right: 35px;}
.info-two-modulars .info-two-modular-right-oneinfo,.info-two-modulars .info-two-modular-right-twoinfo{font-size: 16px;color: #454545;
line-height: 26px;padding-right: 32px;margin: 8px 0 14px 0;width: 420px;text-align: right;float: right;}
.info-two-modulars .info-two-modular-right-onetit{margin-top: 25px;}
.info-two-modulars .info-two-modular-right-twoinfo{width: 420px;}
.info-two-modular-right-tit{margin-right: 0;margin-left: 90px;}
.info-two-modular-right-oneinfo{text-align: right;font-size: 16px;color: #454545;line-height: 32px;
padding-right: 32px;margin: 25px 0;}
.info-two-modular-img{position: absolute;right: 33px;top: 420px;}
.info-two-modular-img img{width: 382px; height: 185px;}
.info-three{background:url("~@/assets/image/retailcode/03bg@2x.png") center top no-repeat;background-size:100% 100%}
.info-three-info{display: flex;justify-content: space-between;align-items: center;margin-bottom: 32px;}
.info-three-info-text{width: 832px;font-size: 18px;color: #454545;line-height: 32px;}
.info-three-info-img img{width: 200px; height: 227px;}
.info-three-explain{background: #FFEDC0;border-radius: 67px;padding: 27px 0;text-align: center;
color: #AD5808;font-size: 18px;line-height: 24px;}
.info-three-explain a{text-decoration:none;color: #FF8600;font-weight: 600;}
.info-four{background:url("~@/assets/image/retailcode/bz3.png") center top no-repeat;background-size:100% 100%}
.info-four-info{margin-bottom: 33px;}
.info-four-ul{display: flex;justify-content: space-between;}
.info-four-li{width: 260px;height: 175px;text-align: center;
box-shadow: 0px 8px 17px 0px rgba(15,115,254,0.3);border-radius: 8px;}
.info-four-lione{background:url("~@/assets/image/retailcode/01@2x.png") center top no-repeat;background-size:100% 100%}
.info-four-litwo{background:url("~@/assets/image/retailcode/02@2x.png") center top no-repeat;background-size:100% 100%}
.info-four-lithree{background:url("~@/assets/image/retailcode/03@2x.png") center top no-repeat;background-size:100% 100%}
.info-four-lifour{background:url("~@/assets/image/retailcode/04@2x.png") center top no-repeat;background-size:100% 100%}
.info-four-li-tit{margin: 36px 0;font-size: 24px;font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;color: #FFFFFF;line-height: 33px;}
.info-four-li-info{padding: 22px 0;font-size: 18px;color: #454545;line-height: 24px;}
.info-four-welcome{display: flex;align-items: center;margin-top: 26px;justify-content: space-between;}
.info-four-welcome-info p{margin: 0 0 10px 0;}
.info-four-welcome-img img{width: 158px; height: 122px;margin-right: 24px;}
.info-four-explain{background: rgba(25,136,255,0.16);border-radius: 67px;padding: 27px 0;
text-align: center;color: #0060EB;font-size: 18px;line-height: 24px;}
.info-four-explain a{text-decoration:none;color: #FFA300;font-weight: 600;}
.info-four-explain a:hover{text-decoration:none;color: #ee9700;}
/* .info-four-explain text{color: #FFA300;font-weight: 600;} */
.info-five{background:url("~@/assets/image/retailcode/bz58@2x.png") center top no-repeat;background-size:100% 100%;
width: 1172px; padding: 14px;position: relative;}
.info-five-title{margin-left: 0;font-size: 26px;}
.info-five-borderone{width: 686px;height: 686px;border: 2px solid rgba(38, 106, 242, 0.2);
margin: 119px auto 116px auto; border-radius: 50%; background: none;}
.info-five-bordertwo{width: 458px;height: 458px;margin: 114px auto;border: 2px dashed rgba(28, 95, 239, 0.3);border-radius: 50%;}
.info-five-bgblue{width: 370px;height: 370px;background: linear-gradient(140deg, #5CABFD 0%, #0169FE 100%);
margin: 44px auto; box-shadow: 0px 0px 20px 13px rgba(6,109,254,0.2);border-radius: 50%;}
.info-five-bgblue img:nth-child(1){margin: 107px 30px 20px 30px;width: 308px;height: 48px;}
.info-five-bgblue img:nth-child(2){margin: 0 157px 13px 157px;width: 56px;height: 40px;}
.info-five-bgblue img:nth-child(3){margin: 0 126px;width: 117px;height: 58px;}
.info-five-logo{position: absolute;transition: all .5s ease;}
.info-five-logo:hover{transform: scale(1.2, 1.2);}
.logoone{left: 414px; top: 125px;width: 163px;height: 76px;animation: ban3 22s ease-in-out infinite;
background:url("~@/assets/image/retailcode/jxbf7@2x.png") center top no-repeat;background-size:100% 100%}
.logoone img{width: 93px;height: 39px;margin: 18px 35px;}
@keyframes ban3{0%{-webkit-transform:scale(1, 1)}4.54%{-webkit-transform:scale(1.2, 1.2)}9.09%{-webkit-transform:scale(1, 1)}100%{-webkit-transform:scale(1, 1)}}
.logotwo{left: 694px; top: 131px;width: 163px;height: 76px;animation: ban4 22s ease-in-out infinite;
background:url("~@/assets/image/retailcode/jxbf8@2x.png") center top no-repeat;background-size:100% 100%}
.logotwo img{width: 93px;height: 50px;margin: 13px 35px;}
@keyframes ban4{9.09%{-webkit-transform:scale(1, 1)}13.63%{-webkit-transform:scale(1.2, 1.2)}18.18%{-webkit-transform:scale(1, 1)}100%{-webkit-transform:scale(1, 1)}}
.logothree{left: 831px; top: 251px;width: 163px;height: 76px;animation: ban5 22s ease-in-out infinite;
background:url("~@/assets/image/retailcode/jxbf9@2x.png") center top no-repeat;background-size:100% 100%}
.logothree img{width: 106px;height: 38px;margin: 19px 28px;}
@keyframes ban5{18.18%{-webkit-transform:scale(1, 1)}22.72%{-webkit-transform:scale(1.2, 1.2)}27.27%{-webkit-transform:scale(1, 1)}100%{-webkit-transform:scale(1, 1)}}
.logofour{left: 908px; top: 422px;width: 160px;height: 74px;animation: ban6 22s ease-in-out infinite;
background:url("~@/assets/image/retailcode/mb@2x-1.png") center top no-repeat;background-size:100% 100%}
.logofour img{width: 118px;height: 41px;margin: 16px 27px;}
@keyframes ban6{27.27%{-webkit-transform:scale(1, 1)}31.81%{-webkit-transform:scale(1.2, 1.2)}36.36%{-webkit-transform:scale(1, 1)}100%{-webkit-transform:scale(1, 1)}}
.logofive{left: 895px; top: 592px;width: 162px;height: 74px;animation: ban7 22s ease-in-out infinite;
background:url("~@/assets/image/retailcode/jxbf15@2x.png") center top no-repeat;background-size:100% 100%}
.logofive img{width: 68px;height: 56px;margin: 9px 47px;}
@keyframes ban7{36.36%{-webkit-transform:scale(1, 1)}40.9%{-webkit-transform:scale(1.2, 1.2)}45.45%{-webkit-transform:scale(1, 1)}100%{-webkit-transform:scale(1, 1)}}
.logosix{left: 781px; top: 755px;width: 263px;height: 88px;animation: ban8 22s ease-in-out infinite;
background:url("~@/assets/image/retailcode/jxbf11@2x.png") center top no-repeat;background-size:100% 100%}
.logosix img{width: 240px;height: 46px;margin: 21px 11px;}
@keyframes ban8{45.45%{-webkit-transform:scale(1, 1)}49.99%{-webkit-transform:scale(1.2, 1.2)}54.54%{-webkit-transform:scale(1, 1)}100%{-webkit-transform:scale(1, 1)}}
.logoseven{left: 469px; top: 831px;width: 261px;height: 86px;animation: ban9 22s ease-in-out infinite;
background:url("~@/assets/image/retailcode/mb@2x-2.png") center top no-repeat;background-size:100% 100%}
.logoseven img{width: 253px;height: 46px;margin: 20px 4px;}
@keyframes ban9{54.54%{-webkit-transform:scale(1, 1)}59.08%{-webkit-transform:scale(1.2, 1.2)}63.63%{-webkit-transform:scale(1, 1)}100%{-webkit-transform:scale(1, 1)}}
.logoeight{left: 126px; top: 745px;width: 263px;height: 88px;animation: ban10 22s ease-in-out infinite;
background:url("~@/assets/image/retailcode/jxbf10@2x.png") center top no-repeat;background-size:100% 100%}
.logoeight img{width: 256px;height: 48px;margin: 20px 3px;}
@keyframes ban10{63.63%{-webkit-transform:scale(1, 1)}68.17%{-webkit-transform:scale(1.2, 1.2)}72.72%{-webkit-transform:scale(1, 1)}100%{-webkit-transform:scale(1, 1)}}
.logonine{left: 156px; top: 574px;width: 162px;height: 78px;animation: ban11 22s ease-in-out infinite;
background:url("~@/assets/image/retailcode/jxbf14@2x.png") center top no-repeat;background-size:100% 100%}
.logonine img{width: 120px;height: 44px;margin: 16px 21px;}
@keyframes ban11{72.72%{-webkit-transform:scale(1, 1)}77.26%{-webkit-transform:scale(1.2, 1.2)}81.81%{-webkit-transform:scale(1, 1)}100%{-webkit-transform:scale(1, 1)}}
.logoten{left: 137px; top: 398px;width: 162px;height: 78px;animation: ban12 22s ease-in-out infinite;
background:url("~@/assets/image/retailcode/jxbf6@2x-1.png") center top no-repeat;background-size:100% 100%}
.logoten img{width: 121px;height: 32px;margin: 23px 20px;}
@keyframes ban12{81.81%{-webkit-transform:scale(1, 1)}86.35%{-webkit-transform:scale(1.2, 1.2)}90.9%{-webkit-transform:scale(1, 1)}100%{-webkit-transform:scale(1, 1)}}
.logoeleven{left: 223px; top: 222px;width: 163px;height: 78px;animation: ban13 22s ease-in-out infinite;
background:url("~@/assets/image/retailcode/jxbf6@2x.png") center top no-repeat;background-size:100% 100%}
.logoeleven img{width: 115px;height: 59px;margin: 9px 24px;}
@keyframes ban13{90.9%{-webkit-transform:scale(1, 1)}95.44%{-webkit-transform:scale(1.2, 1.2)}100%{-webkit-transform:scale(1, 1)}}
.info-six{background:url("~@/assets/image/retailcode/bz75@2x.png") center top no-repeat;background-size:100% 100%;
width: 1134px; padding: 14px 26px 50px 40px;}
.info-six-info{display: flex;}
.info-six-title{margin-left: 0;font-size: 26px;margin-right: 14px;}
.info-six-img{width: 490px;height: 470px;position: relative;}
.info-six-img img{width: 100%;height: 100%;overflow: hidden;position: absolute;left: 0;top: 0;display: none;}
.info-six-img img:nth-of-type(1){display: block;}
.info-six-img .info-six-img-circle{width: 50px;display: flex;justify-content: space-around;
position: absolute;left: 220px;bottom: 10px;z-index: 100;}
.info-six-img-circle span{display: block;width: 6px;height: 6px;border-radius: 50%;background: rgba(255,255,255,0.49);}
.info-six-img-circle .active{background: #1A5CEF;}
.circle-ol{width: 15%;height: 1.5rem;padding: 0;margin: 0;display: flex;position: absolute;
left: 40%;bottom: 0;}
.circle-ol li a{width: 8px;height: 8px;background-color: rgba(0, 0, 0, .5);
border-radius: 20px;cursor: pointer;font-size: 0;display: block;}
.info-six-link{margin-left: 30px;}
.info-six-link-list{display: flex;font-size: 18px;color: #333333;line-height: 24px;margin-bottom: 20px;}
.info-six-link-list img{width: 6px;height: 6px;margin-right: 10px;margin-top: 9px;}
.info-six-link-list a{text-decoration:none;color: #333;}
.info-six-link-list a:hover{color: #7f7f7f;}
.footer{width: 100%;background: #fff;box-shadow: 0px -2px 6px 0px rgba(14,44,107,0.1);}
.footer-link{width: 1200px;margin: 0 auto;display: flex;justify-content: space-between;
border-bottom: 1px solid rgba(14, 44, 107, 0.13);padding: 20px 0;}
.footer-linklist{font-size: 14px;color: #0E2C6B;line-height: 19px;cursor: pointer;}
.footer-linklist a{text-decoration:none;color: #0E2C6B;}
.footer-linklist a:hover{color: #002c6c;}
.footer-bottom{width: 1200px;margin: 0 auto;padding: 35px 0;position: relative;}
.footer-bottom-left{text-align: center;font-size: 14px;color: #0E2C6B;line-height: 19px;}
.footer-bottom-left div{margin-bottom: 15px;}
.footer-bottom-left-one text{margin-right: 40px;}
.footer-bottom-left-two text{margin: 0 20px;}
.footer-bottom-left-two a{text-decoration:none;color: #0E2C6B;}
.footer-bottom-left-two a:hover{color: #002c6c;}
.footer-bottom-left-two a img{width: 20px;height: 20px;margin-right: 4px;}
.footer-bottom-right{position: absolute;right: 0;top: 35px;display: flex;}
.footer-bottom-right-ercode{margin-left: 32px;text-align: center;font-size: 14px;color: #0E2C6B;
line-height: 19px;}
.footer-bottom-right-ercode img{width: 72px;height: 72px;margin-top: 13px;}
</style>
\ No newline at end of file
src/views/News/Retailcode1.vue 0 → 100644
<template>
<div class="cont">
<iframe src="http://www.gs1cn.org/2023/bmhtml/zty.html"
frameborder="0" marginheight="0" marginwidth="0" scrolling="no" id="ifm" name="ifd" height="5375px"
onload="this.height=ifd.document.body.scrollHeight" width="100%">您的浏览器不支持嵌入式框架，或者当前配置为不显示嵌入式框架。 </iframe>
</div>
</template>
<script language="javascript" type="text/javascript">
</script>
<script>
export default {
data() {
return {
};
},
mounted() {
},
created(){
},
methods: {
dyniframesize(down) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(down);
}
else{
eval('pTar = ' + down + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight +20;
pTar.width = pTar.contentDocument.body.scrollWidth+20;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
pTar.width = pTar.Document.body.scrollWidth;
}
}
}
},
};
</script>
<style scoped>
.cont{
height: 100%;
}
</style>
\ No newline at end of file
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