mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-04-06 03:57:53 +08:00
Update the design
This commit is contained in:
baedyl
parent
41eac1a3af
commit
8e12eb6d96
src
BIN
src/assets/img/logo.png
Normal file
BIN
src/assets/img/logo.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 7.9 KiB |
BIN
src/assets/img/logo_long.png
Normal file
BIN
src/assets/img/logo_long.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 18 KiB |
@ -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 Screenfull from '@/components/Screenfull'
|
||||
import SizeSelect from '@/components/SizeSelect'
|
||||
import Search from '@/components/HeaderSearch'
|
||||
// import ErrorLog from '@/components/ErrorLog'
|
||||
// import Screenfull from '@/components/Screenfull'
|
||||
// import SizeSelect from '@/components/SizeSelect'
|
||||
// import Search from '@/components/HeaderSearch'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Breadcrumb,
|
||||
Hamburger,
|
||||
ErrorLog,
|
||||
Screenfull,
|
||||
SizeSelect,
|
||||
Search
|
||||
Hamburger
|
||||
// ErrorLog,
|
||||
// Screenfull,
|
||||
// SizeSelect,
|
||||
// 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;
|
||||
|
||||
@ -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',
|
||||
logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
|
||||
title: 'MSK Physio',
|
||||
logo: require('@/assets/img/logo_long.png')
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -55,8 +53,7 @@ export default {
|
||||
width: 100%;
|
||||
|
||||
& .sidebar-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
height: 80%;
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
@ -7,10 +7,10 @@ Vue.use(Router)
|
||||
import Layout from '@/layout'
|
||||
|
||||
/* Router Modules */
|
||||
import componentsRouter from './modules/components'
|
||||
import chartsRouter from './modules/charts'
|
||||
import tableRouter from './modules/table'
|
||||
import nestedRouter from './modules/nested'
|
||||
// import componentsRouter from './modules/components'
|
||||
// import chartsRouter from './modules/charts'
|
||||
// import tableRouter from './modules/table'
|
||||
// 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',
|
||||
meta: { title: 'Documentation', icon: 'documentation', affix: true }
|
||||
name: 'Booking',
|
||||
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',
|
||||
meta: { title: 'Guide', icon: 'guide', noCache: true }
|
||||
name: 'History',
|
||||
meta: { title: 'History', icon: 'el-icon-edit-outline', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -130,259 +130,77 @@ export const constantRoutes = [
|
||||
*/
|
||||
export const asyncRoutes = [
|
||||
{
|
||||
path: '/permission',
|
||||
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',
|
||||
path: '/book',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/icons/index'),
|
||||
name: 'Icons',
|
||||
meta: { title: 'Icons', icon: 'icon', noCache: true }
|
||||
name: 'Book a physio',
|
||||
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',
|
||||
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',
|
||||
path: '/profile',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/tab/index'),
|
||||
name: 'Tab',
|
||||
meta: { title: 'Tab', icon: 'tab' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
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' }
|
||||
component: () => import('@/views/icons/index'),
|
||||
name: 'Profile',
|
||||
meta: { title: 'Profile', icon: 'el-icon-set-up', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/pdf/download',
|
||||
component: () => import('@/views/pdf/download'),
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/theme',
|
||||
path: '/injuries',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/theme/index'),
|
||||
name: 'Theme',
|
||||
meta: { title: 'Theme', icon: 'theme' }
|
||||
component: () => import('@/views/icons/index'),
|
||||
name: 'Injuries',
|
||||
meta: { title: 'Injuries', icon: 'el-icon-bangzhu', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/clipboard',
|
||||
path: '/billing',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/clipboard/index'),
|
||||
name: 'ClipboardDemo',
|
||||
meta: { title: 'Clipboard', icon: 'clipboard' }
|
||||
component: () => import('@/views/icons/index'),
|
||||
name: 'Billing',
|
||||
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',
|
||||
meta: { title: 'External Link', icon: 'link' }
|
||||
path: 'index',
|
||||
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 }
|
||||
]
|
||||
|
||||
@ -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']
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user