收费公示切图完成

src/components/layout/header/mock.js

@@ -212,6 +212,28 @@ export const nav = [
                             { name: "我还不是系统成员", path: "/Business/Register" },
                             { name: "收费公示" },
                         ],
+                    },
+                    {
+                        id: uuid("gs_nav"),
+                        name: "收费目录清单",
+                        index: 2,
+                        link: "/Business/Corppay",
+                        breadcrumb: [
+                            { name: "业务大厅", path: "/Business" },
+                            { name: "我还不是系统成员", path: "/Business/Register" },
+                            { name: "收费目录清单" },
+                        ],
+                    },
+                    {
+                        id: uuid("gs_nav"),
+                        name: "其他增值服务费",
+                        index: 2,
+                        link: "/Business/serviceFee",
+                        breadcrumb: [
+                            { name: "业务大厅", path: "/Business" },
+                            { name: "我还不是系统成员", path: "/Business/Register" },
+                            { name: "其他增值服务费" },
+                        ],
                     }
                 ],
             }

src/router/index.js

@@ -190,6 +190,22 @@ const routes = [
             component: () => import("@/views/Business/Corppaynew.vue"),
           },
           {
+            path: "/Business/Corppay",
+            name: "Corppay",
+            meta: {
+              name: "收费目录清单",
+            },
+            component: () => import("@/views/Business/Corppay.vue"),
+          },
+          {
+            path: "/Business/serviceFee",
+            name: "serviceFee",
+            meta: {
+              name: "其他增值服务费",
+            },
+            component: () => import("@/views/Business/serviceFee.vue"),
+          },
+          {
             path: "/Business/Notice",
             name: "Notice",
             meta: {

src/views/Business/Corppay.vue

+<template>
+  <div class="corppay">
+    <cate :father="sfmlqdCate"></cate>
+    <div class="corppay-msg container">
+      <div id="main" class="main">
+        <div class="article-body">
+          <p class="sfmlqd-note">
+            为贯彻落实国家“放管服”改革精神，切实减轻企业负担，中国物品编码中心决定，自2019年4月1日起，下调条码服务费标准如下：
+          </p>
+        </div>
+        <p>
+          <a href="javascript:void('0')" name="1" ref="1">一次性加入费</a>
+        </p>
+        <table class="table table-striped table-hover">
+          <thead>
+            <tr>
+              <th>分类</th>
+              <th>收费标准</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th>十三位数字标准码一次性加入费</th>
+              <td>800元</td>
+            </tr>
+            <tr>
+              <th>十三位数字标准码和八位数字缩短码一次性加入费</th>
+              <td>1200元</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="article-body">
+        <p>
+          <a href="javascript:void('0')" name="2" ref="2">胶片制作费</a>
+        </p>
+        <table class="table table-striped table-hover">
+          <tbody>
+            <tr>
+              <th>收费标准</th>
+              <td>32元/张</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="article-body">
+        <p>
+          <a href="javascript:void('0')" name="3" ref="3">系统维护费</a>
+        </p>
+        <table class="table table-striped table-hover">
+          <thead>
+            <tr>
+              <th>分类</th>
+              <th>收费标准</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th>单个企业</th>
+              <td>640元/年</td>
+            </tr>
+            <tr>
+              <th>集团公司</th>
+              <td>1200元/年</td>
+            </tr>
+            <tr>
+              <th>进出口公司</th>
+              <td>1200元/年</td>
+            </tr>
+          </tbody>
+        </table>
+        <p class="title">执收单位:</p>
+        <p>中国物品编码中心</p>
+        <p class="title">资金管理：</p>
+        <p>通过银行电汇或信汇办理缴费业务:</p>
+        <ul class="text-explain">
+          <li>开户名称：中国物品编码中心</li>
+          <li>开户银行：交通银行北京分行和平里支行</li>
+          <li>银行帐号：110060224010149084052</li>
+        </ul>
+        <p class="title">全国价格监管平台举报电话：</p>
+        <p>12358</p>
+        <p class="title">质检行政管理部门电话：</p>
+        <p>12365</p>
+        <p class="title">中国物品编码中心联系电话：</p>
+        <p>400-7000-690</p>
+        <p class="title">中国物品编码中心联系邮箱：</p>
+        <p>
+          <a href="mailto:lill@ancc.org.cn">services@ancc.org.cn</a>
+        </p>
+      </div>
+    </div>
+    <cate :father="fwxmqdCate"></cate>
+    <div class="corppay-msg container">
+      <div class="article-body">
+        <p>
+          <a href="javascript:void('0')" name="4" ref="4">服务项目与服务内容</a>
+        </p>
+        <p style="text-align: center; font-size: 18px; font-family: 微软雅黑">
+          <b>中国商品条码系统成员服务项目与服务内容</b>
+        </p>
+        <table class="table table-striped table-hover fwxmyfwnr">
+          <thead>
+            <tr>
+              <th style="width: 50px; font-size: 14px">序号</th>
+              <th style="width: 100px; text-align: center; font-size: 14px">
+                服务项目
+              </th>
+              <th>服务内容</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th>1</th>
+              <td>编码分配</td>
+              <td>
+                提供符合国家标准、国际通用的厂商识别代码，系统成员享有厂商识别代码的专用权，可用于对产品、位置、资产、物流、服务关系等的编码与标识。
+              </td>
+            </tr>
+            <tr>
+              <th>2</th>
+              <td>培训与咨询</td>
+              <td>
+                提供商品条码技术与应用的基础知识培训与相关咨询服务，提供用户手册、刊物等资料。
+              </td>
+            </tr>
+            <tr>
+              <th>3</th>
+              <td>产品信息服务</td>
+              <td>提供产品条码信息存储与查询服务。</td>
+            </tr>
+            <tr>
+              <th>4</th>
+              <td>条码检测</td>
+              <td>
+                提供每年不超过2个商品条码符号的检测服务（出具《商品条码符号检测数据》）。
+              </td>
+            </tr>
+            <tr>
+              <th>5</th>
+              <td>公告</td>
+              <td>
+                通过中国物品编码中心官方网站或其他指定媒体发布系统成员注册及注销公告。
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <p class="title">收费政策依据文件号</p>
+        <p>
+          <a
+            href="http://www.ndrc.gov.cn/zcfb/zcfbtz/201506/t20150623_696756.html"
+            target="_balnk"
+          >
+            《国家发展改革委关于放开部分检验检测经营服务收费的通知》（发改价格[2015]1299号）</a
+          >
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import cate from "../comps/cate.vue";
+
+export default {
+  components: {
+    cate,
+  },
+  data() {
+    return {
+      sfmlqdCate: {
+        name: "收费目录清单",
+        ico: "",
+      },
+      fwxmqdCate: {
+        name: "服务项目清单",
+        ico: "",
+      },
+    };
+  },
+  watch: {
+    $route: {
+      handler(val) {
+        this.$nextTick(() => {
+          const top = this.$refs[val.query.id].offsetTop;
+          window.scrollTo(0, top);
+        });
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    // console.log(this.$route.query.id)
+  },
+};
+</script>
+<style lang="scss" scoped>
+.corppay {
+  @include module-box;
+  .corppay-msg {
+    margin: 30px 0;
+    font-size: 14px;
+    a {
+      color: #008dbd;
+      text-decoration: none;
+    }
+    table {
+      table-layout: fixed;
+      font-size: 14px;
+      max-width: 100%;
+      background-color: transparent;
+      tbody {
+        tr {
+          &:nth-child(odd) {
+            td {
+              border-bottom: 0;
+            }
+          }
+        }
+      }
+    }
+    thead {
+      border: 1px solid #b2b2b8;
+      display: table-header-group;
+      vertical-align: middle;
+      box-sizing: border-box;
+      tr {
+        th {
+          text-align: center;
+        }
+      }
+    }
+
+    tbody {
+      border: 1px solid #b2b2b8;
+      display: table-row-group;
+      vertical-align: middle;
+      box-sizing: border-box;
+      tr:last-child {
+        td {
+          border-bottom: none;
+        }
+      }
+    }
+    tr {
+      border: 1px solid #b2b2b8;
+      box-sizing: border-box;
+      display: table-row;
+      vertical-align: inherit;
+    }
+    th {
+      border: 1px solid #b2b2b8;
+      text-align: center;
+    }
+    td {
+      border: 1px solid #b2b2b8;
+      text-align: center;
+    }
+    .text-explain {
+      li {
+        display: list-item;
+        list-style-type: disc;
+      }
+    }
+    .table {
+      tbody {
+        tr {
+          th {
+            border-top: none;
+          }
+          td {
+            border-top: none;
+          }
+        }
+      }
+      thead {
+        tr {
+          th {
+            border: none;
+            vertical-align: bottom;
+          }
+        }
+        &:first-child {
+          tr {
+            &:first-child {
+              th {
+                border-top: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+    .table-striped {
+      tbody {
+        tr:nth-child(odd) {
+          th {
+            background-color: #f5f5f5;
+          }
+          td {
+            background-color: #f5f5f5;
+          }
+        }
+      }
+    }
+    .sfmlqd-note {
+      text-indent: 25px;
+      border-bottom: 1px solid rgb(178, 178, 184);
+      padding-bottom: 10px;
+    }
+    .title {
+      border-bottom: 1px solid #b2b2b8;
+      padding-bottom: 10px;
+      font-size: 14px;
+      margin-top: 40px;
+      color: #454545;
+    }
+    .fwxmyfwnr {
+      td {
+        &:nth-child(3) {
+          text-align: left;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Business/index.vue

@@ -3,7 +3,7 @@
     <breadcrumb />
     <div class="row">
       <div class="col-lg-3">
-        <left2 :list="routes" />
+        <left2 :list="routes" ref="left" />
       </div>
       <div class="col-lg-9">
         <router-view class="marginTopLg20"></router-view>
@@ -60,25 +60,29 @@ export default {
                   children: [
                     {
                       name: "一次性加入费",
-                      path: "#",
-                      active: "",
+                      path: "/Business/Corppay",
+                      active: "1",
+                      noneChild: true,
                     },
                     {
                       name: "胶片制作费",
-                      path: "#",
-                      active: "",
+                      path: "/Business/Corppay",
+                      active: "2",
+                      noneChild: true,
                     },
                     {
                       name: "系统维护",
-                      path: "#",
-                      active: "",
+                      path: "/Business/Corppay",
+                      active: "3",
+                      noneChild: true,
                     },
                     {
                       name: "其他增值服务费",
-                      path: "#",
-                      active: "",
-                    }
-                  ]
+                      path: "/Business/serviceFee",
+                      active: "serviceFee",
+                      noneChild: true,
+                    },
+                  ],
                 },
                 {
                   name: "服务项目清单",
@@ -87,9 +91,10 @@ export default {
                   children: [
                     {
                       name: "服务项目与服务内容",
-                      path: "#",
-                      active: "",
-                    }
+                      path: "/Business/Corppay",
+                      active: "4",
+                      noneChild: true,
+                    },
                   ],
                 },
               ],
@@ -202,13 +207,19 @@ export default {
     routes() {
       let newRouteList = [];
       const currentPath = this.$route.path;
-      const currentRoute = this.deepFindCurrentRoute(this.routeList, currentPath);
-      console.log(currentRoute, 'currentRoute');
+      const currentRoute = this.deepFindCurrentRoute(
+        this.routeList,
+        currentPath
+      );
       if (currentRoute.children && currentRoute.children.length > 0) {
         newRouteList = currentRoute.children;
+      } else if (currentRoute.noneChild) {
+        const oldRouteList = JSON.parse(localStorage.getItem('newRouteList'))
+        newRouteList = oldRouteList;
       } else {
         newRouteList = this.routeList;
       }
+      localStorage.setItem('newRouteList', JSON.stringify(newRouteList));
       // newRouteList = this.deepFindRouteList(this.routeList, currentPath);
       // console.log(newRouteList, 'newRouteListnewRouteList2')
       return newRouteList;

src/views/Business/serviceFee.vue

+<template>
+  <div class="corppaynew">
+    <cate :father="qtzzfwfCate"></cate>
+    <div class="corppaynew-msg container">
+      <div class="section_main">
+        <table border="1">
+          <tbody>
+            <tr>
+              <th>收费主体</th>
+              <th>收费项目</th>
+              <th>收费标准</th>
+              <th>收费依据</th>
+            </tr>
+            <tr>
+              <td>中国物品编码中心</td>
+              <td>
+                信息咨询、技术咨询费、技术开发、技术成果转让、技术服务收费
+              </td>
+              <td>市场定价（或合同定价）</td>
+              <td>
+                《关于事业单位和社会团体有关收费管理问题的通知》（财规【2000】47号）
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <p class="text_indent">
+          除固定产品与服务外，额外对社会企业提供非标准化定制服务与解决方案，包括但不限于产品信息整理，产品信息数据清洗，产品信息逻辑处理，产品信息交换、产品信息托管、产品信息数据分析等为满足特定需求而定制的接入接出或者填写规则等多种定制化服务。
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import cate from "../comps/cate.vue";
+
+export default {
+  components: {
+    cate,
+  },
+  data() {
+    return {
+      qtzzfwfCate: {
+        name: "其他类型定制服务",
+        ico: "",
+      },
+    };
+  },
+};
+</script>
+<style lang="scss">
+.corppaynew {
+  @media screen and (min-width: 992px) {
+    .hidden-xs {
+      display: block;
+    }
+    .visible-xs {
+      display: none;
+    }
+  }
+  @media screen and (max-width: 992px) {
+    .hidden-xs {
+      display: none;
+    }
+    .visible-xs {
+      display: block;
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.corppaynew {
+  @include module-box;
+  .corppaynew-msg {
+    margin: 30px 0;
+    font-size: 14px;
+    .section_main {
+      table {
+        width: 100%;
+        margin: 0 auto;
+        border: 1px solid #aaa;
+        border-spacing: 0;
+        border-collapse: collapse;
+        tr {
+          th {
+            text-align: center;
+            border-width: 1px;
+          }
+          td {
+            border: 1px solid #aaa;
+            padding: 8px;
+            text-align: center;
+          }
+          &:last-child {
+            td {
+              border-bottom: 1px solid #b1b3b3;
+            }
+          }
+        }
+      }
+      tbody {
+        display: table-row-group;
+        vertical-align: middle;
+        border-color: inherit;
+      }
+      tr {
+        display: table-row;
+        vertical-align: inherit;
+        border-color: inherit;
+      }
+      th {
+        display: table-cell;
+        vertical-align: inherit;
+        font-weight: bold;
+      }
+      p {
+        line-height: 28px;
+      }
+      .text_indent {
+        text-indent: 2em;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/comps/left2.vue

@@ -16,7 +16,7 @@
             <el-menu-item-group>
               <el-menu-item
                 :index="i + 1 + '-' + (ii + 1)"
-                :class="{ 'is-active': tmpB.active === currentName }"
+                :class="{ active: tmpB.active === currentName || tmpB.active == $route.query.id }"
                 v-for="(tmpB, ii) in tmpA.children"
                 :key="ii"
                 @click="jump(tmpB)"
@@ -29,7 +29,7 @@
           <el-menu-item
             :index="String(i + 1)"
             :key="i"
-            :class="{ 'is-active': tmpA.active === currentName }"
+            :class="{ active: tmpA.active === currentName }"
             >{{ tmpA.name }}</el-menu-item
           >
         </template>
@@ -53,7 +53,7 @@ export default {
     },
   },
   created() {
-    // console.log(this.$route, "获取当前路由地址");
+    // console.log(this.$route.query.id, "获取当前路由地址");
     this.list.forEach((el, index) => {
       this.defaultOpeneds.push(String(index + 1));
     });
@@ -71,10 +71,19 @@ export default {
         if (result && result.breadcrumb) {
           this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
         }
+        if (el.active) {
+          this.$router.push({
+            path: el.path,
+            query: {
+              id: el.active,
+            },
+          });
+        } else {
           this.$router.push({
             path: el.path,
           });
         }
+      }
     },
     deepFindBreadcrumb(menuList, activePath) {
       let current = [];
@@ -135,7 +144,7 @@ export default {
       }
       &:hover,
       &:focus,
-      &.is-active {
+      &.active {
         color: #f26335;
         background: $side-menu-active-color;
         border-right: 3px solid #f26335;