feat: 地方编码分支机构切图50%

src/assets/css/main.scss

@@ -4,3 +4,7 @@
 @import "./_icon.scss";
 @import "./_mixin.scss";
 @import "./_base.scss";
+@import "../../../node_modules/bootstrap/scss/bootstrap";
+// @import "../../../node_modules/bootstrap/scss/functions";
+// @import "../../../node_modules/bootstrap/scss/variables";
+// @import "../../../node_modules/bootstrap/scss/mixins";
\ No newline at end of file

src/components/layout/footer.vue

@@ -71,9 +71,8 @@ export default {
 .foot {
   background: #fff;
   .foot-cate {
-    font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
-    color: #0e2c6b;
+    color: #0E2C6B;
     font-size: 16px;
     margin-bottom: 10px;
     margin-top: 30px;
@@ -98,6 +97,7 @@ export default {
   .link {
     div {
       line-height: 30px;
+      color: #0E2C6B;
     }
   }
   .qrcode {

src/components/main.vue

 <template>
   <div>
     <Header></Header>
+    <div class="router-view">
       <router-view></router-view>
+    </div>
     <Footer></Footer>
   </div>
 </template>
@@ -27,5 +29,8 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+.router-view{
+  padding: 20px 0;
+}
 </style>

src/router/index.js

@@ -6,7 +6,7 @@ Vue.use(VueRouter)
 
 // 解决首页路由跳转的时候同一个路由多次添加，未跳转完成就重复跳转
 const routerPush = VueRouter.prototype.push
-VueRouter.prototype.push = function push (to) {
+VueRouter.prototype.push = function push(to) {
     return routerPush.call(this, to).catch(err => err)
 }
 
@@ -29,22 +29,32 @@ const routes = [
                 meta: {
                     name: "机构概况",
                 },
-                component: () => import("@/views/Org/index")
+                component: () => import("@/views/Org/index"),
+                children: [
+                    {
+                        path: "/Org/Branch",
+                        name: "Branch",
+                        meta: {
+                            name: "地方编码分支机构",
+                        },
+                        component: () => import("@/views/Org/Branch.vue")
+                    }
+                ],
             }
         ]
     },
-    {
-        path: "/",
-        redirect: "/login"
-    },
+    // {
+    //     path: "/",
+    //     redirect: "/login"
+    // },
     {
         path: "*",
         redirect: "/404"
     },
     {
-        path:"/404",
-        name:"404",
-        component:() => import("@/views/User/404")
+        path: "/404",
+        name: "404",
+        component: () => import("@/views/User/404")
     },
     {
         path: "/login",

src/views/Org/Branch.vue

+<template>
+  <div class="branch">
+    <div class="cate-name">地方编码分支机构</div>
+
+    <div class="alert alert-danger d-flex align-items-center" role="alert">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="bi flex-shrink-0 me-2"
+        width="16"
+        height="19"
+        role="img"
+        aria-label="Danger:"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+      >
+        <path
+          d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
+        />
+      </svg>
+      <div>
+        在地为下列市或直辖市或自治区的企业，办理条码申办及相关业务时，请联系以下编码分支机构：
+      </div>
+    </div>
+
+    <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"
+        >
+          Home
+        </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"
+        >
+          Profile
+        </button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button
+          class="nav-link"
+          id="contact-tab"
+          data-bs-toggle="tab"
+          data-bs-target="#contact"
+          type="button"
+          role="tab"
+          aria-controls="contact"
+          aria-selected="false"
+        >
+          Contact
+        </button>
+      </li>
+      
+    </ul>
+    <div class="tab-content" id="myTabContent">
+      <div
+        class="tab-pane fade show active"
+        id="home"
+        role="tabpanel"
+        aria-labelledby="home-tab"
+      >
+        11
+      </div>
+      <div
+        class="tab-pane fade"
+        id="profile"
+        role="tabpanel"
+        aria-labelledby="profile-tab"
+      >
+        222
+      </div>
+      <div
+        class="tab-pane fade"
+        id="contact"
+        role="tabpanel"
+        aria-labelledby="contact-tab"
+      >
+        33
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  created() {
+    console.log(this.$route, "this.$route");
+  },
+};
+</script>
+<style lang="scss" scoped>
+.branch {
+  .cate-name {
+    color: #454545;
+    font-size: 18px;
+  }
+  .alert {
+    margin: 30px 0 20px 0;
+    font-size: 14px;
+  }
+  .alert-danger {
+    @include alert-variant(#fef1ec, none, #f26335);
+  }
+}
+</style>
\ No newline at end of file

src/views/Org/index.vue

 <template>
-  <div>
-    ORG
+  <div class="org container">
+    <nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="#">首页</a></li>
+        <li class="breadcrumb-item"><a href="#">机构概况</a></li>
+        <li class="breadcrumb-item active" aria-current="page">地方编码分支机构</li>
+      </ol>
+    </nav>
+    <div class="row">
+      <div class="col-lg-3">
+        <left/>
+      </div>
+      <div class="col-lg-9">
+        <router-view></router-view>
+      </div>
+    </div>
   </div>
 </template>
 <script>
+import left from '../comps/left.vue'
+
 export default {
+  components: {
+    left,
+  },
   data() {
-    return {
-      
-    }
+    return {};
   },
   created() {
-    console.log(this.$route, 'this.$route');
+    console.log(this.$route, "this.$route");
   },
-}
+};
 </script>
 <style lang="scss" scoped>
-  
+.org{
+  .breadcrumb{
+    margin-bottom: 20px;
+    a{
+      color: #00799E;
+    }
+  }
+}
 </style>
\ No newline at end of file

src/views/comps/left.vue

+<template>
+  <div class="left">
+    <div class="list-group">
+      <a
+        href="#"
+        class="list-group-item list-group-item-action"
+        aria-current="true"
+      >
+        中心简介
+      </a>
+      <a href="#" class="list-group-item list-group-item-action">中心领导</a>
+      <a href="#" class="list-group-item list-group-item-action">内设机构</a>
+      <a href="#" class="list-group-item list-group-item-action"
+        >质检中心/协会/杂志社/标委会/其他</a
+      >
+      <a class="list-group-item list-group-item-action active"
+        >地方编码分支机构</a
+      >
+      <a class="list-group-item list-group-item-action"
+        >国际物品编码组织（GS1）</a
+      >
+      <a class="list-group-item list-group-item-action"
+        >国际物品编码组织（GS1）成员网站</a
+      >
+      <a class="list-group-item list-group-item-action">质量管理体系</a>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.left {
+  background: #fff;
+  .list-group {
+    border-radius: 0;
+    .list-group-item {
+      border: 0;
+      font-size: 14px;
+      &.active {
+        background: rgba(242, 99, 53, 0.1);
+        color: #f26335;
+        border-right: 3px solid #f26335;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

vue.config.js

@@ -32,7 +32,7 @@ module.exports = {
                 camelCase: true,
             },
             sass: {
-                data: `@import "@/assets/css/_style.scss";`
+                data: `@import "@/assets/css/main.scss";`
             }
         }
     },