零售二维码页面修改

src/router/index.js

@@ -903,7 +903,22 @@ const routes = [{
         },
         component: () => import("@/views/News/Retailcode.vue"),
       },
-
+      {
+        path: "/News/RetailcodeLs",
+        name: "RetailcodeLs",
+        meta: {
+          name: "零售二维码",
+        },
+        component: () => import("@/views/News/RetailcodeLs.vue"),
+      },
+      {
+        path: "/News/RetailcodeLsts",
+        name: "RetailcodeLsts",
+        meta: {
+          name: "零售二维码探索",
+        },
+        component: () => import("@/views/News/RetailcodeLsts.vue"),
+      },
       {
         path: "/News/Logistics",
         name: "Logistics",

src/views/News/Retailcode.vue

 <template>
   <div class="">
      <div class="left">
-        <div class="left-one">
+        <div class="left-one" @mouseenter="mouseenter(0)"
+        @mouseleave="mouseleave(0)" @click="leftNavClick(0)">
             <div class="short">G</div>
             <div class="long">
-                <text>G</text>&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>G</span>&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="left-one" @mouseenter="mouseenter(1)"
+        @mouseleave="mouseleave(1)" @click="leftNavClick(1)">
             <div class="short">零</div>
             <div class="long">
-                <text>零</text>&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>零</span>&nbsp;&nbsp;&nbsp;&nbsp;
                 <a href="javascript:void(0);">零售2027行动</a>
             </div>
         </div>
         <div class="line"></div>
-        <div class="left-one">
+        <div class="left-one" @mouseenter="mouseenter(2)"
+        @mouseleave="mouseleave(2)" @click="leftNavClick(2)">
             <div class="short">推</div>
             <div class="long">
-                <text>推</text>&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>推</span>&nbsp;&nbsp;&nbsp;&nbsp;
                 <a href="javascript:void(0);">全国商品二维码推广工作组</a>
             </div>
         </div>
         <div class="line"></div>
-        <div class="left-one">
+        <div class="left-one" @mouseenter="mouseenter(3)"
+        @mouseleave="mouseleave(3)" @click="leftNavClick(3)">
             <div class="short">盟</div>
             <div class="long">
-                <text>盟</text>&nbsp;&nbsp;&nbsp;&nbsp;
+                <span>盟</span>&nbsp;&nbsp;&nbsp;&nbsp;
                 <a href="javascript:void(0);">全渠道零售生鲜产品统一编码联盟</a>
             </div>
         </div>
@@ -37,7 +41,7 @@
    
 
     <div class="banner">
-        <div class="top-banner">
+        <div class="top-banner-zty">
             <div class="top-banner-text">零售2027行动@二维码<br/>—GS1全球二维码迁移</div>
             <div class="top-banner-img">
                 <img :src='img1' />
@@ -50,10 +54,10 @@
         线上线下无缝对接的新零售业态。二维码作为全渠道零售中不可或缺的数据载体，已成为众多数字化解决方案的关键核心。</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>
+            <span class="spanLink" @click="gols">GS1全球二维码迁移计划（GS1 GM2D）</span>
         </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>。
+        <div class="info-one-info">在全球，<span class="spanLink" @click="gols">国际物品编码组织（GS1）</span>于2020年底发起了
+            <span class="spanLink" @click="gols">全球二维码迁移计划（Global Migration to 2D ，简称GM2D）</span>。
             目前已经有中、美、英等全球20多个国家和地区共同加入了该计划。在中国，新零售业的迅速发展使得对二维码的应用有旺盛的需求，品牌商、
             零售商、消费者以及监管机构都迫切需要在多元场景下获取更丰富准确的数据信息。</div>
         <div class="info-one-target">
@@ -64,7 +68,7 @@
     </div>
     <div class="info-two info-content">
         <div class="info-two-title info-content-title">
-            <a href="./lsts.html" target="_blank">零售2027行动</a>
+            <span class="spanLink" @click="golsts">零售2027行动</span>
         </div>
         <div class="info-two-info">
             <div class="info-two-info-text">零售行业的POS端率先实现能够扫描、解析和存储包含GS1标识符的标准语法的二维码。
@@ -141,8 +145,8 @@
             <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>
+            点击下载<span><a :href="path+'./全渠道零售生鲜产品统一编码联盟成员登记表.docx'" target="_blank">
+                《全渠道零售生鲜产品统一编码联盟成员登记表》</a></span>
             ，并发送邮件至<a href="mailto:GM2D@ancc.org.cn?subject=加入生鲜联盟">GM2D@ancc.org.cn</a>，邮件主题注明:【加入生鲜联盟】。
         </div>
     </div>
@@ -173,7 +177,7 @@
         <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">
+                <!-- <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>
@@ -182,7 +186,18 @@
                     <span class="active"></span>
                     <span></span>
                     <span></span>
-                </div>
+                </div> -->
+                <el-carousel class="info-six-img-img" id="info-six-img-img" height="470px">
+                  <el-carousel-item>
+                    <a href="http://www.gs1cn.org/News/article.aspx?Id=10609" target="_blank"><img src="@/assets/image/retailcode/banner1.jpg"/></a>
+                  </el-carousel-item>
+                  <el-carousel-item>
+                    <a href="http://www.gs1cn.org/News/article.aspx?id=10731" target="_blank"><img src="@/assets/image/retailcode/banner2.jpg"/></a>
+                  </el-carousel-item>
+                  <el-carousel-item>
+                    <a href="http://www.gs1cn.org/News/article.aspx?id=10783" target="_blank"><img src="@/assets/image/retailcode/banner3.jpg"/></a>
+                  </el-carousel-item>
+                </el-carousel>
             </div>
             <div class="info-six-link">
                 <div class="info-six-link-list">
@@ -238,64 +253,103 @@
   </div>
 </template>
 <script>
-import breadcrumb from "../comps/breadcrumb.vue";
-
+// import breadcrumb from "../comps/breadcrumb.vue";
 
+import { mapState } from "vuex";
 export default {
-  components: {
-    breadcrumb,
-  },
+  // components: {
+  //   breadcrumb,
+  // },
   data() {
     return {
+      path:'',
       img1:require("@/assets/image/retailcode/bz1.png"),
       img2:require("@/assets/image/retailcode/bz2.png"),
-      img3:require("@/assets/image/retailcode/bz3.png")
+      img3:require("@/assets/image/retailcode/bz4.png")
     };
   },
   mounted() {
-  
-    
-
+    this.path=`${this.urls.gs1cnTwo}`
+  },
+  computed: {
+    ...mapState(["urls"]),
+    // routes() {},
   },
-
   created(){
   
   },
   methods: {
-
+    gols(){
+      this.$router.push({
+        path: '/News/RetailcodeLs',
+      });
+    },
+    golsts(){
+      this.$router.push({
+        path: '/News/RetailcodeLsts',
+      });
+    },
+    mouseenter(e){
+      var short = document.getElementsByClassName('short')
+      var long = document.getElementsByClassName('long')
+      var leftOne = document.getElementsByClassName('left-one')
+      leftOne[e].className = 'left-one left-two'
+      short[e].style.display = 'none'
+      long[e].style.display = 'block'
+      for(let i=0; i<4; i++) {
+        if(i!==e) {
+          short[i].style.display = 'block'
+          long[i].style.display = 'none'
+        }
+      }
+    },
+    mouseleave(e){
+      var short = document.getElementsByClassName('short')
+      var long = document.getElementsByClassName('long')
+      var leftOne = document.getElementsByClassName('left-one')
+      leftOne[e].className = 'left-one'
+      for(let i=0; i<4; i++) {
+        short[i].style.display = 'block'
+        long[i].style.display = 'none'
+      }
+    },
+    leftNavClick(e){
+      switch (e) {
+        case 0:
+          document.documentElement.scrollTop = 660
+          break
+        case 1:
+          document.documentElement.scrollTop = 1180
+          break
+        case 2:
+          document.documentElement.scrollTop = 2270
+          break
+        case 3:
+          document.documentElement.scrollTop = 2870
+          break
+      }
+    }
   },
 };
 </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;} */
