add 官网嵌入车主平台架构

Andy
1 parent 4140a1b0
Showing 11 changed files with 233 additions and 158 deletions
src/components/NavMenu.vue
src/components/VHeader.vue
src/components/config.js
src/icons/svg/car.svg
src/icons/svg/card.svg
src/icons/svg/skill.svg
src/layout/components/Navbar.vue
src/router/index.js
src/router/parkservice.js
src/styles/index.scss
src/views/service.vue
+<template>
+  <div class="navMenu">
+
+    <label v-for="navMenu in navMenus">
+
+      <el-menu-item v-if="navMenu.childs==null&&navMenu.entity"
+                    :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.url">
+        <i :class="navMenu.entity.icon"></i>
+        <span slot="title">{{navMenu.entity.title}}</span>
+      </el-menu-item>
+
+      <el-submenu v-if="navMenu.childs&&navMenu.entity"
+                  :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.url">
+        <template slot="title">
+          <i :class="navMenu.entity.icon"></i>
+          <span>{{navMenu.entity.title}}</span>
+        </template>
+        <NavMenu :navMenus="navMenu.childs"></NavMenu>
+      </el-submenu>
+    </label>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'NavMenu',
+    props: ['navMenus'],
+    data() {
+      return {}
+    },
+    methods: {}
+  }
+</script>
+<style scoped>
+
+</style>
@@ -31,7 +31,7 @@ export default {
         {name:'停车服务',routerLink:'/service'},
         {name:'官网中心',routerLink:'/center'},
         {name:'黄石停车',routerLink:'/park'},
-        {name:'联系我们',routerLink:'/about'},
+        {name:'关于我们',routerLink:'/about'},
       ]
     }
   }
