咨询中心页面提交

src/views/News/ECommerce.vue

+<template>
+  <div class="container" >
+    <breadcrumb />
+    <div class="composite">
+      <img src="../../assets/image/news/dzsw1.png" alt="">
+      <p style="font-size:16px;color:#04408D">物品编码标识技术</p>
+      <p>一种在计算机的应用实践中产生和发展起来的自动识别技术，是全球通用的、标准化的商务语言。该技术已有50年历史，有150多个国家、超过200万家企业在使用，已经得到全球供应商、采购商、零售商、消费者的普遍认可。</p>
+    </div>
+ 
+
+    <div class="div4 div4-list">
+      <div class="row">
+       
+        <div class="col-lg-6 lunbo ">
+            <div class="lunbo-cnt">
+                <p class="lunbo-title">
+                    <span>商品二维码在零售领域的应用</span>
+                    <span class="more">更多>></span>
+                </p>
+               <div class="list-style li-style">
+                   <ul >
+                        <li >对电商平台&卖家的好处
+                            
+                            <p>有了全球统一的编码标识，就相当于给产品赋予了一个通行全球的合法“身份证”，让全球的买家更加信赖……</p>
+                        </li>
+                        <li >对电商平台&卖家的好处
+                            
+                            <p>有了全球统一的编码标识，就相当于给产品赋予了一个通行全球的合法“身份证”，让全球的买家更加信赖……</p>
+                        </li>
+                        
+                    </ul>
+               </div>
+                
+            </div>
+        </div>
+        <div class="col-lg-6 lunbo ">
+            <div class="lunbo-cnt">
+                <p class="lunbo-title">
+                    <span>应用动态 </span>
+                    <span class="more">更多>></span>
+                </p>
+               <div class="list-style">
+                   <ul >
+                        <li >中国物品编码中心赴广东格力、美的集团开展调研 广东省标准化研究院张定康院…</li>
+                        <li >中国物品编码中心赴广东格力、美的集团开展调研 广东省标准化研究院张定康院…</li>
+                        <li >中国物品编码中心赴广东格力、美的集团开展调研 广东省标准化研究院张定康院…</li>
+                        <li >中国物品编码中心赴广东格力、美的集团开展调研 广东省标准化研究院张定康院…</li>
+                        <li >中国物品编码中心赴广东格力、美的集团开展调研 广东省标准化研究院张定康院…</li>
+                        </ul>
+               </div>
+                
+            </div>
+        </div>
+        <div class="col-lg-6 lunbo ">
+            <div class="lunbo-cnt">
+                <p class="lunbo-title">
+                    <span>在线视频</span>
+                    <span class="more">更多>></span>
+                </p>
+               
+               <img src="../../assets/image/news/dzsw2.png" alt="">
+                
+            </div>
+        </div>
+        <div class="col-lg-6 lunbo ">
+            <div class="lunbo-cnt">
+                <p class="lunbo-title">
+                    <span>资料下载</span>
+                    <span class="more">更多>></span>
+                </p>
+               <div class="list-style">
+                   <ul >
+                        <li >《电子商务商品条码应用指南》</li>
+                        <li >《商品条码在电子商务领域的应用》</li>
+                        <li >《ebXML标准技术规范——全球电子商务标准》</li>
+                        <li >GLN</li>
+                        </ul>
+               </div>
+                
+            </div>
+        </div>
+        
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+
+import breadcrumb from "../comps/breadcrumb.vue";
+import cate from "../comps/cate.vue";
+export default {
+  components: {
+   breadcrumb,
+  },
+  data() {
+    return {
+      
+     typeList:[
+       {
+         title:'商品条码在零售领域应用指南',
+         list:[
+           {
+             name:'如何在零售商品上使用商品条码——步骤一',
+           },
+           {
+             name:'如何在零售商品上使用商品条码——步骤二',
+           },
+           {
+             name:'如何在零售商品上使用商品条码——步骤三',
+           },
+           {
+             name:'如何在零售商品上使用商品条码——步骤四',
+           },
+           {
+             name:'如何在非零售商品上使用商品条码——非零售商品的标识…',
+           },
+           {
+             name:'如何在非零售商品上使用商品条码——非零售商品的条码…',
+           },
+           {
+             name:'如何在非零售商品上使用商品条码——应用标识符的使用',
+           },
+             
+
+           
+         ]
+       },
+       {
+        
+         title:'最新动态',
+         list:[
+           {
+             name:'如何在零售商品上使用商品条码——步骤一',
+           },
+           {
+             name:'如何在零售商品上使用商品条码——步骤二',
+           },
+           {
+             name:'如何在零售商品上使用商品条码——步骤三',
+           },
+           {
+             name:'如何在零售商品上使用商品条码——步骤四',
+           },
+           {
+             name:'如何在非零售商品上使用商品条码——非零售商品的标识…',
+           },
+           {
+             name:'如何在非零售商品上使用商品条码——非零售商品的条码…',
+           },
+           {
+             name:'如何在非零售商品上使用商品条码——应用标识符的使用',
+           },
+         ]
+       },
+      
+      
+     ]
+    };
+  },
+  mounted() {
+    // 面包屑单独处理
+    this.$store.commit("system/SET_BREADCRUMB", [
+      { name: "应用领域", path: "/New" },
+      { name: "电子商务" },
+    ]);
+  },
+  methods: {},
+  
+};
+</script>
+<style lang="scss" scoped>
+.container {
+  @media screen and (min-width: 992px) {
+    
+  }
+  @media screen and (max-width: 992px) {
+   
+    
+  }   
+  
+}
+</style>
+<style lang="scss" scoped>
+.composite {
+  margin-bottom: 30px;
+  padding-top: 0;
+  padding-bottom: 20px;
+  background: #F5F5F5;
+  >p{
+    margin: 0 56px;
+    font-size: 14px;
+    color: #414345;
+    line-height: 40px;
+  }
+  img{
+    width: 100%;
+    margin-bottom: 20px;
+  }
+}
+.div-title{
+    color: #C1D82F;
+    font-size: 16px;
+    font-family: PingFangSC-Semibold;
+    white-space: nowrap;
+  }
+
+.div4{
+  margin-bottom: 30px;
+  .list-style{
+    background: #fff;
+    border-top: 5px solid #C1D82F;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    .div4-title{
+      height: 50px;
+      color: #C1D82F;
+      font-size: 16px;
+      padding: 0 20px;
+      margin-bottom: 0;
+      margin-top: 10px;
+      img{
+        width: 14px;
+        height: 16px;
+        margin-right: 10px;
+      }
+      span{
+        line-height: 50px;
+      }
+      .more{
+          font-size: 12px;
+          float: right;
+      }
+    }
+    ul{
+      padding:0 20px 10px;
+      li{ 
+        color: #414345;
+        font-size: 14px;
+        line-height: 40px;
+        overflow: hidden;
+        text-overflow: ellipsis;  
+        white-space:nowrap;
+      }
+      li::before{
+            content: "●"; 
+            color: #C1D82F;
+            margin-right: 10px;
+        }
+
+    }
+  }
+}
+.div4-list{
+    .list-style:first-child{
+        border-top: 5px solid #C1D82F;
+    }
+    
+    .list-style{
+        position: relative;
+        border: none;
+
+        li{
+            display: inline-block;
+            width: 95%;
+        }
+        img{
+            position:absolute;
+            width: 28%;
+            top: 70px;
+            right: 20px;
+
+        }
+
+    }
+}
+.lunbo{
+    .lunbo-cnt{
+        position: relative;
+    }
+    .lunbo-title{
+        color: #C1D82F;
+        font-size: 16px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        span{
+            line-height: 50px;
+        }
+        .more{
+            font-size: 12px;
+            float: right;
+        }
+    }
+    .list-style{
+         border-top: 5px solid #C1D82F;
+         padding-top: 10px;
+    }
+
+    .lunbo-bottom{
+        width: 100%;
+        height: 10%;
+        background: rgba(0,0,0,0.4);
+        position:absolute;
+        bottom: 0;
+    }
+}
+.div4{
+  /deep/.li-style{
+  
+      ul{
+          li{
+              font-size: 16px;
+              color: #414345;
+              white-space:inherit;
+              font-weight: Medium;
+              p{
+                color: #666666;
+                font-size: 13px;
+                padding-left: 20px;
+                margin: 10px 0;
+                line-height: 24px;
+              }
+          }
+      }
+      
+  }
+}
+
+
+</style>

