mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-04-06 03:57:53 +08:00
Initial commit
This commit is contained in:
baedyl
parent
0e61e6d82d
commit
c63b6743e4
BIN
src/assets/img/cover.png
Normal file
BIN
src/assets/img/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
BIN
src/assets/img/imgpsh_fullsize_anim.jpeg
Normal file
BIN
src/assets/img/imgpsh_fullsize_anim.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/assets/img/profile.png
Normal file
BIN
src/assets/img/profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@ -36,9 +36,9 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.pan-item {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
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%;
|
||||
|
||||
@ -20,26 +20,8 @@
|
||||
|
||||
<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">
|
||||
<i class="el-icon-caret-bottom" />
|
||||
<img :src="require('@/assets/img/profile.png')" class="user-avatar">
|
||||
</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>
|
||||
|
||||
BIN
src/styles/fonts/SFProDisplay-Heavy-1.ttf
Normal file
BIN
src/styles/fonts/SFProDisplay-Heavy-1.ttf
Normal file
Binary file not shown.
BIN
src/styles/fonts/SFProDisplay-Regular.ttf
Normal file
BIN
src/styles/fonts/SFProDisplay-Regular.ttf
Normal file
Binary file not shown.
@ -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;
|
||||
|
||||
BIN
src/vendor/FontsFree-Net-SFProDisplay-Regular.ttf
vendored
Normal file
BIN
src/vendor/FontsFree-Net-SFProDisplay-Regular.ttf
vendored
Normal file
Binary file not shown.
191
src/views/dashboard/admin/components/BillingCard.vue
Normal file
191
src/views/dashboard/admin/components/BillingCard.vue
Normal file
@ -0,0 +1,191 @@
|
||||
<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">
|
||||
<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-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;
|
||||
}
|
||||
|
||||
.el-table__header-wrapper {
|
||||
background: #778298!important;
|
||||
}
|
||||
|
||||
.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>
|
||||
224
src/views/dashboard/admin/components/BookingCard.vue
Normal file
224
src/views/dashboard/admin/components/BookingCard.vue
Normal file
@ -0,0 +1,224 @@
|
||||
<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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
&-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: 521px;
|
||||
border-radius: none;
|
||||
border-color: #6e1c80;
|
||||
background: #6e1c80;
|
||||
font: normal normal 14px/16px SF Pro Display Bold;
|
||||
}
|
||||
|
||||
.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 {
|
||||
right: 11%;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
220
src/views/dashboard/admin/components/ExerciseCard.vue
Normal file
220
src/views/dashboard/admin/components/ExerciseCard.vue
Normal file
@ -0,0 +1,220 @@
|
||||
<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;
|
||||
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: 521px;
|
||||
border-radius: none;
|
||||
border-color: #6e1c80;
|
||||
background: #6e1c80;
|
||||
font: normal normal 14px/16px SF Pro Display Bold;
|
||||
}
|
||||
|
||||
.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 {
|
||||
right: 11%;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
239
src/views/dashboard/admin/components/InjuriesCard.vue
Normal file
239
src/views/dashboard/admin/components/InjuriesCard.vue
Normal file
@ -0,0 +1,239 @@
|
||||
<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: 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;
|
||||
}
|
||||
|
||||
.injuries {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.injuries-bloc {
|
||||
margin-left: 0px !important;
|
||||
margin-right: -30px !important;
|
||||
}
|
||||
|
||||
.injury-bloc {
|
||||
height: 60px;
|
||||
background: #f2f3f5;
|
||||
}
|
||||
|
||||
.injury-text {
|
||||
padding: 20px;
|
||||
font: normal normal 16px/21px SF Pro Display Bold;
|
||||
letter-spacing: 0px;
|
||||
color: #192440;
|
||||
}
|
||||
|
||||
.injury-book {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
font: normal normal normal 13px/15px SF Pro Display;
|
||||
letter-spacing: 0px;
|
||||
color: #192440;
|
||||
}
|
||||
|
||||
.injury-name {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.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>
|
||||
117
src/views/dashboard/admin/components/PhysioCard.vue
Normal file
117
src/views/dashboard/admin/components/PhysioCard.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<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;
|
||||
background-image: 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>
|
||||
296
src/views/dashboard/admin/components/ProfileCard.vue
Normal file
296
src/views/dashboard/admin/components/ProfileCard.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<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 #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;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
width: 101px;
|
||||
height: 101px;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
}
|
||||
|
||||
.action {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
min-width: 481px;
|
||||
margin: 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-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>
|
||||
@ -1,98 +1,47 @@
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<github-corner class="github-corner" />
|
||||
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<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-row :gutter="20" class="bookings">
|
||||
<el-col :span="8" :offset="0">
|
||||
<booking-card />
|
||||
<br><br>
|
||||
<profile-card />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart />
|
||||
</div>
|
||||
<el-col :span="8" :offset="0">
|
||||
<exercise-card />
|
||||
<br><br>
|
||||
<injuries-card />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :lg="8">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart />
|
||||
</div>
|
||||
</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 :span="8" :offset="0">
|
||||
<physio-card />
|
||||
<br><br>
|
||||
<billing-card />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GithubCorner from '@/components/GithubCorner'
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart'
|
||||
import RaddarChart from './components/RaddarChart'
|
||||
import PieChart from './components/PieChart'
|
||||
import BarChart from './components/BarChart'
|
||||
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]
|
||||
}
|
||||
}
|
||||
import BookingCard from './components/BookingCard'
|
||||
import ExerciseCard from './components/ExerciseCard'
|
||||
import PhysioCard from './components/PhysioCard'
|
||||
import ProfileCard from './components/ProfileCard'
|
||||
import InjuriesCard from './components/InjuriesCard'
|
||||
import BillingCard from './components/BillingCard'
|
||||
|
||||
export default {
|
||||
name: 'DashboardAdmin',
|
||||
components: {
|
||||
GithubCorner,
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
RaddarChart,
|
||||
PieChart,
|
||||
BarChart,
|
||||
TransactionTable,
|
||||
TodoList,
|
||||
BoxCard
|
||||
BookingCard,
|
||||
ExerciseCard,
|
||||
PhysioCard,
|
||||
ProfileCard,
|
||||
InjuriesCard,
|
||||
BillingCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
this.lineChartData = lineChartData[type]
|
||||
}
|
||||
}
|
||||
methods: {}
|
||||
}
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user