feat: 地方编码分支机构切图完成

src/views/Org/Branch.vue

@@ -34,7 +34,7 @@
           aria-controls="home"
           aria-selected="true"
         >
-          Home
+          华北
         </button>
       </li>
       <li class="nav-item" role="presentation">
@@ -48,7 +48,7 @@
           aria-controls="profile"
           aria-selected="false"
         >
-          Profile
+          东北
         </button>
       </li>
       <li class="nav-item" role="presentation">
@@ -62,7 +62,7 @@
           aria-controls="contact"
           aria-selected="false"
         >
-          Contact
+          华东
         </button>
       </li>
       
@@ -74,7 +74,7 @@
         role="tabpanel"
         aria-labelledby="home-tab"
       >
-        11
+        <fzzx/>
       </div>
       <div
         class="tab-pane fade"
@@ -82,7 +82,7 @@
         role="tabpanel"
         aria-labelledby="profile-tab"
       >
-        222
+        <fzzx/>
       </div>
       <div
         class="tab-pane fade"
@@ -90,13 +90,18 @@
         role="tabpanel"
         aria-labelledby="contact-tab"
       >
-        33
+        <fzzx/>
       </div>
     </div>
   </div>
 </template>
 <script>
+import fzzx from './comps/fzzx.vue'
+
 export default {
+  components: {
+    fzzx,
+  },
   data() {
     return {};
   },
@@ -114,9 +119,28 @@ export default {
   .alert {
     margin: 30px 0 20px 0;
     font-size: 14px;
+    justify-content: center;
   }
   .alert-danger {
     @include alert-variant(#fef1ec, none, #f26335);
   }
+  .nav-tabs{
+    background: #FFFFFF;
+    box-shadow: 0px 3px 10px 0px rgba(4, 64, 141, 0.1);
+    border-radius: 2px;
+    .nav-link{
+      border: 0;
+      color: #454545;
+      &.active, &:hover{
+        border-bottom: 3px solid #F26335;
+        color: #04408D;
+      }
+    }
+  }
+  .tab-pane{
+    background: #FFFFFF;
+    border-radius: 4px;
+    margin-top: 20px;
+  }
 }
 </style>
\ No newline at end of file

src/views/Org/comps/fzzx.vue

+<template>
+    <div class="fzzx">
+        <div class="cate-name">分中心名称</div>
+        <div class="fzzx-list">
+            <div class="row">
+                <div class="col-6">北京分中心</div>
+                <div class="col-6">天津分中心</div>
+            </div>
+            <div class="row">
+                <div class="col-6">河北分中心</div>
+                <div class="col-6">山西分中心</div>
+            </div>
+        </div>
+    </div>
+</template>
+<style lang="scss">
+.fzzx{
+    width: 90%;
+    margin: 0 auto;
+    padding: 20px 0;
+    font-size: 14px;
+    .cate-name{
+        color: #454545;
+    }
+    .fzzx-list{
+        margin-top: 20px;
+        .row{
+            line-height: 40px;
+            margin: 0;
+            &:nth-child(odd) {
+                background: rgba(242, 99, 53, 0.04);
+            }
+        }
+    }
+} 
+</style>
\ No newline at end of file

src/views/Org/index.vue

 <template>
   <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>
+    <breadcrumb/>
     <div class="row">
       <div class="col-lg-3">
         <left/>
@@ -19,10 +13,12 @@
 </template>
 <script>
 import left from '../comps/left.vue'
+import breadcrumb from '../comps/breadcrumb.vue'
 
 export default {
   components: {
     left,
+    breadcrumb,
   },
   data() {
     return {};
@@ -33,12 +29,4 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.org{
-  .breadcrumb{
-    margin-bottom: 20px;
-    a{
-      color: #00799E;
-    }
-  }
-}
 </style>
\ No newline at end of file

src/views/comps/breadcrumb.vue

+<template>
+    <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>
+</template>
+<style lang="scss">
+.breadcrumb{
+    margin-bottom: 20px ;
+    a{
+      color: #00799E;
+      text-decoration: none;
+    }
+  }
+</style>
\ No newline at end of file

src/views/comps/left.vue

@@ -29,11 +29,13 @@
 <style lang="scss" scoped>
 .left {
   background: #fff;
+  padding: 10px 0;
   .list-group {
     border-radius: 0;
     .list-group-item {
       border: 0;
       font-size: 14px;
+      padding: 1rem;
       &.active {
         background: rgba(242, 99, 53, 0.1);
         color: #f26335;