机构概况下地方编码分支机构详情页切图

src/components/layout/header/mock.js

@@ -75,6 +75,16 @@ export const nav = [
                     },
                     {
                         id: uuid("gs_nav"),
+                        name: "地方编码分支机构",
+                        index: 0,
+                        link: "/Org/BranchMsg",
+                        breadcrumb: [
+                            {name: "机构概况", path: "/Org"},
+                            {name: "地方编码分支机构"},
+                        ],
+                    },
+                    {
+                        id: uuid("gs_nav"),
                         name: "国际物品编码组织（GS1）成员网站",
                         index: 0,
                         link: "/Org/GS1Members",

src/router/index.js

@@ -82,6 +82,15 @@ const routes = [
             component: () => import("@/views/Org/Branch.vue"),
           },
           {
+            path: "/Org/BranchMsg",
+            name: "Branch",
+            meta: {
+              name: "地方编码分支机构",
+              hidden: true,
+            },
+            component: () => import("@/views/Org/BranchMsg.vue"),
+          },
+          {
             path: "https://www.gs1.org/",
             name: "GS1",
             meta: {

src/views/Org/BranchMsg.vue

+<template>
+  <div class="branchMsg">
+    <cate :father="branchMsgCate"></cate>
+    <div class="container">
+      <div class="branchMsg-cont">
+        <div class="message row">
+          <div class="tip col-lg-6 col-12">
+            <div class="tip-title"><span>重要提示</span></div>
+            <div class="tip-text">
+              <p></p>
+              <p>
+                湖北编码分支机构办理武汉所辖市以外的湖北省内企业的条码申办及相关业务，武汉市企业欲办理的，请联系<a
+                  href="/org/article.aspx?code_id=4202"
+                  >武汉编码分支机构</a
+                >。
+              </p>
+              <p></p>
+            </div>
+          </div>
+        </div>
+        <ul class="branchMsg-ul">
+          <li class="row">
+            <div class="col-lg-2 col-4">联系人:</div>
+            <div class="col-lg-10 col-8">吴永飞</div>
+          </li>
+          <li class="row">
+            <div class="col-lg-2 col-4">电&nbsp;&nbsp;&nbsp;&nbsp;话:</div>
+            <div class="col-lg-10 col-8">027-88224190</div>
+          </li>
+          <li class="row">
+            <div class="col-lg-2 col-4">传&nbsp;&nbsp;&nbsp;&nbsp;真:</div>
+            <div class="col-lg-10 col-8">010-64298962</div>
+          </li>
+          <li class="row">
+            <div class="col-lg-2 col-4">邮&nbsp;&nbsp;&nbsp;&nbsp;箱:</div>
+            <div class="col-lg-10 col-8">tiaomabj@126.com</div>
+          </li>
+          <li class="row">
+            <div class="col-lg-2 col-4">网&nbsp;&nbsp;&nbsp;&nbsp;址:</div>
+            <div class="col-lg-10 col-8">http://tiaoma.12365.net.cn</div>
+          </li>
+          <li class="row">
+            <div class="col-lg-2 col-4">地&nbsp;&nbsp;&nbsp;&nbsp;址:</div>
+            <div class="col-lg-10 col-8">北京市东城区和平里东街20号</div>
+          </li>
+          <li class="row">
+            <div class="col-lg-2 col-4">邮&nbsp;&nbsp;&nbsp;&nbsp;编:</div>
+            <div class="col-lg-10 col-8">100013</div>
+          </li>
+          <li class="row">
+            <div class="col-lg-2 col-4">简&nbsp;&nbsp;&nbsp;&nbsp;介:</div>
+            <div class="col-lg-10 col-8">
+              我们是中国物品编码中心设在北京的分支机构，负责北京地区企业申请使用商品条码及管理工作。负责初审本地区商品条码注册、变更、续展和注销；负责本地区商品条码技术培训,条码质检站的日常检测和管理及市场抽查检测，提供商品条码技术咨询与服务。
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import cate from "../comps/cate.vue";
+
+export default {
+  components: {
+    cate,
+  },
+  data() {
+    return {
+      branchMsgCate: {
+        name: "分中心名称",
+        ico: "",
+      },
+      tip: {
+        show: true,
+      }
+    };
+  },
+};
+</script>
+<style lang="scss">
+.branchMsg {
+  @media screen and (min-width: 992px) {
+    .message{
+      position: absolute;
+      right: 0;
+      top: 0;
+      display: flex;
+      justify-content: flex-end;
+      pointer-events: none;
+      .tip{
+        pointer-events: auto;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.branchMsg {
+  @include module-box;
+  .cate-name {
+    color: #454545;
+  }
+  .branchMsg-cont {
+    background-color: #edf5fa;
+    margin: 20px 0;
+    position: relative;
+    .message {
+      .tip {
+        p {
+          font-size: 16px;
+          line-height: 24px;
+          color: #454545;
+        }
+        .tip-title {
+          span {
+            background-color: #ff9900;
+            color: #fff;
+            padding: 2px 5px;
+            box-shadow: 1px 1px #666;
+          }
+        }
+        .tip-text {
+          border: 1px solid #ffd237;
+          padding: 2px;
+          margin: -18px 0 15px 15px;
+          p {
+            border: 1px solid #ffe793;
+            background-color: #fffce1;
+            margin-bottom: 0;
+            padding: 10px;
+            span {
+              line-height: 28px;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+    .pull-right {
+      float: right;
+    }
+    .branchMsg-ul {
+      padding: 0;
+      margin: 0;
+      li {
+        border-bottom: 1px solid #fff;
+        font-size: 14px;
+        padding: 10px 0;
+        &:last-child {
+          border: 0;
+        }
+        > div {
+          word-wrap: break-word;
+          &:first-child {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Org/comps/fzzx.vue

@@ -3,7 +3,9 @@
     <div class="cate-name">分中心名称</div>
     <div class="fzzx-list">
       <div class="row" v-for="(tmpA, i) in newList" :key="i">
-        <div class="col-6" v-for="(tmpB, ii) in tmpA" :key="ii">{{tmpB}}</div>
+        <div class="col-6" v-for="(tmpB, ii) in tmpA" :key="ii">
+          <span @click="openMsg(ii)">{{ tmpB }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -21,6 +23,14 @@ export default {
       return groupList(this.list, 2);
     },
   },
+  methods: {
+    openMsg(i) {
+      console.log(i, "i");
+      this.$router.push({
+        path: "/Org/BranchMsg",
+      });
+    },
+  },
 };
 </script>
 <style lang="scss">
@@ -37,6 +47,9 @@ export default {
     .row {
       line-height: 40px;
       margin: 0;
+      span {
+        cursor: pointer;
+      }
       &:nth-child(odd) {
         background: rgba(242, 99, 53, 0.04);
       }

src/views/comps/left.vue

 <template>
   <div class="left">
     <div class="list-group">
+      <template v-for="(tmp, i) in routeList">
         <a
           :class="[
             'list-group-item',
             'list-group-item-action',
             { active: tmp.name === currentRoute.name },
           ]"
-        v-for="(tmp, i) in routeList"
           :key="i"
           @click="jump(i)"
+          v-if="!tmp.meta.hidden"
           >{{ tmp.meta.name }}</a
         >
+      </template>
     </div>
   </div>
 </template>
@@ -31,7 +33,7 @@ export default {
         window.open(this.routeList[i].path, "_blank");
       } else {
         const result = this.deepFind(nav, this.routeList[i].path);
-        console.log(result, 'result')
+        console.log(result, "result");
         if (result && result.breadcrumb) {
           this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
         }
@@ -41,10 +43,14 @@ export default {
       }
     },
     deepFind(menuList, activePath) {
-      let current = []
+      let current = [];
       const deep = (arr, activePath) => {
         for (let i = 0; i < arr.length; i += 1) {
-          if (arr[i].link !== activePath && arr[i].children && arr[i].children.length > 0) {
+          if (
+            arr[i].link !== activePath &&
+            arr[i].children &&
+            arr[i].children.length > 0
+          ) {
             deep(arr[i].children, activePath);
           } else if (arr[i].link === activePath) {
             current = arr[i];