+let config = {
+    "entity": null,
+    "childs": [
+        {
+            "entity": {
+                "id": 1, //id标识
+                "title": "中心首页", //菜单标题
+                "icon": "el-icon-s-home",//菜单logo
+                "url": "/views/dashboard",//菜单路径
+            },
+        },
+        {
+            "entity": {
+              "id": 2,
+              "title": "我的钱包",
+              "icon": "el-icon-bank-card",
+              "url": "example",
+            },
+            "childs": [
+              {
+                "entity": {
+                  "id": 2-1,
+                  "title": "我的账户",
+                  "url": "account",
+                },
+                "childs": null
+              },
+              {
+                "entity": {
+                  "id": 2-2,
+                  "title": "我的卡券",
+                  "url": "cardticket",
+                }
+              },
+            ]
+        },
+        {
+          "entity": {
+            "id": 3,
+            "title": "我的订单",
+            "icon": "el-icon-tickets",
+            "url": "order",
+          },
+
+        },
+        {
+            "entity": {
+              "id": 4,
+              "title": "欠费补缴",
+              "icon": "el-icon-document-checked",
+              "url": "payback",
+            }
+        },
+        {
+            "entity": {
+              "id": 5,
+              "title": "我的车辆",
+              "icon": "el-icon-truck",
+              "url": "mycar",
+            }
+        },
+        {
+            "entity": {
+              "id": 6,
+              "title": "个人中心",
+              "icon": "el-icon-s-custom",
+              "url": "mycar",
+            },
+          "childs": [
+            {
+              "entity": {
+                "id": 6-1,
+                "title": "个人资料",
+                "url": "information",
+              },
+              "childs": null
+            },
+            {
+              "entity": {
+                "id": 6-2,
+                "title": "我的评价",
+                "url": "myevaluate",
+              }
+            },
+          ]
+        },
+    ]
+}
+export default config
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1563085767981" class="icon" viewBox="0 0 1039 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8025" width="16.234375" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M939.223 862.773c-12.304 49.581-55.964 85.734-107.63 85.734-47.96 0-88.809-30.728-104.355-75.017H296.752c-15.547 44.323-56.429 75.017-104.39 75.017-51.665 0-95.258-36.153-107.596-85.734-53.717-22.525-87.95-78.126-83.452-139.847l10.551-143.583c4.134-57.322 40.22-107.994 91.919-131.61l46.44-223.827c17-81.83 97.21-148.414 178.843-148.414h365.855c81.632 0 161.842 66.55 178.81 148.414l46.44 223.826c51.698 23.616 87.784 74.29 91.952 131.61l10.518 143.584c4.498 61.722-29.702 117.323-83.419 139.847z m10.585-278.634c-2.744-37.277-30.165-71.114-66.748-82.293-11.974-3.672-20.673-14.29-22.128-26.991-0.231-1.818-0.363-3.605-0.462-5.358-0.067-0.926-0.067-1.885-0.264-2.845l-47.564-229.384c-11.015-52.954-64.929-97.706-117.718-97.706H329.067c-52.823 0-106.705 44.752-117.718 97.706l-47.597 229.417c-0.199 0.86-0.199 1.82-0.265 2.778-0.132 1.82-0.264 3.673-0.462 5.491-1.488 12.702-10.155 23.253-22.095 26.924-36.615 11.147-64.068 44.983-66.78 82.294L63.63 727.756c-2.812 38.203 20.242 70.849 56.064 79.35 13.562 3.274 23.418 15.38 24.113 29.67 1.29 26.758 22.625 47.694 48.556 47.694 25.336 0 46.108-19.68 48.358-45.81 1.455-16.504 14.95-29.173 31.124-29.173h480.267c16.174 0 29.735 12.669 31.125 29.174 2.249 26.13 23.02 45.81 48.357 45.81 25.931 0 47.265-20.97 48.556-47.695 0.727-14.356 10.584-26.429 24.146-29.67 35.788-8.501 58.843-41.18 55.997-79.384L949.808 584.14zM840.26 711.284c-13.098 13.396-31.455 21.202-49.945 21.202-18.49 0-36.847-7.807-49.913-21.202-13.065-13.396-20.672-32.216-20.672-51.169 0-18.952 7.607-37.806 20.672-51.202 13.066-13.396 31.423-21.202 49.913-21.202s36.847 7.807 49.945 21.202c13.065 13.396 20.672 32.25 20.672 51.202 0 18.953-7.607 37.773-20.672 51.169z m-59.934-245.26c-6.12 7.574-16.076 11.974-27.684 11.974h-481.36c-11.576 0-21.533-4.4-28.081-12.438-6.25-7.376-8.93-18.093-7.177-29.702 0.165-0.794 0.297-1.555 0.463-2.316l37.806-168.457c4.763-26.593 30.43-48.754 56.825-48.754h361.688c26.395 0 52.063 22.226 56.792 48.754l37.806 168.49c0.199 0.761 0.331 1.523 0.463 2.317 1.72 11.609-0.926 22.326-7.54 30.132z m-91.324-185.657H335.02L305.021 413.93H718.97l-29.968-133.562zM283.587 711.284c-13.066 13.396-31.423 21.202-49.913 21.202s-36.846-7.807-49.912-21.202c-13.098-13.396-20.705-32.216-20.705-51.169 0-18.952 7.607-37.806 20.705-51.202 13.066-13.396 31.423-21.202 49.912-21.202 18.49 0 36.847 7.807 49.913 21.202 13.098 13.396 20.705 32.25 20.705 51.202 0 18.953-7.607 37.773-20.705 51.169z" p-id="8026"></path></svg>
 \ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1563085850624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8732" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M512 825.6c-19.2 0-32-12.8-32-32L480 588.8c0-19.2 12.8-32 32-32s32 12.8 32 32l0 204.8C544 812.8 531.2 825.6 512 825.6z" p-id="8733"></path><path d="M633.6 704 390.4 704c-19.2 0-32-12.8-32-32S377.6 640 390.4 640l236.8 0c19.2 0 32 12.8 32 32S646.4 704 633.6 704z" p-id="8734"></path><path d="M512 620.8c-6.4 0-19.2 0-25.6-6.4L377.6 499.2c-12.8-12.8-12.8-32 0-44.8s32-12.8 44.8 0l108.8 108.8c12.8 12.8 12.8 32 0 44.8C531.2 620.8 518.4 620.8 512 620.8z" p-id="8735"></path><path d="M512 620.8c-6.4 0-19.2 0-25.6-6.4C480 601.6 480 576 486.4 569.6l108.8-108.8c12.8-12.8 32-12.8 44.8 0s12.8 32 0 44.8L537.6 614.4C531.2 620.8 518.4 620.8 512 620.8z" p-id="8736"></path><path d="M812.8 1024 211.2 1024c-51.2 0-96-44.8-96-96L115.2 492.8c0-19.2 12.8-32 32-32 38.4 0 70.4-32 70.4-70.4S185.6 313.6 147.2 313.6C128 313.6 115.2 300.8 115.2 281.6L115.2 96C115.2 44.8 160 0 211.2 0l601.6 0c51.2 0 96 44.8 96 96l0 185.6c0 19.2-12.8 32-32 32-38.4 0-70.4 32-70.4 70.4s32 70.4 70.4 70.4c19.2 0 32 12.8 32 32l0 435.2C908.8 979.2 864 1024 812.8 1024zM179.2 524.8l0 403.2C179.2 947.2 192 960 211.2 960l601.6 0c19.2 0 32-12.8 32-32L844.8 524.8c-57.6-12.8-102.4-70.4-102.4-134.4s44.8-121.6 102.4-134.4L844.8 96C844.8 76.8 832 64 812.8 64L211.2 64C192 64 179.2 76.8 179.2 96L179.2 256c57.6 12.8 102.4 70.4 102.4 134.4S236.8 505.6 179.2 524.8z" p-id="8737"></path><path d="M633.6 230.4 390.4 230.4c-19.2 0-32-12.8-32-32s12.8-32 32-32l236.8 0c19.2 0 32 12.8 32 32S646.4 230.4 633.6 230.4z" p-id="8738"></path></svg>
 \ No newline at end of file
