样式调整

src/App.vue

@@ -16,4 +16,7 @@ export default {
 .container-fluid {
   padding: 0 !important;
 }
+.el-input__inner::-webkit-input-placeholder {
+  color: #888 !important
+}
 </style>

src/views/Search/external.vue

 <template>
   <div class="search-content">
+    <div class="banner-box">
+      <img src="./img/query_external_banner.jpeg"
+           @click="openUrl('http://www.gs1cn.org/Manage/down/Import_Data_Guideline.pdf')"/>
+    </div>
     <div class="title">境外条码信息查询</div>
     <div class="body">
       <div style="padding-top: 20px">
@@ -105,10 +109,10 @@
       <div class="content-wrapper">
         <img src="./img/query-external-barcode.png" align="right" alt="" />
         <p>
-          1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
-          >>
+          1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：
+          <a href="http://www.ancc.org.cn/Service/queryTools/GS1PrefixCode.aspx" target="_blank" style="color: #5AC8FA;">了解更多 >></a>
         </p>
-        <p>2、本查询仅适用于中华人民共和国境外注册的商品条码信息。</p>
+        <p style="color: #FF3B30;">2、本查询仅适用于中华人民共和国境外注册的商品条码信息。</p>
       </div>
     </div>
   </div>
@@ -200,12 +204,24 @@ export default {
         this.result = null;
       }
     },
