feat: 新增模块分类公共组件和我要申请商品条码切图75%

src/assets/css/_mixin.scss

+// 模块盒子
+@mixin module-box{
+	background: #fff;
+    border: 1px solid #c5d8ee;
+}
+
 
 // 表单
 @mixin el-form {

src/router/index.js

@@ -53,7 +53,7 @@ const routes = [
                         path: "/Business/Register",
                         name: "Register",
                         meta: {
-                            name: "地方编码分支机构",
+                            name: "我要申请商品条码",
                         },
                         component: () => import("@/views/Business/Register.vue")
                     }

src/views/Business/Register.vue

 <template>
-    <div class="register">
-        <div class="container">
-            <div class="zxzc-btn">在线注册</div>
-            <img src="../../assets/image/business/barcode-register.png" class="barcode-register" alt="">
+  <div class="row">
+    <div class="col-lg-8">
+      <div class="register">
+        <div class="register-top register-cont">
+          <div class="container">
+              <div class="zxzc-btn">在线注册</div>
+          <img
+            src="../../assets/image/business/barcode-register.png"
+            class="barcode-register"
+            alt=""
+          />
         </div>
+          </div>
+        <div class="register-bottom register-cont">
+          <cate :father="zxcxgjCate"></cate>
+          <div class="row zxcxgj-ul">
+            <div class="col-lg-4" v-for="(tmp, i) in zxcxgjList" :key="i">
+              <img :src="tmp.ico" alt="" class="zxcxgj-img" />
+              <div class="zxcxgj-bt">{{ tmp.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-lg-4">
+        <tmgg/>
     </div>
+  </div>
 </template>
+<script>
+import tmgg from "./copms/tmgg.vue";
+import cate from "../comps/cate.vue";
+
+export default {
+  components: {
+    cate,
+    tmgg,
+  },
+  data() {
+    return {
+      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: "国家及地区前缀码查询",
+        },
+      ],
+      zxcxgjCate: {
+          name: '在线查询工具',
+          ico: require('../../assets/image/business/icon_gongju.png')
+      }
+    };
+  },
+};
+</script>
 <style lang="scss" scoped>
-.register{
-    background: #fff;
+.register {
+  .register-cont {
+    @include module-box;
+  }
+  .register-top {
     padding: 20px 0;
-    .zxzc-btn{
-        height: 44px;
-        line-height: 44px;
-        background: #F26335;
-        border-radius: 4px;
-        color: #FFFFFF;
-        font-size: 14px;
-        text-align: center;
-        
+    .zxzc-btn {
+      height: 44px;
+      line-height: 44px;
+      background: #f26335;
+      border-radius: 4px;
+      color: #ffffff;
+      font-size: 14px;
+      text-align: center;
+    }
+
+    .barcode-register {
+      width: 100%;
+      margin-top: 20px;
     }
-    .barcode-register{
-            width: 100%;
-            margin-top: 20px;
+  }
+  .register-bottom {
+    margin-top: 20px;
+    
+    .zxcxgj-ul {
+        padding: 12.5px 0;
+      > div {
+        margin: 12.5px 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/copms/tmgg.vue

+<template>
+  <div class="tmgg">
+      <cate :father="tmggCate"></cate>
+    <div class="container">
+      
+    </div>
+  </div>
+</template>
+<script>
+import cate from "../../comps/cate.vue";
+
+export default {
+  components: {
+    cate,
+  },
+  data() {
+    return {
+      tmggCate: {
+        name: "条码公告",
+        ico: require("../../../assets/image/business/icon_gonggao.png"),
+      },
+    };
+  },
+};
+</script>
+<style lang="scss">
+.tmgg {
+  @include module-box;
+}
+</style>
\ No newline at end of file

src/views/Business/index.vue

@@ -5,12 +5,9 @@
       <div class="col-lg-3">
         <left2/>
       </div>
-      <div class="col-lg-6">
+      <div class="col-lg-9">
         <router-view></router-view>
       </div>
-      <div class="col-lg-3">
-        右侧
-      </div>
     </div>
   </div>
 </template>

src/views/comps/cate.vue

+<template>
+  <div class="zxcxgj-cate">
+    <div class="container"><img :src="father.ico" />{{ father.name }}</div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["father"],
+};
+</script>
+<style lang="scss">
+.zxcxgj-cate {
+  font-size: 16px;
+  color: #04408d;
+  border-bottom: 1px solid #c5d8ee;
+  padding: 14px 0;
+  div {
+    display: flex;
+    align-items: center;
+  }
+  img {
+    margin-right: 5px;
+  }
+}
+</style>
\ No newline at end of file