+.spanLink{cursor: pointer;}
 .banner{width: 100%;;margin: 0 auto;}
-.left{position: fixed;top: 0px;left:0px;padding: 50px 30px 0 30px;z-index: 10;}
+.left{position: fixed;top: 0px;left:0px;padding: 150px 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{display: none;width: 43px;transition: width 1s;white-space: nowrap;overflow: hidden;}.long span{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;}
+.left-one:nth-child(1) .long:hover{width: 324px;}.left-one:nth-child(3) .long:hover{width: 159px;}
+.left-one:nth-child(5) .long:hover{width: 239px;}.left-one:nth-child(7) .long:hover{width: 294px;}
+.top-banner-zty{width: 1200px;margin: 0 auto;padding: 40px 0;display: flex;
+  justify-content: space-between;align-items: center;}
 .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;}
@@ -306,17 +360,17 @@ padding: 14px 0;}
 .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;
+.info,.info-one,.info-two,.info-three,.info-four,.info-five,.info-six{width: 1200px;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-content-title span{text-decoration:none;color: #fff;}
+.info-content-title span: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-info span{text-decoration:none;color: #454545;font-weight: 600;}
+.info-one-info span: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;}
@@ -359,11 +413,11 @@ padding: 14px 0;}
 .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{position: absolute;right: 13px;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-text{width: 802px;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;}
@@ -389,7 +443,7 @@ color: #AD5808;font-size: 18px;line-height: 24px;}
 .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;}
+  width: 1200px; 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;}
@@ -446,7 +500,7 @@ color: #AD5808;font-size: 18px;line-height: 24px;}
 .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;}
