Merge 1f312bbb0b380d36e75b270374bbbeb16645988c into 6858a9ad67483025f6a9432a926beb9327037be3

.gitignore

@@ -1,6 +1,5 @@
 .DS_Store
 node_modules/
-dist/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

dist/static/css/chunk-2c68ce61.6d22e817.css

@@ -0,0 +1 @@
+.pan-item[data-v-4a4a9d9d]{width:38px;height:38px;border-radius:6px;display:inline-block;position:relative;cursor:default;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}.pan-info-roles-container[data-v-4a4a9d9d]{padding:20px;text-align:center}.pan-thumb[data-v-4a4a9d9d]{width:100%;height:100%;background-position:50%;background-size:cover;border-radius:6px;overflow:hidden;position:absolute;-webkit-transform-origin:95% 40%;transform-origin:95% 40%;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.pan-info[data-v-4a4a9d9d]{position:absolute;width:inherit;height:inherit;border-radius:50%;overflow:hidden;-webkit-box-shadow:inset 0 0 0 5px rgba(0,0,0,.05);box-shadow:inset 0 0 0 5px rgba(0,0,0,.05)}.pan-info h3[data-v-4a4a9d9d]{color:#fff;text-transform:uppercase;position:relative;letter-spacing:2px;font-size:18px;margin:0 60px;padding:22px 0 0 0;height:85px;font-family:Open Sans,Arial,sans-serif;text-shadow:0 0 1px #fff,0 1px 2px rgba(0,0,0,.3)}.pan-info p[data-v-4a4a9d9d]{color:#fff;padding:10px 5px;font-style:italic;margin:0 30px;font-size:12px;border-top:1px solid hsla(0,0%,100%,.5)}.pan-info p a[data-v-4a4a9d9d]{display:block;color:#333;width:80px;height:80px;background:hsla(0,0%,100%,.3);border-radius:50%;color:#fff;font-style:normal;font-weight:700;text-transform:uppercase;font-size:9px;letter-spacing:1px;padding-top:24px;margin:7px auto 0;font-family:Open Sans,Arial,sans-serif;opacity:0;-webkit-transition:opacity .3s ease-in-out .2s,background .2s linear 0s,-webkit-transform .3s ease-in-out .2s;transition:opacity .3s ease-in-out .2s,background .2s linear 0s,-webkit-transform .3s ease-in-out .2s;transition:transform .3s ease-in-out .2s,opacity .3s ease-in-out .2s,background .2s linear 0s;transition:transform .3s ease-in-out .2s,opacity .3s ease-in-out .2s,background .2s linear 0s,-webkit-transform .3s ease-in-out .2s;-webkit-transform:translateX(60px) rotate(90deg);transform:translateX(60px) rotate(90deg)}.pan-info p a[data-v-4a4a9d9d]:hover{background:hsla(0,0%,100%,.5)}.pan-item:hover .pan-thumb[data-v-4a4a9d9d]{-webkit-transform:rotate(-110deg);transform:rotate(-110deg)}.pan-item:hover .pan-info p a[data-v-4a4a9d9d]{opacity:1;-webkit-transform:translateX(0) rotate(0deg);transform:translateX(0) rotate(0deg)}.box-center[data-v-14daffcb]{margin:0 auto;display:table}.text-muted[data-v-14daffcb]{color:#777}.user-profile .user-name[data-v-14daffcb]{font-weight:700}.user-profile .box-center[data-v-14daffcb]{padding-top:10px}.user-profile .user-role[data-v-14daffcb]{padding-top:10px;font-weight:400;font-size:14px}.user-profile .box-social[data-v-14daffcb]{padding-top:30px}.user-profile .box-social .el-table[data-v-14daffcb]{border-top:1px solid #dfe6ec}.user-profile .user-follow[data-v-14daffcb]{padding-top:20px}.user-bio[data-v-14daffcb]{margin-top:20px;color:#606266}.user-bio span[data-v-14daffcb]{padding-left:4px}.user-bio .user-bio-section[data-v-14daffcb]{font-size:14px;padding:15px 0}.user-bio .user-bio-section .user-bio-section-header[data-v-14daffcb]{border-bottom:1px solid #dfe6ec;padding-bottom:10px;margin-bottom:10px;font-weight:700}.user-activity .user-block .description[data-v-1066d76c],.user-activity .user-block .username[data-v-1066d76c]{display:block;margin-left:50px;padding:2px 0}.user-activity .user-block .username[data-v-1066d76c]{font-size:16px;color:#000}.user-activity .user-block[data-v-1066d76c] :after{clear:both}.user-activity .user-block .img-circle[data-v-1066d76c]{border-radius:50%;width:40px;height:40px;float:left}.user-activity .user-block span[data-v-1066d76c]{font-weight:500;font-size:12px}.user-activity .post[data-v-1066d76c]{font-size:14px;border-bottom:1px solid #d2d6de;margin-bottom:15px;padding-bottom:15px;color:#666}.user-activity .post .image[data-v-1066d76c]{width:100%;height:100%}.user-activity .post .user-images[data-v-1066d76c]{padding-top:20px}.user-activity .list-inline[data-v-1066d76c]{padding-left:0;margin-left:-5px;list-style:none}.user-activity .list-inline li[data-v-1066d76c]{display:inline-block;padding-right:5px;padding-left:5px;font-size:13px}.user-activity .list-inline .link-black[data-v-1066d76c]:focus,.user-activity .list-inline .link-black[data-v-1066d76c]:hover{color:#999}.box-center[data-v-1066d76c]{margin:0 auto;display:table}.text-muted[data-v-1066d76c]{color:#777}

dist/static/css/chunk-30ca8599.b1dd7a76.css

@@ -0,0 +1 @@
+.errPage-container[data-v-35ca77fc]{width:800px;max-width:100%;margin:100px auto}.errPage-container .pan-back-btn[data-v-35ca77fc]{background:#008489;color:#fff;border:none!important}.errPage-container .pan-gif[data-v-35ca77fc]{margin:0 auto;display:block}.errPage-container .pan-img[data-v-35ca77fc]{display:block;margin:0 auto;width:100%}.errPage-container .text-jumbo[data-v-35ca77fc]{font-size:60px;font-weight:700;color:#484848}.errPage-container .list-unstyled[data-v-35ca77fc]{font-size:14px}.errPage-container .list-unstyled li[data-v-35ca77fc]{padding-bottom:5px}.errPage-container .list-unstyled a[data-v-35ca77fc]{color:#008489;text-decoration:none}.errPage-container .list-unstyled a[data-v-35ca77fc]:hover{text-decoration:underline}

dist/static/css/chunk-5390c43f.13a7e89e.css

@@ -0,0 +1 @@
+.wscn-http404-container[data-v-26fcd89f]{-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);position:absolute;top:40%;left:50%}.wscn-http404[data-v-26fcd89f]{position:relative;width:1200px;padding:0 50px;overflow:hidden}.wscn-http404 .pic-404[data-v-26fcd89f]{position:relative;float:left;width:600px;overflow:hidden}.wscn-http404 .pic-404__parent[data-v-26fcd89f]{width:100%}.wscn-http404 .pic-404__child[data-v-26fcd89f]{position:absolute}.wscn-http404 .pic-404__child.left[data-v-26fcd89f]{width:80px;top:17px;left:220px;opacity:0;-webkit-animation-name:cloudLeft-data-v-26fcd89f;animation-name:cloudLeft-data-v-26fcd89f;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:1s;animation-delay:1s}.wscn-http404 .pic-404__child.mid[data-v-26fcd89f]{width:46px;top:10px;left:420px;opacity:0;-webkit-animation-name:cloudMid-data-v-26fcd89f;animation-name:cloudMid-data-v-26fcd89f;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:1.2s;animation-delay:1.2s}.wscn-http404 .pic-404__child.right[data-v-26fcd89f]{width:62px;top:100px;left:500px;opacity:0;-webkit-animation-name:cloudRight-data-v-26fcd89f;animation-name:cloudRight-data-v-26fcd89f;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:1s;animation-delay:1s}@-webkit-keyframes cloudLeft-data-v-26fcd89f{0%{top:17px;left:220px;opacity:0}20%{top:33px;left:188px;opacity:1}80%{top:81px;left:92px;opacity:1}to{top:97px;left:60px;opacity:0}}@keyframes cloudLeft-data-v-26fcd89f{0%{top:17px;left:220px;opacity:0}20%{top:33px;left:188px;opacity:1}80%{top:81px;left:92px;opacity:1}to{top:97px;left:60px;opacity:0}}@-webkit-keyframes cloudMid-data-v-26fcd89f{0%{top:10px;left:420px;opacity:0}20%{top:40px;left:360px;opacity:1}70%{top:130px;left:180px;opacity:1}to{top:160px;left:120px;opacity:0}}@keyframes cloudMid-data-v-26fcd89f{0%{top:10px;left:420px;opacity:0}20%{top:40px;left:360px;opacity:1}70%{top:130px;left:180px;opacity:1}to{top:160px;left:120px;opacity:0}}@-webkit-keyframes cloudRight-data-v-26fcd89f{0%{top:100px;left:500px;opacity:0}20%{top:120px;left:460px;opacity:1}80%{top:180px;left:340px;opacity:1}to{top:200px;left:300px;opacity:0}}@keyframes cloudRight-data-v-26fcd89f{0%{top:100px;left:500px;opacity:0}20%{top:120px;left:460px;opacity:1}80%{top:180px;left:340px;opacity:1}to{top:200px;left:300px;opacity:0}}.wscn-http404 .bullshit[data-v-26fcd89f]{position:relative;float:left;width:300px;padding:30px 0;overflow:hidden}.wscn-http404 .bullshit__oops[data-v-26fcd89f]{font-size:32px;line-height:40px;color:#1482f0;margin-bottom:20px;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.wscn-http404 .bullshit__headline[data-v-26fcd89f],.wscn-http404 .bullshit__oops[data-v-26fcd89f]{font-weight:700;opacity:0;-webkit-animation-name:slideUp-data-v-26fcd89f;animation-name:slideUp-data-v-26fcd89f;-webkit-animation-duration:.5s;animation-duration:.5s}.wscn-http404 .bullshit__headline[data-v-26fcd89f]{font-size:20px;line-height:24px;color:#222;margin-bottom:10px;-webkit-animation-delay:.1s;animation-delay:.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.wscn-http404 .bullshit__info[data-v-26fcd89f]{font-size:13px;line-height:21px;color:grey;margin-bottom:30px;-webkit-animation-delay:.2s;animation-delay:.2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.wscn-http404 .bullshit__info[data-v-26fcd89f],.wscn-http404 .bullshit__return-home[data-v-26fcd89f]{opacity:0;-webkit-animation-name:slideUp-data-v-26fcd89f;animation-name:slideUp-data-v-26fcd89f;-webkit-animation-duration:.5s;animation-duration:.5s}.wscn-http404 .bullshit__return-home[data-v-26fcd89f]{display:block;float:left;width:110px;height:36px;background:#1482f0;border-radius:100px;text-align:center;color:#fff;font-size:14px;line-height:36px;cursor:pointer;-webkit-animation-delay:.3s;animation-delay:.3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes slideUp-data-v-26fcd89f{0%{-webkit-transform:translateY(60px);transform:translateY(60px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slideUp-data-v-26fcd89f{0%{-webkit-transform:translateY(60px);transform:translateY(60px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}

dist/static/css/chunk-610b6cd1.2e6f426d.css

@@ -0,0 +1 @@
+.social-signup-container[data-v-7309fbbb]{margin:20px 0}.social-signup-container .sign-btn[data-v-7309fbbb]{display:inline-block;cursor:pointer}.social-signup-container .icon[data-v-7309fbbb]{color:#fff;font-size:24px;margin-top:8px}.social-signup-container .qq-svg-container[data-v-7309fbbb],.social-signup-container .wx-svg-container[data-v-7309fbbb]{display:inline-block;width:40px;height:40px;line-height:40px;text-align:center;padding-top:1px;border-radius:4px;margin-bottom:20px;margin-right:5px}.social-signup-container .wx-svg-container[data-v-7309fbbb]{background-color:#24da70}.social-signup-container .qq-svg-container[data-v-7309fbbb]{background-color:#6ba2d6;margin-left:50px}@supports(-webkit-mask:none) and (not (cater-color:#fff)){.login-container .el-input input{color:#fff}}.login-container .el-input{display:inline-block;height:47px;width:85%}.login-container .el-input input{background:transparent;border:0;-webkit-appearance:none;border-radius:0;padding:12px 5px 12px 15px;color:#fff;height:47px;caret-color:#fff}.login-container .el-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #283443 inset!important;box-shadow:inset 0 0 0 1000px #283443!important;-webkit-text-fill-color:#fff!important}.login-container .el-form-item{border:1px solid hsla(0,0%,100%,.1);background:rgba(0,0,0,.1);border-radius:5px;color:#454545}.login-container[data-v-b678bd42]{min-height:100%;width:100%;background-color:#2d3a4b;overflow:hidden}.login-container .login-form[data-v-b678bd42]{position:relative;width:520px;max-width:100%;padding:160px 35px 0;margin:0 auto;overflow:hidden}.login-container .tips[data-v-b678bd42]{font-size:14px;color:#fff;margin-bottom:10px}.login-container .tips span[data-v-b678bd42]:first-of-type{margin-right:16px}.login-container .svg-container[data-v-b678bd42]{padding:6px 5px 6px 15px;color:#889aa4;vertical-align:middle;width:30px;display:inline-block}.login-container .title-container[data-v-b678bd42]{position:relative}.login-container .title-container .title[data-v-b678bd42]{font-size:26px;color:#eee;margin:0 auto 40px auto;text-align:center;font-weight:700}.login-container .show-pwd[data-v-b678bd42]{position:absolute;right:10px;top:7px;font-size:16px;color:#889aa4;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.login-container .thirdparty-button[data-v-b678bd42]{position:absolute;right:0;bottom:6px}@media only screen and (max-width:470px){.login-container .thirdparty-button[data-v-b678bd42]{display:none}}

dist/static/css/chunk-7348d640.e5e4dfbf.css

@@ -0,0 +1 @@
+div#driver-popover-item{display:none;position:absolute;background:#fff;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.4);box-shadow:0 1px 10px rgba(0,0,0,.4);z-index:1000000000}div#driver-popover-item .driver-popover-tip{border:5px solid #fff;content:"";position:absolute}div#driver-popover-item .driver-popover-tip.bottom{bottom:-10px;border-color:#fff transparent transparent}div#driver-popover-item .driver-popover-tip.bottom.position-center{left:49%}div#driver-popover-item .driver-popover-tip.bottom.position-right{right:20px}div#driver-popover-item .driver-popover-tip.left{left:-10px;top:10px;border-color:transparent #fff transparent transparent}div#driver-popover-item .driver-popover-tip.left.position-center{top:46%}div#driver-popover-item .driver-popover-tip.left.position-bottom{top:auto;bottom:20px}div#driver-popover-item .driver-popover-tip.right{right:-10px;top:10px;border-color:transparent transparent transparent #fff}div#driver-popover-item .driver-popover-tip.right.position-center{top:46%}div#driver-popover-item .driver-popover-tip.right.position-bottom{top:auto;bottom:20px}div#driver-popover-item .driver-popover-tip.top{top:-10px;border-color:transparent transparent #fff}div#driver-popover-item .driver-popover-tip.top.position-center{left:49%}div#driver-popover-item .driver-popover-tip.top.position-right{right:20px}div#driver-popover-item .driver-popover-tip.mid-center{display:none}div#driver-popover-item .driver-popover-footer{display:block;margin-top:10px}div#driver-popover-item .driver-popover-footer button{display:inline-block;padding:3px 10px;border:1px solid #d4d4d4;text-decoration:none;text-shadow:1px 1px 0 #fff;color:#2d2d2d;font:11px/normal sans-serif;cursor:pointer;outline:0;background-color:#f1f1f1;border-radius:2px;zoom:1;line-height:1.3}div#driver-popover-item .driver-popover-footer button.driver-disabled{color:grey;cursor:default;pointer-events:none}div#driver-popover-item .driver-popover-footer .driver-close-btn{float:left}div#driver-popover-item .driver-popover-footer .driver-btn-group,div#driver-popover-item .driver-popover-footer .driver-close-only-btn{float:right}div#driver-popover-item .driver-popover-title{font:19px/normal sans-serif;margin:0 0 5px;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1}div#driver-popover-item .driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;color:#2d2d2d;font-weight:400;zoom:1}.driver-clearfix:after,.driver-clearfix:before{content:"";display:table}.driver-clearfix:after{clear:both}.driver-stage-no-animation{-webkit-transition:none!important;transition:none!important;background:transparent!important;outline:5000px solid rgba(0,0,0,.75)}div#driver-page-overlay{background:#000;position:fixed;bottom:0;right:0;display:block;width:100%;height:100%;zoom:1;filter:alpha(opacity=75);opacity:.75;z-index:100002!important}div#driver-highlighted-element-stage,div#driver-page-overlay{top:0;left:0;-webkit-transition:all .3s;transition:all .3s}div#driver-highlighted-element-stage{position:absolute;height:50px;width:300px;background:#fff;z-index:100003!important;display:none;border-radius:2px}.driver-highlighted-element{z-index:100004!important}.driver-position-relative{position:relative!important}.driver-fix-stacking{z-index:auto!important;opacity:1!important;-webkit-transform:none!important;transform:none!important;-webkit-filter:none!important;-moz-filter:none!important;-ms-filter:none!important;-o-filter:none!important;filter:none!important;-webkit-perspective:none!important;-ms-perspective:none!important;-o-perspective:none!important;perspective:none!important;-webkit-transform-style:flat!important;transform-style:flat!important;-webkit-transform-box:border-box!important;-moz-transform-box:border-box!important;-ms-transform-box:border-box!important;-o-transform-box:border-box!important;transform-box:border-box!important;will-change:unset!important}

dist/static/css/chunk-8081abe0.55ec8d04.css

@@ -0,0 +1 @@
+.icons-container[data-v-0454c005]{margin:10px 20px 0;overflow:hidden}.icons-container .grid[data-v-0454c005]{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.icons-container .icon-item[data-v-0454c005]{margin:20px;height:85px;text-align:center;width:100px;float:left;font-size:30px;color:#24292e;cursor:pointer}.icons-container span[data-v-0454c005]{display:block;font-size:16px;margin-top:10px}.icons-container .disabled[data-v-0454c005]{pointer-events:none}

dist/static/css/chunk-8b52346e.1c26571e.css

@@ -0,0 +1 @@
+.share-dropdown-menu{width:250px;position:relative;z-index:1;height:auto!important}.share-dropdown-menu-title{width:100%;display:block;cursor:pointer;background:#000;color:#fff;height:60px;line-height:60px;font-size:20px;text-align:center;z-index:2;-webkit-transform:translateZ(0);transform:translateZ(0)}.share-dropdown-menu-wrapper{position:relative}.share-dropdown-menu-item{text-align:center;position:absolute;width:100%;background:#e0e0e0;color:#000;line-height:60px;height:60px;cursor:pointer;font-size:18px;overflow:hidden;opacity:1;-webkit-transition:-webkit-transform .28s ease;transition:-webkit-transform .28s ease;transition:transform .28s ease;transition:transform .28s ease,-webkit-transform .28s ease}.share-dropdown-menu-item:hover{background:#000;color:#fff}.share-dropdown-menu-item:first-of-type{-webkit-transition-delay:.1s;transition-delay:.1s}.share-dropdown-menu-item:first-of-type,.share-dropdown-menu-item:nth-of-type(2){z-index:-1;-webkit-transform:translate3d(0,-60px,0);transform:translate3d(0,-60px,0)}.share-dropdown-menu-item:nth-of-type(2){-webkit-transition-delay:.2s;transition-delay:.2s}.share-dropdown-menu-item:nth-of-type(3){-webkit-transition-delay:.3s;transition-delay:.3s}.share-dropdown-menu-item:nth-of-type(3),.share-dropdown-menu-item:nth-of-type(4){z-index:-1;-webkit-transform:translate3d(0,-60px,0);transform:translate3d(0,-60px,0)}.share-dropdown-menu-item:nth-of-type(4){-webkit-transition-delay:.4s;transition-delay:.4s}.share-dropdown-menu-item:nth-of-type(5){-webkit-transition-delay:.5s;transition-delay:.5s}.share-dropdown-menu-item:nth-of-type(5),.share-dropdown-menu-item:nth-of-type(6){z-index:-1;-webkit-transform:translate3d(0,-60px,0);transform:translate3d(0,-60px,0)}.share-dropdown-menu-item:nth-of-type(6){-webkit-transition-delay:.6s;transition-delay:.6s}.share-dropdown-menu-item:nth-of-type(7){-webkit-transition-delay:.7s;transition-delay:.7s}.share-dropdown-menu-item:nth-of-type(7),.share-dropdown-menu-item:nth-of-type(8){z-index:-1;-webkit-transform:translate3d(0,-60px,0);transform:translate3d(0,-60px,0)}.share-dropdown-menu-item:nth-of-type(8){-webkit-transition-delay:.8s;transition-delay:.8s}.share-dropdown-menu-item:nth-of-type(9){z-index:-1;-webkit-transition-delay:.9s;transition-delay:.9s;-webkit-transform:translate3d(0,-60px,0);transform:translate3d(0,-60px,0)}.share-dropdown-menu.active .share-dropdown-menu-wrapper{z-index:1}.share-dropdown-menu.active .share-dropdown-menu-item:first-of-type{-webkit-transition-delay:.8s;transition-delay:.8s;-webkit-transform:translateZ(0);transform:translateZ(0)}.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(2){-webkit-transition-delay:.7s;transition-delay:.7s;-webkit-transform:translate3d(0,60px,0);transform:translate3d(0,60px,0)}.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(3){-webkit-transition-delay:.6s;transition-delay:.6s;-webkit-transform:translate3d(0,120px,0);transform:translate3d(0,120px,0)}.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(4){-webkit-transition-delay:.5s;transition-delay:.5s;-webkit-transform:translate3d(0,180px,0);transform:translate3d(0,180px,0)}.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(5){-webkit-transition-delay:.4s;transition-delay:.4s;-webkit-transform:translate3d(0,240px,0);transform:translate3d(0,240px,0)}.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(6){-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translate3d(0,300px,0);transform:translate3d(0,300px,0)}.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(7){-webkit-transition-delay:.2s;transition-delay:.2s;-webkit-transform:translate3d(0,360px,0);transform:translate3d(0,360px,0)}.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(8){-webkit-transition-delay:.1s;transition-delay:.1s;-webkit-transform:translate3d(0,420px,0);transform:translate3d(0,420px,0)}.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(9){-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translate3d(0,480px,0);transform:translate3d(0,480px,0)}.documentation-container[data-v-202fa585]{margin:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.documentation-container .document-btn[data-v-202fa585]{-ms-flex-negative:0;flex-shrink:0;display:block;cursor:pointer;background:#000;color:#fff;height:60px;padding:0 16px;margin:16px;line-height:60px;font-size:20px;text-align:center}

dist/static/css/chunk-libs.3dfb7769.css

@@ -0,0 +1 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}#nprogress{pointer-events:none}#nprogress .bar{background:#29d;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;-webkit-box-shadow:0 0 10px #29d,0 0 5px #29d;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;-webkit-transform:rotate(3deg) translateY(-4px);transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;-webkit-box-sizing:border-box;box-sizing:border-box;border:2px solid transparent;border-top-color:#29d;border-left-color:#29d;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}

dist/static/js/chunk-164ce15a.e3b3438a.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-164ce15a"],{"129f":function(n,t){n.exports=Object.is||function(n,t){return n===t?0!==n||1/n===1/t:n!=n&&t!=t}},"841c":function(n,t,e){"use strict";var r=e("d784"),a=e("825a"),c=e("1d80"),i=e("129f"),o=e("14c3");r("search",1,(function(n,t,e){return[function(t){var e=c(this),r=void 0==t?void 0:t[n];return void 0!==r?r.call(t,e):new RegExp(t)[n](String(e))},function(n){var r=e(t,n,this);if(r.done)return r.value;var c=a(n),u=String(this),d=c.lastIndex;i(d,0)||(c.lastIndex=0);var l=o(c,u);return i(c.lastIndex,d)||(c.lastIndex=d),null===l?-1:l.index}]}))},b829:function(n,t,e){"use strict";e.r(t);e("fb6a"),e("ac1f"),e("841c");var r,a,c={name:"AuthRedirect",created:function(){var n=window.location.search.slice(1);window.localStorage&&(window.localStorage.setItem("x-admin-oauth-code",n),window.close())},render:function(n){return n()}},i=c,o=e("2877"),u=Object(o["a"])(i,r,a,!1,null,null,null);t["default"]=u.exports}}]);

dist/static/js/chunk-2d0d6710.227ab093.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0d6710"],{7320:function(e,t,i){"use strict";i.r(t);var n=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"app-container"},[e._m(0),i("el-button",{attrs:{icon:"el-icon-question",type:"primary"},on:{click:function(t){return t.preventDefault(),t.stopPropagation(),e.guide(t)}}},[e._v(" Show Guide ")])],1)},o=[function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("aside",[e._v(" The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on "),i("a",{attrs:{href:"https://github.com/kamranahmedse/driver.js",target:"_blank"}},[e._v("driver.js.")])])}],r=i("c24c"),s=i.n(r),a=(i("01d7"),[{element:"#hamburger-container",popover:{title:"Hamburger",description:"Open && Close sidebar",position:"bottom"}},{element:"#breadcrumb-container",popover:{title:"Breadcrumb",description:"Indicate the current page location",position:"bottom"}},{element:"#header-search",popover:{title:"Page Search",description:"Page search, quick navigation",position:"left"}},{element:"#screenfull",popover:{title:"Screenfull",description:"Set the page into fullscreen",position:"left"}},{element:"#size-select",popover:{title:"Switch Size",description:"Switch the system size",position:"left"}},{element:"#tags-view-container",popover:{title:"Tags view",description:"The history of the page you visited",position:"bottom"},padding:0}]),c=a,p={name:"Guide",data:function(){return{driver:null}},mounted:function(){this.driver=new s.a},methods:{guide:function(){this.driver.defineSteps(c),this.driver.start()}}},l=p,u=i("2877"),d=Object(u["a"])(l,n,o,!1,null,null,null);t["default"]=d.exports}}]);

dist/static/js/chunk-2d230fe7.3bd3f709.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d230fe7"],{ef3c:function(e,r,n){"use strict";n.r(r);n("ac1f"),n("5319");var t,u,a={created:function(){var e=this.$route,r=e.params,n=e.query,t=r.path;this.$router.replace({path:"/"+t,query:n})},render:function(e){return e()}},c=a,o=n("2877"),p=Object(o["a"])(c,t,u,!1,null,null,null);r["default"]=p.exports}}]);

dist/static/js/chunk-30ca8599.4b2fd2d2.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-30ca8599"],{"1a27":function(t,a,i){"use strict";i("a5e5")},"24e2":function(t,a,i){"use strict";i.r(a);var e=function(){var t=this,a=t.$createElement,i=t._self._c||a;return i("div",{staticClass:"errPage-container"},[i("el-button",{staticClass:"pan-back-btn",attrs:{icon:"el-icon-arrow-left"},on:{click:t.back}},[t._v(" 返回 ")]),i("el-row",[i("el-col",{attrs:{span:12}},[i("h1",{staticClass:"text-jumbo text-ginormous"},[t._v(" Oops! ")]),t._v(" gif来源"),i("a",{attrs:{href:"https://zh.airbnb.com/",target:"_blank"}},[t._v("airbnb")]),t._v(" 页面 "),i("h2",[t._v("你没有权限去该页面")]),i("h6",[t._v("如有不满请联系你领导")]),i("ul",{staticClass:"list-unstyled"},[i("li",[t._v("或者你可以去:")]),i("li",{staticClass:"link-type"},[i("router-link",{attrs:{to:"/dashboard"}},[t._v(" 回首页 ")])],1),i("li",{staticClass:"link-type"},[i("a",{attrs:{href:"https://www.taobao.com/"}},[t._v("随便看看")])]),i("li",[i("a",{attrs:{href:"#"},on:{click:function(a){a.preventDefault(),t.dialogVisible=!0}}},[t._v("点我看图")])])])]),i("el-col",{attrs:{span:12}},[i("img",{attrs:{src:t.errGif,width:"313",height:"428",alt:"Girl has dropped her ice cream."}})])],1),i("el-dialog",{attrs:{visible:t.dialogVisible,title:"随便看"},on:{"update:visible":function(a){t.dialogVisible=a}}},[i("img",{staticClass:"pan-img",attrs:{src:t.ewizardClap}})])],1)},s=[],r=i("cc6c"),c=i.n(r),l={name:"Page401",data:function(){return{errGif:c.a+"?"+ +new Date,ewizardClap:"https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646",dialogVisible:!1}},methods:{back:function(){this.$route.query.noGoBack?this.$router.push({path:"/dashboard"}):this.$router.go(-1)}}},n=l,o=(i("1a27"),i("2877")),u=Object(o["a"])(n,e,s,!1,null,"35ca77fc",null);a["default"]=u.exports},a5e5:function(t,a,i){},cc6c:function(t,a,i){t.exports=i.p+"static/img/401.089007e7.gif"}}]);

dist/static/js/chunk-5390c43f.230edc7d.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-5390c43f"],{"122a":function(t,s,a){},"1db4":function(t,s,a){"use strict";a.r(s);var e=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"wscn-http404-container"},[a("div",{staticClass:"wscn-http404"},[t._m(0),a("div",{staticClass:"bullshit"},[a("div",{staticClass:"bullshit__oops"},[t._v("OOPS!")]),t._m(1),a("div",{staticClass:"bullshit__headline"},[t._v(t._s(t.message))]),a("div",{staticClass:"bullshit__info"},[t._v("Please check that the URL you entered is correct, or click the button below to return to the homepage.")]),a("a",{staticClass:"bullshit__return-home",attrs:{href:""}},[t._v("Back to home")])])])])},c=[function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"pic-404"},[e("img",{staticClass:"pic-404__parent",attrs:{src:a("a36b"),alt:"404"}}),e("img",{staticClass:"pic-404__child left",attrs:{src:a("26fc"),alt:"404"}}),e("img",{staticClass:"pic-404__child mid",attrs:{src:a("26fc"),alt:"404"}}),e("img",{staticClass:"pic-404__child right",attrs:{src:a("26fc"),alt:"404"}})])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"bullshit__info"},[t._v("All rights reserved "),a("a",{staticStyle:{color:"#20a0ff"},attrs:{href:"https://wallstreetcn.com",target:"_blank"}},[t._v("wallstreetcn")])])}],i={name:"Page404",computed:{message:function(){return"The webmaster said that you can not enter this page..."}}},l=i,n=(a("35e7"),a("2877")),r=Object(n["a"])(l,e,c,!1,null,"26fcd89f",null);s["default"]=r.exports},"26fc":function(t,s,a){t.exports=a.p+"static/img/404_cloud.0f4bc32b.png"},"35e7":function(t,s,a){"use strict";a("122a")},a36b:function(t,s,a){t.exports=a.p+"static/img/404.a57b6f31.png"}}]);

dist/static/js/chunk-8b52346e.131c8269.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-8b52346e"],{"3c34":function(t,e,a){"use strict";a.r(e);var n=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"app-container documentation-container"},[a("a",{staticClass:"document-btn",attrs:{target:"_blank",href:"https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=demo_English_button"}},[t._v("Java backend integration")]),a("a",{staticClass:"document-btn",attrs:{target:"_blank",href:"https://panjiachen.github.io/vue-element-admin-site/"}},[t._v("Documentation")]),a("a",{staticClass:"document-btn",attrs:{target:"_blank",href:"https://github.com/PanJiaChen/vue-element-admin/"}},[t._v("Github Repository")]),a("a",{staticClass:"document-btn",attrs:{target:"_blank",href:"https://panjiachen.gitee.io/vue-element-admin-site/zh/"}},[t._v("国内文档")]),a("dropdown-menu",{staticClass:"document-btn",attrs:{items:t.articleList,title:"系列文章"}}),a("a",{staticClass:"document-btn",attrs:{target:"_blank",href:"https://panjiachen.github.io/vue-element-admin-site/zh/job/"}},[t._v("内推招聘")])],1)},i=[],s=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"share-dropdown-menu",class:{active:t.isActive}},[a("div",{staticClass:"share-dropdown-menu-wrapper"},[a("span",{staticClass:"share-dropdown-menu-title",on:{click:function(e){return e.target!==e.currentTarget?null:t.clickTitle(e)}}},[t._v(t._s(t.title))]),t._l(t.items,(function(e,n){return a("div",{key:n,staticClass:"share-dropdown-menu-item"},[e.href?a("a",{attrs:{href:e.href,target:"_blank"}},[t._v(t._s(e.title))]):a("span",[t._v(t._s(e.title))])])}))],2)])},c=[],r={props:{items:{type:Array,default:function(){return[]}},title:{type:String,default:"vue"}},data:function(){return{isActive:!1}},methods:{clickTitle:function(){this.isActive=!this.isActive}}},o=r,u=(a("4ba3"),a("2877")),l=Object(u["a"])(o,s,c,!1,null,null,null),m=l.exports,p={name:"Documentation",components:{DropdownMenu:m},data:function(){return{articleList:[{title:"基础篇",href:"https://juejin.im/post/59097cd7a22b9d0065fb61d2"},{title:"登录权限篇",href:"https://juejin.im/post/591aa14f570c35006961acac"},{title:"实战篇",href:"https://juejin.im/post/593121aa0ce4630057f70d35"},{title:"vue-admin-template 篇",href:"https://juejin.im/post/595b4d776fb9a06bbe7dba56"},{title:"v4.0 篇",href:"https://juejin.im/post/5c92ff94f265da6128275a85"},{title:"自行封装 component",href:"https://segmentfault.com/a/1190000009090836"},{title:"优雅的使用 icon",href:"https://juejin.im/post/59bb864b5188257e7a427c09"},{title:"webpack4（上）",href:"https://juejin.im/post/59bb864b5188257e7a427c09"},{title:"webpack4（下）",href:"https://juejin.im/post/5b5d6d6f6fb9a04fea58aabc"}]}}},h=p,d=(a("92b0"),Object(u["a"])(h,n,i,!1,null,"202fa585",null));e["default"]=d.exports},"4ba3":function(t,e,a){"use strict";a("7626")},"53cc":function(t,e,a){},7626:function(t,e,a){},"92b0":function(t,e,a){"use strict";a("53cc")}}]);

src/components/Hamburger/index.vue

@@ -1,15 +1,6 @@
 <template>
-  <div style="padding: 0 15px;" @click="toggleClick">
+  <div style="padding: 0 15px" @click="toggleClick">
-    <svg
+    <i class="el-icon-arrow-left hamburger" />
-      :class="{'is-active':isActive}"
-      class="hamburger"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
-    >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
-    </svg>
   </div>
 </template>
 
@@ -34,8 +25,16 @@ export default {
 .hamburger {
   display: inline-block;
   vertical-align: middle;
-  width: 20px;
+  background: #1f71bc;
-  height: 20px;
+  color: white;
+  font: normal normal normal 12px/14px FontAwesome;
+  border-radius: 4px 0px 0px 4px;
+  width: 18px;
+  height: 45px;
+  padding: 13px 3px;
+  position: absolute;
+  bottom: 90px;
+  right: 0;
 }
 
 .hamburger.is-active {

src/components/PanThumb/index.vue

@@ -36,9 +36,9 @@ export default {
 
 <style scoped>
 .pan-item {
-  width: 200px;
+  width: 38px;
-  height: 200px;
+  height: 38px;
-  border-radius: 50%;
+  border-radius: 6px;
   display: inline-block;
   position: relative;
   cursor: default;
@@ -55,7 +55,7 @@ export default {
   height: 100%;
   background-position: center center;
   background-size: cover;
-  border-radius: 50%;
+  border-radius: 6px;
   overflow: hidden;
   position: absolute;
   transform-origin: 95% 40%;

src/layout/components/Navbar.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-
     <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,30 +14,15 @@
           <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="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+          <img :src="require('@/assets/img/profile.png')" class="user-avatar">
-          <i class="el-icon-caret-bottom" />
         </div>
-        <el-dropdown-menu slot="dropdown">
-          <router-link to="/profile/index">
-            <el-dropdown-item>Profile</el-dropdown-item>
-          </router-link>
-          <router-link to="/">
-            <el-dropdown-item>Dashboard</el-dropdown-item>
-          </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
-            <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 @click.native="logout">
-            <span style="display:block;">Log Out</span>
-          </el-dropdown-item>
-        </el-dropdown-menu>
       </el-dropdown>
     </div>
   </div>
@@ -48,20 +31,18 @@
 <script>
 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,
+    Breadcrumb
-    Hamburger,
+    // ErrorLog,
-    ErrorLog,
+    // Screenfull,
-    Screenfull,
+    // SizeSelect,
-    SizeSelect,
+    // Search
-    Search
   },
   computed: {
     ...mapGetters([
@@ -71,9 +52,6 @@ export default {
     ])
   },
   methods: {
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
-    },
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
@@ -83,6 +61,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.user-notif {
+  width: 40px;
+  padding-left: 12px;
+  color: #FF0000;
+}
+
 .navbar {
   height: 50px;
   overflow: hidden;
@@ -105,6 +89,7 @@ export default {
 
   .breadcrumb-container {
     float: left;
+    margin-left: 53px;
   }
 
   .errLog-container {
@@ -120,10 +105,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

@@ -2,12 +2,10 @@
   <div class="sidebar-logo-container" :class="{'collapse':collapse}">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo">
+        <img v-if="logo" :src="logoSmall" 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,9 @@ 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'),
+      logoSmall: require('@/assets/img/logo.png')
     }
   }
 }
@@ -46,7 +45,7 @@ export default {
   width: 100%;
   height: 50px;
   line-height: 50px;
-  background: #2b2f3a;
+  background: transparent linear-gradient(180deg, var(--unnamed-color-122f48) 0%, #1A233F 100%) 0% 0% no-repeat padding-box;;
   text-align: center;
   overflow: hidden;
 
@@ -55,10 +54,11 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
+      height: 80%;
-      height: 32px;
       vertical-align: middle;
-      margin-right: 12px;
+      left: 13px;
+      top: 10px;
+      position: absolute;
     }
 
     & .sidebar-title {

src/layout/components/Sidebar/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="{'has-logo':showLogo}">
     <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
+    <el-scrollbar wrap-class="scrollbar-wrapper" class="scrollbar">
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
@@ -14,6 +14,7 @@
       >
         <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
       </el-menu>
+      <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
     </el-scrollbar>
   </div>
 </template>
@@ -23,9 +24,10 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
+import Hamburger from '@/components/Hamburger'
 
 export default {
-  components: { SidebarItem, Logo },
+  components: { SidebarItem, Logo, Hamburger },
   computed: {
     ...mapGetters([
       'permission_routes',
@@ -49,6 +51,16 @@ export default {
     isCollapse() {
       return !this.sidebar.opened
     }
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    }
   }
 }
 </script>
+<style lang="scss" scoped>
+.scrollbar {
+  margin-top: 50px;
+}
+</style>

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/styles/index.scss

@@ -5,6 +5,16 @@
 @import './sidebar.scss';
 @import './btn.scss';
 
+@font-face {
+  font-family: "SF Pro Display";
+  src: local("SFProDisplay"),   url(./fonts/SFProDisplay-Regular.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "SF Pro Display Bold";
+  src: local("SFProDisplayBold"),   url(./fonts/SFProDisplay-Heavy-1.ttf) format("truetype");
+}
+
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;

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

@@ -0,0 +1,274 @@
+<template>
+  <div class="card">
+    <el-row :gutter="20">
+      <el-col
+        class="heading"
+        :xs="10"
+        :sm="10"
+        :lg="6"
+      ><div class="">
+        <span class="heading__title">Billing</span>
+      </div>
+      </el-col>
+      <el-col
+        class="heading heading-icon"
+        :xs="2"
+        :sm="1"
+        :md="1"
+      ><div class=""><i class="el-icon-bank-card" /></div></el-col>
+    </el-row>
+    <el-row :gutter="20" class="card-content">
+      <el-tabs type="border-card">
+        <el-tab-pane label="Statements">
+          <table class="info-table" cellspacing="0">
+            <thead>
+              <tr>
+                <th class="thead-text">DATE</th>
+                <th class="thead-text">ORDER ID</th>
+                <th class="thead-text">AMOUNT</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>22-11-2021</td>
+                <td>4576786</td>
+                <td>£20</td>
+              </tr>
+
+              <tr>
+                <td>16-11-2021</td>
+                <td>4576786</td>
+                <td>£40</td>
+              </tr>
+
+              <tr>
+                <td>22-11-2021</td>
+                <td>4576786</td>
+                <td>£40</td>
+              </tr>
+
+              <tr>
+                <td>22-11-2021</td>
+                <td>4576786</td>
+                <td>£20</td>
+              </tr>
+            </tbody>
+          </table>
+        </el-tab-pane>
+        <el-tab-pane label="Credit Cards">
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column prop="date" label="DATE" width="180" />
+            <el-table-column prop="orderId" label="ORDER ID" width="180" />
+            <el-table-column prop="amount" label="AMOUNT" />
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    avatar: {
+      type: String,
+      default:
+        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
+    }
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          date: '22-11-2021',
+          orderId: '4576786',
+          amount: '£20'
+        },
+        {
+          date: '16-11-2021',
+          orderId: '4576786',
+          amount: '£40'
+        },
+        {
+          date: '22-11-2021',
+          orderId: '4576786',
+          amount: '£40'
+        },
+        {
+          date: '22-11-2021',
+          orderId: '4576786',
+          amount: '£20'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heading {
+  top: 120px;
+  left: 211px;
+  width: 479px;
+  height: 38px;
+  box-shadow: 30px 30px 50px #9d248a6e;
+  border-radius: 6px;
+  opacity: 1;
+  color: #778298;
+  padding: 10px;
+  &-icon {
+    padding: 10px;
+    width: 38px;
+    margin-left: 4px;
+  }
+  &-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;
+      font: normal normal 900 14px/16px SF Pro Display;
+      letter-spacing: 0px;
+      color: #ffffff;
+      margin-top: 47px;
+      margin-left: 30%;
+      height: 251px;
+    }
+  }
+  &__title {
+    top: 130px;
+    left: 232px;
+    width: 98px;
+    height: 18px;
+    text-align: center;
+    font: normal normal 900 15px/18px SF Pro Display Bold;
+    letter-spacing: 0px;
+    text-transform: uppercase;
+    opacity: 1;
+  }
+}
+
+.major {
+  font: normal normal 900 34px/40px SF Pro Display;
+}
+
+.content {
+  font: normal normal normal 14px/21px SF Pro Display;
+  letter-spacing: 0px;
+  color: #ffffff;
+  &-value {
+    font: normal normal 900 14px/21px SF Pro Display;
+  }
+}
+
+.border {
+  &-bottom {
+    width: 126px;
+    border-bottom: 1px solid #ffd603;
+  }
+  &-right {
+    width: 126px;
+    border-right: 1px solid #ffd603;
+  }
+}
+
+.avatar {
+  width: 38px !important;
+  height: 38px !important;
+  margin-top: 15px;
+}
+
+.form {
+  padding-bottom: 30px;
+}
+
+.info-table {
+  width: 481px;
+  background-color: white;
+  // border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0 5px;
+  border-radius: 10px;
+  overflow: hidden;
+  th:not(:first-child) {
+    text-align: center;
+  }
+}
+
+thead {
+  background: #778298 0% 0% no-repeat padding-box;
+  color: white;
+  th {
+    padding: 10px;
+    height: 37px;
+    text-align: left;
+    font: normal normal 15px/18px SF Pro Display Bold;
+    letter-spacing: 0px;
+    color: #ffffff;
+    text-transform: uppercase;
+  }
+}
+
+tbody {
+  tr {
+    background: #F2F3F5;
+    padding-top: 10px;
+    margin-bottom: 10px;
+    td:not(:first-child) {
+      text-align: center;
+    }
+  }
+  color: #192440;
+  td {
+    padding: 20px 0px;
+  }
+
+  td:nth-child(1) {
+    padding: 10px;
+  }
+
+  td:nth-child(3) {
+    font-weight: bold;
+  }
+
+}
+
+.el-row {
+  margin-bottom: 5px;
+}
+
+.grid-content {
+  min-height: 36px;
+  &--box {
+    min-height: 251px;
+  }
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+
+@media (min-width: 550px) {
+  .card-content {
+    max-width: 521px;
+    border-radius: 6px;
+  }
+}
+
+@media (max-width: 550px) {
+  .card {
+    min-width: 376px;
+  }
+}
+</style>
+<style lang="scss">
+// Override Element-UI inline style
+.el-tabs__content {
+  height: 371px;
+  border-radius: 0px 0px 6px 6px;
+}
+</style>

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

@@ -0,0 +1,236 @@
+<template>
+  <div class="card">
+    <el-row :gutter="20">
+      <el-col
+        class="heading"
+        :xs="10"
+        :sm="10"
+        :lg="6"
+      ><div class="">
+        <span class="heading__title">My booking</span>
+      </div>
+      </el-col>
+      <el-col
+        class="heading heading-icon"
+        :xs="2"
+        :sm="1"
+        :md="1"
+      ><div class=""><i class="el-icon-date" /></div></el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <div class="arrow arrow-left"><i class="el-icon-arrow-left" /></div>
+      <el-col class="heading-content__right">
+        <p>
+          <span>INJURY</span><br>
+          <span class="major">Right Elbow</span>
+        </p>
+        <el-row :gutter="10">
+          <el-col :span="2.5" :offset="0">
+            <pan-thumb :image="avatar" class="avatar" />
+          </el-col>
+          <el-col :span="12" :offset="0">
+            <p>
+              <span class="content">PT NAME</span><br>
+              <span class="content-value">DIMITRI ALEXIOU</span>
+            </p>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col class="heading-content" :xs="12" :sm="11" :md="7">
+        <div class="grid-content--box">
+          <div class="content">
+            <p class="border-bottom border-right">
+              <span class="content-title">DATE</span>
+              <br>
+              <span class="content-value">{{ date }}</span>
+            </p>
+            <p class="border-bottom border-right">
+              <span class="content-title">TIME</span>
+              <br>
+              <span class="content-value">{{ time }}</span>
+            </p>
+            <p class="border-right">
+              <span class="content-title">ORDER ID</span>
+              <br>
+              <span class="content-value">{{ orderId }}</span>
+            </p>
+          </div>
+        </div>
+      </el-col>
+      <el-button
+        type="primary"
+        icon="el-icon-monitor"
+        class="action"
+        :rounded="false"
+      >Go to Consultation</el-button>
+      <div class="arrow arrow-right"><i class="el-icon-arrow-right" /></div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import PanThumb from '@/components/PanThumb'
+export default {
+  components: {
+    PanThumb
+  },
+  props: {
+    avatar: {
+      type: String,
+      default: require('@/assets/img/imgpsh_fullsize_anim.jpeg')
+    }
+  },
+  data() {
+    return {
+      date: '28-10-2021',
+      time: '18:30 - 18:50',
+      orderId: '346789'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heading {
+  top: 120px;
+  left: 211px;
+  width: 479px;
+  height: 38px;
+  background: #de3182 0% 0% no-repeat padding-box;
+  box-shadow: 30px 30px 50px #9d248a6e;
+  border-radius: 6px;
+  opacity: 1;
+  color: #ffec03;
+  padding: 10px;
+  &-icon {
+    padding: 10px;
+    width: 38px;
+    margin-left: 4px;
+  }
+  &-content {
+    height: 251px;
+    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;
+      font: normal normal 900 14px/16px SF Pro Display;
+      letter-spacing: 0px;
+      color: #ffffff;
+      margin-top: 47px;
+      margin-left: 30%;
+      height: 251px;
+    }
+  }
+  &__title {
+    top: 130px;
+    left: 232px;
+    width: 98px;
+    height: 18px;
+    text-align: center;
+    font: normal normal 900 15px/18px SF Pro Display Bold;
+    letter-spacing: 0px;
+    text-transform: uppercase;
+    opacity: 1;
+  }
+
+  &-icon {
+    font: Bold;
+  }
+}
+
+.major {
+  font: normal normal 900 34px/40px SF Pro Display Bold;
+}
+
+.content {
+  font: normal normal normal 14px/21px SF Pro Display;
+  letter-spacing: 0px;
+  color: #ffffff;
+  &-value {
+    font: normal normal 900 14px/21px SF Pro Display Bold;
+  }
+}
+
+.border {
+  &-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;
+  }
+}
+
+.avatar {
+  width: 38px !important;
+  height: 38px !important;
+  margin-top: 15px;
+}
+
+.action {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  min-width: 521px;
+  border-radius: none;
+  border-color: #6e1c80;
+  background: #6e1c80;
+  font: normal normal 14px/16px SF Pro Display Bold;
+  &:hover {
+    background: #b72687;
+  }
+}
+
+.arrow {
+  position: absolute;
+  color: var(--unnamed-color-6e1c80);
+  font: normal normal normal 18px/22px FontAwesome;
+  letter-spacing: 0px;
+  color: #6e1c80;
+  opacity: 1;
+  top: 100px;
+  &-left {
+    left: -3%;
+  }
+  &-right {
+    position: relative;
+    right: 0;
+  }
+}
+
+.el-row {
+  margin-bottom: 5px;
+}
+
+.grid-content {
+  min-height: 36px;
+  &--box {
+    min-height: 251px;
+  }
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+
+@media (min-width: 550px) {
+  .card {
+    min-width: 521px;
+  }
+}
+@media (max-width: 550px) {
+  .card {
+    min-width: 376px;
+  }
+}
+</style>

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

@@ -0,0 +1,228 @@
+<template>
+  <div class="card">
+    <el-row :gutter="20">
+      <el-col
+        class="heading"
+        :xs="10"
+        :sm="10"
+        :lg="6"
+      ><div class="">
+        <span class="heading__title">My booking</span>
+      </div>
+      </el-col>
+      <el-col
+        class="heading heading-icon"
+        :xs="2"
+        :sm="1"
+        :md="1"
+      ><div class=""><i class="el-icon-date" /></div></el-col>
+    </el-row>
+    <el-row :gutter="20" class="card-content">
+      <div class="arrow arrow-left"><i class="el-icon-arrow-left" /></div>
+      <el-col class="heading-content__right">
+        <p>
+          <span>INJURY</span><br>
+          <span class="major">Left Shoulder</span>
+        </p>
+        <el-row :gutter="10">
+          <el-col :span="2.5" :offset="0">
+            <pan-thumb :image="avatar" class="avatar" />
+          </el-col>
+          <el-col :span="12" :offset="0">
+            <p>
+              <span class="content">PT NAME</span><br>
+              <span class="content-value">DIMITRI ALEXIOU</span>
+            </p>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col class="heading-content" :xs="12" :sm="11" :md="7">
+        <div class="grid-content--box">
+          <div class="content">
+            <p class="border-bottom border-right">
+              <span class="content-title">DATE</span>
+              <br>
+              <span class="content-value">{{ date }}</span>
+            </p>
+            <p class="border-bottom border-right">
+              <span class="content-title">TIME</span>
+              <br>
+              <span class="content-value">{{ time }}</span>
+            </p>
+            <p class="border-right">
+              <span class="content-title">ORDER ID</span>
+              <br>
+              <span class="content-value">{{ orderId }}</span>
+            </p>
+          </div>
+        </div>
+      </el-col>
+      <el-button
+        type="primary"
+        icon="el-icon-help"
+        class="action"
+        :rounded="false"
+      >My Exercises</el-button>
+      <div class="arrow arrow-right"><i class="el-icon-arrow-right" /></div>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import PanThumb from '@/components/PanThumb'
+export default {
+  components: {
+    PanThumb
+  },
+  props: {
+    avatar: {
+      type: String,
+      default: require('@/assets/img/imgpsh_fullsize_anim.jpeg')
+    }
+  },
+  data() {
+    return {
+      date: '27-10-2021',
+      time: '18:30 - 18:50',
+      orderId: '346785'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heading {
+  top: 120px;
+  left: 211px;
+  width: 479px;
+  height: 38px;
+  background: #f48d00 0% 0% no-repeat padding-box;
+  box-shadow: 30px 30px 50px #9d248a6e;
+  border-radius: 6px;
+  opacity: 1;
+  color: #ffec03;
+  padding: 10px;
+  &-icon {
+    padding: 10px;
+    width: 38px;
+    margin-left: 4px;
+  }
+  &-content {
+    height: 251px;
+    width: 521px;
+    border-radius: 6px;
+    background: transparent
+      linear-gradient(180deg, #f48d00 0%, #8a198e 85%, #8a198e 100%) 0% 0%
+      no-repeat padding-box;
+    box-shadow: 30px 30px 50px #9d248a6e;
+    opacity: 1;
+    &__right {
+      position: absolute;
+      font: normal normal 900 14px/16px SF Pro Display;
+      letter-spacing: 0px;
+      color: #ffffff;
+      margin-top: 47px;
+      margin-left: 30%;
+    }
+  }
+  &__title {
+    top: 130px;
+    left: 232px;
+    width: 98px;
+    text-align: center;
+    font: normal normal 900 15px/18px SF Pro Display Bold;
+    letter-spacing: 0px;
+    text-transform: uppercase;
+    opacity: 1;
+  }
+}
+
+.major {
+  font: normal normal 900 34px/40px SF Pro Display Bold;
+}
+
+.content {
+  font: normal normal normal 14px/21px SF Pro Display;
+  letter-spacing: 0px;
+  color: #ffffff;
+  &-value {
+    font: normal normal 900 14px/21px SF Pro Display Bold;
+  }
+}
+
+.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;
+  }
+}
+
+.avatar {
+  width: 38px !important;
+  height: 38px !important;
+  margin-top: 15px;
+}
+
+.action {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  min-width: 521px;
+  border-radius: none;
+  border-color: #6e1c80;
+  background: #6e1c80;
+  font: normal normal 14px/16px SF Pro Display Bold;
+  &:hover {
+    background: #bc504a;
+  }
+}
+
+.arrow {
+  position: absolute;
+  color: var(--unnamed-color-6e1c80);
+  font: normal normal normal 18px/22px FontAwesome;
+  letter-spacing: 0px;
+  color: #6e1c80;
+  opacity: 1;
+  top: 100px;
+  &-left {
+    left: -3%;
+  }
+  &-right {
+    position: relative;
+    right: 0;
+  }
+}
+
+.card-content {
+  height: 251px;
+}
+
+.el-row {
+  margin-bottom: 5px;
+}
+
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+
+@media (min-width: 550px) {
+  .card {
+    min-width: 521px;
+  }
+}
+@media (max-width: 550px) {
+  .card {
+    min-width: 376px;
+  }
+}
+</style>

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

@@ -0,0 +1,247 @@
+<template>
+  <div class="card">
+    <el-row :gutter="20">
+      <el-col
+        class="heading"
+        :xs="10"
+        :sm="10"
+        :lg="6"
+      ><div class="">
+        <span class="heading__title">Injuries</span>
+      </div>
+      </el-col>
+      <el-col
+        class="heading heading-icon"
+        :xs="2"
+        :sm="1"
+        :md="1"
+      ><div class=""><i class="el-icon-help" /></div></el-col>
+    </el-row>
+    <el-row :gutter="20" class="card-content">
+      <div class="injuries">
+        <el-row :gutter="20" class="injuries-bloc">
+          <el-col
+            :span="15"
+            :offset="0"
+            class="injury-bloc injury-text injury-name"
+          >Left Shoulder</el-col>
+          <el-col
+            :span="7"
+            :offset="0"
+            class="injury-bloc injury-book"
+          >Book a physio</el-col>
+        </el-row>
+        <el-row :gutter="20" class="injuries-bloc">
+          <el-col
+            :span="15"
+            :offset="0"
+            class="injury-bloc injury-text injury-name"
+          >Right Elbow</el-col>
+          <el-col
+            :span="7"
+            :offset="0"
+            class="injury-bloc injury-book"
+          >Book a physio</el-col>
+        </el-row>
+        <el-row :gutter="20" class="injuries-bloc">
+          <el-col
+            :span="15"
+            :offset="0"
+            class="injury-bloc injury-text injury-name"
+          >Right Elbow</el-col>
+          <el-col
+            :span="7"
+            :offset="0"
+            class="injury-bloc injury-book"
+          >Book a physio</el-col>
+        </el-row>
+      </div>
+      <el-button
+        type="primary"
+        class="action"
+        :rounded="false"
+      >Add new injury</el-button>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    avatar: {
+      type: String,
+      default:
+        'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
+    }
+  },
+  data() {
+    return {
+      form: {
+        firstName: 'John',
+        lastName: 'Scott',
+        birthDate: '28/3/70',
+        email: 'John@gmail.com',
+        country: 'England',
+        city: 'London',
+        language: 'English, Greek',
+        mobile: '4567 7867897'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heading {
+  top: 120px;
+  left: 211px;
+  width: 479px;
+  height: 38px;
+  box-shadow: 30px 30px 50px #9d248a6e;
+  border-radius: 6px;
+  opacity: 1;
+  color: #778298;
+  padding: 10px;
+  &-icon {
+    padding: 10px;
+    width: 38px;
+    margin-left: 4px;
+  }
+  &-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;
+  }
+  &__title {
+    top: 130px;
+    left: 232px;
+    width: 98px;
+    height: 18px;
+    text-align: center;
+    font: normal normal 900 15px/18px SF Pro Display Bold;
+    letter-spacing: 0px;
+    text-transform: uppercase;
+    opacity: 1;
+  }
+}
+
+.major {
+  font: normal normal 900 34px/40px SF Pro Display;
+}
+
+.content {
+  font: normal normal normal 14px/21px SF Pro Display;
+  letter-spacing: 0px;
+  color: #ffffff;
+  &-value {
+    font: normal normal 900 14px/21px SF Pro Display;
+  }
+}
+
+.border {
+  &-bottom {
+    width: 126px;
+    border-bottom: 1px solid #ffd603;
+  }
+  &-right {
+    width: 126px;
+    border-right: 1px solid #ffd603;
+  }
+}
+
+.avatar {
+  width: 38px !important;
+  height: 38px !important;
+  margin-top: 15px;
+}
+
+.action {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  min-width: 481px;
+  margin: 0px 20px;
+  border-radius: none;
+  border-color: #dee0e6;
+  background: #7ad9fd;
+  color: #1c233d;
+  font: normal normal 14px/16px SF Pro Display Bold;
+}
+
+.card-content {
+  background: #ffffff;
+  padding: 20px;
+  border-radius: 6px;
+  min-height: 414px;
+  overflow: scroll;
+  box-shadow: 30px 30px 50px #77829840;
+}
+
+.injuries {
+  margin-bottom: 50px;
+}
+
+.injuries-bloc {
+  margin-left: 0px !important;
+  margin-right: -13px !important;
+}
+
+.injury-bloc {
+  height: 60px;
+  background: #f2f3f5;
+  border-radius: 5px;
+}
+
+.injury-text {
+  padding: 20px;
+  font: normal normal 16px/21px SF Pro Display Bold;
+  letter-spacing: 0px;
+  color: #192440;
+  border-radius: 5px;
+}
+
+.injury-book {
+  padding: 20px;
+  text-align: center;
+  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 {
+  margin-bottom: 5px;
+}
+
+.grid-content {
+  min-height: 36px;
+  &--box {
+    min-height: 251px;
+  }
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+
+@media (min-width: 550px) {
+  .card-content {
+    max-width: 521px;
+  }
+}
+
+@media (max-width: 550px) {
+  .card {
+    min-width: 376px;
+  }
+}
+</style>

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

@@ -0,0 +1,118 @@
+<template>
+  <div class="card">
+    <el-row :gutter="20">
+      <el-col class="heading-content" :xs="12" :sm="11" :md="7">
+        <div class="grid-content--box">
+          <div class="content">
+            <p class="border-bottom border-right">
+              <span class="content-title">Add a consultation</span>
+              <br>
+              <span class="content-value">Book a physio</span>
+            </p>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {},
+  data() {
+    return {}
+  },
+  computed: {
+    image() {
+      return require('@/assets/img/cover.png')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heading {
+  top: 120px;
+  left: 211px;
+  width: 479px;
+  height: 38px;
+  color: #ffec03;
+  padding: 10px;
+  mix-blend-mode: soft-light;
+  &-icon {
+    padding: 10px;
+    width: 38px;
+    margin-left: 4px;
+  }
+  &-content {
+    width: 521px;
+    height: 293px;
+    border-radius: 7px;
+    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 {
+      position: absolute;
+      font: normal normal 900 14px/16px SF Pro Display;
+      letter-spacing: 0px;
+      color: #ffffff;
+      margin-top: 47px;
+      margin-left: 30%;
+      height: 251px;
+    }
+  }
+  &__title {
+    top: 130px;
+    left: 232px;
+    width: 98px;
+    height: 18px;
+    text-align: center;
+    font: normal normal 900 15px/18px SF Pro Display;
+    letter-spacing: 0px;
+    text-transform: uppercase;
+    opacity: 1;
+  }
+}
+
+.major {
+  font: normal normal 900 34px/40px SF Pro Display;
+}
+
+.content {
+  font: normal normal normal 14px/16px SF Pro Display;
+  letter-spacing: 0px;
+  color: #ffffff;
+  margin-top: 20%;
+  margin-left: 20px;
+  &-value {
+    font: normal normal 900 34px/40px SF Pro Display Bold;
+  }
+}
+
+.el-row {
+  margin-bottom: 5px;
+}
+
+.grid-content {
+  min-height: 36px;
+  &--box {
+    min-height: 251px;
+  }
+}
+.row-bg {
+  padding: 10px 0;
+}
+
+@media (min-width: 550px) {
+  .card {
+    min-width: 521px;
+  }
+}
+@media (max-width: 550px) {
+  .card {
+    min-width: 376px;
+  }
+}
+</style>

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

@@ -0,0 +1,325 @@
+<template>
+  <div class="card">
+    <el-row :gutter="20">
+      <el-col
+        class="heading"
+        :xs="10"
+        :sm="10"
+        :lg="6"
+      ><div class="">
+        <span class="heading__title">Profile</span>
+      </div>
+      </el-col>
+      <el-col
+        class="heading heading-icon"
+        :xs="2"
+        :sm="1"
+        :md="1"
+      ><div class=""><i class="el-icon-document" /></div></el-col>
+    </el-row>
+    <el-row :gutter="20" class="card-content">
+      <el-tabs type="border-card">
+        <el-tab-pane label="General Profile">
+          <el-row :gutter="20">
+            <el-col :span="6" :offset="0">
+              <img
+                src="../../../../assets/img/profile.png"
+                class="profile-picture"
+              >
+              <el-upload
+                class="upload-demo"
+                action="https://jsonplaceholder.typicode.com/posts/"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :before-remove="beforeRemove"
+                multiple
+                :limit="1"
+                :on-exceed="handleExceed"
+                :file-list="fileList"
+              >
+                <el-button
+                  class="upload-btn"
+                  size="small"
+                >Upload photo</el-button>
+              </el-upload>
+            </el-col>
+            <el-col :span="18" :offset="0">
+              <el-form
+                ref="form"
+                :model="form"
+                label-width="96px"
+                label-position="left"
+                class="form"
+              >
+                <el-form-item label="First name">
+                  <el-input v-model="form.firstName" />
+                </el-form-item>
+                <el-form-item label="Last name">
+                  <el-input v-model="form.lastName" />
+                </el-form-item>
+                <el-form-item label="Date of birth">
+                  <el-input v-model="form.birthDate" />
+                </el-form-item>
+                <el-form-item label="email">
+                  <el-input v-model="form.email" />
+                </el-form-item>
+                <el-form-item label="Country">
+                  <el-input v-model="form.country" />
+                </el-form-item>
+                <el-form-item label="City">
+                  <el-input v-model="form.city" />
+                </el-form-item>
+                <el-form-item label="Language">
+                  <el-input v-model="form.language" />
+                </el-form-item>
+                <el-form-item label="Mobile">
+                  <el-input v-model="form.mobile" />
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane label="Medical related info">
+          <el-form
+            ref="form"
+            :model="form"
+            label-width="96px"
+            label-position="left"
+            class="form"
+          >
+            <el-form-item label="First name">
+              <el-input v-model="form.firstName" />
+            </el-form-item>
+            <el-form-item label="Last name">
+              <el-input v-model="form.lastName" />
+            </el-form-item>
+            <el-form-item label="Date of birth">
+              <el-input v-model="form.birthDate" />
+            </el-form-item>
+            <el-form-item label="email">
+              <el-input v-model="form.email" />
+            </el-form-item>
+            <el-form-item label="Country">
+              <el-input v-model="form.country" />
+            </el-form-item>
+            <el-form-item label="City">
+              <el-input v-model="form.city" />
+            </el-form-item>
+            <el-form-item label="Language">
+              <el-input v-model="form.language" />
+            </el-form-item>
+            <el-form-item label="Mobile">
+              <el-input v-model="form.mobile" />
+            </el-form-item>
+          </el-form>
+        </el-tab-pane>
+      </el-tabs>
+      <el-button
+        type="primary"
+        class="action"
+        :rounded="false"
+      >Save Profile</el-button>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        firstName: 'John',
+        lastName: 'Scott',
+        birthDate: '28/3/70',
+        email: 'John@gmail.com',
+        country: 'England',
+        city: 'London',
+        language: 'English, Greek',
+        mobile: '4567 7867897'
+      },
+      fileList: []
+    }
+  },
+  methods: {
+    handleRemove(file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePreview(file) {
+      console.log(file)
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `The limit is 3, you selected ${
+          files.length
+        } files this time, add up to ${files.length + fileList.length} totally`
+      )
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`Cancel the transfert of ${file.name} ?`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.heading {
+  top: 120px;
+  left: 211px;
+  width: 479px;
+  height: 38px;
+  box-shadow: 30px 30px 50px #19233F40;
+  border-radius: 6px;
+  opacity: 1;
+  color: #778298;
+  padding: 10px;
+  &-icon {
+    padding: 10px;
+    width: 38px;
+    margin-left: 4px;
+  }
+  &-content {
+    width: 521px;
+    border-radius: 6px;
+    opacity: 1;
+    &__right {
+      position: absolute;
+      font: normal normal 900 14px/16px SF Pro Display;
+      letter-spacing: 0px;
+      color: #ffffff;
+      margin-top: 47px;
+      margin-left: 30%;
+      height: 251px;
+    }
+  }
+  &__title {
+    top: 130px;
+    left: 232px;
+    width: 98px;
+    height: 18px;
+    text-align: center;
+    font: normal normal 900 15px/18px SF Pro Display Bold;
+    letter-spacing: 0px;
+    text-transform: uppercase;
+    opacity: 1;
+  }
+}
+
+.major {
+  font: normal normal 900 34px/40px SF Pro Display;
+}
+
+.content {
+  font: normal normal normal 14px/21px SF Pro Display;
+  letter-spacing: 0px;
+  color: #ffffff;
+  &-value {
+    font: normal normal 900 14px/21px SF Pro Display;
+  }
+}
+
+.border {
+  &-bottom {
+    width: 126px;
+    border-bottom: 1px solid #ffd603;
+  }
+  &-right {
+    width: 126px;
+    border-right: 1px solid #ffd603;
+  }
+}
+
+.profile-picture {
+  width: 101px;
+  height: 101px;
+  border-radius: 5px 5px 0px 0px;
+}
+
+.action {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  min-width: 481px;
+  margin: 10px 20px;
+  border-radius: none;
+  border-color: #dee0e6;
+  background: #dee0e6;
+  color: #778298;
+  font: normal normal 14px/16px SF Pro Display Bold;
+}
+
+.form {
+  padding-bottom: 30px;
+}
+
+.upload-btn {
+  padding: 10px;
+  background: #778298;
+  color: #FFFFFF;
+}
+
+.el-tabs__item {
+  width: 276px!important;
+}
+
+.el-row {
+  margin-bottom: 5px;
+}
+
+.grid-content {
+  min-height: 36px;
+  &--box {
+    min-height: 251px;
+  }
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+
+.card {
+  &-content {
+    border-radius: 6px;
+  }
+}
+
+@media (min-width: 550px) {
+  .card-content {
+    max-width: 521px;
+  }
+}
+
+@media (max-width: 550px) {
+  .card {
+    min-width: 376px;
+  }
+}
+</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>

src/views/dashboard/admin/index.vue

@@ -1,98 +1,47 @@
 <template>
   <div class="dashboard-editor-container">
-    <github-corner class="github-corner" />
+    <el-row :gutter="20" class="bookings">
-
+      <el-col :span="8" :offset="0">
-    <panel-group @handleSetLineChartData="handleSetLineChartData" />
+        <booking-card />
-
+        <br><br>
-    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+        <profile-card />
-      <line-chart :chart-data="lineChartData" />
-    </el-row>
-
-    <el-row :gutter="32">
-      <el-col :xs="24" :sm="24" :lg="8">
-        <div class="chart-wrapper">
-          <raddar-chart />
-        </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
+      <el-col :span="8" :offset="0">
-        <div class="chart-wrapper">
+        <exercise-card />
-          <pie-chart />
+        <br><br>
-        </div>
+        <injuries-card />
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="8">
+      <el-col :span="8" :offset="0">
-        <div class="chart-wrapper">
+        <physio-card />
-          <bar-chart />
+        <br><br>
-        </div>
+        <billing-card />
-      </el-col>
-    </el-row>
-
-    <el-row :gutter="8">
-      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
-        <transaction-table />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <todo-list />
-      </el-col>
-      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
-        <box-card />
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import GithubCorner from '@/components/GithubCorner'
+import BookingCard from './components/BookingCard'
-import PanelGroup from './components/PanelGroup'
+import ExerciseCard from './components/ExerciseCard'
-import LineChart from './components/LineChart'
+import PhysioCard from './components/PhysioCard'
-import RaddarChart from './components/RaddarChart'
+import ProfileCard from './components/ProfileCard'
-import PieChart from './components/PieChart'
+import InjuriesCard from './components/InjuriesCard'
-import BarChart from './components/BarChart'
+import BillingCard from './components/BillingCard'
-import TransactionTable from './components/TransactionTable'
-import TodoList from './components/TodoList'
-import BoxCard from './components/BoxCard'
-
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
 
 export default {
   name: 'DashboardAdmin',
   components: {
-    GithubCorner,
+    BookingCard,
-    PanelGroup,
+    ExerciseCard,
-    LineChart,
+    PhysioCard,
-    RaddarChart,
+    ProfileCard,
-    PieChart,
+    InjuriesCard,
-    BarChart,
+    BillingCard
-    TransactionTable,
-    TodoList,
-    BoxCard
   },
   data() {
-    return {
+    return {}
-      lineChartData: lineChartData.newVisitis
-    }
   },
-  methods: {
+  methods: {}
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    }
-  }
 }
 </script>
 
@@ -101,24 +50,6 @@ export default {
   padding: 32px;
   background-color: rgb(240, 242, 245);
   position: relative;
-
-  .github-corner {
-    position: absolute;
-    top: 0px;
-    border: 0;
-    right: 0;
-  }
-
-  .chart-wrapper {
-    background: #fff;
-    padding: 16px 16px 0;
-    margin-bottom: 32px;
-  }
 }
 
-@media (max-width:1024px) {
-  .chart-wrapper {
-    padding: 8px;
-  }
-}
 </style>

vue.config.js

@@ -24,7 +24,7 @@ module.exports = {
    * In most cases please use '/' !!!
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
-  publicPath: '/',
+  publicPath: process.env.NODE_ENV === 'production' ? '/vue-element-admin/' : '/',
   outputDir: 'dist',
   assetsDir: 'static',
   lintOnSave: process.env.NODE_ENV === 'development',