条码公告切图90%

src/assets/css/_mixin.scss

@@ -258,4 +258,12 @@
 			height: $input-height;
 		}
 	}
+}
+
+
+// 超宽显示省略号
+@mixin ellipsis {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
\ No newline at end of file

src/router/index.js

@@ -56,6 +56,14 @@ const routes = [
                             name: "我要申请商品条码",
                         },
                         component: () => import("@/views/Business/Register.vue")
+                    },
+                    {
+                        path: "/Business/Notice",
+                        name: "Notice",
+                        meta: {
+                            name: "条码公告",
+                        },
+                        component: () => import("@/views/Business/Notice.vue")
                     }
                 ],
             }

src/views/Business/Notice.vue

+<template>
+  <div class="tmgg">
+    <cate :father="tmggCate"></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="tab-content" id="myTabContent">
+        <div
+          class="tab-pane fade show active"
+          id="home"
+          role="tabpanel"
+          aria-labelledby="home-tab"
+        >
+          <list />
+          <pages />
+        </div>
+        <div
+          class="tab-pane fade"
+          id="profile"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
+          <list />
+          <pages />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import cate from "../comps/cate.vue";
+import pages from "../comps/pages.vue";
+import list from "./copms/list.vue";
+
+export default {
+  components: {
+    cate,
+    pages,
+    list,
+  },
+  data() {
+    return {
+      tmggCate: {
+        name: "条码公告 ",
+        ico: "",
+      },
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.tmgg {
+  @include module-box;
+  .nav-tabs {
+    margin: 10px 0;
+    border-bottom: 1px dashed #c5d8ee;
+    .nav-link {
+      border: 0;
+      color: #454545;
+      &.active,
+      &:hover {
+        border-bottom: 3px solid #f26335;
+        color: #04408d;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Business/copms/list.vue

+<template>
+  <ul class="list">
+    <li v-for="(tmp, i) in 10" :key="i">
+      <div class="list-left">
+        <span></span>
+        <span>墨玉树上老菌菌业有限公司</span>
+      </div>
+      <div class="list-right">2020-10-20</div>
+    </li>
+  </ul>
+</template>
+<style lang="scss" scoped>
+.list {
+  margin: 0;
+  padding: 0;
+  li {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px dashed #c5d8ee;
+    padding: 20px 0;
+    .list-left {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      @include ellipsis;
+      span {
+        display: inline-block;
+        &:nth-child(1) {
+          width: 4px;
+          height: 4px;
+          background: #f26335;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+        &:nth-child(2) {
+          flex: 1;
+          @include ellipsis;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Business/copms/tmgg.vue

@@ -44,9 +44,7 @@ export default {
               }
               &:nth-child(2){
                   flex: 1;
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
+                  @include ellipsis;
               }
           }
       }

src/views/Business/index.vue

@@ -6,7 +6,7 @@
         <left2/>
       </div>
       <div class="col-lg-9">
-        <router-view></router-view>
+        <router-view class="marginTopLg20"></router-view>
       </div>
     </div>
   </div>

src/views/comps/cate.vue

 <template>
   <div class="zxcxgj-cate">
-    <div class="container"><img :src="father.ico" />{{ father.name }}</div>
+    <div class="container"><img :src="father.ico" v-if="father.ico" />{{ father.name }}</div>
   </div>
 </template>
 <script>

src/views/comps/pages.vue

+<template>
+  <div class="pages">
+    <div class="pages-left">
+      <div class="total">共533条，第1/34页</div>
+      <div class="sizes">
+        <span>每页显示</span>
+        <el-select v-model="pages.size" size="mini">
+          <el-option
+            v-for="item in sizeList"
+            :key="item"
+            :label="item"
+            :value="item"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class="pages-middle">
+      <button class="pages-btn">首页</button>
+      <el-pagination
+        :page-size="20"
+        :pager-count="5"
+        layout="prev, pager, next"
+        :total="1000"
+      >
+      </el-pagination>
+      <button class="pages-btn">尾页</button>
+    </div>
+    <div class="pages-right">
+      <span>跳转至</span>
+      <div class="jumper">
+        <input type="text" />
+        <button class="pages-btn">GO</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      sizeList: [10, 20],
+      pages: {
+        size: 10,
+      },
+    };
+  },
+};
+</script>
+<style lang="scss">
+.pages {
+  .el-select {
+    width: 66px;
+
+    .el-input__inner {
+      border-radius: 0;
+      height: 30px;
+      line-height: 30px;
+    }
+  }
+  .el-pager {
+    li {
+      &.active {
+        color: #f26335;
+        border: 1px solid #f26335;
+      }
+    }
+  }
+  button {
+    font-size: 12px;
+    background: #ffffff;
+    height: 30px;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.pages {
+  padding: 20px 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 12px;
+  div {
+    display: flex;
+    align-items: center;
+  }
+  .pages-left {
+    .total {
+      color: #666666;
+    }
+    .sizes {
+      display: flex;
+      margin-left: 30px;
+      span {
+        margin-right: 10px;
+      }
+    }
+  }
+  .pages-middle {
+    margin-left: 10px;
+    .pages-btn {
+      border: 1px solid #cccccc;
+      border-radius: 0;
+    }
+  }
+  .pages-right {
+    margin-left: 10px;
+    span{
+        margin-right: 10px;
+    }
+    .jumper {
+      border: 1px solid #cccccc;
+      .pages-btn {
+        border-left: 1px solid #cccccc;
+      }
+      input{
+          width: 40px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file