src/views/News/Logistics.vue

@@ -17,13 +17,35 @@
       </div>
     </div>
     <div class="div3">
-      <div class="div3-img">
-          <img src="../../assets/image/news/wl4.png" alt="">
+      <div class="div3-img row">
+        <div class="col-lg-7">
+           <img src="../../assets/image/news/wl4.png" alt="" >
         </div>
+          <div class="div-right col-lg-5">
+            <p>高效 · 便捷 · 互联互通</p>
+            <button  type="button" class="el-button el-button--primary el-button--small">快消品GS1探索之旅</button>
+          </div>
+      </div>
+    </div>
+    <div class="div4">
+      <div class="row">
+        <div class="col-lg-3 " v-for="(item,i) in typeList" :key="i">
+          <div class="list-style">
+            <p class="div4-title">
+              <img :src="item.icon" alt="" />
+              <span>{{item.title}}</span>
+            </p>
+            <ul >
+              <li  v-for="(value,index) in item.list" :key="index">{{value.name}}</li>
+            </ul>
 
           </div>
           
         </div>
+      </div>
+    </div>
+
+  </div>
 </template>
 <script>
 
@@ -32,43 +54,75 @@ import cate from "../comps/cate.vue";
 export default {
   components: {
    breadcrumb,
-  
-    
   },
   data() {
     return {
       
      typeList:[
        {
-         icon:require("../../assets/image/news/ylws1.png"),
-         title:'政策法规',
-         list:['药品','医疗器械']
+         icon:require("../../assets/image/news/icon_biaozhun.png"),
+         title:'标准',
+         list:[
+           {
+             name:'标准标准标准标准标准标准标准标准标准标准标准标准标准标准标准标准',
            },
            {
-         icon:require("../../assets/image/news/ylws2.png"),
-         title:'追溯',
-         list:['EPCIS','药品追溯']
+             name:'标准标准标准标准标准标准标准标准',
            },
            {
-         icon:require("../../assets/image/news/ylws3.png"),
-         title:'医疗机构',
-         list:['标准实施十步走','优秀案例','GS1医疗奖']
+             name:'标准标准标准标准标准标准标准标准',
+           },
+             
+
+           
+         ]
        },
        {
-         icon:require("../../assets/image/news/ylws4.png"),
-         title:'GS1标准与解决方案',
-         list:['GS1如何帮助解决方案提供商']
+         icon:require("../../assets/image/news/icon_zhinan.png"),
+         title:'指南&案例',
+         list:[
+           {
+             name:'指南指南指南指南指南指南指南指南',
            },
            {
-         icon:require("../../assets/image/news/ylws5.png"),
-         title:'GS1医疗标准',
-         list:['用于医疗的GS1标准','临床试验标准']
+             name:'指南指南指南指南指南指南指南指南',
            },
            {
-         icon:require("../../assets/image/news/ylws6.png"),
-         title:'应用案例',
-         list:['报告','案例','立场书']
-       }
+             name:'指南指南指南指南指南指南指南指南',
+           },
+         ]
+       },
+       {
+         icon:require("../../assets/image/news/icon_zhengce.png"),
+         title:'政策法规&行业资讯',
+         list:[
+           {
+             name:'政策法规政策法规政策法规政策法规',
+           },
+           {
+             name:'政策法规政策法规政策法规政策法规',
+           },
+           {
+             name:'政策法规政策法规政策法规政策法规',
+           },
+         ]
+       },
+       {
+         icon:require("../../assets/image/news/icon_changjianwenti.png"),
+         title:'常见问题',
+         list:[
+           {
+             name:'常见问题常见问题常见问题常见问题',
+           },
+           {
+             name:'常见问题常见问题常见问题常见问题',
+           },
+           {
+             name:'常见问题常见问题常见问题常见问题',
+           },
+         ]
+       },
+      
      ]
     };
   },