+  width: 1200px; 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;}
@@ -474,8 +528,8 @@ border-bottom: 1px solid rgba(14, 44, 107, 0.13);padding: 20px 0;}
 .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-one span{margin-right: 40px;}
+.footer-bottom-left-two span{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;}
@@ -483,5 +537,7 @@ border-bottom: 1px solid rgba(14, 44, 107, 0.13);padding: 20px 0;}
 .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;}
-
+::v-deep .el-carousel__button{
+  width:6px;
+}
 </style>
\ No newline at end of file

src/views/News/RetailcodeLs.vue

+<template>
+  <div class="index-ls">
+     <div class="nav-ls">
+      <a class="spanLink" @click="gotoyy">应用领域</a>
+      / <a class="spanLink" @click="gotols">零售</a>
+      / <a class="spanLink" @click="gozty">零售2027行动@二维码</a> / <span class="spanLink">零售二维码</span>
+    </div>
+    <div class="banner">
+      <div class="banner-bg">
+          <div class="banner-text">商品二维码</div>
+          <div class="banner-text">引领零售全渠道发展进入新维度</div>
+          <img src="@/assets/image/retailcode/lsbanner2.png"/>
+      </div>
+    </div>
+    <div class="info">
+      <div class="info-title-one info-title">零售业产品标识的未来</div>
+      <div class="info-content-one info-content">为了更好地为消费者提供线上线下全渠道服务，全球零售业正在着手进行一场自上世纪70年代商品条码诞生以来的最大规模的变革——采用商品二维码。
+        这将大大增强消费者、品牌商、零售商之间的应用体验。当前，国际物品编码组织（GS1）和全球116家编码成员组织正在积极推动商品二维码在各领域的应用，借助商品二维码的独特优势，加快新零售业态转型发展。</div>
+      <div class="explore-but">
+        <span class="spanLink" @click="golsts">
+          点击查看 零售二维码探索<img src="@/assets/image/retailcode/lsright.png"/>
+        </span>
+      </div>
+      <div class="info-title-two info-title">零售二维码——参考资料</div>
+      <div class="info-content-two info-content">
+        <div class="info-content-list">
+          <a href="chrome-extension://ibllepbpahcoppkjjllbabhnigcbffpi/https://www.gs1.org/docs/barcodes/2d-barcode-getting-started-guide.pdf" target="_blank">
+          《零售业商品二维码入门指南》</a>(2022年2月)</div>
+        <div class="info-content-list">
+          <a href="chrome-extension://ibllepbpahcoppkjjllbabhnigcbffpi/https://www.gs1.org/sites/gs1/files/2021-09/2d-in-retail-a-new-dimension-in-barcodes.pdf" target="_blank">
+          《GS1商品二维码：引领零售全渠道新维度》</a>(2021年9月)</div>
+        <div class="info-content-list">
+          <a href="chrome-extension://ibllepbpahcoppkjjllbabhnigcbffpi/https://www.gs1.org/docs/barcodes/The-Barcode-(r)Evolution.pdf" target="_blank">
+          商品条码的变革</a></div>
+        <div class="info-content-list">
+          <a href="chrome-extension://ibllepbpahcoppkjjllbabhnigcbffpi/https://www.gs1.org/sites/gs1/files/2022-01/2d-programme-faqs.pdf" target="_blank">
+          GS1全球二维码迁移计划常见问题</a></div>
+      </div>
+      <div class="info-title-three info-title">零售二维码——检验与测试报告</div>
+      <div class="info-content-two info-content">
+        <div class="info-content-list">
+          <a href="chrome-extension://ibllepbpahcoppkjjllbabhnigcbffpi/https://www.gs1.org/sites/default/files/2022-07/tier-2-test-report.pdf" target="_blank">
+          《商品二维码测试第二阶段结果》(2022年7月)</a></div>
+        <div class="info-content-list">
+          <a href="chrome-extension://ibllepbpahcoppkjjllbabhnigcbffpi/https://www.gs1.org/sites/default/files/2022-02/2d_scanning_tier_1_preliminary_results_feb_22.pdf" target="_blank">
+          《商品二维码测试第一阶段结果》 (2022年2月)</a></div>
+        <div class="info-content-list">
+          <a href="chrome-extension://ibllepbpahcoppkjjllbabhnigcbffpi/https://www.gs1.org/docs/retail/2D_scanning_test_plan_-_Exec_Summary_-_Sept_21.pdf" target="_blank">
+          《商品二维码测试计划：执行摘要》 (2021年9月)</a></div>
+      </div>
+      <div class="info-title-four info-title">全国商品二维码推广工作组</div>
+      <div class="info-content-one info-content">为推进GM2D在中国的应用实施，顺应国内零售业的数字化转型升级，广泛协调消费市场中的各方需求，中国物品编码中心邀请相关编码分支机构、
+        重点企业及单位成立商品二维码推广工作组，以统一、组织、协调国际国内相关标准在全国的应用推广工作。通过工作组工作，将及时了解全球二维码迁移计划发展最新情况，率先获得符合GS1全球标准体系的最新开发工具、
+        技术支持、先进经验，共同参与相关行业指南、技术规范的建设及应用实施，引领行业升级发展。<br/>
+        全国商品二维码推广工作组计划组织各地编码分支机构及有意愿、有条件的品牌商、生产商、零售商和系统服务商等相关企业共同参加。<br/>
+        发送邮件至<a href="mailto:GM2D@ancc.org.cn?subject=加入全国商品二维码推广工作组">GM2D@ancc.org.cn</a>，邮件主题注明：【加入全国商品二维码推广工作组】。</div>
+      <div class="info-title-four info-title">国内外应用案例</div>
+      <div class="info-content-two info-content">
+        <div class="info-content-list">
+          <a href="chrome-extension://ibllepbpahcoppkjjllbabhnigcbffpi/https://www.gs1.org/sites/gs1/files/2022-08/case-study-parla-deli-gs1brazil.pdf" target="_blank">
+          巴西Parla Deli食品商店成为全球首个应用包含有GS1 Digital Link 二维码的应用试点（EN）</a></div>
+        <div class="info-content-list">
+          <a href="chrome-extension://ibllepbpahcoppkjjllbabhnigcbffpi/https://www.gs1.org/sites/gs1/files/2022-06/case-study-woolworths-gs1australia.pdf" target="_blank">
+          澳大利亚Woolworths超市应用商品二维码实现多重商业价值（EN）</a></div>
+        <div class="info-content-list">
+          <a href="https://www.gs1au.org/for-your-industry/2d-barcodes/implementing-2dbarcodes-with-woolworths" target="_blank">
+          更多关于澳大利亚Woolworths超市商品二维码实施的信息（EN）</a></div>
+        <div class="info-content-list">
+          <a href="https://www.gs1us.org/future-of-retail" target="_blank">
+          超越U.P.C.码——推动美国零售业的未来(EN)</a></div>
+        <div class="info-content-list">
+          <a href="https://www.youtube.com/watch?v=Y_VHkJHGSxk" target="_blank">
+          GS1 DataMatrix在变量产品的应用成效–视频（比利时/卢森堡）(EN）</a></div>
+        <div class="info-content-list">
+          <a href="https://www.youtube.com/watch?v=8ue3WkOI43U" target="_blank">
+          瑞士Coop商城使用GS1 DataMatrix实现产品的效期管理—视频（EN）</a></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import breadcrumb from "../comps/breadcrumb.vue";
+
+
+export default {
+  // components: {
+  //   breadcrumb,
+  // },
+  data() {
+    return {
+    };
+  },
+  mounted() {
+  
+    
+
+  },
+
+  created(){
+  
+  },
+  methods: {
+    gotoyy(){
+      this.$router.push({
+        path: '/News/index',
+      });
+    },
+    gotols(){
+      this.$router.push({
+        path: '/News/Retail',
+      });
+    },
+    golsts(){
+      this.$router.push({
+        path: '/News/RetailcodeLsts',
+      });
+    },
+    gozty(){
+      this.$router.push({
+        path: '/News/Retailcode',
+      });
+    }
+  },
+};
+</script>
+<style scoped>
+.index-ls{background: #fff;font-family: MicrosoftYaHei;padding-bottom: 1px;}
+.spanLink{cursor: pointer;}
+.headerTop{font-size: 12px;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;}
+.nav-ls{width: 1200px;padding: 14px 0;font-size: 12px;line-height: 16px;color: #454545;margin: 0 auto;}
+.nav-ls a{text-decoration:none;color: #454545;}
+.nav-ls a:hover{color: #f26344;}
+.nav-ls span{color: #f26344;}
+.banner{width: 100%;height: 260px;padding-top: 20px;margin-bottom: 50px;display: flex;
+  background:url("~@/assets/image/retailcode/lsbanner3.png") center top no-repeat;background-size:100% 100%}
+.banner .banner-bg{width: 1200px;margin: 0 auto;position: relative;}
+.banner .banner-bg img{width: 514px;height: 260px;position: absolute;top: -7px;right: 0;}
+.banner-text{font-size: 40px;color: #FFFFFF;line-height: 52px;margin: 40px auto 0 0;width: 1200px;}
+.info{width: 1200px;margin: 0 auto;}
+.info-title{font-size: 26px;color: #002C6C;line-height: 35px;margin-bottom: 24px;}
+.info-content{font-size: 14px;color: #454545;line-height: 24px;margin-bottom: 32px;}
+.info-content a{text-decoration:none;color: #454545;font-weight: 600;}
+.explore-but{width: 223px;background: #f26344; border-radius: 4px;margin-bottom: 32px;
+  color:#fff;padding: 10px 20px;font-size: 14px;line-height: 19px;}
+.explore-but:hover{background-color: #e85230;}
+.explore-but img{margin-left: 8px;width: 14px;height: 10px;transition: .2s;}
+.explore-but:hover img{transform: translateX(6px);}
+.explore-but span{text-decoration:none;color: #fff;}
+.explore-but span:hover{text-decoration:none;color: #fff;}
+.info-content-list{margin-bottom: 24px;}
+.info-content-list a{color: #00799E;}
+.info-title-three{margin-top: 60px;}
+.info-title-four{margin-top: 60px;}
+.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/RetailcodeLsts.vue

+<template>
+  <div class="index-lsts">
+     <div class="nav-lsts">
+      <a class="spanLink" @click="gotoyy">应用领域</a>
+      / <a class="spanLink" @click="gotols">零售</a>
+      / <a class="spanLink" @click="gozty">零售2027行动@二维码</a> / <span class="spanLink">零售二维码探索</span>
+    </div>
+    <div class="banner">
+      <div class="banner-text">商品二维码应用于零售POS结算</div>
+      <div class="banner-text-two">在新时代，消费者比以往任何时候都更希望产品信息的透明，商品二维码在包含商品GTIN信息的基础上，
+        还包含商品的生产日期、保质期等其他商品信息，是未来商品标签的发展方向。</div>
+    </div>
+    <div class="info">
+      <div class="info-contact">
+        <div class="info-contact-info">
+          <div class="info-contact-info-tit">让消费者与产品和品牌建立联系</div>
+          <div class="info-contact-info-text">随着信息技术的发展，消费者的期望也在不断变化。
+            二维码使消费者通过智能手机直接连接到品牌官方信息平台，增强了消费者的购物体验。国际物品编码组织（GS1）和全球116家编码
+            成员组织正在积极推动商品二维码在零售业的应用，借助商品二维码的独特优势，既满足原有的POS结算，又能让消费者通过智能手机
+            等移动设备获取产品召回、过敏原信息、促销、评论和说明等实时信息。</div>
+        </div>
+        <div class="info-contact-img"><img src="@/assets/image/retailcode/lstscontact.png"/></div>
+      </div>
+      <div class="icon-ul">
+        <div class="icon-list">
+          <div class="icon-list-img"><img src="@/assets/image/retailcode/lstsicon1.png"/></div>
+          <div class="icon-list-tit">更多商品信息</div>
+          <div class="icon-list-text">使用商品二维码，消费者可以在线查看商品的更多详细信息</div>
+        </div>
+        <div class="icon-list">
+          <div class="icon-list-img"><img src="@/assets/image/retailcode/lstsicon2.png"/></div>
+          <div class="icon-list-tit">消费互动新体验</div>
+          <div class="icon-list-text">让消费者在在购买后持续与品牌保持互动</div>
+        </div>
+        <div class="icon-list">
+          <div class="icon-list-img"><img src="@/assets/image/retailcode/lstsicon3.png"/></div>
+          <div class="icon-list-tit">发掘商业新价值</div>
+          <div class="icon-list-text">通过消费者互动和反馈，洞悉更多商业价值。</div>
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="where">
+        <div class="where-tit">企业：从哪里开始?</div>
+        <div class="where-text"><span>零售商：</span>评估当前的技术能力(如扫描设备和管理系统)，
+          制定升级计划，以支持扫描所有二维码码制。</div>
+        <div class="where-text"><span>品牌商/生产商/供应商：</span>组织营销主管及供应链合作伙伴，
+          共同制定一个GS1条码应用综合策略，以满足消费者参与和供应链参与等目标。</div>
+        <div class="where-text"><span>服务提供商：</span>考虑系统所需的升级，
+          以支持多种条码扫描/打印，并支持最终用户实现2D解析、识读。</div>
+      </div>
+    </div>
+    <div class="qrcode-value">
+      <div class="qrcode-value-tit">利用商品二维码实现更多商业价值</div>
+      <div class="qrcode-value-tab">
+        <div class="qrcode-value-tab-tit">
+          <div class="qrcode-value-tab-title" id="title0" @click="showDiv('show0','title0','colorshow0')">优化库存管理</div>
+          <div class="qrcode-value-tab-title titlehidden" id="title1" @click="showDiv('show1','title1','colorshow1')">追溯管理</div>
+          <div class="qrcode-value-tab-title titlehidden" id="title2" @click="showDiv('show2','title2','colorshow2')">提升商品新鲜度和减少浪费</div>
+        </div>
+        <div class="qrcode-value-tab-color">
+          <div class="qrcode-value-tab-colorshow" id="colorshow0"></div>
+          <div class="qrcode-value-tab-colorshow colorhidden" id="colorshow1"></div>
+          <div class="qrcode-value-tab-colorshow colorhidden" id="colorshow2"></div>
+        </div>
+        <div class="qrcode-value-tab-content">
+          <div class="qrcode-value-tab-content-one" id="show0">
+            <div class="qrcode-value-tab-content-onetit">在商品二维码中加载商品附属信息优化库存管理</div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 提高处理退货的效率：</span>当前线上线下全渠道零售的退货流程较为复杂，经常容易发生错误。
+              通过应用商品二维码加载详细的商品信息，将全面了解商品的购买及物流运输历史，可以显著提高退换货效率。
+            </div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 解锁新商业价值：</span>通过大数据集成分析商品二维码承载的供应链信息，
+              转化并解锁有价值的商业见解，实现简化物流、增强营销互动和消费体验、精准的消费预测，创造和发现更多商业价值。
+            </div>
+            <div class="qrcode-value-tab-content-onetit">除了GTIN信息，还有哪些可用于优化库存管理的商品信息？</div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 批次/批号：</span>可以提供信息，实现先进先出库存管理。
+            </div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 有效期：</span>将带有“有效期”信息的商品二维码扫描到库存管理系统中，
+              零售结算时可以实时了解产品的新鲜度，而无需店员亲自检查/轻点库存信息。
+            </div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 序列号：</span>产品的序列是企业生产的每一个产品的唯一代码，主要作用在于产品生产进程的控制，
+              生产质量管理等，通过将序列号加载到商品二维码，可以实现商品的一物一码的独立跟踪追溯。
+            </div>
+          </div>
+          <div class="qrcode-value-tab-content-one hidden" id="show1">
+            <div class="qrcode-value-tab-content-onetit">通过应用商品二维码实现高效的追溯功能</div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 验证产品并增强企业对产品的信心：</span>商品二维码可以提供产品的完整供应链信息，
+              可以让监管机构和消费者更加相信产品的真实性。
+            </div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 实现高效召回：</span>应用商品二维码的商品，当特定批次的商品需要进行召回时，
+              可以实现相关批次产品的迅速下架，同时也可以实现对召回产品的结算拦截。
+            </div>
+            <div class="qrcode-value-tab-content-onetit">除了GTIN信息，还有哪些可用于追溯管理的商品信息？</div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 批次/批号：</span>包含产品GTIN和批次/批号信息的单个商品条码有助于提高供应链可视性，
+              为更快、更有针对性的召回建立基础。
+            </div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 序列号：</span>序列号信息可以实现商品“一物一码”独立追溯管理。
+            </div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 原产国：</span>商品的原产国信息是当今全球贸易的重要数据元素，在多种场景的追溯应用中都有重要体现。
+            </div>
+          </div>
+          <div class="qrcode-value-tab-content-one hidden" id="show2">
+            <div class="qrcode-value-tab-content-onetit">通过应用商品二维码提升生鲜产品的新鲜度并且减少食物浪费</div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 确保食品和产品安全：</span>商品二维码上加载详细的商品信息，可以对管理采购、事故、召回和撤回等风险提供数据支持，
+              在销售环节识别过期或有问题的产品，实现生鲜冷链的全程监控，让消费者买的放心，吃的安心。
+            </div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 提高产品新鲜度：</span>让消费者完全了解购买食物最真实的新鲜程度，
+              确保食物可以在最合理的食用时间得到利用，避免不必要的食品浪费。
+            </div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 减少浪费：</span>商品二维码上正确、完备的商品信息数据，可以防止在生产、运输或存储过程中出现的损失，
+              提升企业的供应链管理效率，减少不必要的浪费从而降低企业成本。
+            </div>
+            <div class="qrcode-value-tab-content-onetit">除了GTIN信息，还需要哪些商品信息可以提升新鲜度/减少浪费？</div>
+            <div class="qrcode-value-tab-content-onetext">
+              <span>· 有效期：</span>改进销售截止日期/有效期管理可以增强产品轮换效率，提升产品新鲜度，并可以拦截过期产品的销售。为了避免浪费，
+              在有效期前进行销售是最常见的，这一功能的实现仍需要批次或序列号等其他商品信息的配合使用。
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import breadcrumb from "../comps/breadcrumb.vue";
+
+
+export default {
+  // components: {
+  //   breadcrumb,
+  // },
+  data() {
+    return {
+    };
+  },
+  mounted() {
+  
+    
+
+  },
+
+  created(){
+  
+  },
+  methods: {
+    gotoyy(){
+      this.$router.push({
+        path: '/News/index',
+      });
+    },
+    golsts(){
+      this.$router.push({
+        path: '/News/RetailcodeLsts',
+      });
+    },
+    gotols(){
+      this.$router.push({
+        path: '/News/Retail',
+      });
+    },
+    gozty(){
+      this.$router.push({
+        path: '/News/Retailcode',
+      });
+    },
+    showDiv(str, str1, str2){
+      var divs = []
+      var divs1 = []
+      for(var i = 0;i < 3;i++){
+        divs[i] = document.getElementById('show' + i)
+        divs[i].style.display = 'none'
+      }
+      document.getElementById(str).style.display = 'block'
+      for(var j = 0;j < 3;j++){
+        divs1[j] = document.getElementById('title' + j)
+        divs1[j].style.color = '#454545'
+        divs1[j].style.fontWeight = '500'
+      }
+      document.getElementById(str1).style.color = '#002C6C'
+      document.getElementById(str1).style.fontWeight = '600'
+      for(var k = 0;k < 3;k++){
+        divs1[k] = document.getElementById('colorshow' + k)
+        divs1[k].style.background = '#E5E8EB'
+      }
+      document.getElementById(str2).style.background = '#F26335'
+    }
+  },
+};
+</script>
+<style scoped>
+.index-lsts{background: #fff;font-family: MicrosoftYaHei;position: relative;padding-bottom: 1px;}
+.spanLink{cursor: pointer;}
+.headerTop{font-size: 12px;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;}
+.nav-lsts{width: 1200px;padding: 14px 0;font-size: 12px;line-height: 16px;color: #454545;margin: 0 auto;}
+.nav-lsts a{text-decoration:none;color: #454545;}
+.nav-lsts a:hover{color: #f26344;}
+.nav-lsts span{color: #f26344;}
+.banner{width: 100%;height: 280px;margin-bottom: 50px;background-color: #002C6B;
+  background:url("~@/assets/image/retailcode/lstsbanner.png") center top no-repeat;background-size:100% 100%}
+.banner-text{font-size: 40px;color: #FFFFFF;line-height: 52px;margin: 0 auto 30px auto;width: 1200px;
+  padding-top: 70px;z-index: 2;}
+.banner-text-two{font-size: 22px;color: #FFFFFF;line-height: 34px;margin: 0 auto;width: 1200px;z-index: 2;padding-right: 266px;}
+.info{width: 1200px;margin: 0 auto;}
+.info-contact{display: flex;}
+.info-contact-info{width: 730px;margin-right: 50px;}
+.info-contact-info-tit{font-size: 26px;color: #002C6C;line-height: 35px;margin-bottom: 32px;}
+.info-contact-info-text{font-size: 14px;color: #454545;line-height: 24px;}
+.info-contact-img img{width: 420px;height: 280px;}
+.icon-ul{width: 1200px;margin: 60px auto 0 auto;display: flex;}
+.icon-list{margin-right: 200px;}
+.icon-list-img{padding-left: 8px;}
+.icon-list-img img{width: 84px;height: 90px;margin-bottom: 37px;}
+.icon-list-tit{font-size: 18px;color: #002C6C;margin-bottom: 20px;
+  line-height: 24px;-webkit-text-stroke: 1px #002C6C;text-stroke: 1px #002C6C;}
+.icon-list-text{font-size: 14px;color: #454545;line-height: 24px;width: 210px;}
+.line{border-top: 1px solid #C4D7ED;height: 1px;width: 1200px;margin: 50px auto;}
+.where{width: 1200px;margin: 0 auto;}
+.where-tit{font-size: 28px;color: #002C6C;line-height: 37px;}
+.where-text{margin-top: 24px;font-size: 14px;color: #454545;line-height: 24px;}
+.where-text span{color: #002C6C;font-weight: bold;}
+.qrcode-value{width: 100%;background-color: #F0F5FA;padding-top: 50px;margin-top: 50px;padding-bottom: 70px;}
+.qrcode-value-tit{width: 1200px;margin: 0 auto 40px auto;font-size: 28px;
+  color: #002C6C;line-height: 37px;}
+.qrcode-value-tab{width: 1200px;margin: 0 auto;background-color: #fff;}
+.qrcode-value-tab-tit{padding: 14px 24px;display: flex;}
+.qrcode-value-tab-title{font-size: 14px;color: #002C6C;line-height: 19px;
+  font-weight: 600; margin-right: 50px;cursor: pointer;}
+.qrcode-value-tab-color{display: flex;width: 100%; background-color: #E5E8EB;}
+.qrcode-value-tab-colorshow{height: 4px;background: #F26335;border-radius: 2px;}
+#colorshow0{width: 133px;}
+#colorshow1{width: 105px;}
+#colorshow2{width: 217px;}
+.qrcode-value-tab-content{padding: 50px;}
+.qrcode-value-tab-content-one div{margin-bottom: 32px;}
+.qrcode-value-tab-content-onetit{font-size: 20px;color: #002C6C;line-height: 26px;}
+.qrcode-value-tab-content-onetext{font-size: 15px;color: #454545;line-height: 26px;}
+.qrcode-value-tab-content-onetext span{font-weight: bold;}
+.titlehidden{color: #454545;font-weight: 500;}
+.colorhidden{background: #E5E8EB;}
+.hidden{display: none;}
+.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