add 官网嵌入车主平台架构

Andy
1 parent 00e29fae
Showing 10 changed files with 180 additions and 201 deletions
src/components/SvgIcon/index.vue
src/components/VHeader.vue
src/components/config.js
src/layout/components/Navbar.vue
src/layout/components/Sidebar/index.vue
src/main.js
src/router/index.js
src/router/parkservice.js
src/styles/element-ui.scss
src/views/service.vue
 <template>
-  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
-  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
     <use :xlink:href="iconName" />
   </svg>
 </template>
 <script>
-// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
-import { isExternal } from '@/utils/validate'
-
-export default {
-  name: 'SvgIcon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    isExternal() {
-      return isExternal(this.iconClass)
-    },
-    iconName() {
-      return `#icon-${this.iconClass}`
-    },
-    svgClass() {
-      if (this.className) {
-        return 'svg-icon ' + this.className
-      } else {
-        return 'svg-icon'
+  export default {
+    name: 'SvgIcon',
+    props: {
+      iconClass: {
+        type: String,
+        required: true
+      },
+      className: {
+        type: String,
+        default: ''
       }
     },
-    styleExternalIcon() {
-      return {
-        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
-        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+    computed: {
+      iconName() {
+        return `#icon-${this.iconClass}`
+      },
+      svgClass() {
+        if (this.className) {
+          return 'svg-icon ' + this.className
+        } else {
+          return 'svg-icon'
+        }
       }
     }
   }
-}
 </script>
 <style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-
-.svg-external-icon {
-  background-color: currentColor;
-  mask-size: cover!important;
-  display: inline-block;
-}
+  .svg-icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+  }
 </style>
@@ -38,7 +38,7 @@ export default {
 }
 </script>
-<style scoped lang="scss">
+<style lang="scss">
   /* http://meyerweb.com/eric/tools/css/reset/
    v4.0 | 20180602
    License: none (public domain)
-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
@@ -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,9 +11,19 @@
           <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">退出</span>
+            <span style="display:block;" @click="logout">Log Out</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -23,12 +33,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: {
@@ -12,7 +12,7 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
+        <sidebar-item v-for="route in totalList" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
   </div>
@@ -51,6 +51,9 @@ export default {
     isCollapse() {
       return !this.sidebar.opened
     }
-  }
+  },
+  created(){
+    this.totalList = config.children
+  },
 }
 </script>
@@ -4,7 +4,7 @@ import &#39;normalize.css/normalize.css&#39; // A modern alternative to CSS resets
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
-import locale from 'element-ui/lib/locale/lang/en' // lang i18n
+// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
 import '@/styles/index.scss' // global css
@@ -34,7 +34,7 @@ Object.keys(filters).forEach(key =&gt; {
   Vue.filter(key, filters[key])
 })
 // set ElementUI lang to EN
-Vue.use(ElementUI, { locale })
+Vue.use(ElementUI)
 Vue.config.productionTip = false
@@ -4,7 +4,6 @@ import Router from &#39;vue-router&#39;
 import Layout from '@/layout'
 import home from '@/views/home'
 // 引用 news 子路由配置文件
-import parkservice from './parkservice.js'
 Vue.use(Router)
 /* Layout */
@@ -56,12 +55,59 @@ export const constantRoutes = [
   },
   {
     path: '/service',
-    component: Layout,
+    redirect:'/dashboard',
+    component: () => import('@/views/service'),
     meta: {
       title: '停车服务'
     },
-    children: parkservice
+    children:[
+      {
+        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' }
+      }
+    ]
   },
   {
     path: '/center',
-
-
-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' }
-  }
-]
-
 // cover some element-ui styles
-
+@import url("//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css");
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
   font-weight: 400 !important;
+
+<template>
+  <div >
+    <el-container style="min-height: 550px">
+      <el-aside width="210px" style="background-color: rgb(84, 92, 100);">
+        <!--左侧菜单组件-->
+        <el-menu
+          default-active="2"
+          class="el-menu-vertical-demo"
+          @open="handleOpen"
+          @close="handleClose"
+          background-color="#545c64"
+          text-color="#fff"
+          active-text-color="#409eff" router>
+          <el-menu-item index="/dashboard" class="is-active">
+            <i class="el-icon-menu "></i>
+            <span slot="title">服务首页</span>
+          </el-menu-item>
+          <el-submenu index="1">
+            <template slot="title">
+              <i class="el-icon-bank-card"></i>
+              <span>我的钱包</span>
+            </template>
+            <el-menu-item index="/account">我的账户</el-menu-item>
+            <el-menu-item index="/cardticket">我的卡券</el-menu-item>
+          </el-submenu>
+          <el-menu-item index="/order">
+            <i class="el-icon-tickets"></i>
+            <span slot="title">我的订单</span>
+          </el-menu-item>
+          <el-menu-item index="/payback">
+            <i class="el-icon-finished"></i>
+            <span slot="title">欠费补缴</span>
+          </el-menu-item>
+          <el-menu-item index="/mycar">
+            <i class="el-icon-truck"></i>
+            <span slot="title">我的车辆</span>
+          </el-menu-item>
+          <el-submenu index="2">
+            <template slot="title">
+              <i class="el-icon-user-solid"></i>
+              <span>个人中心</span>
+            </template>
+            <el-menu-item index="/information">个人资料</el-menu-item>
+            <el-menu-item index="/myevaluate">我的评价</el-menu-item>
+          </el-submenu>
+        </el-menu>
+      </el-aside>
+
+      <el-main class="app-container">
+        <router-view :key="key" />
+      </el-main>
+    </el-container>
+
+  </div>
+
+</template>
+
+<script>
+  export default {
+    computed: {
+      key() {
+        return this.index
+      }
+    },
+    methods: {
+      handleOpen(key, keyPath) {
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
+    }
+  }
+
+</script>
+<style scoped>
+
+</style>