feat: 我要编码和常见问题切图完成

src/assets/css/_mixin.scss

@@ -263,7 +263,9 @@
 
 // 超宽显示省略号
 @mixin ellipsis {
+	@media screen and (min-width: 992px){
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
+	}	
 }
\ No newline at end of file

src/router/index.js

@@ -77,6 +77,22 @@ const routes = [
             },
             component: () => import("@/views/Business/Guide.vue"),
           },
+          {
+            path: "/Business/Code",
+            name: "Code",
+            meta: {
+              name: "我要编码",
+            },
+            component: () => import("@/views/Business/Code.vue"),
+          },
+          {
+            path: "/Business/Fap",
+            name: "Fap",
+            meta: {
+              name: "常见问题",
+            },
+            component: () => import("@/views/Business/Fap.vue"),
+          },
         ],
       },
     ],

src/views/Business/Code.vue

+<template>
+  <div class="guide">
+    <cate :father="lsspCate"></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 {
+      lsspCate: {
+        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/Fap.vue

+<template>
+  <div class="fap">
+    <cate :father="faqCate"></cate>
+    <div class="container">
+      <ul class="nav nav-tabs" id="myTab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <button
+            class="nav-link active"
+            id="home-tab"
+            data-bs-toggle="tab"
+            data-bs-target="#home"
+            type="button"
+            role="tab"
+            aria-controls="home"
+            aria-selected="true"
+          >
+            全部问题
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button
+            class="nav-link"
+            id="profile-tab"
+            data-bs-toggle="tab"
+            data-bs-target="#profile"
+            type="button"
+            role="tab"
+            aria-controls="profile"
+            aria-selected="false"
+          >
+            业务办理
+          </button>
+        </li>
+      </ul>
+      <div class="search">
+        <el-input placeholder="请输入内容" v-model="search.keywords" clearable>
+        </el-input
+        ><button>查询</button>
+      </div>
+      <div class="tab-content" id="myTabContent">
+        <div
+          class="tab-pane fade show active"
+          id="home"
+          role="tabpanel"
+          aria-labelledby="home-tab"
+        >
+          <faqTable />
+          <pages />
+        </div>
+        <div
+          class="tab-pane fade"
+          id="profile"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
+          <faqTable />
+          <pages />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import cate from "../comps/cate.vue";
+import faqTable from "./copms/table.vue";
+import pages from "../comps/pages.vue";
+
+export default {
+  components: {
+    cate,
+    faqTable,
+    pages,
+  },
+  data() {
+    return {
+      faqCate: {
+        name: "常见问题",
+        ico: "",
+      },
+      search: {
+        keywords: "",
+      },
+    };
+  },
+};
+</script>
+<style lang="scss">
+.fap {
+  @include module-box;
+  @include module-box;
+  .nav-tabs {
+    margin: 10px 0;
+    border-bottom: 1px solid #c5d8ee;
+    .nav-link {
+      border: 0;
+      color: #454545;
+      &.active,
+      &:hover {
+        border-bottom: 3px solid #f26335;
+        color: #04408d;
+      }
+    }
+  }
+  .search {
+    margin: 30px 0;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    .el-input {
+      max-width: 240px;
+    }
+    input {
+      height: 40px;
+      background: #ffffff;
+      border-radius: 4px 0 0 4px;
+      border: 1px solid #cfdcea;
+      border-right: 0;
+      box-sizing: border-box;
+    }
+    button {
+      color: #ffffff;
+      width: 80px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      background: #f26335;
+      border-radius: 0px 4px 4px 0px;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Business/copms/bgxz.vue

@@ -38,7 +38,7 @@ export default {
       font-size: 14px;
       display: flex;
       align-items: center;
-      line-height: 40px;
+      padding: 10px 0;
       span {
         &:nth-child(1) {
           width: 6px;
@@ -49,9 +49,7 @@ export default {
         }
         &:nth-child(2) {
           flex: 1;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
+          @include ellipsis;
         }
       }
     }

src/views/Business/copms/list.vue

 <template>
-  <ul class="list">
-    <li v-for="(tmp, i) in 10" :key="i">
-      <div class="list-left">
+  <div class="list">
+    <div v-for="(tmp, i) in 10" :key="i" class="row">
+      <div class="col-lg-6 list-left">
         <span></span>
         <span>墨玉树上老菌菌业有限公司</span>
       </div>
-      <div class="list-right">2020-10-20</div>
-    </li>
-  </ul>
+      <div class="col-lg-2 list-right">2020-10-20</div>
+    </div>
+  </div>
 </template>
 <style lang="scss" scoped>
 .list {
   margin: 0;
   padding: 0;
-  li {
+  .row {
     display: flex;
     justify-content: space-between;
     border-bottom: 1px dashed #c5d8ee;
     padding: 20px 0;
+    margin: 0;
     .list-left {
       flex: 1;
       display: flex;
@@ -38,6 +39,9 @@
         }
       }
     }
+    .list-right{
+      text-align: right;
+    }
   }
 }
 </style>
\ No newline at end of file

src/views/Business/copms/table.vue

+<template>
+  <div class="fqtable">
+    <div class="row fqthead">
+      <div class="col-lg-2">序号</div>
+      <div class="col-lg-8">标题</div>
+      <div class="col-lg-2">类型</div>
+    </div>
+    <div class="fqtbody ">
+      <div class="row" v-for="(tmp, i) in 10" :key="i">
+        <div class="col-lg-2">{{i+1}}</div>
+        <div class="col-lg-8">企业申请注册厂商识别代码是否必须到中国物品编码中心总部办理?</div>
+        <div class="col-lg-2">业务办理</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.fqtable {
+  .fqthead {
+    background: #f7f7f7;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 10px 0;
+    li {
+      &:nth-child(1) {
+        width: 116px;
+        padding-left: 30px;
+      }
+      &:nth-child(2) {
+        flex: 1;
+      }
+      &:nth-child(3) {
+        width: 125px;
+      }
+    }
+  }
+  .fqtbody{
+      .row{
+          padding: 20px 0;
+          margin: 0;
+          border-bottom: 1px solid #E9E9E9;
+      }
+  }
+}
+</style>
\ No newline at end of file

src/views/Business/copms/tmgg.vue

@@ -37,7 +37,8 @@ export default {
       li{
           font-size: 14px;
           display: flex;
-          line-height: 40px;
+          align-items: center;
+          padding: 10px 0;
           span{
               &:nth-child(1){
                   color: rgba(0, 121, 158, 1);

src/views/Business/copms/zcfg.vue

@@ -37,13 +37,11 @@ export default {
       font-size: 14px;
       display: flex;
       align-items: center;
-      line-height: 40px;
+      padding: 10px 0;
       span {
         &:nth-child(1) {
           flex: 1;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
+          @include ellipsis;
         }
       }
     }