+<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M31.652 93.206h33.401c1.44 2.418 3.077 4.663 4.93 6.692h-38.33v-6.692zm0-10.586h28.914a44.8 44.8 0 0 1-1.264-6.688h-27.65v6.688zm0-17.27H59.39c.288-2.286.714-4.532 1.34-6.687H31.65v6.687h.003zm53.913 44.84v5.85c0 2.798-2.095 5.075-4.667 5.075h-70.07c-2.576 0-4.663-2.277-4.663-5.075V31.26l23.22-20.96v22.25H17.16v6.688h18.39V6.688h45.348c2.576 0 4.667 2.277 4.667 5.066v20.009c1.987-.675 4.053-1.128 6.17-1.445v-18.56C91.738 5.28 86.874 0 80.902 0H31.15L0 28.118v87.917c0 6.48 4.859 11.759 10.832 11.759h70.07c5.974 0 10.837-5.27 10.837-11.759v-4.41c-2.117-.312-4.183-.765-6.17-1.435h-.004zM23.279 58.667h-7.96v6.688h7.96v-6.688zm-7.956 41.23h7.96v-6.691h-7.96v6.692zm7.956-23.96h-7.96v6.687h7.96v-6.688zm89.718-15.042l-4.896-4.07-12.447 17.613-11.19-9.305-3.762 5.311 16.091 13.38 16.204-22.929zM128 70.978c0-18.632-13.97-33.782-31.147-33.782-17.168 0-31.135 15.155-31.135 33.782 0 18.628 13.97 33.783 31.135 33.783 17.172 0 31.143-15.15 31.143-33.783H128zm-6.17 0c0 14.933-11.203 27.1-24.981 27.1-13.77 0-24.987-12.158-24.987-27.1 0-14.941 11.195-27.099 24.987-27.099 13.778 0 24.982 12.158 24.982 27.1z"/></svg>
 \ No newline at end of file
@@ -2,7 +2,7 @@
   <div class="navbar">
     <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <breadcrumb class="breadcrumb-container" />
+    <!--<breadcrumb class="breadcrumb-container" />-->
     <div class="right-menu">
       <el-dropdown class="avatar-container" trigger="click">
@@ -11,19 +11,9 @@
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
-          <router-link to="/">
-            <el-dropdown-item>
-              Home
-            </el-dropdown-item>
-          </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
+
           <el-dropdown-item divided>
-            <span style="display:block;" @click="logout">Log Out</span>
+            <span style="display:block;" @click="logout">退出</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -33,12 +23,12 @@
 <script>
 import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