+    openUrl(url) {
+      window.open(url)
+    }
   },
 };
 </script>
 
 <style lang="scss">
 .search-content {
+  .banner-box {
+    width: 100%;
+    height: auto;
+    > img {
+      width: 100%;
+      height: auto;
+      cursor: pointer;
+    }
+  }
   .validate-code {
     display: inline-block;
     width: 70px;

src/views/Search/gln.vue

@@ -53,18 +53,20 @@
       <div class="content-wrapper">
         <img src="./img/query-external-barcode.png" align="right" alt="" />
         <p>
-          1、参与方位置编码（Global Location
+          参与方位置编码（Global Location
           Number）是对参与供应链等活动的法律实体、功能实体和物理实体进行唯一标识的代码，用13位数字表示，主要应用于条码符号自动识别与数据采集和电子数据交换
         </p>
         <p>
-          2、当用条码符号表示参与方位置编码时，应与参与方位置编码应用标识符一起使用，如左图中的"410"代表"交货地"。
+          当用条码符号表示参与方位置编码时，应与参与方位置编码应用标识符一起使用，如左图中的"410"代表"交货地"。
         </p>
         <p>注：</p>
-        <p>3、法律实体是指合法存在的机构，如：供应商、客户、银行、承运商等。</p>
-        <p>4、功能实体是指法律实体内的具体的部门，如：某公司的财务部。</p>
-        <p>
-          5、物理实体是指具体的位置，如：建筑物的某个房间、仓库或仓库的某个门、交货地等。
-        </p>
+        <div>
+          <p>1、法律实体是指合法存在的机构，如：供应商、客户、银行、承运商等。</p>
+          <p>2、功能实体是指法律实体内的具体的部门，如：某公司的财务部。</p>
+          <p>
+            3、物理实体是指具体的位置，如：建筑物的某个房间、仓库或仓库的某个门、交货地等。
+          </p>
+        </div>
       </div>
     </div>
   </div>
@@ -137,4 +139,16 @@ export default {
     width: 240px;
   }
 }
+.content-wrapper {
+  > p {
+    &:nth-child(2), &:nth-child(3), &:nth-child(4) {
+      text-indent: 28px;
+    }
+  }
+  > div {
+    margin-top: 20px;
+    padding: 20px;
+    border: 1px solid #E8DBC1;
+  }
+}
 </style>

src/views/Search/internal.vue

@@ -133,14 +133,14 @@
       <div class="content-wrapper">
         <img src="./img/pic_ex_jl.png" align="right" alt=""/>
         <p>
-          1、商品条码
+          1、<a href="http://www.ancc.org.cn/Knowledge/goodsGln.aspx" target="_blank" style="color: #5AC8FA;">商品条码</a>
           （又称全球贸易项目代码GTIN）是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码（或称数据结构）。对贸易项目进行编码和符号表示（前缀码为690-699是境内条码），能够实现商品零售（POS）、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。
-          了解更多 >>
+          <a href="http://www.ancc.org.cn/Knowledge/goodsGln.aspx" target="_blank" style="color: #5AC8FA;">了解更多 >></a>
         </p>
-        <p>
+        <p style="color: #FF3B30;">
           2、厂商信息查询结果说明：自中国物品编码中心为企业颁发《系统成员证书》当日起计，7天后，在线公布该企业的名称、厂商识别代码及证书颁发日期等信息；15天后，将公布该企业的具体注册信息。
         </p>
-        <p>
+        <p style="color: #FF3B30;">
           3、本查询仅适用于中华人民共和国境内注册的商品条码信息。
         </p>
       </div>

src/views/Search/tools.vue

@@ -35,7 +35,7 @@ export default {
     return {
       tool: [
         {
-          name: "境内商品条码信息查询",
+          name: "境内条码信息查询",
           img: require("./img/pic_guoneitiaoma.png"),
           path: "/search/internal",
         },
@@ -45,7 +45,7 @@ export default {
           path: "/search/shortcode",
         },
         {
-          name: "境外商品条码信息查询",
+          name: "境外条码信息查询",
           img: require("./img/pic_jingwaishangpin.png"),
           path: "/search/external",
         },

src/views/Service/barcodeV.vue

 <template>
   <div class="search-content barcodev">
-    <div class="title">境内条码信息公告查询</div>
+    <div class="title"><a href="http://static.gds.org.cn/ws/index.html" target="_blank" style="color: #454545;">条码微站</a></div>
     <div class="body" style="padding-top: 9px">
       <p>
         条码微站是由中国物品编码中心基于国家标准打造的商品二维码综合服务平台，旨在为企业打通线上线下的沟通渠道，帮助企业轻松建立官方门户，及时发布商品资讯，令产品理念直达目标客户；通过线上生成商品二维码，在移动互联网环境展示产品、打造品牌、拓展市场，帮助企业在激烈的市场竞争中赢得先机。其核心优势在于为企业提供了权威的商品信息发布渠道，及商品二维码生成平台，通过扫描印制在包装上的二维码，企业可以实现现有资源的全面整合，打通线上线下销售渠道。</p>
@@ -25,10 +25,13 @@ export default {};
     font-size: 14px;
     font-weight: 400;
     color: #414345;
+     text-indent: 28px;
   }
 
   img {
     max-width: 94%;
+    display: block;
+    margin: 0 auto;
   }
 
   .barcodev-title{

src/views/Service/book.vue

@@ -58,13 +58,6 @@ export default {
       activeName: 'second',
       appList: [
         {
-          name: '条码追溯',
-          icon: require('./img/barcode-icon.png'),
-          desc: '手机客户端下载',
-          android: 'http://www.chinatrace.org/clientDownload.html',
-          ios: 'http://www.chinatrace.org/clientDownload.html',
-        },
-        {
           name: '中国物品编码中心',
           icon: require('./img/bmcode-icon.png'),
           desc: '手机客户端下载',
@@ -82,6 +75,13 @@ export default {
         {
           name: '条码追溯',
           icon: require('./img/barcode-icon.png'),
+          desc: '手机客户端下载',
+          android: 'http://www.chinatrace.org/clientDownload.html',
+          ios: 'http://www.chinatrace.org/clientDownload.html',
+        },
+        {
+          name: '条码追溯',
+          icon: require('./img/barcode-icon.png'),
           desc: '微信小程序',
           android: '',
           ios: '',
@@ -127,7 +127,7 @@ export default {
   .book-card {
     display: flex;
     height: 190px;
-    background: #FFFFFF;  
+    background: #FFFFFF;
     border-radius: 2px;
     border: 1px solid rgba(197, 216, 238, 0.5);
     margin-bottom: 30px;
@@ -177,11 +177,11 @@ export default {
 
   .app-download {
     display: flex;
-    height: 170px;
+    height: 140px;
     background: #FFFFFF;
     border-radius: 2px;
     border: 1px solid rgba(197, 216, 238, 0.5);
-    margin-bottom: 30px;
+    margin-bottom: 25px;
     cursor: pointer;
     &:hover{
       box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
@@ -190,11 +190,11 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
-      flex: 0 0 190px;
+      flex: 0 0 140px;
       background: rgba(197, 216, 238, 0.2);
 
       img {
-        width: 90px;
+        width: 80px;
       }
     }
 
@@ -203,7 +203,7 @@ export default {
       flex-direction: column;
       justify-content: space-between;
       flex: 1;
-      padding: 30px 20px;
+      padding: 20px 20px;
 
       .title {
         font-size: 20px;