我要申请商品条码切图100%

src/assets/css/_base.scss

@@ -424,3 +424,17 @@
 		}
 	}
 }
+
+
+
+
+// 外边距
+.marginTop20{
+	margin-top: 20px;
+}
+
+@media screen and (max-width: 992px){
+	.marginTopLg20{
+		margin-top: 20px;
+	}
+}
\ No newline at end of file

src/assets/css/_mixin.scss

@@ -2,6 +2,7 @@
 @mixin module-box{
 	background: #fff;
     border: 1px solid #c5d8ee;
+	border-radius: 4px;
 }
 
 

src/assets/css/_style.scss

@@ -47,3 +47,4 @@ $span-details:#4EA7A6;
 $span-click:#4EA7A6;
 $span-disabled:#4EA7A6;
 $span-actived:#4EA7A6;
+

src/views/Business/Register.vue

 <template>
   <div class="row">
     <div class="col-lg-8">
-      <div class="register">
+      <div class="register marginTopLg20">
         <div class="register-top register-cont">
           <div class="container">
               <div class="zxzc-btn">在线注册</div>
@@ -24,18 +24,27 @@
       </div>
     </div>
     <div class="col-lg-4">
-        <tmgg/>
+        <tmgg class="marginTopLg20"/>
+        <bgxz class="marginTop20"/>
+        <dffzjg class="marginTop20"/>
+        <zcfg class="marginTop20"/>
     </div>
   </div>
 </template>
 <script>
 import tmgg from "./copms/tmgg.vue";
+import bgxz from "./copms/bgxz.vue";
+import dffzjg from "./copms/dffzjg.vue";
+import zcfg from "./copms/zcfg.vue";
 import cate from "../comps/cate.vue";
 
 export default {
   components: {
     cate,
     tmgg,
+    dffzjg,
+    bgxz,
+    zcfg,
   },
   data() {
     return {

src/views/Business/copms/bgxz.vue

+<template>
+  <div class="bgxz">
+    <cate :father="bgxzCate"></cate>
+    <div class="container">
+      <ul class="tmgg-ul">
+        <li v-for="(tmp, i) in 4" :key="i">
+          <span></span>
+          <span>新疆西域之嘉乳业责任有限责任注册公司</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import cate from "../../comps/cate.vue";
+
+export default {
+  components: {
+    cate,
+  },
+  data() {
+    return {
+      bgxzCate: {
+        name: "表格下载",
+        ico: require("../../../assets/image/business/icon_down.png"),
+      },
+    };
+  },
+};
+</script>
+<style lang="scss">
+.bgxz {
+  @include module-box;
+  .tmgg-ul {
+    padding: 10px 0;
+    margin: 0;
+    li {
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      line-height: 40px;
+      span {
+        &:nth-child(1) {
+          width: 6px;
+          height: 6px;
+          background: #f26335;
+          margin-right: 10px;
+          transform: rotate(45deg);
+        }
+        &:nth-child(2) {
+          flex: 1;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Business/copms/dffzjg.vue

+<template>
+  <div class="dffzjg">
+    <cate :father="dffzjgCate"></cate>
+    <div class="container">
+      <div class="row dffzjg-ul">
+          <div class="col-auto" v-for="(tmp, i) in 20" :key="i">北京{{i}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import cate from "../../comps/cate.vue";
+
+export default {
+  components: {
+    cate,
+  },
+  data() {
+    return {
+      dffzjgCate: {
+        name: "地方分支机构",
+        ico: require("../../../assets/image/business/icon_jigou.png"),
+      },
+    };
+  },
+};
+</script>
+<style lang="scss">
+.dffzjg {
+  @include module-box;
+  .dffzjg-ul {
+    padding: 10px 0;    
+    div{
+        margin: 5px 0;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Business/copms/tmgg.vue

 <template>
   <div class="tmgg">
-      <cate :father="tmggCate"></cate>
+    <cate :father="tmggCate"></cate>
     <div class="container">
-      
+        <ul class="tmgg-ul">
+            <li v-for="(tmp, i) in 4" :key="i">
+                <span>【注册】</span>
+                <span>新疆西域之嘉乳业责任有限责任注册公司</span>
+            </li>
+        </ul>
     </div>
   </div>
 </template>
@@ -26,5 +31,25 @@ export default {
 <style lang="scss">
 .tmgg {
   @include module-box;
+  .tmgg-ul{
+      padding: 10px 0;
+      margin: 0;
+      li{
+          font-size: 14px;
+          display: flex;
+          line-height: 40px;
+          span{
+              &:nth-child(1){
+                  color: rgba(0, 121, 158, 1);
+              }
+              &:nth-child(2){
+                  flex: 1;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+              }
+          }
+      }
+  }
 }
 </style>
\ No newline at end of file

src/views/Business/copms/zcfg.vue

+<template>
+  <div class="zcfg">
+    <cate :father="zcfgCate"></cate>
+    <div class="container">
+      <ul class="zcfg-ul">
+        <li v-for="(tmp, i) in 4" :key="i">
+          <span>中华人民共和国标准化法</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import cate from "../../comps/cate.vue";
+
+export default {
+  components: {
+    cate,
+  },
+  data() {
+    return {
+      zcfgCate: {
+        name: "政策法规",
+        ico: require("../../../assets/image/business/icon_zhengce.png"),
+      },
+    };
+  },
+};
+</script>
+<style lang="scss">
+.zcfg {
+  @include module-box;
+  .zcfg-ul {
+    padding: 10px 0;
+    margin: 0;
+    li {
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      line-height: 40px;
+      span {
+        &:nth-child(1) {
+          flex: 1;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/comps/cate.vue

@@ -19,7 +19,7 @@ export default {
     align-items: center;
   }
   img {
-    margin-right: 5px;
+    margin-right: 9px;
   }
 }
 </style>
\ No newline at end of file