@@ -83,18 +137,16 @@ export default {
   
 };
 </script>
-<style lang="scss">
-.health {
+<style lang="scss" scoped>
+.composite {
   @media screen and (min-width: 992px) {
-    .health-ul {
-      justify-content: space-between;
-    }
+    
   }
   @media screen and (max-width: 992px) {
-    .health-ul {
-      justify-content: space-around;
-    }
+   
+    
   }   
+  
 }
 </style>
 <style lang="scss" scoped>
@@ -132,14 +184,71 @@ export default {
 .div3{
   @include module-box;
   overflow: hidden;
+  margin-bottom: 30px;
   .div3-img{
-    width: 60%;
-    height: auto;
-    float: left;
     img{
       width: 100%;
     }
+    .div-right{
+      
+      text-align: center;
+      p{
+        color: #0E2C6B;
+        font-size: 26px;
+        text-align: center;
+        margin-top: 20%;
+        margin-bottom: 20px;
       }
+      button{
+        height: 40px;border-radius: 2px;
+        font-size: 16px;
+        margin: 0 auto;
+        padding: 0 20%;
+        margin-bottom: 20%;
         
+      }
+    }
+  }
+  
+}
+.div4{
+  margin-bottom: 30px;
+  .list-style{
+    background: #fff;
+    border-top: 5px solid #22BCB9;
+    .div4-title{
+      height: 50px;
+      color: #22BCB9;
+      font-size: 16px;
+      padding: 0 20px;
+      border-bottom: 1px solid #C5D8EE;
+      margin-bottom: 0;
+      img{
+        width: 14px;
+        height: 16px;
+        margin-right: 10px;
+      }
+      span{
+        line-height: 50px;
+      }
+    }
+    ul{
+      padding:10px 20px;
+      li{ 
+        color: #414345;
+        font-size: 14px;
+        line-height: 40px;
+        overflow: hidden;
+        text-overflow: ellipsis;  
+        white-space:nowrap;
+      }
+      li::before{
+            content: "●"; 
+            color: #22BCB9;
+            margin-right: 10px;
+        }
+
+    }
+  }
 }
 </style>
\ No newline at end of file