+// import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 export default {
   components: {
-    Breadcrumb,
+    // Breadcrumb,
     Hamburger
   },
   computed: {
 import Vue from 'vue'
 import Router from 'vue-router'
+/* Layout */
+import Layout from '@/layout'
 import home from '@/views/home'
-
+// 引用 news 子路由配置文件
+import parkservice from './parkservice.js'
 Vue.use(Router)
 /* Layout */
-import Layout from '@/layout'
-export const defaultRoutes = [
-
-    {
-      path: '/',
-      redirect:'/home'
-    },
-    {
-      path: '/home',
-      name: 'home',
-      component:home,
-      meta: {
-        title: '首页'
-      }
-    },
-    {
-      path: '/about',
-      name: 'about',
-      component: () => import('@/views/about'),
-      meta: {
-        title: '关于我们'
-      }
-    },
-    {
-      path: '/service',
-      name: 'service',
-      component: () => import('@/views/login/index'),
-      hidden: true,
-      meta: {
-        title: '停车服务'
-      }
-    },
-    /*{
-      path: '/service',
-      name: 'service',
-      component: () => import('../views/service'),
-      meta: {
-        title: '停车服务'
-      }
-    },*/
-    {
-      path: '/center',
-      name: 'center',
-      component: () => import('@/views/center'),
-      meta: {
-        title: '官网中心'
-      }
-    },
-    {
-      path: '/park',
-      name: 'park',
-      component: () => import('@/views/park'),
-      meta: {
-        title: '黄石停车'
-      }
-    },
+// import Layout from '@/layout'
-  ];
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -90,114 +37,75 @@ export const defaultRoutes = [
  */
 export const constantRoutes = [
   {
-    path: '/login',
-    component: () => import('@/views/login/index'),
-    hidden: true
+    path: '/',
+    redirect:'/home'
   },
-
   {
-    path: '/404',
-    component: () => import('@/views/404'),
-    hidden: true
+    path: '/home',
+    name: 'home',
+    component:home,
+    meta: {
+      title: '首页'
+    }
   },
   {
-    path: '/dashboard',
-    component: Layout,
-    redirect: '/dashboard',
-    children: [{
-      path: 'dashboard',
-      name: '首页',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: '首页', icon: 'dashboard' }
-    }]
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
   },
-
   {
-    path: '/example',
+    path: '/service',
     component: Layout,
-    name: '我的钱包',
-    meta: { title: '我的钱包', icon: 'money' },
-    children: [
-      {
-        path: 'account',
-        component: () => import('@/views/account/index'),
-        meta: { title: '我的账户', }
-      },
-      {
-        path: 'cardticket',
-        component: () => import('@/views/cardticket/index'),
-        meta: { title: '我的卡券',  }
-      }
-    ]
-  },
+    meta: {
+      title: '停车服务'
+    },
+    children: parkservice
+  },
   {
-    path: '/order',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/order/index'),
-        meta: { title: '我的订单', icon: 'form' }
-      }
-    ]
+    path: '/center',
+    name: 'center',
+    component: () => import('@/views/center'),
+    meta: {
+      title: '官网中心'
+    }
   },
   {
-    path: '/payback',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/payback/index'),
-        meta: { title: '欠费补缴', icon: 'nested' }
-      }
-    ]
+    path: '/park',
+    name: 'park',
+    component: () => import('@/views/park'),
+    meta: {
+      title: '黄石停车'
+    }
   },
-
   {
-    path: '/mycar',
-    component: Layout,
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/mycar/index'),
-        meta: { title: '我的车辆', icon: 'people' }
-      }
-    ]
+    path: '/about',
+    name: 'about',
+    component: () => import('@/views/about'),
+    meta: {
+      title: '关于我们'
+    }
   },
   {
-    path: '/owncenter',
-    component: Layout,
-    meta: {
-      title: '个人中心',
-      icon: 'user'
-    },
-    children: [
-      {
-        path: 'information',
-        component: () => import('@/views/information/index'),
-        meta: { title: '个人资料' }
-      },
-      {
-        path: 'myevaluate',
-        component: () => import('@/views/myevaluate/index'),
-        meta: { title: '我的评价' }
-      }
-    ]
+    path: '/404',
+    component: () => import('@/views/404'),
+    hidden: true
   },
+
+
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]
-
 const createRouter = () => new Router({
   // mode: 'history', // require service support
   scrollBehavior: () => ({ y: 0 }),
   linkExactActiveClass:'navActive',
-  routes: defaultRoutes,
+  // routes: defaultRoutes,
+  routes: constantRoutes,
   // routes: [defaultRoutes,constantRoutes],
 })
+
+
+export default [
+
+  {
+    path: '/dashboard',
+    component: () => import('@/views/dashboard/index'),
+    meta: { title: '服务首页', icon: 'dashboard' }
+  },
+
+  {
+    path: '/account',
+    component: () => import('@/views/account/index'),
+    meta: { title: '我的账户',icon: 'money' }
+
+  },
+  {
+    path: 'cardticket',
+    component: () => import('@/views/cardticket/index'),
+    meta: { title: '我的卡券', icon: 'card' }
+  },
+
+  {
+    path: '/order',
+    component: () => import('@/views/order/index'),
+    meta: { title: '我的订单', icon: 'form' }
+  },
+  {
+    path: '/payback',
+    component: () => import('@/views/payback/index'),
+    meta: { title: '欠费补缴', icon: 'nested' }
+  },
+
+  {
+    path: '/mycar',
+    component: () => import('@/views/mycar/index'),
+    meta: { title: '我的车辆', icon: 'car' }
+
+  },
+  {
+    path: '/information',
+    component: () => import('@/views/information/index'),
+    meta: { title: '个人资料' ,icon: 'people'}
+  },
+  {
+    path: '/myevaluate',
+    component: () => import('@/views/myevaluate/index'),
+    meta: { title: '我的评价',icon: 'skill' }
+  }
+]
+
@@ -151,9 +151,6 @@ p{
 }
 /*自定义导航选中样式*/
-.navActive {
-  border-bottom: 2px solid #fff !important;
-}
 .banner {
   width: 100%;