操作指南详情切图完成

src/components/layout/footer.vue

@@ -42,12 +42,12 @@
         <div class="col col-lg-1">English</div>
       </div>
       <div class="foot-line"></div>
-      <div class="row foot-bottom">
-        <div class="col-lg-2">版权所有：中国物品编码中心</div>
-        <div class="col-lg-4">
+      <div class="foot-bottom">
+        <div>版权所有：中国物品编码中心</div>
+        <div>
           京ICP备11036137号-10 | 京公网安备11010102001434号
         </div>
-        <div class="col-lg-6">地址：北京市东城区安定门外大街138号皇</div>
+        <div>地址：北京市东城区安定门外大街138号皇</div>
       </div>
     </div>
   </div>
@@ -93,6 +93,14 @@ export default {
   }
   .foot-bottom{
     padding: 20px 0;
+    display: flex;
+    flex-wrap: wrap;
+    div{
+      margin-right: 20px;
+      &:last-child{
+        margin-right: 0;
+      }
+    }
   }
   .link {
     div {

src/router/index.js

@@ -64,6 +64,14 @@ const routes = [
                             name: "条码公告",
                         },
                         component: () => import("@/views/Business/Notice.vue")
+                    },
+                    {
+                        path: "/Business/Guide",
+                        name: "Guide",
+                        meta: {
+                            name: "操作指南",
+                        },
+                        component: () => import("@/views/Business/Guide.vue")
                     }
                 ],
             }

src/views/Business/Guide.vue

+<template>
+  <div class="guide">
+    <cate :father="czznCate"></cate>
+    <div class="guide-msg container">
+      <div class="msg-title">第一步：为不同的商品项目编制不同的商品标</div>
+      <div class="msg-cont">
+        在我国，零售商品的标识代码主要采用三种数据结构，即GTIN-13、GTIN-8和GTIN-12。通常情况下，选用13位的数字代码结构用EAN-13条码表示。只有当产品出口到北美地区并且客户指定时，才申请使用UCC-12代码（用UPC条码表示）。中国厂商如需申请UPC商品条码，须经中国物品编码中心统一办理。GTIN-13和GTIN-8的结构分别如图1、图2、图3所示。
+        1）GTIN-13的数据结构
+        （1）当前缀码为690、691时，EAN/UCC-13的代码结构如图1所示。
+        EAN/UCC-13代码结构一
+        （2）当前缀码为692、693时，EAN/UCC-13的代码结构如图2所示。
+        EAN/UCC-13代码结构二 A、厂商识别代码
+        厂商识别代码是由中国物品编码中心统一向申请厂商分配。厂商识别代码左起三位由国际物品编码协会分配给中国物品编码中心的前缀码。
+        B、商品项目代码 商品项目代码由厂商根据有关规定自行分配。 C、校验位
+        用来校验其他代码编码的正误。它有固定的计算方法，参见GB 12904附录。
+        2）EAN/UCC-8的代码结构如图3所示。 EAN/UCC-8代码结构
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import cate from "../comps/cate.vue";
+
+export default {
+  components: {
+    cate,
+  },
+  data() {
+    return {
+      czznCate: {
+        name: "操作指南",
+        ico: "",
+      },
+    };
+  },
+};
+</script>
+<style lang="scss">
+.guide {
+  @include module-box;
+  .guide-msg {
+    margin: 30px 0;
+    font-size: 14px;
+    .msg-title {
+      color: rgba(0, 121, 158, 1);
+
+      margin-bottom: 20px;
+    }
+    .msg-cont {
+      line-height: 23px;
+      color: rgba(102, 102, 102, 1);
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Business/Register.vue

@@ -12,7 +12,7 @@
           />
         </div>
           </div>
-        <div class="register-bottom register-cont">
+        <div class="register-bottom register-cont" v-if="false">
           <cate :father="zxcxgjCate"></cate>
           <div class="row zxcxgj-ul">
             <div class="col-lg-4" v-for="(tmp, i) in zxcxgjList" :key="i">

src/views/Business/copms/zxcxgj.vue

+<template>
+  <div class="zxcxgj">
+    <cate :father="zxcxgjCate"></cate>
+    <ul class="zxcxgj-ul">
+      <li v-for="(tmp, i) in zxcxgjList" :key="i">
+        <img :src="tmp.ico" alt="" class="zxcxgj-img" />
+        <div class="zxcxgj-bt">{{ tmp.name }}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import cate from "../../comps/cate.vue";
+
+export default {
+  components: {
+    cate,
+  },
+  data() {
+    return {
+      zxcxgjCate: {
+        name: "在线查询工具",
+        ico: require("../../../assets/image/business/icon_gongju.png"),
+      },
+      zxcxgjList: [
+        {
+          ico: require("../../../assets/image/business/icon_tiaomaxinxichaxun.png"),
+          name: "条码信息查询",
+        },
+        {
+          ico: require("../../../assets/image/business/icon_zixingche.png"),
+          name: "自行车企业代码公告查询",
+        },
+        {
+          ico: require("../../../assets/image/business/icon_tiaomashuyuchaxun.png"),
+          name: "条码术语查询",
+        },
+        {
+          ico: require("../../../assets/image/business/ico_xiaoyanma.png"),
+          name: "校验码计算工具",
+        },
+        {
+          ico: require("../../../assets/image/business/icon_guojia.png"),
+          name: "国家及地区前缀码查询",
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang="scss">
+.zxcxgj {
+  @include module-box;
+  .zxcxgj-ul {
+    padding: 15px 0;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    li {
+      margin: 15px 0;
+      text-align: center;
+      .zxcxgj-img {
+        margin-bottom: 13px;
+      }
+      .zxcxgj-bt {
+        color: #0e2c6b;
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Business/index.vue

@@ -9,16 +9,21 @@
         <router-view class="marginTopLg20"></router-view>
       </div>
     </div>
+    <div class="marginTop20">
+      <zxcxgj/>
+    </div>
   </div>
 </template>
 <script>
 import left2 from '../comps/left2.vue'
 import breadcrumb from '../comps/breadcrumb.vue'
+import zxcxgj from './copms/zxcxgj.vue'
 
 export default {
   components: {
     left2,
     breadcrumb,
+    zxcxgj,
   },
   data() {
     return {};

src/views/comps/pages.vue

@@ -60,6 +60,9 @@ export default {
   }
   .el-pager {
     li {
+      font-size: 12px;
+      padding: 0 2px;
+      min-width: 30px;
       &.active {
         color: #f26335;
         border: 1px solid #f26335;
@@ -81,9 +84,11 @@ export default {
   align-items: center;
   flex-wrap: wrap;
   font-size: 12px;
-  div {
+  >div {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-end;
   }
   .pages-left {
     .total {
@@ -91,6 +96,7 @@ export default {
     }
     .sizes {
       display: flex;
+      align-items: center;
       margin-left: 30px;
       span {
         margin-right: 10px;