Update the design

src/layout/components/Navbar.vue

@@ -5,7 +5,7 @@
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <!--template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
         <error-log class="errLog-container right-menu-item hover-effect" />
@@ -16,8 +16,11 @@
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
 
-      </template>
+      </template-->
 
+      <el-dropdown class="right-menu-item hover-effect" trigger="click">
+        <el-button icon="el-icon-bell" class="user-notif" />
+      </el-dropdown>
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="require('@/assets/img/profile.png')" class="user-avatar">
@@ -31,19 +34,19 @@
 import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
-import ErrorLog from '@/components/ErrorLog'
+// import ErrorLog from '@/components/ErrorLog'
-import Screenfull from '@/components/Screenfull'
+// import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
+// import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
+// import Search from '@/components/HeaderSearch'
 
 export default {
   components: {
     Breadcrumb,
-    Hamburger,
+    Hamburger
-    ErrorLog,
+    // ErrorLog,
-    Screenfull,
+    // Screenfull,
-    SizeSelect,
+    // SizeSelect,
-    Search
+    // Search
   },
   computed: {
     ...mapGetters([
@@ -65,6 +68,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.user-notif {
+  width: 40px;
+  padding-left: 12px;
+  color: #FF0000;
+}
+
 .navbar {
   height: 50px;
   overflow: hidden;
@@ -102,10 +111,9 @@ export default {
     &:focus {
       outline: none;
     }
-
     .right-menu-item {
       display: inline-block;
-      padding: 0 8px;
+      padding: 0 2px;
       height: 100%;
       font-size: 18px;
       color: #5a5e66;

src/layout/components/Sidebar/Logo.vue

@@ -3,11 +3,9 @@
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 v-else class="sidebar-title">{{ title }} </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo">
-        <h1 class="sidebar-title">{{ title }} </h1>
       </router-link>
     </transition>
   </div>
@@ -24,8 +22,8 @@ export default {
   },
   data() {
     return {
-      title: 'Vue Element Admin',
+      title: 'MSK Physio',
-      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
+      logo: require('@/assets/img/logo_long.png')
     }
   }
 }
@@ -55,8 +53,7 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
+      height: 80%;
-      height: 32px;
       vertical-align: middle;
       margin-right: 12px;
     }

src/router/index.js

@@ -7,10 +7,10 @@ Vue.use(Router)
 import Layout from '@/layout'
 
 /* Router Modules */
-import componentsRouter from './modules/components'
+// import componentsRouter from './modules/components'
-import chartsRouter from './modules/charts'
+// import chartsRouter from './modules/charts'
-import tableRouter from './modules/table'
+// import tableRouter from './modules/table'
-import nestedRouter from './modules/nested'
+// import nestedRouter from './modules/nested'
 
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -79,32 +79,32 @@ export const constantRoutes = [
         path: 'dashboard',
         component: () => import('@/views/dashboard/index'),
         name: 'Dashboard',
-        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
+        meta: { title: 'Dashboard', icon: 'el-icon-s-grid', affix: true }
       }
     ]
   },
   {
-    path: '/documentation',
+    path: '/booking',
     component: Layout,
     children: [
       {
         path: 'index',
         component: () => import('@/views/documentation/index'),
-        name: 'Documentation',
+        name: 'Booking',
-        meta: { title: 'Documentation', icon: 'documentation', affix: true }
+        meta: { title: 'Booking', icon: 'el-icon-date', affix: true }
       }
     ]
   },
   {
-    path: '/guide',
+    path: '/history',
     component: Layout,
     redirect: '/guide/index',
     children: [
       {
         path: 'index',
         component: () => import('@/views/guide/index'),
-        name: 'Guide',
+        name: 'History',
-        meta: { title: 'Guide', icon: 'guide', noCache: true }
+        meta: { title: 'History', icon: 'el-icon-edit-outline', noCache: true }
       }
     ]
   },
@@ -130,259 +130,77 @@ export const constantRoutes = [
  */
 export const asyncRoutes = [
   {
-    path: '/permission',
+    path: '/book',
-    component: Layout,
-    redirect: '/permission/page',
-    alwaysShow: true, // will always show the root menu
-    name: 'Permission',
-    meta: {
-      title: 'Permission',
-      icon: 'lock',
-      roles: ['admin', 'editor'] // you can set roles in root nav
-    },
-    children: [
-      {
-        path: 'page',
-        component: () => import('@/views/permission/page'),
-        name: 'PagePermission',
-        meta: {
-          title: 'Page Permission',
-          roles: ['admin'] // or you can only set roles in sub nav
-        }
-      },
-      {
-        path: 'directive',
-        component: () => import('@/views/permission/directive'),
-        name: 'DirectivePermission',
-        meta: {
-          title: 'Directive Permission'
-          // if do not set roles, means: this page does not require permission
-        }
-      },
-      {
-        path: 'role',
-        component: () => import('@/views/permission/role'),
-        name: 'RolePermission',
-        meta: {
-          title: 'Role Permission',
-          roles: ['admin']
-        }
-      }
-    ]
-  },
-
-  {
-    path: '/icon',
     component: Layout,
     children: [
       {
         path: 'index',
         component: () => import('@/views/icons/index'),
-        name: 'Icons',
+        name: 'Book a physio',
-        meta: { title: 'Icons', icon: 'icon', noCache: true }
+        meta: { title: 'Book a physio', icon: 'el-icon-first-aid-kit', noCache: true }
       }
     ]
   },
-
-  /** when your routing map is too long, you can split it into small modules **/
-  componentsRouter,
-  chartsRouter,
-  nestedRouter,
-  tableRouter,
-
   {
-    path: '/example',
+    path: '/profile',
-    component: Layout,
-    redirect: '/example/list',
-    name: 'Example',
-    meta: {
-      title: 'Example',
-      icon: 'el-icon-s-help'
-    },
-    children: [
-      {
-        path: 'create',
-        component: () => import('@/views/example/create'),
-        name: 'CreateArticle',
-        meta: { title: 'Create Article', icon: 'edit' }
-      },
-      {
-        path: 'edit/:id(\\d+)',
-        component: () => import('@/views/example/edit'),
-        name: 'EditArticle',
-        meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
-        hidden: true
-      },
-      {
-        path: 'list',
-        component: () => import('@/views/example/list'),
-        name: 'ArticleList',
-        meta: { title: 'Article List', icon: 'list' }
-      }
-    ]
-  },
-
-  {
-    path: '/tab',
     component: Layout,
     children: [
       {
         path: 'index',
-        component: () => import('@/views/tab/index'),
+        component: () => import('@/views/icons/index'),
-        name: 'Tab',
+        name: 'Profile',
-        meta: { title: 'Tab', icon: 'tab' }
+        meta: { title: 'Profile', icon: 'el-icon-set-up', noCache: true }
-      }
-    ]
-  },
-
-  {
-    path: '/error',
-    component: Layout,
-    redirect: 'noRedirect',
-    name: 'ErrorPages',
-    meta: {
-      title: 'Error Pages',
-      icon: '404'
-    },
-    children: [
-      {
-        path: '401',
-        component: () => import('@/views/error-page/401'),
-        name: 'Page401',
-        meta: { title: '401', noCache: true }
-      },
-      {
-        path: '404',
-        component: () => import('@/views/error-page/404'),
-        name: 'Page404',
-        meta: { title: '404', noCache: true }
-      }
-    ]
-  },
-
-  {
-    path: '/error-log',
-    component: Layout,
-    children: [
-      {
-        path: 'log',
-        component: () => import('@/views/error-log/index'),
-        name: 'ErrorLog',
-        meta: { title: 'Error Log', icon: 'bug' }
-      }
-    ]
-  },
-
-  {
-    path: '/excel',
-    component: Layout,
-    redirect: '/excel/export-excel',
-    name: 'Excel',
-    meta: {
-      title: 'Excel',
-      icon: 'excel'
-    },
-    children: [
-      {
-        path: 'export-excel',
-        component: () => import('@/views/excel/export-excel'),
-        name: 'ExportExcel',
-        meta: { title: 'Export Excel' }
-      },
-      {
-        path: 'export-selected-excel',
-        component: () => import('@/views/excel/select-excel'),
-        name: 'SelectExcel',
-        meta: { title: 'Export Selected' }
-      },
-      {
-        path: 'export-merge-header',
-        component: () => import('@/views/excel/merge-header'),
-        name: 'MergeHeader',
-        meta: { title: 'Merge Header' }
-      },
-      {
-        path: 'upload-excel',
-        component: () => import('@/views/excel/upload-excel'),
-        name: 'UploadExcel',
-        meta: { title: 'Upload Excel' }
-      }
-    ]
-  },
-
-  {
-    path: '/zip',
-    component: Layout,
-    redirect: '/zip/download',
-    alwaysShow: true,
-    name: 'Zip',
-    meta: { title: 'Zip', icon: 'zip' },
-    children: [
-      {
-        path: 'download',
-        component: () => import('@/views/zip/index'),
-        name: 'ExportZip',
-        meta: { title: 'Export Zip' }
-      }
-    ]
-  },
-
-  {
-    path: '/pdf',
-    component: Layout,
-    redirect: '/pdf/index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/pdf/index'),
-        name: 'PDF',
-        meta: { title: 'PDF', icon: 'pdf' }
       }
     ]
   },
   {
-    path: '/pdf/download',
+    path: '/injuries',
-    component: () => import('@/views/pdf/download'),
-    hidden: true
-  },
-
-  {
-    path: '/theme',
     component: Layout,
     children: [
       {
         path: 'index',
-        component: () => import('@/views/theme/index'),
+        component: () => import('@/views/icons/index'),
-        name: 'Theme',
+        name: 'Injuries',
-        meta: { title: 'Theme', icon: 'theme' }
+        meta: { title: 'Injuries', icon: 'el-icon-bangzhu', noCache: true }
       }
     ]
   },
-
   {
-    path: '/clipboard',
+    path: '/billing',
     component: Layout,
     children: [
       {
         path: 'index',
-        component: () => import('@/views/clipboard/index'),
+        component: () => import('@/views/icons/index'),
-        name: 'ClipboardDemo',
+        name: 'Billing',
-        meta: { title: 'Clipboard', icon: 'clipboard' }
+        meta: { title: 'Billing', icon: 'el-icon-bank-card', noCache: true }
       }
     ]
   },
-
   {
-    path: 'external-link',
+    path: '/consultation',
     component: Layout,
     children: [
       {
-        path: 'https://github.com/PanJiaChen/vue-element-admin',
+        path: 'index',
-        meta: { title: 'External Link', icon: 'link' }
+        component: () => import('@/views/icons/index'),
+        name: 'Consultation',
+        meta: { title: 'Consultation', icon: 'el-icon-monitor', noCache: true }
+      }
+    ]
+  },
+  {
+    path: '/logout',
+    component: Layout,
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/icons/index'),
+        name: 'Logout',
+        meta: { title: 'Logout', icon: 'el-icon-switch-button', noCache: true }
       }
     ]
   },
-
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/settings.js

@@ -5,25 +5,25 @@ module.exports = {
    * @type {boolean} true | false
    * @description Whether show the settings right-panel
    */
-  showSettings: true,
+  showSettings: false,
 
   /**
    * @type {boolean} true | false
    * @description Whether need tagsView
    */
-  tagsView: true,
+  tagsView: false,
 
   /**
    * @type {boolean} true | false
    * @description Whether fix the header
    */
-  fixedHeader: false,
+  fixedHeader: true,
 
   /**
    * @type {boolean} true | false
    * @description Whether show the logo in sidebar
    */
-  sidebarLogo: false,
+  sidebarLogo: true,
 
   /**
    * @type {string | array} 'production' | ['production', 'development']

src/views/dashboard/admin/components/BookingCard.vue

@@ -137,6 +137,10 @@ export default {
     text-transform: uppercase;
     opacity: 1;
   }
+
+  &-icon {
+    font: Bold;
+  }
 }
 
 .major {
@@ -156,10 +160,14 @@ export default {
   &-bottom {
     width: 126px;
     border-bottom: 1px solid #ffd603;
+    margin-bottom: -15px;
+    padding-bottom: 10px;
+    padding-top: 5px;
   }
   &-right {
     width: 126px;
     border-right: 1px solid #ffd603;
+    padding-top: 5px;
   }
 }
 
@@ -192,7 +200,8 @@ export default {
     left: -3%;
   }
   &-right {
-    right: 11%;
+    position: relative;
+    right: 0;
   }
 }
 

src/views/dashboard/admin/components/ExerciseCard.vue

@@ -153,10 +153,14 @@ export default {
 .border {
   &-bottom {
     width: 126px;
+    padding-top: 5px;
+    margin-bottom: -15px;
+    padding-bottom: 10px;
     border-bottom: 1px solid #ffd603;
   }
   &-right {
     width: 126px;
+    padding-top: 5px;
     border-right: 1px solid #ffd603;
   }
 }
@@ -190,7 +194,8 @@ export default {
     left: -3%;
   }
   &-right {
-    right: 11%;
+    position: relative;
+    right: 0;
   }
 }
 

src/views/dashboard/admin/components/InjuriesCard.vue

@@ -164,7 +164,7 @@ export default {
   bottom: 0;
   left: 0;
   min-width: 481px;
-  margin: 20px;
+  margin: 0px 20px;
   border-radius: none;
   border-color: #dee0e6;
   background: #7ad9fd;
@@ -175,6 +175,10 @@ export default {
 .card-content {
   background: #ffffff;
   padding: 20px;
+  border-radius: 6px;
+  min-height: 414px;
+  overflow: scroll;
+  box-shadow: 30px 30px 50px #77829840;
 }
 
 .injuries {
@@ -183,7 +187,7 @@ export default {
 
 .injuries-bloc {
   margin-left: 0px !important;
-  margin-right: -30px !important;
+  margin-right: -13px !important;
 }
 
 .injury-bloc {
@@ -204,10 +208,12 @@ export default {
   font: normal normal normal 13px/15px SF Pro Display;
   letter-spacing: 0px;
   color: #192440;
+  width: 149px;
 }
 
 .injury-name {
   margin-right: 5px;
+  width: 328px;
 }
 
 .el-row {

src/views/dashboard/admin/components/PhysioCard.vue

@@ -49,7 +49,8 @@ export default {
     width: 521px;
     height: 293px;
     border-radius: 7px;
-    background-image: url('https://i.ibb.co/tMg8c4t/cover.png'), linear-gradient(180deg, #58B8EB 0%, #6E1C80 85%, #6E1C80 100%);
+    box-shadow: 30px 30px 50px #6E1C80;
+    background: url('https://i.ibb.co/tMg8c4t/cover.png'), linear-gradient(180deg, #58B8EB 0%, #6E1C80 85%, #6E1C80 100%);
     background-repeat: no-repeat;
     background-position: center;
     &__right {

src/views/dashboard/admin/components/ProfileCard.vue

@@ -167,7 +167,7 @@ export default {
   left: 211px;
   width: 479px;
   height: 38px;
-  box-shadow: 30px 30px 50px #9d248a6e;
+  box-shadow: 30px 30px 50px #19233F40;
   border-radius: 6px;
   opacity: 1;
   color: #778298;
@@ -180,10 +180,6 @@ export default {
   &-content {
     width: 521px;
     border-radius: 6px;
-    background: transparent
-      linear-gradient(180deg, #e03282 0%, #8a198e 85%, #8a198e 100%) 0% 0%
-      no-repeat padding-box;
-    box-shadow: 30px 30px 50px #9d248a6e;
     opacity: 1;
     &__right {
       position: absolute;
@@ -243,7 +239,7 @@ export default {
   bottom: 0;
   left: 0;
   min-width: 481px;
-  margin: 20px;
+  margin: 10px 20px;
   border-radius: none;
   border-color: #dee0e6;
   background: #dee0e6;
@@ -261,6 +257,10 @@ export default {
   color: #FFFFFF;
 }
 
+.el-tabs__item {
+  width: 276px!important;
+}
+
 .el-row {
   margin-bottom: 5px;
 }
@@ -294,3 +294,32 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+// Override Element-UI inline style
+.el-tabs__item {
+  width: 258px!important;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 6px 6px 0px 0px;
+  background: #F2F3F5!important;
+  &.is-active {
+    font-family: SF Pro Display Bold!important;
+    background: #A0B8FA!important;
+    color: #19233F!important;
+  }
+}
+.el-tabs__content {
+  max-height: 408px;
+  overflow: scroll;
+}
+.el-form-item {
+  margin-bottom: 0px;
+}
+.upload-btn {
+  margin-top: -6px;
+  background: #778298!important;
+  border-radius: 0px 0px 5px 5px!important;
+  width: 101px!important;
+  height: 37px!important;
+}
+</style>