From adc0b455e07d45ca4d45feb9947d1fe6cbd1a1fe Mon Sep 17 00:00:00 2001
From: gaofy <1014893517@qq.com>
Date: Fri, 15 Dec 2023 18:08:45 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/animastore.css                 | 2833 +++++++++++++++++
 src/assets/css/custom-element.scss            |   74 +
 src/assets/css/global.scss                    |  370 +--
 src/assets/css/variable.scss                  |   19 +-
 src/assets/font/demo_index.html               |  167 +-
 src/assets/font/iconfont.css                  |   34 +-
 src/assets/font/iconfont.js                   |    2 +-
 src/assets/font/iconfont.json                 |   49 +
 src/assets/font/iconfont.ttf                  |  Bin 1740 -> 4292 bytes
 src/assets/font/iconfont.woff                 |  Bin 1100 -> 2932 bytes
 src/assets/font/iconfont.woff2                |  Bin 748 -> 2400 bytes
 src/components/user-info.vue                  |  167 +
 src/main.ts                                   |    2 +
 src/router/index.ts                           |   21 +
 src/static-data/core.ts                       |   51 +-
 src/stores/user-info-store.ts                 |   14 +-
 src/utils/date-util.ts                        |   55 +
 src/views/home/home.vue                       |   90 +-
 src/views/home/number-chart.vue               |  177 +
 src/views/home/time-chart.vue                 |  177 +
 src/views/index.vue                           |  221 +-
 src/views/login/login.vue                     |  126 +-
 src/views/logs-manage/logs-manage.vue         |   14 +
 src/views/patients-manage/patients-manage.vue |   14 +
 .../permissions-manage/permissions-manage.vue |   14 +
 src/views/remote-manage/chart-ecg.vue         |    2 +-
 src/views/remote-manage/chart-line.vue        |    2 +-
 src/views/remote-manage/date-util.ts          |   17 -
 src/views/remote-manage/remote-manage.vue     |  139 +-
 src/views/system-manage/system-manage.vue     |   14 +
 30 files changed, 4313 insertions(+), 552 deletions(-)
 create mode 100644 src/assets/css/animastore.css
 create mode 100644 src/assets/css/custom-element.scss
 create mode 100644 src/components/user-info.vue
 create mode 100644 src/utils/date-util.ts
 create mode 100644 src/views/home/number-chart.vue
 create mode 100644 src/views/home/time-chart.vue
 create mode 100644 src/views/logs-manage/logs-manage.vue
 create mode 100644 src/views/patients-manage/patients-manage.vue
 create mode 100644 src/views/permissions-manage/permissions-manage.vue
 delete mode 100644 src/views/remote-manage/date-util.ts
 create mode 100644 src/views/system-manage/system-manage.vue

diff --git a/src/assets/css/animastore.css b/src/assets/css/animastore.css
new file mode 100644
index 0000000..87bf132
--- /dev/null
+++ b/src/assets/css/animastore.css
@@ -0,0 +1,2833 @@
+/* 窗口弹出动画 */
+.pop-out {
+    animation: pop-out-animation .6s forwards;
+}
+
+@keyframes pop-out-animation {
+    0% {
+        transform: scale(0.5);
+        opacity: 0;
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.move_1 {
+    animation: move_1 1s;
+}
+
+@keyframes move_1 {
+    0% {
+        transform: translateY(-200px);
+        opacity: 0;
+    }
+}
+
+.move_2 {
+    animation: move_2 1s;
+}
+
+@keyframes move_2 {
+    0% {
+        transform: translateX(200px);
+        opacity: 0;
+    }
+}
+
+.move_3 {
+    animation: move_3 1s;
+}
+
+@keyframes move_3 {
+    0% {
+        transform: translateY(200px);
+        opacity: 0;
+    }
+}
+
+.move_4 {
+    animation: move_4 1s;
+}
+
+@keyframes move_4 {
+    0% {
+        transform: translateX(-200px);
+        opacity: 0;
+    }
+}
+
+
+.zoom_1 {
+    animation: zoom_1 1s;
+}
+
+@keyframes zoom_1 {
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+}
+
+.zoom_2 {
+    animation: zoom_2 1s;
+}
+
+@keyframes zoom_2 {
+    0% {
+        transform: scale(2);
+        opacity: 0;
+    }
+}
+
+.zoom_3 {
+    animation: zoom_3 1s;
+}
+
+@keyframes zoom_3 {
+    0% {
+        transform: scaleX(0);
+        opacity: 0;
+    }
+}
+
+.zoom_4 {
+    animation: zoom_4 1s;
+}
+
+@keyframes zoom_4 {
+    0% {
+        transform: scaleY(0);
+        opacity: 0;
+    }
+}
+
+.zoom_move_1 {
+    animation: zoom_move_1 1s;
+}
+
+@keyframes zoom_move_1 {
+    0% {
+        opacity: 0;
+        transform: scale(.1) translateY(-1000px);
+        animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale(.475) translateY(60px);
+        animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
+    }
+}
+
+.zoom_move_2 {
+    animation: zoom_move_2 1s;
+}
+
+@keyframes zoom_move_2 {
+    0% {
+        opacity: 0;
+        transform: scale(.1) translateX(1000px);
+        animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale(.475) translateX(-10px);
+        animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
+    }
+}
+
+.zoom_move_3 {
+    animation: zoom_move_3 1s;
+}
+
+@keyframes zoom_move_3 {
+    0% {
+        opacity: 0;
+        transform: scale(.1) translateY(1000px);
+        animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale(.475) translateY(-60px);
+        animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
+    }
+}
+
+.zoom_move_4 {
+    animation: zoom_move_4 1s;
+}
+
+@keyframes zoom_move_4 {
+    0% {
+        opacity: 0;
+        transform: scale(.1) translateX(-1000px);
+        animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
+    }
+
+    60% {
+        opacity: 1;
+        transform: scale(.475) translateX(10px);
+        animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
+    }
+}
+
+.zoom_move_5 {
+    animation: zoom_move_5 1s;
+}
+
+@keyframes zoom_move_5 {
+    0% {
+        opacity: 0;
+        transform: scale(.1) translateX(-1000px);
+    }
+}
+
+.zoom_move_6 {
+    animation: zoom_move_6 1s;
+}
+
+@keyframes zoom_move_6 {
+    0% {
+        opacity: 0;
+        transform: translateX(-400px) scale(0);
+    }
+}
+
+
+.rotate_1 {
+    animation: rotate_1 1s;
+}
+
+@keyframes rotate_1 {
+    0% {
+        opacity: 0;
+        transform: rotate(360deg);
+    }
+}
+
+.rotate_2 {
+    animation: rotate_2 1s;
+    transform-origin: 0% 0%;
+}
+
+@keyframes rotate_2 {
+    0% {
+        opacity: 0;
+        transform: rotate(180deg);
+    }
+}
+
+.rotate_3 {
+    animation: rotate_3 1s;
+    transform-origin: 100% 0%;
+}
+
+@keyframes rotate_3 {
+    0% {
+        opacity: 0;
+        transform: rotate(-180deg);
+    }
+}
+
+.rotate_4 {
+    animation: rotate_4 1s;
+    transform-origin: 100% 100%;
+}
+
+@keyframes rotate_4 {
+    0% {
+        opacity: 0;
+        transform: rotate(-180deg);
+    }
+}
+
+.rotate_5 {
+    animation: rotate_5 1s;
+    transform-origin: 0% 100%;
+}
+
+@keyframes rotate_5 {
+    0% {
+        opacity: 0;
+        transform: rotate(180deg);
+    }
+}
+
+.rotate_6 {
+    animation: rotate_6 1s;
+    transform-origin: -100% -100%;
+}
+
+@keyframes rotate_6 {
+    0% {
+        opacity: 0;
+        transform: rotate(180deg);
+    }
+}
+
+.rotate_zoom_1 {
+    animation: rotate_zoom_1 1s;
+}
+
+@keyframes rotate_zoom_1 {
+    0% {
+        opacity: 0;
+        transform: rotate(180deg) scale(0);
+    }
+}
+
+.rotate_zoom_2 {
+    animation: rotate_zoom_2 1s;
+}
+
+@keyframes rotate_zoom_2 {
+    0% {
+        opacity: 0;
+        transform: rotate(180deg) scale(2);
+    }
+}
+
+
+.rotate_zoom_3 {
+    animation: rotate_zoom_3 1s;
+    transform-origin: 30% 30%;
+}
+
+@keyframes rotate_zoom_3 {
+    0% {
+        opacity: 0;
+        transform: rotate(720deg) scale(0);
+    }
+}
+
+.rotate_zoom_4 {
+    animation: rotate_zoom_4 1s;
+    transform-origin: 30% 30%;
+}
+
+@keyframes rotate_zoom_4 {
+    0% {
+        opacity: 0;
+        transform: rotate(720deg) scale(2);
+    }
+}
+
+
+.rotate_move_1 {
+    animation: rotate_move_1 1s;
+}
+
+@keyframes rotate_move_1 {
+    0% {
+        opacity: 0;
+        transform: translateX(280px) rotate(480deg);
+    }
+}
+
+.rotate_move_2 {
+    animation: rotate_move_2 1s;
+}
+
+@keyframes rotate_move_2 {
+    0% {
+        opacity: 0;
+        transform: rotate(120deg) translateX(-400px);
+    }
+}
+
+.rotate_move_3 {
+    animation: rotate_move_3 1s;
+}
+
+@keyframes rotate_move_3 {
+    0% {
+        opacity: 0;
+        transform: rotate(30deg) translateX(240px);
+    }
+}
+
+.rotate_move_4 {
+    animation: rotate_move_4 1s;
+}
+
+@keyframes rotate_move_4 {
+    0% {
+        opacity: 0;
+        transform: rotate(960deg) translateX(300px);
+    }
+}
+
+.skew_move_1 {
+    animation: skew_move_1 1s;
+    transform-origin: 0% 100%;
+}
+
+@keyframes skew_move_1 {
+    0% {
+        opacity: 0;
+        transform: translateX(260px) skewX(-24deg);
+    }
+}
+
+
+.bounce_move_1 {
+    animation: bounce_move_1 .8s ease-out;
+}
+
+@keyframes bounce_move_1 {
+    0% {
+        opacity: 0;
+        transform: translateY(-440px);
+    }
+
+    40% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-10px);
+    }
+
+    60% {
+        transform: translateY(0);
+    }
+
+    70% {
+        transform: translateY(-2px);
+    }
+
+    80%,
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.bounce_move_2 {
+    animation: bounce_move_2 .8s ease-out;
+}
+
+@keyframes bounce_move_2 {
+    0% {
+        opacity: 0;
+        transform: translateX(440px);
+    }
+
+    40% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    50% {
+        transform: translateX(10px);
+    }
+
+    60% {
+        transform: translateX(0);
+    }
+
+    70% {
+        transform: translateX(2px);
+    }
+
+    80%,
+    100% {
+        transform: translateX(0);
+    }
+}
+
+.bounce_move_3 {
+    animation: bounce_move_3 .8s ease-out;
+}
+
+@keyframes bounce_move_3 {
+    0% {
+        opacity: 0;
+        transform: translateY(440px);
+    }
+
+    40% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(10px);
+    }
+
+    60% {
+        transform: translateY(0);
+    }
+
+    70% {
+        transform: translateY(2px);
+    }
+
+    80%,
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.bounce_move_4 {
+    animation: bounce_move_4 .8s ease-out;
+}
+
+@keyframes bounce_move_4 {
+    0% {
+        opacity: 0;
+        transform: translateX(-440px);
+    }
+
+    40% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    50% {
+        transform: translateX(-10px);
+    }
+
+    60% {
+        transform: translateX(0);
+    }
+
+    70% {
+        transform: translateX(-2px);
+    }
+
+    80%,
+    100% {
+        transform: translateX(0);
+    }
+}
+
+
+.bounce_scale_1 {
+    animation: bounce_scale_1 .8s ease-out;
+}
+
+@keyframes bounce_scale_1 {
+    0% {
+        opacity: 0;
+        transform: scale(0);
+    }
+
+    25% {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    40% {
+        transform: scale(0.9);
+    }
+
+    55% {
+        transform: scale(1);
+    }
+
+    70% {
+        transform: scale(0.98);
+    }
+
+    85%,
+    100% {
+        transform: scale(1);
+    }
+}
+
+
+.bounce_scale_2 {
+    animation: bounce_scale_2 1s ease-out;
+}
+
+@keyframes bounce_scale_2 {
+    0% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+
+    25% {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    40% {
+        transform: scale(1.1);
+    }
+
+    55% {
+        transform: scale(1);
+    }
+
+    70% {
+        transform: scale(1.02);
+    }
+
+    85%,
+    100% {
+        transform: scale(1);
+    }
+}
+
+
+.bounce_fall {
+    animation: bounce_fall 1s linear;
+}
+
+@keyframes bounce_fall {
+    0% {
+        transform: translateY(-400px);
+    }
+
+    4% {
+        transform: translateY(-395.16px);
+    }
+
+    8% {
+        transform: translateY(-380.64px);
+    }
+
+    12% {
+        transform: translateY(-356.44px);
+    }
+
+    16% {
+        transform: translateY(-322.56px);
+    }
+
+    20% {
+        transform: translateY(-279px);
+    }
+
+    24% {
+        transform: translateY(-225.76px);
+    }
+
+    28% {
+        transform: translateY(-162.84px);
+    }
+
+    32% {
+        transform: translateY(-90.24px);
+    }
+
+    36% {
+        transform: translateY(-7.96px);
+    }
+
+    40% {
+        transform: translateY(-36px);
+    }
+
+    44% {
+        transform: translateY(-66.36px);
+    }
+
+    48% {
+        transform: translateY(-87.04px);
+    }
+
+    52% {
+        transform: translateY(-98.04px);
+    }
+
+    56% {
+        transform: translateY(-99.36px);
+    }
+
+    60% {
+        transform: translateY(-91px);
+    }
+
+    64% {
+        transform: translateY(-72.96px);
+    }
+
+    68% {
+        transform: translateY(-45.24px);
+    }
+
+    72% {
+        transform: translateY(-7.84px);
+    }
+
+    76% {
+        transform: translateY(-14.76px);
+    }
+
+    80% {
+        transform: translateY(-24px);
+    }
+
+    84% {
+        transform: translateY(-23.56px);
+    }
+
+    88% {
+        transform: translateY(-13.44px);
+    }
+
+    92% {
+        transform: translateY(-2.64px);
+    }
+
+    96% {
+        transform: translateY(-6.16px);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+
+.swing_move_1 {
+    animation: swing_move_1 1s;
+}
+
+@keyframes swing_move_1 {
+    0% {
+        opacity: 0;
+        transform: translateY(-480px);
+    }
+
+    25% {
+        opacity: 1;
+        transform: translateY(40px);
+    }
+
+    40% {
+        transform: translateY(-18px);
+    }
+
+    55% {
+        transform: translateY(8px);
+    }
+
+    70% {
+        transform: translateY(-5px);
+    }
+
+    85% {
+        transform: translateY(2px);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.swing_move_2 {
+    animation: swing_move_2 1s;
+}
+
+@keyframes swing_move_2 {
+    0% {
+        opacity: 0;
+        transform: translateX(480px);
+    }
+
+    25% {
+        opacity: 1;
+        transform: translateX(-40px);
+    }
+
+    40% {
+        transform: translateX(18px);
+    }
+
+    55% {
+        transform: translateX(-8px);
+    }
+
+    70% {
+        transform: translateX(5px);
+    }
+
+    85% {
+        transform: translateX(-2px);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+.swing_move_3 {
+    animation: swing_move_3 1s;
+}
+
+@keyframes swing_move_3 {
+    0% {
+        opacity: 0;
+        transform: translateY(480px);
+    }
+
+    25% {
+        opacity: 1;
+        transform: translateY(-40px);
+    }
+
+    40% {
+        transform: translateY(18px);
+    }
+
+    55% {
+        transform: translateY(-8px);
+    }
+
+    70% {
+        transform: translateY(5px);
+    }
+
+    85% {
+        transform: translateY(-2px);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.swing_move_4 {
+    animation: swing_move_4 1s;
+}
+
+@keyframes swing_move_4 {
+    0% {
+        opacity: 0;
+        transform: translateX(-480px);
+    }
+
+    25% {
+        opacity: 1;
+        transform: translateX(40px);
+    }
+
+    40% {
+        transform: translateX(-18px);
+    }
+
+    55% {
+        transform: translateX(8px);
+    }
+
+    70% {
+        transform: translateX(-5px);
+    }
+
+    85% {
+        transform: translateX(2px);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+
+
+.swing_scale_1 {
+    animation: swing_scale_1 1s ease;
+}
+
+@keyframes swing_scale_1 {
+    0% {
+        opacity: 0;
+        transform: scale(0);
+    }
+
+    20% {
+        opacity: 1;
+        transform: scale(1.2);
+    }
+
+    35% {
+        transform: scale(0.9);
+    }
+
+    50% {
+        transform: scale(1.08);
+    }
+
+    65% {
+        transform: scale(0.96);
+    }
+
+    80% {
+        transform: scale(1.02);
+    }
+
+    95%,
+    100% {
+        transform: scale(1);
+    }
+}
+
+.swing_scale_2 {
+    animation: swing_scale_2 1s;
+}
+
+@keyframes swing_scale_2 {
+    0% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+
+    25% {
+        opacity: 1;
+        transform: scale(0.84);
+    }
+
+    40% {
+        transform: scale(1.08);
+    }
+
+    55% {
+        transform: scale(0.94);
+    }
+
+    70% {
+        transform: scale(1.02);
+    }
+
+    85% {
+        transform: scale(0.99);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+.swing_rotate_1 {
+    animation: swing_rotate_1 1s linear;
+}
+
+@keyframes swing_rotate_1 {
+    0% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+        opacity: 0;
+    }
+
+    7.61% {
+        transform: matrix3d(0.186, 0.982, 0, 0, -0.982, 0.186, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    11.41% {
+        transform: matrix3d(-0.197, 0.98, 0, 0, -0.98, -0.197, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    15.22% {
+        transform: matrix3d(-0.299, 0.954, 0, 0, -0.954, -0.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    19.82% {
+        transform: matrix3d(-0.21, 0.978, 0, 0, -0.978, -0.21, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    24.32% {
+        transform: matrix3d(-0.069, 0.998, 0, 0, -0.998, -0.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+        opacity: 1;
+    }
+
+    28.93% {
+        transform: matrix3d(0.025, 1, 0, 0, -1, 0.025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    33.43% {
+        transform: matrix3d(0.05, 0.999, 0, 0, -0.999, 0.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    51.55% {
+        transform: matrix3d(-0.008, 1, 0, 0, -1, -0.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    69.77% {
+        transform: matrix3d(0.001, 1, 0, 0, -1, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    87.99% {
+        transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    100% {
+        transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+}
+
+.swing_skew_1 {
+    animation: swing_skew_1 1s ease;
+    transform-origin: 0% 100%;
+}
+
+@keyframes swing_skew_1 {
+    0% {
+        opacity: 0;
+        transform: translateX(400px) skew(-45deg)
+    }
+
+    30% {
+        opacity: 1;
+        transform: translateX(0) skew(8deg);
+    }
+
+    50% {
+        transform: translateX(0) skew(-3deg);
+    }
+
+    70% {
+        transform: translateX(0) skew(1deg);
+    }
+}
+
+
+.swing_flip_1 {
+    animation: swing_flip_1 1s;
+}
+
+@keyframes swing_flip_1 {
+    0% {
+        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        transition-timing-function: ease-in;
+        opacity: 0
+    }
+
+    40% {
+        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        transition-timing-function: ease-in;
+    }
+
+    60% {
+        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+        opacity: 1
+    }
+
+    80% {
+        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    }
+
+    100% {
+        transform: perspective(400px);
+    }
+}
+
+.swing_flip_2 {
+    animation: swing_flip_2 1s;
+}
+
+@keyframes swing_flip_2 {
+    0% {
+        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+        transition-timing-function: ease-in;
+        opacity: 0
+    }
+
+    40% {
+        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+        transition-timing-function: ease-in;
+    }
+
+    60% {
+        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+        opacity: 1
+    }
+
+    80% {
+        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+    }
+
+    100% {
+        transform: perspective(400px);
+    }
+}
+
+.swing_flip_3 {
+    animation: swing_flip_3 1s;
+}
+
+@keyframes swing_flip_3 {
+    0% {
+        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+        animation-timing-function: ease-out;
+        opacity: 0;
+    }
+
+    40% {
+        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+        animation-timing-function: ease-out;
+        opacity: 1;
+    }
+
+    50% {
+        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+        animation-timing-function: ease-in;
+    }
+
+    80% {
+        transform: perspective(400px) scale3d(.95, .95, .95);
+        animation-timing-function: ease-in;
+    }
+
+    100% {
+        transform: perspective(400px);
+        animation-timing-function: ease-in;
+    }
+}
+
+.back_move_1 {
+    animation: back_move_1 1s ease;
+}
+
+@keyframes back_move_1 {
+    0% {
+        opacity: 0;
+        transform: translateY(-400px);
+    }
+
+    45% {
+        opacity: 1;
+        transform: translateY(16px);
+    }
+
+    90% {
+        transform: translateY(0);
+    }
+}
+
+.back_move_2 {
+    animation: back_move_2 1s ease;
+}
+
+@keyframes back_move_2 {
+    0% {
+        opacity: 0;
+        transform: translateX(400px);
+    }
+
+    45% {
+        opacity: 1;
+        transform: translateX(-16px);
+    }
+
+    90% {
+        transform: translateX(0);
+    }
+}
+
+.back_move_3 {
+    animation: back_move_3 1s ease;
+}
+
+@keyframes back_move_3 {
+    0% {
+        opacity: 0;
+        transform: translateY(400px);
+    }
+
+    45% {
+        opacity: 1;
+        transform: translateY(-16px);
+    }
+
+    90% {
+        transform: translateY(0);
+    }
+}
+
+.back_move_4 {
+    animation: back_move_4 1s ease;
+}
+
+@keyframes back_move_4 {
+    0% {
+        opacity: 0;
+        transform: translateX(-400px);
+    }
+
+    45% {
+        opacity: 1;
+        transform: translateX(16px);
+    }
+
+    90% {
+        transform: translateX(0);
+    }
+}
+
+
+.back_scale_1 {
+    animation: back_scale_1 1s ease;
+}
+
+@keyframes back_scale_1 {
+    0% {
+        opacity: 0;
+        transform: scale(0);
+    }
+
+    45% {
+        opacity: 1;
+        transform: scale(1.2);
+    }
+
+    90% {
+        transform: scale(1);
+    }
+}
+
+.back_scale_2 {
+    animation: back_scale_2 1s ease;
+}
+
+@keyframes back_scale_2 {
+    0% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+
+    45% {
+        opacity: 1;
+        transform: scale(0.8);
+    }
+
+    90% {
+        transform: scale(1);
+    }
+}
+
+
+.back_rotate_1 {
+    animation: back_rotate_1 1s ease;
+}
+
+@keyframes back_rotate_1 {
+    0% {
+        opacity: 0;
+        transform: translateX(400px) rotate(360deg);
+    }
+
+    50% {
+        opacity: 1;
+        transform: translateX(-20px) rotate(-20deg);
+    }
+}
+
+.jelly_scale_1 {
+    animation: jelly_scale_1 1s linear;
+}
+
+@keyframes jelly_scale_1 {
+    0% {
+        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+        opacity: 0;
+    }
+
+    3.4% {
+        transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    4.7% {
+        transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    6.81% {
+        transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    9.41% {
+        transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    10.21% {
+        transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    13.61% {
+        transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    14.11% {
+        transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    17.52% {
+        transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+        opacity: 1;
+    }
+
+    18.72% {
+        transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    21.32% {
+        transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    24.32% {
+        transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    25.23% {
+        transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    29.03% {
+        transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    29.93% {
+        transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    35.54% {
+        transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    36.74% {
+        transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    41.04% {
+        transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    44.44% {
+        transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    52.15% {
+        transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    59.86% {
+        transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    63.26% {
+        transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    75.28% {
+        transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    85.49% {
+        transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    90.69% {
+        transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    100% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+}
+
+
+
+.jelly_scale_2 {
+    animation: jelly_scale_2 1s linear;
+}
+
+@keyframes jelly_scale_2 {
+    0% {
+        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+        opacity: 0;
+    }
+
+    3.2% {
+        transform: matrix3d(0.345, 0.098, 0, 0, 0.065, 0.345, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    4.5% {
+        transform: matrix3d(0.485, 0.163, 0, 0, 0.107, 0.485, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    6.41% {
+        transform: matrix3d(0.673, 0.242, 0, 0, 0.158, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    9.01% {
+        transform: matrix3d(0.88, 0.288, 0, 0, 0.188, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    12.71% {
+        transform: matrix3d(1.064, 0.241, 0, 0, 0.159, 1.064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    13.51% {
+        transform: matrix3d(1.087, 0.221, 0, 0, 0.146, 1.087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    17.92% {
+        transform: matrix3d(1.139, 0.105, 0, 0, 0.07, 1.139, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    18.92% {
+        transform: matrix3d(1.137, 0.082, 0, 0, 0.055, 1.137, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+        opacity: 1;
+    }
+
+    25.23% {
+        transform: matrix3d(1.075, -0.001, 0, 0, -0.001, 1.075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    29.03% {
+        transform: matrix3d(1.032, -0.015, 0, 0, -0.01, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    31.43% {
+        transform: matrix3d(1.012, -0.017, 0, 0, -0.011, 1.012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    34.63% {
+        transform: matrix3d(0.994, -0.014, 0, 0, -0.01, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    40.14% {
+        transform: matrix3d(0.985, -0.007, 0, 0, -0.005, 0.985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    56.46% {
+        transform: matrix3d(1, 0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    62.36% {
+        transform: matrix3d(1.002, 0.001, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    81.48% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    84.68% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    100% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+}
+
+
+
+.jelly_move_1 {
+    animation: jelly_move_1 1s linear;
+}
+
+@keyframes jelly_move_1 {
+    0% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1);
+    }
+
+    2.92% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -135.218, 0, 0, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -135.218, 0, 0, 1);
+    }
+
+    3.37% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -114.871, 0, 0, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -114.871, 0, 0, 1);
+    }
+
+    3.47% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -110.596, 0, 0, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -110.596, 0, 0, 1);
+    }
+
+    4.58% {
+        transform: matrix3d(1.796, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -68.65, 0, 0, 1);
+        transform: matrix3d(1.796, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -68.65, 0, 0, 1);
+    }
+
+    5.69% {
+        transform: matrix3d(1.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -36.551, 0, 0, 1);
+        transform: matrix3d(1.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -36.551, 0, 0, 1);
+    }
+
+    5.76% {
+        transform: matrix3d(1.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -34.768, 0, 0, 1);
+        transform: matrix3d(1.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -34.768, 0, 0, 1);
+    }
+
+    7.41% {
+        transform: matrix3d(1.743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.804, 0, 0, 1);
+        transform: matrix3d(1.743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.804, 0, 0, 1);
+    }
+
+    7.51% {
+        transform: matrix3d(1.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.454, 0, 0, 1);
+        transform: matrix3d(1.72, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.454, 0, 0, 1);
+    }
+
+    7.88% {
+        transform: matrix3d(1.568, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 2.008, 0, 0, 1);
+        transform: matrix3d(1.568, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 2.008, 0, 0, 1);
+    }
+
+    8.68% {
+        transform: matrix3d(1.275, 0, 0, 0, 0, 1.181, 0, 0, 0, 0, 1, 0, 9.646, 0, 0, 1);
+        transform: matrix3d(1.275, 0, 0, 0, 0, 1.181, 0, 0, 0, 0, 1, 0, 9.646, 0, 0, 1);
+    }
+
+    10.03% {
+        transform: matrix3d(0.929, 0, 0, 0, 0, 1.333, 0, 0, 0, 0, 1, 0, 16.853, 0, 0, 1);
+        transform: matrix3d(0.929, 0, 0, 0, 0, 1.333, 0, 0, 0, 0, 1, 0, 16.853, 0, 0, 1);
+    }
+
+    10.85% {
+        transform: matrix3d(0.798, 0, 0, 0, 0, 1.398, 0, 0, 0, 0, 1, 0, 18.613, 0, 0, 1);
+        transform: matrix3d(0.798, 0, 0, 0, 0, 1.398, 0, 0, 0, 0, 1, 0, 18.613, 0, 0, 1);
+    }
+
+    11.53% {
+        transform: matrix3d(0.723, 0, 0, 0, 0, 1.439, 0, 0, 0, 0, 1, 0, 18.992, 0, 0, 1);
+        transform: matrix3d(0.723, 0, 0, 0, 0, 1.439, 0, 0, 0, 0, 1, 0, 18.992, 0, 0, 1);
+    }
+
+    12.22% {
+        transform: matrix3d(0.673, 0, 0, 0, 0, 1.469, 0, 0, 0, 0, 1, 0, 18.618, 0, 0, 1);
+        transform: matrix3d(0.673, 0, 0, 0, 0, 1.469, 0, 0, 0, 0, 1, 0, 18.618, 0, 0, 1);
+    }
+
+    14.18% {
+        transform: matrix3d(0.622, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 15.054, 0, 0, 1);
+        transform: matrix3d(0.622, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 15.054, 0, 0, 1);
+    }
+
+    14.37% {
+        transform: matrix3d(0.622, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 14.604, 0, 0, 1);
+        transform: matrix3d(0.622, 0, 0, 0, 0, 1.501, 0, 0, 0, 0, 1, 0, 14.604, 0, 0, 1);
+    }
+
+    19.23% {
+        transform: matrix3d(0.739, 0, 0, 0, 0, 1.371, 0, 0, 0, 0, 1, 0, 3.855, 0, 0, 1);
+        transform: matrix3d(0.739, 0, 0, 0, 0, 1.371, 0, 0, 0, 0, 1, 0, 3.855, 0, 0, 1);
+    }
+
+    20.01% {
+        transform: matrix3d(0.764, 0, 0, 0, 0, 1.338, 0, 0, 0, 0, 1, 0, 2.724, 0, 0, 1);
+        transform: matrix3d(0.764, 0, 0, 0, 0, 1.338, 0, 0, 0, 0, 1, 0, 2.724, 0, 0, 1);
+    }
+
+    23.05% {
+        transform: matrix3d(0.856, 0, 0, 0, 0, 1.211, 0, 0, 0, 0, 1, 0, 0.036, 0, 0, 1);
+        transform: matrix3d(0.856, 0, 0, 0, 0, 1.211, 0, 0, 0, 0, 1, 0, 0.036, 0, 0, 1);
+    }
+
+    25.75% {
+        transform: matrix3d(0.922, 0, 0, 0, 0, 1.114, 0, 0, 0, 0, 1, 0, -0.709, 0, 0, 1);
+        transform: matrix3d(0.922, 0, 0, 0, 0, 1.114, 0, 0, 0, 0, 1, 0, -0.709, 0, 0, 1);
+    }
+
+    26.94% {
+        transform: matrix3d(0.946, 0, 0, 0, 0, 1.078, 0, 0, 0, 0, 1, 0, -0.76, 0, 0, 1);
+        transform: matrix3d(0.946, 0, 0, 0, 0, 1.078, 0, 0, 0, 0, 1, 0, -0.76, 0, 0, 1);
+    }
+
+    31.58% {
+        transform: matrix3d(1.009, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, -0.406, 0, 0, 1);
+        transform: matrix3d(1.009, 0, 0, 0, 0, 0.987, 0, 0, 0, 0, 1, 0, -0.406, 0, 0, 1);
+    }
+
+    31.73% {
+        transform: matrix3d(1.01, 0, 0, 0, 0, 0.986, 0, 0, 0, 0, 1, 0, -0.392, 0, 0, 1);
+        transform: matrix3d(1.01, 0, 0, 0, 0, 0.986, 0, 0, 0, 0, 1, 0, -0.392, 0, 0, 1);
+    }
+
+    37.32% {
+        transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.03, 0, 0, 1);
+        transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.03, 0, 0, 1);
+    }
+
+    38.15% {
+        transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.008, 0, 0, 1);
+        transform: matrix3d(1.029, 0, 0, 0, 0, 0.958, 0, 0, 0, 0, 1, 0, -0.008, 0, 0, 1);
+    }
+
+    42.35% {
+        transform: matrix3d(1.022, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0.03, 0, 0, 1);
+        transform: matrix3d(1.022, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0.03, 0, 0, 1);
+    }
+
+    48.9% {
+        transform: matrix3d(1.007, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0.009, 0, 0, 1);
+        transform: matrix3d(1.007, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0.009, 0, 0, 1);
+    }
+
+    57.77% {
+        transform: matrix3d(0.998, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1);
+        transform: matrix3d(0.998, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1);
+    }
+
+    60.47% {
+        transform: matrix3d(0.998, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1);
+        transform: matrix3d(0.998, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, -0.001, 0, 0, 1);
+    }
+
+    69.36% {
+        transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+        transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    83.61% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+
+    100% {
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+    }
+}
+
+.shake_1 {
+    animation: shake_1 .2s ease-out;
+}
+
+@keyframes shake_1 {
+    2% {
+        transform: translate(-.5px, .5px) rotate(-.5deg);
+    }
+
+    4% {
+        transform: translate(2.5px, .5px) rotate(-.5deg);
+    }
+
+    6% {
+        transform: translate(-.5px, 1.5px) rotate(1.5deg);
+    }
+
+    8% {
+        transform: translate(.5px, .5px) rotate(-.5deg);
+    }
+
+    10% {
+        transform: translate(-.5px, -1.5px) rotate(-.5deg);
+    }
+
+    12% {
+        transform: translate(.5px, -.5px) rotate(1.5deg);
+    }
+
+    14% {
+        transform: translate(1.5px, 2.5px) rotate(-.5deg);
+    }
+
+    16% {
+        transform: translate(-.5px, -.5px) rotate(.5deg);
+    }
+
+    18% {
+        transform: translate(2.5px, .5px) rotate(.5deg);
+    }
+
+    20% {
+        transform: translate(.5px, -1.5px) rotate(-.5deg);
+    }
+
+    22% {
+        transform: translate(2.5px, 2.5px) rotate(-.5deg);
+    }
+
+    24% {
+        transform: translate(2.5px, 1.5px) rotate(1.5deg);
+    }
+
+    26% {
+        transform: translate(.5px, 1.5px) rotate(-.5deg);
+    }
+
+    28% {
+        transform: translate(1.5px, .5px) rotate(.5deg);
+    }
+
+    30% {
+        transform: translate(-1.5px, 2.5px) rotate(1.5deg);
+    }
+
+    32% {
+        transform: translate(.5px, .5px) rotate(.5deg);
+    }
+
+    34% {
+        transform: translate(.5px, 1.5px) rotate(1.5deg);
+    }
+
+    36% {
+        transform: translate(2.5px, -.5px) rotate(1.5deg);
+    }
+
+    38% {
+        transform: translate(.5px, 1.5px) rotate(1.5deg);
+    }
+
+    40% {
+        transform: translate(2.5px, 1.5px) rotate(1.5deg);
+    }
+
+    42% {
+        transform: translate(2.5px, -1.5px) rotate(.5deg);
+    }
+
+    44% {
+        transform: translate(.5px, -.5px) rotate(.5deg);
+    }
+
+    46% {
+        transform: translate(1.5px, -1.5px) rotate(.5deg);
+    }
+
+    48% {
+        transform: translate(-1.5px, -.5px) rotate(.5deg);
+    }
+
+    50% {
+        transform: translate(2.5px, -1.5px) rotate(1.5deg);
+    }
+
+    52% {
+        transform: translate(.5px, 1.5px) rotate(.5deg);
+    }
+
+    54% {
+        transform: translate(2.5px, -.5px) rotate(.5deg);
+    }
+
+    56% {
+        transform: translate(2.5px, 2.5px) rotate(.5deg);
+    }
+
+    58% {
+        transform: translate(2.5px, 1.5px) rotate(-.5deg);
+    }
+
+    60% {
+        transform: translate(1.5px, 1.5px) rotate(-.5deg);
+    }
+
+    62% {
+        transform: translate(-.5px, .5px) rotate(-.5deg);
+    }
+
+    64% {
+        transform: translate(2.5px, 1.5px) rotate(-.5deg);
+    }
+
+    66% {
+        transform: translate(-1.5px, .5px) rotate(1.5deg);
+    }
+
+    68% {
+        transform: translate(1.5px, -1.5px) rotate(.5deg);
+    }
+
+    70% {
+        transform: translate(.5px, .5px) rotate(-.5deg);
+    }
+
+    72% {
+        transform: translate(-.5px, 1.5px) rotate(1.5deg);
+    }
+
+    74% {
+        transform: translate(-1.5px, 1.5px) rotate(1.5deg);
+    }
+
+    76% {
+        transform: translate(2.5px, -.5px) rotate(.5deg);
+    }
+
+    78% {
+        transform: translate(2.5px, 2.5px) rotate(.5deg);
+    }
+
+    80% {
+        transform: translate(-1.5px, 2.5px) rotate(.5deg);
+    }
+
+    82% {
+        transform: translate(-1.5px, -.5px) rotate(.5deg);
+    }
+
+    84% {
+        transform: translate(.5px, 1.5px) rotate(-.5deg);
+    }
+
+    86% {
+        transform: translate(-.5px, 2.5px) rotate(.5deg);
+    }
+
+    88% {
+        transform: translate(2.5px, 2.5px) rotate(1.5deg);
+    }
+
+    90% {
+        transform: translate(-.5px, -1.5px) rotate(-.5deg);
+    }
+
+    92% {
+        transform: translate(1.5px, .5px) rotate(.5deg);
+    }
+
+    94% {
+        transform: translate(-.5px, -.5px) rotate(.5deg);
+    }
+
+    96% {
+        transform: translate(1.5px, .5px) rotate(1.5deg);
+    }
+
+    98% {
+        transform: translate(.5px, -.5px) rotate(1.5deg);
+    }
+
+    0%,
+    100% {
+        transform: translate(0, 0) rotate(0);
+    }
+}
+
+.shake_2 {
+    animation: shake_2 .2s infinite;
+}
+
+@keyframes shake_2 {
+    2% {
+        transform: translate(-4px, 2px) rotate(1.5deg);
+    }
+
+    4% {
+        transform: translate(-8px, 10px) rotate(-1.5deg);
+    }
+
+    6% {
+        transform: translate(2px, -6px) rotate(-.5deg);
+    }
+
+    8% {
+        transform: translate(10px, 10px) rotate(-1.5deg);
+    }
+
+    10% {
+        transform: translate(8px, 4px) rotate(.5deg);
+    }
+
+    12% {
+        transform: translate(2px, 6px) rotate(-.5deg);
+    }
+
+    14% {
+        transform: translate(10px, -8px) rotate(.5deg);
+    }
+
+    16% {
+        transform: translate(-9px, -5px) rotate(3.5deg);
+    }
+
+    18% {
+        transform: translate(9px, -9px) rotate(-1.5deg);
+    }
+
+    20% {
+        transform: translate(2px, 1px) rotate(1.5deg);
+    }
+
+    22% {
+        transform: translate(-4px, 1px) rotate(2.5deg);
+    }
+
+    24% {
+        transform: translate(-7px, 4px) rotate(-1.5deg);
+    }
+
+    26% {
+        transform: translate(-6px, -1px) rotate(-2.5deg);
+    }
+
+    28% {
+        transform: translate(6px, 0px) rotate(-1.5deg);
+    }
+
+    30% {
+        transform: translate(-6px, 6px) rotate(3.5deg);
+    }
+
+    32% {
+        transform: translate(5px, 7px) rotate(3.5deg);
+    }
+
+    34% {
+        transform: translate(-5px, 5px) rotate(3.5deg);
+    }
+
+    36% {
+        transform: translate(-8px, -3px) rotate(-2.5deg);
+    }
+
+    38% {
+        transform: translate(-3px, 5px) rotate(-2.5deg);
+    }
+
+    40% {
+        transform: translate(8px, -4px) rotate(1.5deg);
+    }
+
+    42% {
+        transform: translate(2px, -8px) rotate(2.5deg);
+    }
+
+    44% {
+        transform: translate(5px, -7px) rotate(-1.5deg);
+    }
+
+    46% {
+        transform: translate(8px, -4px) rotate(1.5deg);
+    }
+
+    48% {
+        transform: translate(1px, -4px) rotate(.5deg);
+    }
+
+    50% {
+        transform: translate(-7px, 7px) rotate(3.5deg);
+    }
+
+    52% {
+        transform: translate(7px, -5px) rotate(3.5deg);
+    }
+
+    54% {
+        transform: translate(10px, -5px) rotate(1.5deg);
+    }
+
+    56% {
+        transform: translate(-1px, -8px) rotate(1.5deg);
+    }
+
+    58% {
+        transform: translate(2px, -2px) rotate(-1.5deg);
+    }
+
+    60% {
+        transform: translate(-8px, 0px) rotate(2.5deg);
+    }
+
+    62% {
+        transform: translate(9px, -5px) rotate(-2.5deg);
+    }
+
+    64% {
+        transform: translate(8px, -9px) rotate(.5deg);
+    }
+
+    66% {
+        transform: translate(-6px, -7px) rotate(-2.5deg);
+    }
+
+    68% {
+        transform: translate(-1px, -4px) rotate(-1.5deg);
+    }
+
+    70% {
+        transform: translate(10px, -8px) rotate(-1.5deg);
+    }
+
+    72% {
+        transform: translate(3px, 6px) rotate(-2.5deg);
+    }
+
+    74% {
+        transform: translate(-1px, 8px) rotate(-.5deg);
+    }
+
+    76% {
+        transform: translate(-3px, 7px) rotate(1.5deg);
+    }
+
+    78% {
+        transform: translate(9px, 0px) rotate(2.5deg);
+    }
+
+    80% {
+        transform: translate(9px, -5px) rotate(3.5deg);
+    }
+
+    82% {
+        transform: translate(9px, 8px) rotate(-.5deg);
+    }
+
+    84% {
+        transform: translate(-3px, -3px) rotate(-2.5deg);
+    }
+
+    86% {
+        transform: translate(-8px, -1px) rotate(3.5deg);
+    }
+
+    88% {
+        transform: translate(5px, 2px) rotate(3.5deg);
+    }
+
+    90% {
+        transform: translate(5px, 9px) rotate(-.5deg);
+    }
+
+    92% {
+        transform: translate(7px, 5px) rotate(1.5deg);
+    }
+
+    94% {
+        transform: translate(8px, 8px) rotate(-.5deg);
+    }
+
+    96% {
+        transform: translate(2px, 10px) rotate(-2.5deg);
+    }
+
+    98% {
+        transform: translate(-5px, 10px) rotate(-2.5deg);
+    }
+
+    0%,
+    100% {
+        transform: translate(0, 0) rotate(0);
+    }
+}
+
+.shake_3 {
+    animation: shake_3 .1s infinite;
+}
+
+@keyframes shake_3 {
+    2% {
+        transform: translate(4px, 0);
+    }
+
+    4% {
+        transform: translate(8px, 0);
+    }
+
+    6% {
+        transform: translate(7px, 0);
+    }
+
+    8% {
+        transform: translate(2px, 0);
+    }
+
+    10% {
+        transform: translate(0px, 0);
+    }
+
+    12% {
+        transform: translate(7px, 0);
+    }
+
+    14% {
+        transform: translate(-6px, 0);
+    }
+
+    16% {
+        transform: translate(-5px, 0);
+    }
+
+    18% {
+        transform: translate(-8px, 0);
+    }
+
+    20% {
+        transform: translate(-9px, 0);
+    }
+
+    22% {
+        transform: translate(9px, 0);
+    }
+
+    24% {
+        transform: translate(-8px, 0);
+    }
+
+    26% {
+        transform: translate(-8px, 0);
+    }
+
+    28% {
+        transform: translate(2px, 0);
+    }
+
+    30% {
+        transform: translate(10px, 0);
+    }
+
+    32% {
+        transform: translate(6px, 0);
+    }
+
+    34% {
+        transform: translate(-6px, 0);
+    }
+
+    36% {
+        transform: translate(7px, 0);
+    }
+
+    38% {
+        transform: translate(-9px, 0);
+    }
+
+    40% {
+        transform: translate(-4px, 0);
+    }
+
+    42% {
+        transform: translate(-4px, 0);
+    }
+
+    44% {
+        transform: translate(1px, 0);
+    }
+
+    46% {
+        transform: translate(-2px, 0);
+    }
+
+    48% {
+        transform: translate(-4px, 0);
+    }
+
+    50% {
+        transform: translate(-2px, 0);
+    }
+
+    52% {
+        transform: translate(10px, 0);
+    }
+
+    54% {
+        transform: translate(-9px, 0);
+    }
+
+    56% {
+        transform: translate(0px, 0);
+    }
+
+    58% {
+        transform: translate(-8px, 0);
+    }
+
+    60% {
+        transform: translate(-4px, 0);
+    }
+
+    62% {
+        transform: translate(7px, 0);
+    }
+
+    64% {
+        transform: translate(-1px, 0);
+    }
+
+    66% {
+        transform: translate(-7px, 0);
+    }
+
+    68% {
+        transform: translate(1px, 0);
+    }
+
+    70% {
+        transform: translate(-5px, 0);
+    }
+
+    72% {
+        transform: translate(0px, 0);
+    }
+
+    74% {
+        transform: translate(-4px, 0);
+    }
+
+    76% {
+        transform: translate(5px, 0);
+    }
+
+    78% {
+        transform: translate(2px, 0);
+    }
+
+    80% {
+        transform: translate(2px, 0);
+    }
+
+    82% {
+        transform: translate(-1px, 0);
+    }
+
+    84% {
+        transform: translate(9px, 0);
+    }
+
+    86% {
+        transform: translate(-6px, 0);
+    }
+
+    88% {
+        transform: translate(8px, 0);
+    }
+
+    90% {
+        transform: translate(3px, 0);
+    }
+
+    92% {
+        transform: translate(10px, 0);
+    }
+
+    94% {
+        transform: translate(-4px, 0);
+    }
+
+    96% {
+        transform: translate(-6px, 0);
+    }
+
+    98% {
+        transform: translate(7px, 0);
+    }
+
+    0%,
+    100% {
+        transform: translate(0, 0);
+    }
+}
+
+.shake_4 {
+    animation: shake_4 .1s infinite;
+}
+
+@keyframes shake_4 {
+    2% {
+        transform: translate(0, -2px);
+    }
+
+    4% {
+        transform: translate(0, -2px);
+    }
+
+    6% {
+        transform: translate(0, 2px);
+    }
+
+    8% {
+        transform: translate(0, 9px);
+    }
+
+    10% {
+        transform: translate(0, 3px);
+    }
+
+    12% {
+        transform: translate(0, 4px);
+    }
+
+    14% {
+        transform: translate(0, -8px);
+    }
+
+    16% {
+        transform: translate(0, -8px);
+    }
+
+    18% {
+        transform: translate(0, -6px);
+    }
+
+    20% {
+        transform: translate(0, 5px);
+    }
+
+    22% {
+        transform: translate(0, 5px);
+    }
+
+    24% {
+        transform: translate(0, -8px);
+    }
+
+    26% {
+        transform: translate(0, -4px);
+    }
+
+    28% {
+        transform: translate(0, 2px);
+    }
+
+    30% {
+        transform: translate(0, -1px);
+    }
+
+    32% {
+        transform: translate(0, 1px);
+    }
+
+    34% {
+        transform: translate(0, -7px);
+    }
+
+    36% {
+        transform: translate(0, -7px);
+    }
+
+    38% {
+        transform: translate(0, 2px);
+    }
+
+    40% {
+        transform: translate(0, -1px);
+    }
+
+    42% {
+        transform: translate(0, 8px);
+    }
+
+    44% {
+        transform: translate(0, -5px);
+    }
+
+    46% {
+        transform: translate(0, -8px);
+    }
+
+    48% {
+        transform: translate(0, -1px);
+    }
+
+    50% {
+        transform: translate(0, 1px);
+    }
+
+    52% {
+        transform: translate(0, 1px);
+    }
+
+    54% {
+        transform: translate(0, -4px);
+    }
+
+    56% {
+        transform: translate(0, 4px);
+    }
+
+    58% {
+        transform: translate(0, 3px);
+    }
+
+    60% {
+        transform: translate(0, -7px);
+    }
+
+    62% {
+        transform: translate(0, 4px);
+    }
+
+    64% {
+        transform: translate(0, 0px);
+    }
+
+    66% {
+        transform: translate(0, -5px);
+    }
+
+    68% {
+        transform: translate(0, -2px);
+    }
+
+    70% {
+        transform: translate(0, -4px);
+    }
+
+    72% {
+        transform: translate(0, 9px);
+    }
+
+    74% {
+        transform: translate(0, -3px);
+    }
+
+    76% {
+        transform: translate(0, -4px);
+    }
+
+    78% {
+        transform: translate(0, -9px);
+    }
+
+    80% {
+        transform: translate(0, -8px);
+    }
+
+    82% {
+        transform: translate(0, -6px);
+    }
+
+    84% {
+        transform: translate(0, 9px);
+    }
+
+    86% {
+        transform: translate(0, -4px);
+    }
+
+    88% {
+        transform: translate(0, -9px);
+    }
+
+    90% {
+        transform: translate(0, -2px);
+    }
+
+    92% {
+        transform: translate(0, 7px);
+    }
+
+    94% {
+        transform: translate(0, -1px);
+    }
+
+    96% {
+        transform: translate(0, 7px);
+    }
+
+    98% {
+        transform: translate(0, -1px);
+    }
+
+    0%,
+    100% {
+        transform: translate(0, 0);
+    }
+}
+
+.shake_5 {
+    animation: shake_5 .1s infinite;
+}
+
+@keyframes shake_5 {
+    2% {
+        transform: rotate(3.5deg);
+    }
+
+    4% {
+        transform: rotate(-.5deg);
+    }
+
+    6% {
+        transform: rotate(-1.5deg);
+    }
+
+    8% {
+        transform: rotate(4.5deg);
+    }
+
+    10% {
+        transform: rotate(6.5deg);
+    }
+
+    12% {
+        transform: rotate(.5deg);
+    }
+
+    14% {
+        transform: rotate(-4.5deg);
+    }
+
+    16% {
+        transform: rotate(5.5deg);
+    }
+
+    18% {
+        transform: rotate(-6.5deg);
+    }
+
+    20% {
+        transform: rotate(1.5deg);
+    }
+
+    22% {
+        transform: rotate(-5.5deg);
+    }
+
+    24% {
+        transform: rotate(-4.5deg);
+    }
+
+    26% {
+        transform: rotate(-.5deg);
+    }
+
+    28% {
+        transform: rotate(7.5deg);
+    }
+
+    30% {
+        transform: rotate(-1.5deg);
+    }
+
+    32% {
+        transform: rotate(4.5deg);
+    }
+
+    34% {
+        transform: rotate(5.5deg);
+    }
+
+    36% {
+        transform: rotate(1.5deg);
+    }
+
+    38% {
+        transform: rotate(-2.5deg);
+    }
+
+    40% {
+        transform: rotate(6.5deg);
+    }
+
+    42% {
+        transform: rotate(4.5deg);
+    }
+
+    44% {
+        transform: rotate(2.5deg);
+    }
+
+    46% {
+        transform: rotate(4.5deg);
+    }
+
+    48% {
+        transform: rotate(-5.5deg);
+    }
+
+    50% {
+        transform: rotate(-6.5deg);
+    }
+
+    52% {
+        transform: rotate(-4.5deg);
+    }
+
+    54% {
+        transform: rotate(2.5deg);
+    }
+
+    56% {
+        transform: rotate(-5.5deg);
+    }
+
+    58% {
+        transform: rotate(-5.5deg);
+    }
+
+    60% {
+        transform: rotate(-6.5deg);
+    }
+
+    62% {
+        transform: rotate(6.5deg);
+    }
+
+    64% {
+        transform: rotate(-1.5deg);
+    }
+
+    66% {
+        transform: rotate(-5.5deg);
+    }
+
+    68% {
+        transform: rotate(-2.5deg);
+    }
+
+    70% {
+        transform: rotate(6.5deg);
+    }
+
+    72% {
+        transform: rotate(3.5deg);
+    }
+
+    74% {
+        transform: rotate(3.5deg);
+    }
+
+    76% {
+        transform: rotate(-2.5deg);
+    }
+
+    78% {
+        transform: rotate(-6.5deg);
+    }
+
+    80% {
+        transform: rotate(1.5deg);
+    }
+
+    82% {
+        transform: rotate(4.5deg);
+    }
+
+    84% {
+        transform: rotate(.5deg);
+    }
+
+    86% {
+        transform: rotate(3.5deg);
+    }
+
+    88% {
+        transform: rotate(5.5deg);
+    }
+
+    90% {
+        transform: rotate(7.5deg);
+    }
+
+    92% {
+        transform: rotate(-5.5deg);
+    }
+
+    94% {
+        transform: rotate(7.5deg);
+    }
+
+    96% {
+        transform: rotate(-2.5deg);
+    }
+
+    98% {
+        transform: rotate(6.5deg);
+    }
+
+    0%,
+    100% {
+        transform: rotate(0);
+    }
+}
+
+.shake_6 {
+    animation: shake_6 .1s infinite;
+}
+
+@keyframes shake_6 {
+    10% {
+        transform: translate(5px, 4px) rotate(-.5deg);
+        opacity: .32
+    }
+
+    20% {
+        transform: translate(-1px, 2px) rotate(.5deg);
+        opacity: .63
+    }
+
+    30% {
+        transform: translate(1px, 1px) rotate(1.5deg);
+        opacity: .49
+    }
+
+    40% {
+        transform: translate(3px, -1px) rotate(1.5deg);
+        opacity: .81
+    }
+
+    50% {
+        transform: translate(1px, -2px) rotate(-.5deg);
+        opacity: .97
+    }
+
+    60% {
+        transform: translate(-2px, -4px) rotate(2.5deg);
+        opacity: .7
+    }
+
+    70% {
+        transform: translate(-3px, -2px) rotate(1.5deg);
+        opacity: .99
+    }
+
+    80% {
+        transform: translate(3px, -1px) rotate(.5deg);
+        opacity: .92
+    }
+
+    90% {
+        transform: translate(-4px, -4px) rotate(-.5deg);
+        opacity: .01
+    }
+
+    0%,
+    100% {
+        transform: translate(0, 0) rotate(0);
+    }
+}
+
+.anima_jelly {
+    animation: anima_jelly 2s infinite;
+}
+
+@keyframes anima_jelly {
+    0% {
+        transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1)
+    }
+
+    15% {
+        transform: scale3d(1.25, .75, 1);
+        transform: scale3d(1.25, .75, 1)
+    }
+
+    20% {
+        transform: scale3d(0.75, 1.25, 1);
+        transform: scale3d(0.75, 1.25, 1)
+    }
+
+    25% {
+        transform: scale3d(1.15, .85, 1);
+        transform: scale3d(1.15, .85, 1)
+    }
+
+    32.5% {
+        transform: scale3d(.95, 1.05, 1);
+        transform: scale3d(.95, 1.05, 1)
+    }
+
+    37.5% {
+        transform: scale3d(1.05, .95, 1);
+        transform: scale3d(1.05, .95, 1)
+    }
+
+    50%,
+    100% {
+        transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1)
+    }
+}
+
+
+.anima_swing {
+    animation: anima_swing 2s infinite;
+    transform-origin: 50% 0%;
+}
+
+@keyframes anima_swing {
+    30% {
+        transform: rotate(15deg);
+    }
+
+    40% {
+        transform: rotate(-10deg);
+    }
+
+    50% {
+        transform: rotate(5deg);
+    }
+
+    60% {
+        transform: rotate(-2deg);
+    }
+
+    70% {
+        transform: rotate(0deg);
+    }
+}
+
+.anima_wobble {
+    animation: anima_wobble 2s infinite;
+}
+
+@keyframes anima_wobble {
+    7.5% {
+        transform: translateX(-25%) rotate(-5deg);
+    }
+
+    15% {
+        transform: translateX(20%) rotate(3deg);
+    }
+
+    22.5% {
+        transform: translateX(-15%) rotate(-3deg);
+    }
+
+    30% {
+        transform: translateX(10%) rotate(2deg);
+    }
+
+    37.5% {
+        transform: translateX(-5%) rotate(-1deg);
+    }
+
+    50% {
+        transform: translateX(0) rotate(0deg)
+    }
+}
+
+.anima_tada {
+    animation: anima_tada 2s infinite;
+}
+
+@keyframes anima_tada {
+    0% {
+        transform: scale(1);
+    }
+
+    5%,
+    10% {
+        transform: scale(.8) rotate(-5deg);
+    }
+
+    15%,
+    25%,
+    35%,
+    45% {
+        transform: scale(1.1) rotate(3deg);
+    }
+
+    20%,
+    30%,
+    40% {
+        transform: scale(1.1) rotate(-3deg);
+    }
+
+    50%,
+    100% {
+        transform: scale(1);
+    }
+}
+
+
+.anima_clock {
+    animation: anima_clock 2s ease-in-out infinite;
+    transform-origin: 50% -300%;
+}
+
+@keyframes anima_clock {
+
+    0%,
+    100% {
+        transform: rotate(-30deg);
+    }
+
+    50% {
+        transform: rotate(30deg);
+    }
+}
\ No newline at end of file
diff --git a/src/assets/css/custom-element.scss b/src/assets/css/custom-element.scss
new file mode 100644
index 0000000..a6781ab
--- /dev/null
+++ b/src/assets/css/custom-element.scss
@@ -0,0 +1,74 @@
+.el-select-dropdown__item.selected {
+    color: $main-color;
+}
+
+.el-select {
+    --el-select-input-focus-border-color: $main-color;
+}
+
+.el-radio {
+    .el-radio__input.is-checked .el-radio__inner {
+        border-color: $main-color;
+        background: $main-color;
+    }
+    .el-radio__input.is-checked+.el-radio__label {
+        color: $main-color;
+    }
+}
+
+.el-button.el-button--primary {
+    background-color: $main-color;
+    border-color: $main-color;
+    opacity: 1;
+    transition: all .6;
+    &:hover, &:active {
+        opacity: .7;
+        transition: all .6;
+    }
+    &:focus {
+        opacity: .9;
+        transition: all .6;
+    }
+}
+.el-dropdown-menu__item:not(.is-disabled):focus {
+    background-color: rgba($main-color, .1);
+    color: $main-color;
+}
+
+.el-dialog {
+    .el-dialog__header {
+
+        .el-dialog__headerbtn:focus .el-dialog__close,
+        .el-dialog__headerbtn:hover .el-dialog__close {
+            color: $main-color;
+        }
+    }
+
+    .el-dialog__body {
+        padding: 10px 20px;
+    }
+
+    .el-button {
+        --el-button-hover-text-color: $main-color;
+        --el-button-hover-bg-color: rgba(0, 96, 128, .1);
+        --el-button-hover-border-color: rgba(0, 96, 128, .8);
+        --el-button-active-text-color: $main-color;
+        --el-button-active-border-color: rgba(0, 96, 128, .8);
+        --el-button-active-bg-color: rgba(0, 96, 128, .1);
+    }
+
+    .el-button--primary {
+        --el-button-text-color: white;
+        --el-button-bg-color: $main-color;
+        --el-button-border-color: $main-color;
+        --el-button-outline-color: rgba(0, 96, 128, .5);
+        --el-button-active-color: rgba(0, 96, 128, .8);
+        --el-button-hover-text-color: white;
+        --el-button-hover-link-text-color: rgba(0, 96, 128, .5);
+        --el-button-hover-bg-color: rgba(0, 96, 128, .7);
+        --el-button-hover-border-color: rgba(0, 96, 128, .7);
+        --el-button-active-bg-color: rgba(0, 96, 128, .8);
+        --el-button-active-border-color: rgba(0, 96, 128, .8);
+    }
+
+}
\ No newline at end of file
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index a300d48..ddceabb 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -6,27 +6,21 @@ body {
     height: 100%;
     overflow: hidden;
     font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
-}
 
-span,
-p {
-    word-wrap: break-word;
-}
+    span,
+    p,
+    h3,
+    ul,
+    li {
+        word-wrap: break-word;
+        margin: 0;
+        list-style: none;
+    }
 
-p,
-h3 {
-    margin: 0;
-}
-
-ul,
-li {
-    margin: 0;
-    list-style: none;
-}
-
-#app {
-    width: 100%;
-    height: 100%;
+    #app {
+        width: 100%;
+        height: 100%;
+    }
 }
 
 * {
@@ -41,6 +35,34 @@ li {
     -moz-osx-font-smoothing: grayscale;
 }
 
+.main-color {
+    color: $main-color;
+}
+.text-color {
+    color: $text-color;
+}
+.text1-color {
+    color: $text1-color;
+}
+.text2-color {
+    color: $text2-color;
+}
+.text3-color {
+    color: $text3-color;
+}
+.f14 {
+    font-size: 14px;
+}
+.f16 {
+    font-size: 16px;
+}
+.f18 {
+    font-size: 18px;
+}
+.f20 {
+    font-size: 20px;
+}
+
 ::-webkit-scrollbar {
     width: 5px;
     height: 5px;
@@ -63,264 +85,11 @@ li {
     background-color: $main-color;
 }
 
-// 震动
-.shake_1 {
-    animation: shake_1 .2s ease-out;
-}
-
-@keyframes shake_1 {
-    2% {
-        transform: translate(-.5px, .5px) rotate(-.5deg);
-    }
-
-    4% {
-        transform: translate(2.5px, .5px) rotate(-.5deg);
-    }
-
-    6% {
-        transform: translate(-.5px, 1.5px) rotate(1.5deg);
-    }
-
-    8% {
-        transform: translate(.5px, .5px) rotate(-.5deg);
-    }
-
-    10% {
-        transform: translate(-.5px, -1.5px) rotate(-.5deg);
-    }
-
-    12% {
-        transform: translate(.5px, -.5px) rotate(1.5deg);
-    }
-
-    14% {
-        transform: translate(1.5px, 2.5px) rotate(-.5deg);
-    }
-
-    16% {
-        transform: translate(-.5px, -.5px) rotate(.5deg);
-    }
-
-    18% {
-        transform: translate(2.5px, .5px) rotate(.5deg);
-    }
-
-    20% {
-        transform: translate(.5px, -1.5px) rotate(-.5deg);
-    }
-
-    22% {
-        transform: translate(2.5px, 2.5px) rotate(-.5deg);
-    }
-
-    24% {
-        transform: translate(2.5px, 1.5px) rotate(1.5deg);
-    }
-
-    26% {
-        transform: translate(.5px, 1.5px) rotate(-.5deg);
-    }
-
-    28% {
-        transform: translate(1.5px, .5px) rotate(.5deg);
-    }
-
-    30% {
-        transform: translate(-1.5px, 2.5px) rotate(1.5deg);
-    }
-
-    32% {
-        transform: translate(.5px, .5px) rotate(.5deg);
-    }
-
-    34% {
-        transform: translate(.5px, 1.5px) rotate(1.5deg);
-    }
-
-    36% {
-        transform: translate(2.5px, -.5px) rotate(1.5deg);
-    }
-
-    38% {
-        transform: translate(.5px, 1.5px) rotate(1.5deg);
-    }
-
-    40% {
-        transform: translate(2.5px, 1.5px) rotate(1.5deg);
-    }
-
-    42% {
-        transform: translate(2.5px, -1.5px) rotate(.5deg);
-    }
-
-    44% {
-        transform: translate(.5px, -.5px) rotate(.5deg);
-    }
-
-    46% {
-        transform: translate(1.5px, -1.5px) rotate(.5deg);
-    }
-
-    48% {
-        transform: translate(-1.5px, -.5px) rotate(.5deg);
-    }
-
-    50% {
-        transform: translate(2.5px, -1.5px) rotate(1.5deg);
-    }
-
-    52% {
-        transform: translate(.5px, 1.5px) rotate(.5deg);
-    }
-
-    54% {
-        transform: translate(2.5px, -.5px) rotate(.5deg);
-    }
-
-    56% {
-        transform: translate(2.5px, 2.5px) rotate(.5deg);
-    }
-
-    58% {
-        transform: translate(2.5px, 1.5px) rotate(-.5deg);
-    }
-
-    60% {
-        transform: translate(1.5px, 1.5px) rotate(-.5deg);
-    }
-
-    62% {
-        transform: translate(-.5px, .5px) rotate(-.5deg);
-    }
-
-    64% {
-        transform: translate(2.5px, 1.5px) rotate(-.5deg);
-    }
-
-    66% {
-        transform: translate(-1.5px, .5px) rotate(1.5deg);
-    }
-
-    68% {
-        transform: translate(1.5px, -1.5px) rotate(.5deg);
-    }
-
-    70% {
-        transform: translate(.5px, .5px) rotate(-.5deg);
-    }
-
-    72% {
-        transform: translate(-.5px, 1.5px) rotate(1.5deg);
-    }
-
-    74% {
-        transform: translate(-1.5px, 1.5px) rotate(1.5deg);
-    }
-
-    76% {
-        transform: translate(2.5px, -.5px) rotate(.5deg);
-    }
-
-    78% {
-        transform: translate(2.5px, 2.5px) rotate(.5deg);
-    }
-
-    80% {
-        transform: translate(-1.5px, 2.5px) rotate(.5deg);
-    }
-
-    82% {
-        transform: translate(-1.5px, -.5px) rotate(.5deg);
-    }
-
-    84% {
-        transform: translate(.5px, 1.5px) rotate(-.5deg);
-    }
-
-    86% {
-        transform: translate(-.5px, 2.5px) rotate(.5deg);
-    }
-
-    88% {
-        transform: translate(2.5px, 2.5px) rotate(1.5deg);
-    }
-
-    90% {
-        transform: translate(-.5px, -1.5px) rotate(-.5deg);
-    }
-
-    92% {
-        transform: translate(1.5px, .5px) rotate(.5deg);
-    }
-
-    94% {
-        transform: translate(-.5px, -.5px) rotate(.5deg);
-    }
-
-    96% {
-        transform: translate(1.5px, .5px) rotate(1.5deg);
-    }
-
-    98% {
-        transform: translate(.5px, -.5px) rotate(1.5deg);
-    }
-
-    0%,
-    100% {
-        transform: translate(0, 0) rotate(0);
-    }
-}
-
-.el-select-dropdown__item.selected {
-    color: #006080;
-}
-
-.el-select {
-    --el-select-input-focus-border-color: #006080;
-}
-
-.el-dialog {
-    .el-dialog__header {
-
-        .el-dialog__headerbtn:focus .el-dialog__close,
-        .el-dialog__headerbtn:hover .el-dialog__close {
-            color: #006080;
-        }
-    }
-
-    .el-dialog__body {
-        padding: 10px 20px;
-    }
-
-    .el-button {
-        --el-button-hover-text-color: #006080;
-        --el-button-hover-bg-color: rgba(0, 96, 128, .1);
-        --el-button-hover-border-color: rgba(0, 96, 128, .8);
-        --el-button-active-text-color: #006080;
-        --el-button-active-border-color: rgba(0, 96, 128, .8);
-        --el-button-active-bg-color: rgba(0, 96, 128, .1);
-    }
-
-    .el-button--primary {
-        --el-button-text-color: white;
-        --el-button-bg-color: #006080;
-        --el-button-border-color: #006080;
-        --el-button-outline-color: rgba(0, 96, 128, .5);
-        --el-button-active-color: rgba(0, 96, 128, .8);
-        --el-button-hover-text-color: white;
-        --el-button-hover-link-text-color: rgba(0, 96, 128, .5);
-        --el-button-hover-bg-color: rgba(0, 96, 128, .7);
-        --el-button-hover-border-color: rgba(0, 96, 128, .7);
-        --el-button-active-bg-color: rgba(0, 96, 128, .8);
-        --el-button-active-border-color: rgba(0, 96, 128, .8);
-    }
-
-}
-
 // 验证弹窗
 #plugin-slider-verify_containe {
     width: 0;
     height: 0;
+
     #slider-verify {
         position: fixed;
         top: 50%;
@@ -329,4 +98,59 @@ li {
         -webkit-transform: translate(-50%, -50%);
         background: white;
     }
+}
+
+// 选择医院
+.el-select.select-hospital {
+    width: auto;
+
+    .el-input__wrapper {
+        padding: 1px 12px;
+        border-radius: 20px;
+
+        .el-input__inner {
+            color: $main-color;
+            font-size: 14px;
+            font-weight: 600;
+        }
+    }
+}
+
+.custom-tabs {
+    position: relative;
+    width: 100%;
+    height: 40px;
+    display: flex;
+    margin-bottom: 20px;
+    &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        bottom: 0;
+        background: $border-color;
+    }
+    .tabs-item {
+        cursor: pointer;
+        position: relative;
+        line-height: 40px;
+        font-size: 16px;
+        color: $main-color;
+        font-weight: 400;
+        & ~ .tabs-item {
+            margin-left: 15px;
+        }
+        &.active {
+            font-weight: 600;
+            &::after {
+                content: '';
+                position: absolute;
+                height: 3px;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: $main-color;
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/assets/css/variable.scss b/src/assets/css/variable.scss
index cf5df88..ee57c60 100644
--- a/src/assets/css/variable.scss
+++ b/src/assets/css/variable.scss
@@ -1,17 +1,6 @@
 $main-color: #006080;
 $border-color: #EBEEF5;
-
-.el-button.el-button--primary {
-    background-color: $main-color;
-    border-color: $main-color;
-    opacity: 1;
-    transition: all .6;
-    &:hover, &:active {
-        opacity: .7;
-        transition: all .6;
-    }
-    &:focus {
-        opacity: .9;
-        transition: all .6;
-    }
-}
\ No newline at end of file
+$text-color: #303133;
+$text1-color: #606266;
+$text2-color: #909399;
+$text3-color: #C0C4CC;
diff --git a/src/assets/font/demo_index.html b/src/assets/font/demo_index.html
index de27b80..ac10cfb 100644
--- a/src/assets/font/demo_index.html
+++ b/src/assets/font/demo_index.html
@@ -54,6 +54,48 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e3;</span>
+                <div class="name">users 用户组</div>
+                <div class="code-name">&amp;#xe6e3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">3.1 设置</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe669;</span>
+                <div class="name">远程费</div>
+                <div class="code-name">&amp;#xe669;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeb25;</span>
+                <div class="name">24gl-userGroup</div>
+                <div class="code-name">&amp;#xeb25;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe653;</span>
+                <div class="name">后台管理</div>
+                <div class="code-name">&amp;#xe653;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62d;</span>
+                <div class="name">人员管理</div>
+                <div class="code-name">&amp;#xe62d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61d;</span>
+                <div class="name">首页-置灰</div>
+                <div class="code-name">&amp;#xe61d;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe77f;</span>
                 <div class="name">down-circle</div>
@@ -78,9 +120,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1702534663582') format('woff2'),
-       url('iconfont.woff?t=1702534663582') format('woff'),
-       url('iconfont.ttf?t=1702534663582') format('truetype');
+  src: url('iconfont.woff2?t=1702606581584') format('woff2'),
+       url('iconfont.woff?t=1702606581584') format('woff'),
+       url('iconfont.ttf?t=1702606581584') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -106,6 +148,69 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-users"></span>
+            <div class="name">
+              users 用户组
+            </div>
+            <div class="code-name">.icon-users
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-31shezhi"></span>
+            <div class="name">
+              3.1 设置
+            </div>
+            <div class="code-name">.icon-31shezhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yuanchengfei"></span>
+            <div class="name">
+              远程费
+            </div>
+            <div class="code-name">.icon-yuanchengfei
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-24gl-userGroup"></span>
+            <div class="name">
+              24gl-userGroup
+            </div>
+            <div class="code-name">.icon-24gl-userGroup
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-houtaiguanli"></span>
+            <div class="name">
+              后台管理
+            </div>
+            <div class="code-name">.icon-houtaiguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-renyuanguanli"></span>
+            <div class="name">
+              人员管理
+            </div>
+            <div class="code-name">.icon-renyuanguanli
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shouye-zhihui"></span>
+            <div class="name">
+              首页-置灰
+            </div>
+            <div class="code-name">.icon-shouye-zhihui
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-down-circle"></span>
             <div class="name">
@@ -142,6 +247,62 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-users"></use>
+                </svg>
+                <div class="name">users 用户组</div>
+                <div class="code-name">#icon-users</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-31shezhi"></use>
+                </svg>
+                <div class="name">3.1 设置</div>
+                <div class="code-name">#icon-31shezhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yuanchengfei"></use>
+                </svg>
+                <div class="name">远程费</div>
+                <div class="code-name">#icon-yuanchengfei</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-24gl-userGroup"></use>
+                </svg>
+                <div class="name">24gl-userGroup</div>
+                <div class="code-name">#icon-24gl-userGroup</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-houtaiguanli"></use>
+                </svg>
+                <div class="name">后台管理</div>
+                <div class="code-name">#icon-houtaiguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-renyuanguanli"></use>
+                </svg>
+                <div class="name">人员管理</div>
+                <div class="code-name">#icon-renyuanguanli</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shouye-zhihui"></use>
+                </svg>
+                <div class="name">首页-置灰</div>
+                <div class="code-name">#icon-shouye-zhihui</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-down-circle"></use>
diff --git a/src/assets/font/iconfont.css b/src/assets/font/iconfont.css
index 45487c9..ed90cb1 100644
--- a/src/assets/font/iconfont.css
+++ b/src/assets/font/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4373116 */
-  src: url('iconfont.woff2?t=1702534663582') format('woff2'),
-       url('iconfont.woff?t=1702534663582') format('woff'),
-       url('iconfont.ttf?t=1702534663582') format('truetype');
+  src: url('iconfont.woff2?t=1702606581584') format('woff2'),
+       url('iconfont.woff?t=1702606581584') format('woff'),
+       url('iconfont.ttf?t=1702606581584') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,34 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-users:before {
+  content: "\e6e3";
+}
+
+.icon-31shezhi:before {
+  content: "\e600";
+}
+
+.icon-yuanchengfei:before {
+  content: "\e669";
+}
+
+.icon-24gl-userGroup:before {
+  content: "\eb25";
+}
+
+.icon-houtaiguanli:before {
+  content: "\e653";
+}
+
+.icon-renyuanguanli:before {
+  content: "\e62d";
+}
+
+.icon-shouye-zhihui:before {
+  content: "\e61d";
+}
+
 .icon-down-circle:before {
   content: "\e77f";
 }
diff --git a/src/assets/font/iconfont.js b/src/assets/font/iconfont.js
index 75f0b17..61df082 100644
--- a/src/assets/font/iconfont.js
+++ b/src/assets/font/iconfont.js
@@ -1 +1 @@
-window._iconfont_svg_string_4373116='<svg><symbol id="icon-down-circle" viewBox="0 0 1024 1024"><path d="M690 405h-46.9c-10.2 0-19.9 4.9-25.9 13.2L512 563.6 406.8 418.2c-6-8.3-15.6-13.2-25.9-13.2H334c-6.5 0-10.3 7.4-6.5 12.7l178 246c3.2 4.4 9.7 4.4 12.9 0l178-246c3.9-5.3 0.1-12.7-6.4-12.7z"  ></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,c,d,s,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4373116,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(c=o,d=n.document,s=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,l())})}function l(){s||(s=!0,c())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);
\ No newline at end of file
+window._iconfont_svg_string_4373116='<svg><symbol id="icon-users" viewBox="0 0 1024 1024"><path d="M725.333333 938.666667c-25.6 0-42.666667-17.066667-42.666666-42.666667v-85.333333c0-72.533333-55.466667-128-128-128H213.333333c-72.533333 0-128 55.466667-128 128v85.333333c0 25.6-17.066667 42.666667-42.666666 42.666667s-42.666667-17.066667-42.666667-42.666667v-85.333333c0-119.466667 93.866667-213.333333 213.333333-213.333334h341.333334c119.466667 0 213.333333 93.866667 213.333333 213.333334v85.333333c0 25.6-17.066667 42.666667-42.666667 42.666667zM384 512c-119.466667 0-213.333333-93.866667-213.333333-213.333333s93.866667-213.333333 213.333333-213.333334 213.333333 93.866667 213.333333 213.333334-93.866667 213.333333-213.333333 213.333333z m0-341.333333C311.466667 170.666667 256 226.133333 256 298.666667s55.466667 128 128 128 128-55.466667 128-128-55.466667-128-128-128zM981.333333 938.666667c-25.6 0-42.666667-17.066667-42.666666-42.666667v-85.333333c0-59.733333-38.4-110.933333-98.133334-123.733334-21.333333-4.266667-34.133333-29.866667-29.866666-51.2 4.266667-21.333333 29.866667-34.133333 51.2-29.866666 93.866667 25.6 157.866667 110.933333 157.866666 209.066666v85.333334c4.266667 21.333333-12.8 38.4-38.4 38.4zM682.666667 507.733333c-17.066667 0-34.133333-12.8-42.666667-29.866666-8.533333-21.333333 8.533333-46.933333 29.866667-51.2 46.933333-12.8 81.066667-51.2 93.866666-93.866667 17.066667-68.266667-25.6-140.8-93.866666-157.866667-21.333333-4.266667-38.4-29.866667-29.866667-51.2 4.266667-21.333333 29.866667-38.4 51.2-29.866666 110.933333 25.6 183.466667 145.066667 153.6 260.266666-21.333333 76.8-81.066667 132.266667-153.6 153.6H682.666667z"  ></path></symbol><symbol id="icon-31shezhi" viewBox="0 0 1024 1024"><path d="M913.94086 431.828053c-4.878101-25.783223-20.693298-42.455951-40.947598-42.455951l-3.511987 0c-54.731532 0-99.248422-44.515866-99.248422-99.262748 0-17.294898 8.299013-37.015032 8.619308-37.798884 10.097986-22.722514 2.349511-50.567699-18.078751-64.859193l-102.701057-57.183374-1.509377-0.738827c-20.545942-8.909927-48.667419-3.207042-63.987337 12.753465-11.086499 11.434423-49.306986 44.037982-78.471213 44.037982-29.543873 0-67.849294-33.257451-78.992075-44.908816-15.293311-16.077164-43.12417-22.112624-63.902402-13.218046l-106.35733 58.272171-1.596358 1.016143c-20.430308 14.234189-28.207435 42.078351-18.165732 64.713884 0.346901 0.827855 8.676613 20.387329 8.676613 37.914518 0 54.746882-44.51689 99.262748-99.247398 99.262748l-4.149507 0c-19.617803 0-35.434024 16.671705-40.309054 42.455951-0.363274 1.814322-8.590656 45.446052-8.590656 80.429821 0 34.938744 8.227382 78.555124 8.590656 80.355119 4.875031 25.799596 20.691251 42.48665 40.946574 42.48665l3.511987 0c54.730509 0 99.247398 44.51689 99.247398 99.247398 0 17.411555-8.328689 37.058011-8.647961 37.812187-10.069333 22.766516-2.349511 50.567699 18.021445 64.787562l100.756775 56.531528 1.538029 0.696872c20.836561 9.17087 49.01432 3.191692 64.250326-13.464663 14.07353-15.207353 52.207036-46.782489 80.20981-46.782489 30.354332 0 69.445652 35.347043 80.706113 47.76691 10.387581 11.376095 26.349111 18.22713 42.687218 18.22713 7.631818 0 14.857383-1.511423 21.474081-4.354168l104.4724-57.574277 1.538029-0.989537c20.428262-14.276145 28.206412-42.077328 18.138102-64.727187-0.348947-0.842181-8.677637-20.402679-8.677637-37.928844 0-54.730509 44.51689-99.247398 99.248422-99.247398l4.093225 0c19.644409 0 35.488259-16.687054 40.365336-42.48665 0.347924-1.799996 8.588609-45.416376 8.588609-80.355119C922.529469 477.274104 914.288784 433.642374 913.94086 431.828053M862.982258 512.257873c0 22.605857-4.498454 51.655474-6.559393 63.785745-82.09781 6.732331-145.738245 75.335802-145.738245 158.303422 0 23.419386 7.430226 45.851281 11.377118 56.169277l-89.12076 49.216935c-4.38282-4.584412-17.325597-17.644869-34.939767-30.762631-30.93557-22.925129-60.595077-34.635845-88.106664-34.635845-27.278273 0-56.703443 11.420097-87.493703 34.05563-17.528212 12.768815-30.296003 25.479301-34.765805 30.18037l-85.724407-47.997154c4.179183-10.839883 11.405771-32.982182 11.405771-56.226582 0-82.96762-63.640436-151.571091-145.70857-158.303422-2.089591-12.130272-6.588045-41.178865-6.588045-63.785745 0-22.650883 4.498454-51.713802 6.588045-63.844074 82.068134-6.718005 145.70857-75.335802 145.70857-158.303422 0-23.288402-7.429203-45.792952-11.376095-56.095599l91.325985-50.190099c3.975545 3.976568 17.005302 16.730033 34.82311 29.411867 30.355355 21.663392 59.260685 32.633235 86.016049 32.633235 26.494421 0 55.19509-10.766205 85.346807-32.009018 17.963117-12.623505 30.964222-25.203008 34.736129-28.757974l87.900979 48.825009c-3.975545 10.244318-11.405771 32.676214-11.405771 56.18258 0 82.96762 63.640436 151.585417 145.738245 158.303422C858.483804 460.5717 862.982258 489.7523 862.982258 512.257873" fill="#231F20" ></path><path d="M510.215866 365.633445c-80.530105 0-146.056494 65.527412-146.056494 146.057517 0 80.543408 65.527412 146.043191 146.056494 146.043191 80.530105 0 146.057517-65.499783 146.057517-146.043191C656.273383 431.160857 590.74597 365.633445 510.215866 365.633445M596.725148 511.690962c0 47.693232-38.799678 86.491887-86.509283 86.491887-47.708582 0-86.479607-38.798655-86.479607-86.491887 0-47.665603 38.771025-86.479607 86.479607-86.479607C557.925471 425.212378 596.725148 464.025359 596.725148 511.690962" fill="#231F20" ></path></symbol><symbol id="icon-yuanchengfei" viewBox="0 0 1024 1024"><path d="M916.629 567.032L742.93 729.797c-7.265 6.774-16.555 10.312-26.053 10.968-0.934 0.253-1.868 0.557-2.906 0.557-5.657 0-10.275-4.297-10.275-9.604v-79.815H456.094c-21.848 0-39.597-16.529-39.597-36.95V465.381c0-20.371 17.748-36.95 39.597-36.95h247.602V348.06c0-5.307 4.618-9.604 10.275-9.604 0.935 0 1.764 0.252 2.646 0.505 9.549 0.607 18.995 4.145 26.313 11.019l173.699 162.764c15.985 15.012 15.985 39.276 0 54.288z m-38.611-43.421L746.978 404.42v60.961H473.895c-10.95 0-19.773 8.29-19.773 18.45v110.851c0 10.161 8.823 18.45 19.773 18.45h273.083v66.47l131.04-122.882c9.86-9.148 9.86-23.96 0-33.109zM552.987 361.353H279.749v-60.91L148.604 419.584c-9.86 9.149-9.86 23.959 0 33.057l131.144 122.832v-66.419h87.239v38.72h-43.956v79.764c0 5.307-4.567 9.604-10.225 9.604-1.038 0-2.024-0.303-2.957-0.556-9.498-0.656-18.787-4.145-26.053-10.968L109.993 462.954c-15.985-14.962-15.985-39.275 0-54.238l173.804-162.663c7.319-6.874 16.763-10.463 26.313-11.02 0.882-0.253 1.712-0.505 2.698-0.505 5.657 0 10.225 4.296 10.225 9.554v80.371h247.808c21.848 0 39.597 16.53 39.597 36.95v11.626h-39.026c-2.908-6.824-10.019-11.676-18.425-11.676z" fill="#09B6BA" ></path></symbol><symbol id="icon-24gl-userGroup" viewBox="0 0 1024 1024"><path d="M1002.666667 981.333333a21.333333 21.333333 0 0 1-21.333334-21.333333v-64c0-94.106667-76.56-170.666667-170.666666-170.666667H384c-94.106667 0-170.666667 76.56-170.666667 170.666667v64a21.333333 21.333333 0 0 1-42.666666 0v-64a213.333333 213.333333 0 0 1 213.333333-213.333333h426.666667a213.333333 213.333333 0 0 1 213.333333 213.333333v64a21.333333 21.333333 0 0 1-21.333333 21.333333zM21.333333 938.666667a21.333333 21.333333 0 0 1-21.333333-21.333334v-53.333333a181.333333 181.333333 0 0 1 181.333333-181.333333h10.666667a21.333333 21.333333 0 0 1 0 42.666666h-10.666667c-76.46 0-138.666667 62.206667-138.666666 138.666667v53.333333a21.333333 21.333333 0 0 1-21.333334 21.333334z m298.666667-341.333334a192 192 0 0 1-48-377.946666 21.333333 21.333333 0 0 1 10.666667 41.333333A149.226667 149.226667 0 0 0 170.666667 405.333333c0 82.34 66.993333 149.333333 149.333333 149.333334a149.906667 149.906667 0 0 0 37.333333-4.666667 21.333333 21.333333 0 1 1 10.666667 41.333333 192.386667 192.386667 0 0 1-48 6z m533.333333-298.666666c0 141.386667-114.613333 256-256 256S341.333333 440.053333 341.333333 298.666667 455.946667 42.666667 597.333333 42.666667s256 114.613333 256 256zM597.333333 85.333333c-117.82 0-213.333333 95.513333-213.333333 213.333334s95.513333 213.333333 213.333333 213.333333 213.333333-95.513333 213.333334-213.333333-95.513333-213.333333-213.333334-213.333334z" fill="#5C5C66" ></path></symbol><symbol id="icon-houtaiguanli" viewBox="0 0 1024 1024"><path d="M514.885818 563.665455c-13.218909 0-24.762182-2.234182-34.257454-6.656L74.612364 368.360727c-17.408-8.145455-27.834182-23.505455-28.066909-41.192727-0.186182-12.893091 5.306182-37.422545 44.032-56.971636l350.068363-176.267637c33.373091-16.849455 77.405091-21.969455 102.772364-10.193454l405.969454 188.788363c17.268364 8.005818 27.741091 23.365818 28.066909 41.053091 0.186182 12.893091-5.259636 37.515636-44.12509 57.111273l-350.068364 176.314182a161.047273 161.047273 0 0 1-68.375273 16.663273z m-5.073454-70.097455c0.325818 0 2.048 0.279273 5.026909 0.279273 11.264 0 25.786182-3.630545 37.003636-9.309091l330.286546-166.306909-367.941819-171.101091c0.232727 0.093091-1.722182-0.232727-5.026909-0.232727-11.310545 0-25.879273 3.677091-37.143272 9.355636L141.730909 322.606545l368.081455 170.961455c-0.046545 0.046545-0.046545 0 0 0z m73.402181 261.818182l350.068364-176.314182c38.865455-19.595636 44.311273-44.171636 44.125091-57.111273-0.325818-17.687273-10.798545-33.047273-28.113455-41.053091a35.048727 35.048727 0 0 0-49.24509 36.724364l-348.253091 175.383273c-17.314909 8.750545-37.376 10.426182-41.844364 9.169454L135.866182 528.290909a34.909091 34.909091 0 0 0-45.381818-49.664c-38.679273 19.595636-44.125091 44.125091-43.938909 57.064727 0.279273 17.594182 10.705455 32.954182 28.020363 41.099637l406.016 188.788363c10.146909 4.701091 22.016 6.702545 34.443637 6.702546a159.976727 159.976727 0 0 0 68.18909-16.896z m0 174.778182l350.068364-176.267637c38.865455-19.595636 44.311273-44.171636 44.125091-57.111272-0.325818-17.687273-10.798545-33.047273-28.113455-41.099637a35.095273 35.095273 0 0 0-49.24509 36.724364l-348.206546 175.383273c-17.408 8.750545-37.422545 10.379636-41.890909 9.169454l-374.085818-173.847273a35.002182 35.002182 0 0 0 1.582545-34.257454 34.769455 34.769455 0 0 0-46.917818-15.406546c-38.679273 19.549091-44.171636 44.078545-43.985454 56.971637 0.232727 17.640727 10.658909 33.000727 28.066909 41.192727l406.062545 188.788364c10.100364 4.654545 21.969455 6.609455 34.304 6.609454a161.047273 161.047273 0 0 0 68.235636-16.849454z" fill="#231815" ></path></symbol><symbol id="icon-renyuanguanli" viewBox="0 0 1024 1024"><path d="M537.3 354.69H253.87c-18.06 0-32.69-14.64-32.69-32.7 0-18.06 14.64-32.69 32.69-32.7H537.3c18.06-0.02 32.71 14.61 32.73 32.66 0.02 18.06-14.6 32.71-32.66 32.73h-0.07zM421 529.14H253.87c-17.5-0.79-31.29-15.21-31.29-32.73 0-17.52 13.78-31.94 31.29-32.73h167.2a32.756 32.756 0 0 1 29.6 15.92 32.782 32.782 0 0 1 0 33.61 32.764 32.764 0 0 1-29.6 15.93H421z m0 174.44H253.87c-17.5-0.79-31.29-15.21-31.29-32.73 0-17.52 13.78-31.94 31.29-32.73h167.2a32.744 32.744 0 0 1 29.6 15.93 32.782 32.782 0 0 1 0 33.61 32.764 32.764 0 0 1-29.6 15.93H421z m322.5-99.35a54.508 54.508 0 0 0-49.43 26.41 54.498 54.498 0 0 0 49.43 82.45c29.01-1.43 51.8-25.38 51.8-54.43s-22.78-53-51.8-54.43z m141.75 324.23c-15.65-0.07-29.08-11.2-32.03-26.58-9.78-52.86-55.89-91.22-109.65-91.22-53.76 0-99.87 38.36-109.65 91.22a32.824 32.824 0 0 1-21 27.07 32.814 32.814 0 0 1-33.66-6.36 32.791 32.791 0 0 1-9.66-32.86c11.14-59.18 51.75-108.56 107.65-130.92-43.93-29.19-63.57-83.71-48.32-134.21 15.25-50.5 61.77-85.05 114.52-85.05 52.75 0 99.27 34.55 114.51 85.05 15.25 50.5-4.39 105.02-48.32 134.21 55.88 22.37 96.44 71.75 107.52 130.92 1.82 9.52-0.7 19.37-6.86 26.85a32.72 32.72 0 0 1-25.05 11.88z m-464.25 0.4H169.34c-36.13-0.04-65.42-29.32-65.46-65.46V180.25c0.04-36.14 29.32-65.42 65.46-65.46h684.48c36.12 0.04 65.39 29.33 65.39 65.46v308.88a32.698 32.698 0 0 1-49.05 28.32 32.698 32.698 0 0 1-16.35-28.32V180.25H169.34V863.4H421a32.766 32.766 0 0 1 29.6 49.54 32.797 32.797 0 0 1-29.6 15.92z m0 0"  ></path></symbol><symbol id="icon-shouye-zhihui" viewBox="0 0 1024 1024"><path d="M468.906667 57.941333a68.394667 68.394667 0 0 1 86.165333 0l399.936 322.624c30.058667 24.234667 35.136 68.693333 11.328 99.328a69.269333 69.269333 0 0 1-37.802667 24.768l-3.712 0.810667 0.021334 361.514667c0 59.370667-44.48 108.48-102.528 113.877333l-4.736 0.362667-4.949334 0.106666H211.370667c-59.84 0-109.056-47.808-112.106667-109.312l-0.106667-5.034666-0.021333-361.514667-2.453333-0.490667c-29.696-6.848-52.16-33.088-53.909334-64.96L42.666667 436.010667c0-21.610667 9.685333-42.026667 26.325333-55.466667z m46.72 50.026667a5.76 5.76 0 0 0-7.253334 0L108.864 431.146667a6.058667 6.058667 0 0 0-2.218667 4.693333c0 3.328 2.624 6.016 5.866667 6.016h18.816c17.536-0.021333 31.744 14.506667 31.744 32.405333v392.533334l0.064 3.392C164.437333 896.533333 185.792 917.333333 211.712 917.333333h599.765333l3.328-0.085333c25.770667-1.322667 46.101333-23.146667 46.101334-49.621333V474.282667c0-17.92 14.208-32.426667 31.744-32.426667h18.816c1.792 0 3.477333-0.832 4.608-2.261333a6.101333 6.101333 0 0 0-0.96-8.426667z m138.133333 564.693333a32 32 0 0 1-3.754667 45.098667C610.858667 750.890667 568.106667 768 522.666667 768c-45.44 0-88.192-17.109333-127.36-50.24a32 32 0 1 1 41.386666-48.853333C464.704 692.650667 493.056 704 522.666667 704c29.589333 0 57.941333-11.349333 85.973333-35.093333a32 32 0 0 1 45.12 3.754666z" fill="#111111" ></path></symbol><symbol id="icon-down-circle" viewBox="0 0 1024 1024"><path d="M690 405h-46.9c-10.2 0-19.9 4.9-25.9 13.2L512 563.6 406.8 418.2c-6-8.3-15.6-13.2-25.9-13.2H334c-6.5 0-10.3 7.4-6.5 12.7l178 246c3.2 4.4 9.7 4.4 12.9 0l178-246c3.9-5.3 0.1-12.7-6.4-12.7z"  ></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"  ></path></symbol></svg>',function(e){var c=(c=document.getElementsByTagName("script"))[c.length-1],t=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var l,a,i,o,n,s=function(c,t){t.parentNode.insertBefore(c,t)};if(t&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(c){console&&console.log(c)}}l=function(){var c,t=document.createElement("div");t.innerHTML=e._iconfont_svg_string_4373116,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(c=document.body).firstChild?s(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(a=function(){document.removeEventListener("DOMContentLoaded",a,!1),l()},document.addEventListener("DOMContentLoaded",a,!1)):document.attachEvent&&(i=l,o=e.document,n=!1,h(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,d())})}function d(){n||(n=!0,i())}function h(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(h,50)}d()}}(window);
\ No newline at end of file
diff --git a/src/assets/font/iconfont.json b/src/assets/font/iconfont.json
index 19edf9f..911000f 100644
--- a/src/assets/font/iconfont.json
+++ b/src/assets/font/iconfont.json
@@ -5,6 +5,55 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "8474410",
+      "name": "users 用户组",
+      "font_class": "users",
+      "unicode": "e6e3",
+      "unicode_decimal": 59107
+    },
+    {
+      "icon_id": "201646",
+      "name": "3.1 设置",
+      "font_class": "31shezhi",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
+    {
+      "icon_id": "1793613",
+      "name": "远程费",
+      "font_class": "yuanchengfei",
+      "unicode": "e669",
+      "unicode_decimal": 58985
+    },
+    {
+      "icon_id": "7596821",
+      "name": "24gl-userGroup",
+      "font_class": "24gl-userGroup",
+      "unicode": "eb25",
+      "unicode_decimal": 60197
+    },
+    {
+      "icon_id": "8948997",
+      "name": "后台管理",
+      "font_class": "houtaiguanli",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "17730149",
+      "name": "人员管理",
+      "font_class": "renyuanguanli",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "33986999",
+      "name": "首页-置灰",
+      "font_class": "shouye-zhihui",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
     {
       "icon_id": "4765729",
       "name": "down-circle",
diff --git a/src/assets/font/iconfont.ttf b/src/assets/font/iconfont.ttf
index 0198e1b9a111fa6a1c44241e866b4c36c8017c01..8cbf0cf3511f62770286f6508d75c7eef7ae24ac 100644
GIT binary patch
literal 4292
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
Y>;?%-n<d}L@)N7w^QHCq<s!`E-}SJf(f|Me

delta 435
zcmX@2c!qa^LcQ%2FMkFG#vTR+hJ@tY#DW*gcc}yUUx2tEJ*P5lX+EPd0|RpoQ2szh
zYGR67{6iif`vDM}WdH@(?=d$6*?WLkB_p?_f&<6^>U{$wICAon6B!afeC8A&!Iqm?
zQNYO0;0ctM0P+>`5_9WQ1s2<EU|?X;VPIfNFUT)0`4-^z7N~X#P=P4}BT#F@{|1H_
z79ba>3aAszKoCq|5uhl?bT-F$ew(ih+z_=77x=Y<ltJkK2Ur-G9f4d91}3OxkV#A|
z47Lo+la&}(u{^JTUO)K)qe>7^m=%bbff(p0u$>`LYyE(tAZ<E8nhWTb5TL9QSPctE
z{CWNV|1c8B2e|_%%E&f(Bh#<R2begOKq1G#AOj}Ba?k5Q>VbTaslXUu*v!o9#VpRm
X$i&FZz@3s`o~N6fS(KcU3YG={3dv63

diff --git a/src/assets/font/iconfont.woff b/src/assets/font/iconfont.woff
index 2a001f86e3398f1b31f2fb1f2a1d1fd5cd46080a..d67e07003897f6065ef39ae43e9e08447c400010 100644
GIT binary patch
delta 2483
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

delta 642
zcmew&c7{Ww+~3WOfsp|SSbP|`K{VT$i6S=jwo|<PlXDXb7#J8kfP&sYy5Pm~UFzvM
zm1#is6`<I3AU?1(pV2rYH8F*Ofhh;b*9T%VwfKiT89+gx*c>2V28dPI?=d%L<d#$b
z#dZMs93TuLa`KZw>J9*zY+#(gz>u3*VF|RD=>$+f0fZU(89eh6b5nt0FMyUi0O@pr
z#WouX@{3D=4%YyxQ2}DpZvk#^Cvz~S*I&0^pPu*Q{(%DrYT6k+j0_fOBr!2GIP)e{
z%t=m2NJs@@wj^1Fw8Vr2p2UO{21fe@8p;uKW;Sx`oIA9DCG0ShP<`D0|MopBpCS*a
zFe^(R)_A};*(gBHVvWL#MnQ(ezucJ&AhXgEe$+SoRM@QCEYNJ#%*)KYc$1L*;`&{)
z%oYpHwpl!5qV3|DQk#XWrLAXo?3l4*#>Aa7ch2nGHOneMz-3m$4>tu#!3k2!e19>;
z%$ym+^lOdInb|WeW|$dn&RKuTW9!DPTRqSIU`h^I+SV>1B`w|7GQY`CBL1`AtRtsS
ze(Ih1Q<_^nS);4U;PH7$5#9tgW`=G5^t2c%>VYmxNl0Kw>U){f_wkQeyyT8Z35N#{
znf8~l{Qb|s&AeH8!s&wtScF&^{$Ah=0s91~9u#5%hYv9@IZT?!C~CmS;LgF6%>oQq
z5C($;APGt=OboUR%wQ2FAjt)U3=IFle4tsa6E`2=v}06CPDpBC&|`bk&^fVl;><>C
X)%`a9=9Zf^EY+trGBT*Su~Yy6zm3R8

diff --git a/src/assets/font/iconfont.woff2 b/src/assets/font/iconfont.woff2
index 882f0201e87c0bb8c743ddf43b57bfab4c8c5da1..8464d1d45755c242be400cf4ff54e1c03b71105e 100644
GIT binary patch
delta 2398
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
QRUKA;b1kZbhMEQd0Mmhy)Bpeg

delta 733
zcmV<30wVq366^&ScTYw#009610008)01E&B000Ke0007@kr*9+f^Z6fK!I8THUcCA
z2nz-P1Rw>3X9qPK8wSXpnmj2IA}k9*HlCXefI>X{x8LvgnHfYRxzyLlDv?DZ6|+`I
z9lj(D<+nSzrWpXL+*LocYD}sq=>z>fUOq)N0!8GeCRuliCArxN)5$eN#f6sq13mZo
zzjyqX{|fjX&uwpi8f(+U2bM?Q`atbzS%jTD0B@Na!@6j*X2vT5%~lL4-ke(SgZk?z
zH$k^jayZDE<65OrQ0c`K1&WPAJ@#M`&+14w=^gMCeLnv2L?uaGCfjzdCK1R_Ey;`3
zBKgzed_C}7LLD*|0EIZ{&TT0XO|lZrzEWe*Sp>gSRp1qWyZ-Y;J=xd_MnQc~8l$~c
z`2-5%sR6D=Z6NowwK>(>z5d`)bvXImz~N4z<D<9zABtZ*{N#6zzxk!3FIVO^FfA2L
zJB_Br?(*xu5*P7ZHR%GWtjBfz*Ie1`Z*cWI_;Yjs_4lIzTF{D681>VELS=Hr<pvIV
ze6sBG1YfCtf(rZOpy!n?2O|Kge16QM|MxfkAJ>nD8wUO=TMGEu)<zVm@&(`mK;sSg
zg1>3GKoSd!lS-4uD<w50H)w2DNh%;i-G0W}d+xdv8ui?JputFntkD=%xH;5mv4(n$
zYG^iZ@_36Lwh~dAFlB`xbh<*)?gLq;C#rDYsMGI%7xg;*quEi^UDjeMlyQcm93vRZ
zLRGO$qHR19>%}ywM_FAuh?%2861qjXT%5)xW>ai&Qq;pafrMEGoN}JSx^6+6SqZFg
zG0wT&CrPB~Euvx>U>t)*aTo%{WI-y0#Y6%!FMgjFMkVQ@7?KL+7>5etAvckXpr*|x
zYT!;hu5qML9vnwN1S16lH0901bUF)UH_uDJ6r3nNB4g_#DH6e&#r3VmryYT2(vd>#
P%vvt3v?(YmQ*;afk&;e+

diff --git a/src/components/user-info.vue b/src/components/user-info.vue
new file mode 100644
index 0000000..7f540dc
--- /dev/null
+++ b/src/components/user-info.vue
@@ -0,0 +1,167 @@
+<template>
+    <div class="user-info-part">
+        <div class="header-box">
+            <h3>个人信息</h3>
+            <el-icon @click="close">
+                <Close />
+            </el-icon>
+        </div>
+        <div class="custom-tabs">
+            <div class="tabs-item" v-for="(item, index) in ['基础信息', '安全信息']" :key="item"
+                :class="{ 'active': tabActive === index }" @click="tabActive = index">{{ item }}</div>
+        </div>
+        <el-form ref="formRef" :model="formData" :rules="rules" label-width="100">
+            <template v-if="tabActive === 0">
+                <el-upload action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1"
+                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
+                    <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
+                    <img v-else src="@/assets/imgs/home/avatar.png" class="avatar" />
+                </el-upload>
+                <el-form-item label="用户名" prop="account">
+                    <el-input v-model="formData.account" disabled></el-input>
+                </el-form-item>
+                <el-form-item label="电话" prop="phone">
+                    <el-input v-model="formData.phone" placeholder="请输入手机号"></el-input>
+                </el-form-item>
+                <el-form-item label="姓名" prop="name">
+                    <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
+                </el-form-item>
+                <el-form-item label="邮箱" prop="mailbox">
+                    <el-input v-model="formData.mailbox" placeholder="请输入邮箱"></el-input>
+                </el-form-item>
+            </template>
+            <template v-else>
+                <el-form-item label="密码" prop="password">
+                    <el-input v-model="formData.password" type="password" placeholder="请输入密码"></el-input>
+                </el-form-item>
+                <el-form-item label="新密码" prop="newPassword">
+                    <el-input v-model="formData.newPassword" type="password" placeholder="请输入新密码"></el-input>
+                </el-form-item>
+                <el-form-item label="确认密码" prop="confirmPassword">
+                    <el-input v-model="formData.confirmPassword" type="password" placeholder="请输入新密码"></el-input>
+                </el-form-item>
+            </template>
+        </el-form>
+        <div class="submit-box">
+            <el-button type="primary" @click="submitForm">{{ tabActive === 0 ? '更新个人信息' : '修改密码' }}</el-button>
+        </div>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { UploadProps } from 'element-plus'
+
+const emit = defineEmits(['close'])
+
+const formRef = ref()
+
+const validatePassword = (rule: any, value: any, callback: any) => {
+    if (formData.value.newPassword !== formData.value.confirmPassword) {
+        callback(new Error('两次密码不一致'))
+    } else {
+        callback()
+    }
+}
+
+const rules = reactive({
+    phone: [
+        { required: true, message: '请输入手机号', trigger: 'blur' },
+    ],
+    name: [
+        { required: true, message: '请输入用户名', trigger: 'blur' },
+    ],
+    mailbox: [
+        { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] },
+    ],
+    password: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+    ],
+    newPassword: [
+        { required: true, message: '请选择新密码', trigger: 'blur' },
+        { validator: validatePassword, trigger: 'blur' }
+    ],
+    confirmPassword: [
+        { required: true, message: '请选择新密码', trigger: 'blur' },
+        { validator: validatePassword, trigger: 'blur' }
+    ]
+})
+const tabActive = ref(0)
+const formData = ref({
+    avatar: '',
+    account: '',
+    phone: '',
+    name: '',
+    mailbox: '',
+    password: '',
+    newPassword: '',
+    confirmPassword: ''
+})
+
+const close = () => {
+    emit('close')
+}
+const handleAvatarSuccess: UploadProps['onSuccess'] = (
+    response,
+    uploadFile
+) => {
+    formData.value.avatar = URL.createObjectURL(uploadFile.raw!)
+}
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+    if (rawFile.type !== 'image/jpeg') {
+        ElMessage.error('图片必须为jpg格式!')
+        return false
+    } else if (rawFile.size / 1024 / 1024 > 2) {
+        ElMessage.error('图片大小不得超过2MB!')
+        return false
+    }
+    return true
+}
+const submitForm = async () => {
+    await formRef.value.validate((valid: any, fields: any) => {
+        if (valid) {
+            console.log('submit!')
+            ElMessage.success('更新成功')
+            close()
+        } else {
+            console.log('error submit!', fields)
+        }
+    })
+}
+</script>
+
+<style lang='scss' scoped>
+.user-info-part {
+    width: 100%;
+    height: 100%;
+    padding: 30px;
+
+    .header-box {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        h3 {
+            color: $main-color;
+            font-size: 20px;
+        }
+
+        .el-icon {
+            cursor: pointer;
+            color: #606266;
+        }
+    }
+    img.avatar {
+        width: 128px;
+        height: 148px;
+        object-fit: contain;
+        margin: 0 0 20px 50px;
+    }
+    .submit-box {
+        padding-left: 50px  ;
+    }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 2e57b3d..ae307ba 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,6 +12,8 @@ import 'slider-verify-v3/lib/SliderVerify.css'
 import 'element-plus/dist/index.css';
 import './assets/css/global.scss';
 import './assets/font/iconfont.css';
+import '@/assets/css/custom-element.scss'
+import '@/assets/css/animastore.css'
 
 const pinia = createPinia()
 const app = createApp(main) 
diff --git a/src/router/index.ts b/src/router/index.ts
index c495753..dbc0376 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,16 +13,37 @@ const router = createRouter({
         {
             path: '/',
             redirect: '/home',
+            component: () => import('@/views/index.vue'),
             children: [
                 {
                     path: '/home',
                     name: '首页',
                     component: () => import('@/views/home/home.vue'),
                 },
+                {
+                    path: '/permissions-manage',
+                    name: '权限管理',
+                    component: () => import('@/views/permissions-manage/permissions-manage.vue'),
+                },
+                {
+                    path: '/patients-manage',
+                    name: '患者管理',
+                    component: () => import('@/views/patients-manage/patients-manage.vue'),
+                },
                 {
                     path: '/remote-manage',
                     name: '远程管理',
                     component: () => import('@/views/remote-manage/remote-manage.vue'),
+                },
+                {
+                    path: '/system-manage',
+                    name: '后台管理',
+                    component: () => import('@/views/system-manage/system-manage.vue'),
+                },
+                {
+                    path: '/logs-manage',
+                    name: '日志管理',
+                    component: () => import('@/views/logs-manage/logs-manage.vue'),
                 }
             ]
         }
diff --git a/src/static-data/core.ts b/src/static-data/core.ts
index 09537ab..bfd75eb 100644
--- a/src/static-data/core.ts
+++ b/src/static-data/core.ts
@@ -1,44 +1,11 @@
-import Mock from 'mockjs'
-
-var template = {
-    'title': 'Syntax Demo',
-
-    'string1|1-10': '★',
-    'string2|3': 'value',
-
-    'number1|+1': 100,
-    'number2|1-100': 100,
-    'number3|1-100.1-10': 1,
-    'number4|123.1-10': 1,
-    'number5|123.3': 1,
-    'number6|123.10': 1.123,
-
-    'boolean1|1': true,
-    'boolean2|1-2': true,
-
-    'object1|2-4': {
-        '110000': '北京市',
-        '120000': '天津市',
-        '130000': '河北省',
-        '140000': '山西省'
-    },
-    'object2|2': {
-        '310000': '上海市',
-        '320000': '江苏省',
-        '330000': '浙江省',
-        '340000': '安徽省'
-    },
-
-    'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'],
-    'array2|1-10': ['Mock.js'],
-    'array3|3': ['Mock.js'],
-
-    'function': function () {
-        return this.title
-    }
+export const getHospitalsData = () => {
+    const hospitals = []
+    hospitals.push({ label: '北京朝阳医院', value: '北京朝阳医院' })
+    hospitals.push({ label: '北京朝阳医院1', value: '北京朝阳医院1' })
+    hospitals.push({ label: '北京朝阳医院2', value: '北京朝阳医院2' })
+    return hospitals
 }
 
-var data = []
-data.push(Mock.mock(template))
-data.push(Mock.mock(template))
-console.log(data)
\ No newline at end of file
+export const getPhoneAreasData = () => {
+    return ['中国 +86']
+}
\ No newline at end of file
diff --git a/src/stores/user-info-store.ts b/src/stores/user-info-store.ts
index f1aac7b..aedb605 100644
--- a/src/stores/user-info-store.ts
+++ b/src/stores/user-info-store.ts
@@ -3,10 +3,13 @@ import { defineStore } from 'pinia'
 
 export const useLoginStore = defineStore('login', {
   state: () => {
-    return { 
+    return {
       login: {
-        isLogin: false,
-        name: ''
+        isLogin: true,
+        account: 'admin',
+        name: '管理员',
+        permissions: '超级管理员',
+        hospital: '北京第一医院'
       } as any
     }
   },
@@ -16,8 +19,11 @@ export const useLoginStore = defineStore('login', {
     getlogin() {
       return this.login
     },
-    setlogin(key: string,e: any) {
+    setlogin(key: string, e: any) {
       this.login[key] = e
+    },
+    logout() {
+      this.login.isLogin = false
     }
   },
 })
\ No newline at end of file
diff --git a/src/utils/date-util.ts b/src/utils/date-util.ts
new file mode 100644
index 0000000..9c11e0e
--- /dev/null
+++ b/src/utils/date-util.ts
@@ -0,0 +1,55 @@
+/**
+ * 格式化时间
+ * @returns
+ */
+export function dateFormater(formater: string, time?: any) {
+	let date = time ? new Date(time) : new Date(),
+		Y = date.getFullYear() + '',
+		M = date.getMonth() + 1,
+		D = date.getDate(),
+		H = date.getHours(),
+		m = date.getMinutes(),
+		s = date.getSeconds();
+	return formater
+		.replace(/YYYY|yyyy/g, Y)
+		.replace(/YY|yy/g, Y.substr(2, 2))
+		.replace(/MM/g, (M < 10 ? '0' : '') + M)
+		.replace(/DD|dd/g, (D < 10 ? '0' : '') + D)
+		.replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
+		.replace(/mm/g, (m < 10 ? '0' : '') + m)
+		.replace(/ss/g, (s < 10 ? '0' : '') + s);
+}
+
+/**
+ * 获取指定月份天数
+ * @param {*} time 
+ * @returns 
+ */
+export function getMonthDays(time) {
+    if (!time) time = new Date();
+    const now = new Date(time);
+    const year = now.getFullYear();
+    const month = now.getMonth() + 1;
+
+    const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+
+    const daysInMonth = month === 2
+        ? isLeapYear ? 29 : 28
+        : month === 4 || month === 6 || month === 9 || month === 11
+            ? 30
+            : 31;
+
+    return daysInMonth;
+}
+
+/**
+ * 获取当前日期的周几  i:1,2,3,4,5,6,7
+ * @returns
+ */
+export function getFirstDayOfWeek(date: Date, i: number) {
+    if (i < 1 || i > 7) {
+        return null;
+    }
+    const day = date.getDay() || 7;
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + i - day);
+}
\ No newline at end of file
diff --git a/src/views/home/home.vue b/src/views/home/home.vue
index 47ef995..26874ea 100644
--- a/src/views/home/home.vue
+++ b/src/views/home/home.vue
@@ -1,14 +1,98 @@
 <template>
-    <div>
-        首页
+    <div class="home-page">
+        <div class="background-box">
+            <div class="left-content">
+                <div class="header-box">
+                    <div class="header-item">
+                        <span class="main-color f20" style="font-weight: 600;">{{ userInfo.name }}</span>
+                        <span class="text2-color f14">{{ userInfo.permissions }}</span>
+                    </div>
+                    <div class="header-item">
+                        <el-icon class="text1-color" style="font-size: 26px;margin-right: 20px;"><Calendar /></el-icon>
+                        <div>
+                            <p class="text1-color f14">待办任务</p>
+                            <p class="main-color f20">{{ total }}</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="echart-box">
+                    <div class="echart-item"><NumberChart/></div>
+                    <div class="echart-item"><TimeChart/></div>
+                </div>
+            </div>
+            <div class="right-content">
+
+            </div>
+        </div>
     </div>
 </template>
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { useLoginStore } from '@/stores/user-info-store'
+import NumberChart from "./number-chart.vue";
+import TimeChart from "./time-chart.vue";
+
+const userInfo = useLoginStore().getlogin()
+
+const total = ref(0) // 日历添加的记录提醒统计
 
 </script>
 
 <style lang='scss' scoped>
+.home-page {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    padding: 15px;
 
-</style>
+    .background-box {
+        width: 100%;
+        height: 100%;
+        background: white;
+        padding: 20px 35px;
+    }
+
+    .left-content {
+        width: calc(100% - 550px);
+        height: 100%;
+        .header-box {
+            width: 100%;
+            height: 140px;
+            display: flex;
+            justify-content: space-between;
+            .header-item {
+                width: calc(50% - 10px);
+                height: 100%;
+                border: 1px solid $border-color;
+                border-radius: 5px;
+                padding: 0 90px;
+                line-height: 1.5;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                & ~ .header-item {
+                    flex-direction: row;
+                    justify-content: flex-start;
+                    align-items: center;
+                }
+            }
+        }
+        .echart-box {
+            width: 100%;
+            height: calc(100% - 160px);
+            margin-top: 20px;
+            .echart-item {
+                width: 100%;
+                height: calc(50% - 20px);
+                margin-top: 20px;
+            }
+        }
+    }
+
+    .right-content {
+        width: 530px;
+        height: 100%;
+    }
+}</style>
diff --git a/src/views/home/number-chart.vue b/src/views/home/number-chart.vue
new file mode 100644
index 0000000..163afa9
--- /dev/null
+++ b/src/views/home/number-chart.vue
@@ -0,0 +1,177 @@
+<template>
+    <div class="chart-box">
+        <div class="date-btn text-color">
+            <div :class="{'text2-color': calcTime(upMonth)}" @click="getData(upMonth)">
+                <p>{{ dateFormater('yyyy年MM月', upMonth) }}</p>
+                <el-icon><ArrowLeft /></el-icon>
+            </div>
+            <div :class="{'text2-color': calcTime(downMonth)}" style="text-align: right;" @click="getData(downMonth)">
+                <p>{{ dateFormater('yyyy年MM月', downMonth) }}</p>
+                <el-icon><ArrowRight /></el-icon>
+            </div>
+        </div>
+        <div ref="chartDom" class="chart-dom"></div>
+        <div class="total">
+            <span class="f18">总计<br>手术<br>数量:</span>
+            <span style="font-size: 24px;font-weight: 600;">{{ total }}</span>
+        </div>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import * as echarts from 'echarts';
+import { dateFormater, getMonthDays } from '@/utils/date-util';
+
+const chartDom = ref()
+
+const currentMonth = ref(new Date())
+const upMonth = ref()
+const downMonth = ref()
+const total = ref(0)
+
+onMounted(() => {
+    getData(new Date())
+})
+
+// 大于当前时间返回 true
+function calcTime(time: any) {
+    return Boolean(new Date().getTime() < new Date(time).getTime())
+}
+function initChart(chartData: any) {
+    const chart = echarts.init(chartDom.value as HTMLElement);
+    chart.clear();
+    const option = {
+        color: [],
+        tooltip: {
+            trigger: 'axis',
+            formatter: (params: any) => {
+                return dateFormater('yyyy年MM月', currentMonth.value) + params[0].axisValue + '<br>手术数量 <b>' + params[0].value + '</b> 台'
+            }
+        },
+        grid: {
+            left: 20,
+            right: 50,
+            bottom: 5,
+            top: 50,
+            containLabel: true,
+        },
+        xAxis: {
+            name: '日期',
+            show: true,
+            type: 'category',
+            boundaryGap: false,
+            nameTextStyle: { color: '#303133' },
+            axisLine: { show: true, lineStyle: { color: '#006080', width: 2 } },
+            axisTick: { show: false },
+            axisLabel: { show: true, interval: chartData.xData.length - 2 },
+            splitLine: { show: true, lineStyle: { color: 'rgba(0, 96, 128, .05)', width: 1, type: 'solid' } },
+            data: chartData.xData,
+        },
+        yAxis: {
+            name: '手术数量/台',
+            show: true,
+            type: 'value',
+            min: 0,
+            nameTextStyle: { color: '#303133', align: 'left', verticalAlign: 'top', padding: [0, 20] },
+            axisLine: { show: true, lineStyle: { color: '#006080', width: 2 } },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+            splitLine: { show: false, lineStyle: { color: '#D4E8F0', width: 1, type: 'solid' } },
+        },
+        series: [{
+            type: 'line',
+            symbol: 'none',
+            smooth: true,
+            showSymbol: false,
+            lineStyle: {
+                color: 'rgb(0, 96, 128)',
+                width: 2,
+                shadowColor: 'rgba(0, 96, 128, .3)',
+                shadowBlur: 10,
+                shadowOffsetY: 20
+            },
+            areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(0, 96, 128, 1)'
+                }, {
+                    offset: 0.8,
+                    color: 'rgba(255, 255, 255, 0.1)'
+                }], false)
+            },
+            data: chartData.data
+        }],
+    };
+    chart.setOption(option);
+    chart.resize();
+    window.addEventListener('resize', () => {
+        chart.resize();
+    });
+}
+
+const getData = (date: any) => {
+    currentMonth.value = new Date(date)
+    upMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1, 1)
+    downMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1, 1)
+    const days = getMonthDays(currentMonth.value)
+    const xData = []
+    const data = []
+    let num = 0
+    for (let i = 0; i < days; i++) {
+        xData.push((i < 9 ? '0' : '') + (i + 1))
+        data.push(Math.ceil(Math.random() * 10))
+        num += data[i]
+    }
+    total.value = num
+    initChart({ xData, data })
+}
+</script>
+
+<style lang='scss' scoped>
+    .chart-box {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .date-btn {
+            position: absolute;
+            height: 50px;
+            top: 0;
+            left: 20px;
+            right: 230px;
+            display: flex;
+            justify-content: space-between;
+            z-index: 1;
+            &>div {
+                cursor: pointer;
+                p {
+                    margin-bottom: 10px;
+                    font-weight: 600;
+                }
+            }
+        }
+        .chart-dom {
+            width: calc(100% - 180px);
+            height: 100%;
+        }
+        .total {
+            flex-shrink: 0;
+            width: 160px;
+            height: 80%;
+            border: 2px solid $main-color;
+            border-radius: 5px;
+            background: rgba($main-color, .1);
+            color: $main-color;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+            align-items: center;
+            span {
+                text-align: center;
+            }
+        }
+    }
+</style>
diff --git a/src/views/home/time-chart.vue b/src/views/home/time-chart.vue
new file mode 100644
index 0000000..3a86199
--- /dev/null
+++ b/src/views/home/time-chart.vue
@@ -0,0 +1,177 @@
+<template>
+    <div class="chart-box">
+        <div class="date-btn text-color">
+            <div :class="{'text2-color': calcTime(upMonth)}" @click="getData(upMonth)">
+                <p>{{ dateFormater('yyyy年MM月', upMonth) }}</p>
+                <el-icon><ArrowLeft /></el-icon>
+            </div>
+            <div :class="{'text2-color': calcTime(downMonth)}" style="text-align: right;" @click="getData(downMonth)">
+                <p>{{ dateFormater('yyyy年MM月', downMonth) }}</p>
+                <el-icon><ArrowRight /></el-icon>
+            </div>
+        </div>
+        <div ref="chartDom" class="chart-dom"></div>
+        <div class="total">
+            <span class="f18">总计<br>手术<br>时长:</span>
+            <span style="font-size: 24px;font-weight: 600;">{{ total.toFixed(0) }}h<br>{{ Number((total % 1).toFixed(1)) * 60 }}min</span>
+        </div>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import * as echarts from 'echarts';
+import { dateFormater, getMonthDays } from '@/utils/date-util';
+
+const chartDom = ref()
+
+const currentMonth = ref(new Date())
+const upMonth = ref()
+const downMonth = ref()
+const total = ref(0)
+
+onMounted(() => {
+    getData(new Date())
+})
+
+// 大于当前时间返回 true
+function calcTime(time: any) {
+    return Boolean(new Date().getTime() < new Date(time).getTime())
+}
+function initChart(chartData: any) {
+    const chart = echarts.init(chartDom.value as HTMLElement);
+    chart.clear();
+    const option = {
+        color: [],
+        tooltip: {
+            trigger: 'axis',
+            formatter: (params: any) => {
+                return dateFormater('yyyy年MM月', currentMonth.value) + params[0].axisValue + '<br>手术时长 <b>' + params[0].value + '</b> h'
+            }
+        },
+        grid: {
+            left: 20,
+            right: 50,
+            bottom: 5,
+            top: 50,
+            containLabel: true,
+        },
+        xAxis: {
+            name: '日期',
+            show: true,
+            type: 'category',
+            boundaryGap: false,
+            nameTextStyle: { color: '#303133' },
+            axisLine: { show: true, lineStyle: { color: '#D58301', width: 2 } },
+            axisTick: { show: false },
+            axisLabel: { show: true, interval: chartData.xData.length - 2 },
+            splitLine: { show: true, lineStyle: { color: 'rgba(212, 130, 1, .05)', width: 1, type: 'solid' } },
+            data: chartData.xData,
+        },
+        yAxis: {
+            name: '手术时长/h',
+            show: true,
+            type: 'value',
+            min: 0,
+            nameTextStyle: { color: '#303133', align: 'left', verticalAlign: 'top', padding: [0, 20] },
+            axisLine: { show: true, lineStyle: { color: '#D58301', width: 2 } },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+            splitLine: { show: false, lineStyle: { color: '#D4E8F0', width: 1, type: 'solid' } },
+        },
+        series: [{
+            type: 'line',
+            symbol: 'none',
+            smooth: true,
+            showSymbol: false,
+            lineStyle: {
+                color: 'rgb(212, 130, 1)',
+                width: 2,
+                shadowColor: 'rgba(212, 130, 1, .3)',
+                shadowBlur: 10,
+                shadowOffsetY: 20
+            },
+            areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: 'rgba(212, 130, 1, 1)'
+                }, {
+                    offset: 0.8,
+                    color: 'rgba(255, 255, 255, 0.1)'
+                }], false)
+            },
+            data: chartData.data
+        }],
+    };
+    chart.setOption(option);
+    chart.resize();
+    window.addEventListener('resize', () => {
+        chart.resize();
+    });
+}
+
+const getData = (date: any) => {
+    currentMonth.value = new Date(date)
+    upMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1, 1)
+    downMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1, 1)
+    const days = getMonthDays(currentMonth.value)
+    const xData = []
+    const data = []
+    let num = 0
+    for (let i = 0; i < days; i++) {
+        xData.push((i < 9 ? '0' : '') + (i + 1))
+        data.push( Number( (Math.random() * 16 + 2).toFixed(1) ) )
+        num += data[i]
+    }
+    total.value = Number(num.toFixed(1))
+    initChart({ xData, data })
+}
+</script>
+
+<style lang='scss' scoped>
+    .chart-box {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .date-btn {
+            position: absolute;
+            height: 50px;
+            top: 0;
+            left: 20px;
+            right: 230px;
+            display: flex;
+            justify-content: space-between;
+            z-index: 1;
+            &>div {
+                cursor: pointer;
+                p {
+                    margin-bottom: 10px;
+                    font-weight: 600;
+                }
+            }
+        }
+        .chart-dom {
+            width: calc(100% - 180px);
+            height: 100%;
+        }
+        .total {
+            flex-shrink: 0;
+            width: 160px;
+            height: 80%;
+            border: 2px solid #D58301;
+            border-radius: 5px;
+            background: rgba(#D58301, .1);
+            color: #D58301;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+            align-items: center;
+            span {
+                text-align: center;
+            }
+        }
+    }
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index e7d1d6c..85a4ffb 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,14 +1,231 @@
 <template>
-    <div>
-        <RouterView />
+    <div class="page-content">
+        <div class="head-box">
+            <div class="logo-box">
+                <img src="@/assets/imgs/logo.png" />
+            </div>
+            <ul class="menu-box">
+                <li class="menu-item" v-for="item in menus" :key="item.path" :class="{ 'active': menuActive === item.path }"
+                    @click="menuToPath(item)"><i :class="item.icon"></i><span>{{ item.label
+                    }}</span></li>
+            </ul>
+            <div class="user-box">
+                <!-- 超级管理员可切换医院 -->
+                <el-select v-if="userInfo.permissions === '超级管理员'" class="select-hospital"
+                    :model-value="userInfo.hospital" size="small" @change="selectHospital">
+                    <el-option v-for="item in hospitals" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+                <span v-else class="area">{{ userInfo.hospital }}</span>
+                <el-button text>
+                    <el-icon>
+                        <Search />
+                    </el-icon>
+                </el-button>
+                <el-button text>
+                    <el-badge is-dot>
+                        <el-icon>
+                            <Bell />
+                        </el-icon>
+                    </el-badge>
+                </el-button>
+                <el-button text @click="toggleFullscreen">
+                    <el-icon>
+                        <FullScreen />
+                    </el-icon>
+                </el-button>
+                <el-dropdown trigger="click" @command="userCommand">
+                    <span class="el-dropdown-link">
+                        {{ userInfo.name }}
+                        <el-icon class="el-icon--right">
+                            <arrow-down />
+                        </el-icon>
+                    </span>
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item command="info">个人信息</el-dropdown-item>
+                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </div>
+        </div>
+        <div class="main-content">
+            <RouterView />
+        </div>
+        <el-drawer v-model="isShowUserInfoDrawer" title="I am the title" :with-header="false">
+            <userInfoForm @close="isShowUserInfoDrawer = false" />
+        </el-drawer>
     </div>
 </template>
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useLoginStore } from '@/stores/user-info-store'
+import { getHospitalsData } from '@/static-data/core'
+import userInfoForm from '@/components/user-info.vue'
 
+const router = useRouter()
+const route = useRoute()
+
+const userInfo = useLoginStore().getlogin()
+const hospitals: any = getHospitalsData()
+
+const menus = [
+    { label: '首页', path: '/home', icon: 'icon-shouye-zhihui' },
+    { label: '权限管理', path: '/permissions-manage', icon: 'icon-24gl-userGroup' },
+    { label: '患者管理', path: '/patients-manage', icon: 'icon-renyuanguanli' },
+    { label: '远程管理', path: '/remote-manage', icon: 'icon-yuanchengfei' },
+    { label: '后台管理', path: '/system-manage', icon: 'icon-houtaiguanli' },
+    { label: '日志管理', path: '/logs-manage', icon: 'icon-31shezhi' }
+]
+
+const isShowUserInfoDrawer = ref(false)
+const menuActive = ref('/home')
+
+router.isReady().then(() => {
+    console.log(route)
+    menuActive.value = route.path
+})
+
+onMounted(() => {
+
+})
+
+const menuToPath = (e: any) => {
+    menuActive.value = e.path
+    router.push(e.path)
+}
+// 切换医院
+const selectHospital = (e: any) => {
+    // 根据实际情况看是否需要重新登录
+    ElMessageBox.confirm(
+        '是否跳转到登录页面登录到所选择医院？',
+        {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'success',
+        }
+    ).then(() => {
+        useLoginStore().setlogin('hospital', e)
+        router.push('/login')
+    }).catch(() => { })
+}
+const toggleFullscreen = () => {
+    if (document.fullscreenElement) {
+        document.exitFullscreen();
+    } else {
+        document.documentElement.requestFullscreen();
+    }
+}
+const userCommand = (e: string) => {
+    switch (e) {
+        case 'logout':
+            useLoginStore().logout()
+            router.push('/login')
+            break;
+        case 'info':
+            isShowUserInfoDrawer.value = true
+            break;
+        default:
+            break;
+    }
+}
 </script>
 
 <style lang='scss' scoped>
+.page-content {
+    width: 100%;
+    height: 100%;
 
+    .head-box {
+        width: 100%;
+        height: 50px;
+        padding: 0 24px;
+        background: white;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .logo-box {
+            height: 100%;
+
+            img {
+                height: 100%;
+            }
+        }
+
+        .menu-box {
+            display: flex;
+            align-items: center;
+
+            .menu-item {
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                font-size: 18px;
+                font-weight: 600;
+                color: $main-color;
+                line-height: 50px;
+                padding: 0 20px;
+                margin: 0;
+                transition: all .3s;
+                -webkit-transition: all .3s;
+
+                &:hover {
+                    background: #F5F7FA;
+                    transition: all .3s;
+                    -webkit-transition: all .3s;
+                }
+
+                &.active {
+                    background: rgba($main-color, .1);
+                }
+
+                img {
+                    height: 20px;
+                    margin-right: 10px;
+                }
+            }
+        }
+
+        .user-box {
+            display: flex;
+            align-items: center;
+
+            .select-hospital {
+                margin-right: 20px;
+            }
+
+            .area {
+                cursor: pointer;
+                font-size: 14px;
+                color: $main-color;
+                line-height: 1.6;
+                padding: 0 20px;
+                border: 1px solid #8c9094;
+                border-radius: 7px;
+                margin-right: 20px;
+            }
+
+            &>.el-button {
+                margin: 0;
+            }
+
+            &>.el-dropdown {
+                margin-left: 10px;
+            }
+
+            .el-dropdown-link {
+                cursor: pointer;
+            }
+        }
+    }
+    &>.main-content {
+        width: 100%;
+        height: calc(100% - 50px);
+        background: #f5f7fa;
+    }
+}
 </style>
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index 029373b..62db6f4 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -1,21 +1,20 @@
 <template>
     <div class="login-page">
-        <div class="left-content"></div>
+        <div class="left-content move_4"></div>
         <div class="right-content">
-            <div class="select-hospital">
-                <el-select v-model="currentHospital" size="small" @change="selectHospital">
+            <div class="select-hospital-box">
+                <el-select class="select-hospital" v-model="currentHospital" size="small" @change="selectHospital">
                     <el-option v-for="item in hospitals" :key="item.value" :label="item.label" :value="item.value" />
                 </el-select>
             </div>
 
-            <img v-show="!isShowRegister" class="logo" src="@/assets/imgs/logo.png">
-            <div class="login-block" v-if="!isShowRegister">
+            <img v-show="!isShowRegister" class="logo move_2" src="@/assets/imgs/logo.png">
+            <div v-if="!isShowRegister" class="login-block move_2">
                 <div class="login-way">
                     <span :class="passwordLogin && 'active'" @click="passwordLogin = true">密码登录</span>
                     <span :class="!passwordLogin && 'active'" @click="passwordLogin = false">验证码登录</span>
                 </div>
-                <el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small"
-                    status-icon>
+                <el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small">
                     <div class="login-form password-login" v-if="passwordLogin">
                         <el-form-item prop="account">
                             <el-input v-model="loginParams.account" placeholder="请输入用户名">
@@ -40,11 +39,11 @@
                     </div>
                     <div class="login-form code-login" v-else>
                         <el-form-item prop="phone">
-                            <el-input v-model="loginParams.phone" type="password" placeholder="请输入手机号">
+                            <el-input v-model="loginParams.phone" placeholder="请输入手机号">
                                 <template #prepend>
                                     <div @click.stop style="display: flex;align-items: center;">
                                         <el-dropdown @command="selectPhoneArea">
-                                            <span>{{ loginParams.phoneArea }}<el-icon>
+                                            <span style="color: #909399;">{{ loginParams.phoneArea }}<el-icon>
                                                     <DCaret />
                                                 </el-icon></span>
                                             <template #dropdown>
@@ -59,7 +58,7 @@
                             </el-input>
                         </el-form-item>
                         <el-form-item prop="code">
-                            <el-input v-model="loginParams.code" placeholder="">
+                            <el-input v-model="loginParams.code" placeholder="请输入6位短信验证码">
                                 <template #append>
                                     <span class="send-btn" @click="sendCode">{{ loginParams.sendText }}</span>
                                 </template>
@@ -69,14 +68,13 @@
                     </div>
                 </el-form>
             </div>
-            <div v-else class="register-block">
+            <div v-else class="register-block move_2">
                 <div class="header-box">
                     <span class="title">新用户申请</span>
                     <el-icon @click="isShowRegister = false"><Close /></el-icon>
                 </div>
 
-                <el-form ref="registerFormRef" :model="registerParams" :rules="registerRules" label-width="100"
-                    status-icon>
+                <el-form ref="registerFormRef" :model="registerParams" :rules="registerRules" label-width="100">
                     <el-form-item label="用户名" prop="account">
                         <el-input v-model="registerParams.account" placeholder="请输入用户名"></el-input>
                     </el-form-item>
@@ -90,7 +88,7 @@
                         <el-input v-model="registerParams.phone" type placeholder="请输入手机号"></el-input>
                     </el-form-item>
                     <el-form-item label="医院" prop="hospital">
-                        <el-select v-model="registerParams.hospital">
+                        <el-select v-model="registerParams.hospital" style="width: 100%;">
                             <el-option v-for="item in hospitals" :key="item.value" :label="item.label"
                                 :value="item.value" />
                         </el-select>
@@ -101,15 +99,15 @@
                             <el-radio label="女" />
                         </el-radio-group>
                     </el-form-item>
-                    <el-form-item label="验证码" prop="phone">
-                        <el-input v-model="registerParams.phone" type placeholder="请输入验证码"></el-input>
-                        <img src="" />
+                    <el-form-item label="验证码" prop="code">
+                        <el-input v-model="registerParams.code" type placeholder="请输入验证码" style="width: calc(100% - 110px);"></el-input>
+                        <img width="100" height="32" style="margin-left: 10px;" src="" />
                     </el-form-item>
 
                 </el-form>
                 <div class="footer-box">
-                    <el-button type="primary">注 册</el-button>
-                    <span @click="isShowRegister = false">已有账号？</span>
+                    <el-button type="primary" @click="register">注 册</el-button>
+                    <span @click="isShowRegister = false">已有账号?</span>
                 </div>
 
             </div>
@@ -122,13 +120,14 @@
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { useLoginStore } from '@/stores/user-info-store'
+import { getHospitalsData, getPhoneAreasData } from '@/static-data/core'
 
 const router = useRouter()
 
-const hospitals: any = []
-const phoneAreas: any = ['中国 +86']
+const hospitals: any = getHospitalsData()
+const phoneAreas: any = getPhoneAreasData()
 
 const loginRules = reactive({
     account: [
@@ -168,7 +167,7 @@ const registerRules = reactive({
 const loginFormRef = ref()
 const registerFormRef = ref()
 const slideVerifyRef = ref()
-const currentHospital = ref('')
+const currentHospital = ref(useLoginStore().getlogin().hospital)
 const isShowRegister = ref(false)
 const passwordLogin = ref(true)
 const loginParams = ref({
@@ -178,6 +177,7 @@ const loginParams = ref({
     phoneArea: phoneAreas[0],
     code: '',
     isSendCode: false,
+    sendTimer: 0,
     sendText: '获取短信验证码'
 })
 const registerParams = ref({
@@ -191,27 +191,51 @@ const registerParams = ref({
 })
 const sliderVConf = ref({
     isShowSelf: false,
-    width: 500,
+    width: 400,
     height: 200
 })
 
-hospitals.push({ label: '北京朝阳医院', value: '北京朝阳医院' })
-hospitals.push({ label: '北京朝阳医院1', value: '北京朝阳医院1' })
-hospitals.push({ label: '北京朝阳医院2', value: '北京朝阳医院2' })
-currentHospital.value = hospitals[0].value
-
-
 const selectHospital = (e: string) => {
     console.log(e)
 }
-const register = () => {
-
+const register = async () => {
+    await registerFormRef.value.validate((valid: any, fields: any) => {
+        if (valid) {
+            ElMessageBox.confirm(
+                '注册成功，是否登录？',
+                {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'success',
+                }
+            ).then(() => {
+                toHome()
+            }).catch(() => { })
+        } else {
+            console.log('error submit!', fields)
+        }
+    })
 }
 const selectPhoneArea = (e: string) => {
     loginParams.value.phoneArea = e
 }
 const sendCode = () => {
-
+    if(loginParams.value.isSendCode) return
+    let num = 60
+    ElMessage.success('发送成功！')
+    loginParams.value.isSendCode = true
+    loginParams.value.sendText = '请' + num + '秒后重新发送'
+    loginParams.value.sendTimer = setInterval(() => {
+        num--
+        if(num > 0) {
+            loginParams.value.sendText = '请' + num + '秒后重新发送'
+        }else {
+            loginParams.value.isSendCode = false
+            loginParams.value.sendText = '重新获取短信验证码'
+            clearInterval(loginParams.value.sendTimer)
+        }
+        
+    }, 1000);
 }
 const login = async (type: string) => {
     const obj = loginParams.value
@@ -253,26 +277,10 @@ const toHome = () => {
         flex-direction: column;
         align-items: center;
 
-        .select-hospital {
+        .select-hospital-box {
             position: absolute;
             top: 50px;
             right: 50px;
-
-            :deep(.el-select) {
-                width: auto;
-
-                .el-input__wrapper {
-                    padding: 1px 12px;
-                    border-radius: 20px;
-
-                    .el-input__inner {
-                        color: $main-color;
-                        font-size: 14px;
-                        font-weight: 600;
-                    }
-                }
-            }
-
         }
 
         .logo {
@@ -290,7 +298,7 @@ const toHome = () => {
 
             .login-way {
                 font-size: 18px;
-                color: #606266;
+                color: #909399;
 
                 span {
                     cursor: pointer;
@@ -350,9 +358,9 @@ const toHome = () => {
                 margin-top: 40px;
                 font-size: 20px;
                 font-weight: 600;
-                padding: 20px 0 20px 0.5em;
+                padding: 25px 0 25px 0.3em;
                 border-radius: 10px;
-                letter-spacing: 0.5em;
+                letter-spacing: 0.3em;
             }
 
             .register-btn {
@@ -368,7 +376,7 @@ const toHome = () => {
             min-width: 500px;
             min-height: 300px;
             padding: 50px;
-            margin-top: 200px;
+            margin-top: 150px;
             background: white;
             .header-box {
                 display: flex;
@@ -379,11 +387,19 @@ const toHome = () => {
                     color: $main-color;
                     font-weight: 600;
                 }
+                .el-icon {
+                    cursor: pointer;
+                }
             }
             .footer-box {
+                padding-left: 100px;
                 display: flex;
-                justify-content: space-evenly;
+                justify-content: space-between;
                 align-items: center;
+                .el-button {
+                    font-size: 16px;
+                    padding: 5px 50px;
+                }
                 &>span {
                     cursor: pointer;
                     font-size: 18px;
diff --git a/src/views/logs-manage/logs-manage.vue b/src/views/logs-manage/logs-manage.vue
new file mode 100644
index 0000000..371f244
--- /dev/null
+++ b/src/views/logs-manage/logs-manage.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        日志
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>
diff --git a/src/views/patients-manage/patients-manage.vue b/src/views/patients-manage/patients-manage.vue
new file mode 100644
index 0000000..56851d9
--- /dev/null
+++ b/src/views/patients-manage/patients-manage.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        患者管理
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>
diff --git a/src/views/permissions-manage/permissions-manage.vue b/src/views/permissions-manage/permissions-manage.vue
new file mode 100644
index 0000000..3acd73a
--- /dev/null
+++ b/src/views/permissions-manage/permissions-manage.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        权限管理
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>
diff --git a/src/views/remote-manage/chart-ecg.vue b/src/views/remote-manage/chart-ecg.vue
index fb7efe2..8e223d1 100644
--- a/src/views/remote-manage/chart-ecg.vue
+++ b/src/views/remote-manage/chart-ecg.vue
@@ -7,7 +7,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import * as echarts from 'echarts';
-import { dateFormater } from './date-util';
+import { dateFormater } from '@/utils/date-util';
 
 const chartDom = ref();
 
diff --git a/src/views/remote-manage/chart-line.vue b/src/views/remote-manage/chart-line.vue
index bb5c2b0..5b829bf 100644
--- a/src/views/remote-manage/chart-line.vue
+++ b/src/views/remote-manage/chart-line.vue
@@ -7,7 +7,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import * as echarts from 'echarts';
-import { dateFormater } from './date-util';
+import { dateFormater } from '@/utils/date-util';
 
 const chartDom = ref();
 
diff --git a/src/views/remote-manage/date-util.ts b/src/views/remote-manage/date-util.ts
deleted file mode 100644
index e55f586..0000000
--- a/src/views/remote-manage/date-util.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export function dateFormater(formater: string, time?: any) {
-	let date = time ? new Date(time) : new Date(),
-		Y = date.getFullYear() + '',
-		M = date.getMonth() + 1,
-		D = date.getDate(),
-		H = date.getHours(),
-		m = date.getMinutes(),
-		s = date.getSeconds();
-	return formater
-		.replace(/YYYY|yyyy/g, Y)
-		.replace(/YY|yy/g, Y.substr(2, 2))
-		.replace(/MM/g, (M < 10 ? '0' : '') + M)
-		.replace(/DD|dd/g, (D < 10 ? '0' : '') + D)
-		.replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
-		.replace(/mm/g, (m < 10 ? '0' : '') + m)
-		.replace(/ss/g, (s < 10 ? '0' : '') + s);
-}
diff --git a/src/views/remote-manage/remote-manage.vue b/src/views/remote-manage/remote-manage.vue
index 5ca7d14..eab49dc 100644
--- a/src/views/remote-manage/remote-manage.vue
+++ b/src/views/remote-manage/remote-manage.vue
@@ -1,52 +1,5 @@
 <template>
 	<div class="remote-box" id="screenBox">
-		<div class="head-box">
-			<div class="logo-box">
-				<img src="@/assets/imgs/logo.png" />
-			</div>
-			<ul class="menu-box">
-				<li class="menu-item"><img src="@/assets/imgs/menu_1.png" /><span>首页</span></li>
-				<li class="menu-item"><img src="@/assets/imgs/menu_1.png" /><span>权限管理</span></li>
-				<li class="menu-item"><img src="@/assets/imgs/menu_1.png" /><span>患者管理</span></li>
-				<li class="menu-item active"><img src="@/assets/imgs/menu_1.png" /><span>远程管理</span></li>
-				<li class="menu-item"><img src="@/assets/imgs/menu_1.png" /><span>后台管理</span></li>
-				<li class="menu-item"><img src="@/assets/imgs/menu_1.png" /><span>系统管理</span></li>
-				<li class="area">北京第一医院</li>
-			</ul>
-			<div class="user-box">
-				<el-button text>
-					<el-icon>
-						<Search />
-					</el-icon>
-				</el-button>
-				<el-button text>
-					<el-badge is-dot :hidden="!messageSum">
-						<el-icon>
-							<Bell />
-						</el-icon>
-					</el-badge>
-				</el-button>
-				<el-button text @click="toggleFullscreen">
-					<el-icon>
-						<FullScreen />
-					</el-icon>
-				</el-button>
-				<el-dropdown trigger="click">
-					<span class="el-dropdown-link">
-						{{ userName }}
-						<el-icon class="el-icon--right">
-							<arrow-down />
-						</el-icon>
-					</span>
-					<template #dropdown>
-						<el-dropdown-menu>
-							<el-dropdown-item>设置</el-dropdown-item>
-							<el-dropdown-item>退出</el-dropdown-item>
-						</el-dropdown-menu>
-					</template>
-				</el-dropdown>
-			</div>
-		</div>
 		<div class="main-box">
 			<div class="left-box">
 				<h3>远程控制 1</h3>
@@ -179,7 +132,7 @@
 <script lang="ts" setup>
 import { onMounted, ref, reactive } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import { dateFormater } from './date-util';
+import { dateFormater } from '@/utils/date-util';
 import { post } from "@/axios/index";
 import chartLine from './chart-line.vue';
 import chartEcg from './chart-ecg.vue';
@@ -437,8 +390,8 @@ function getTableData(e: boolean) {
 }
 function keepFit(designWidth: number, designHeight: number, renderDomId: string) {
 	let width = designWidth || 1920,
-		height = designHeight || 1080;
-	let clientHeight = document.documentElement.clientHeight;
+		height = designHeight || 1030;
+	let clientHeight = document.documentElement.clientHeight - 50;
 	let clientWidth = document.documentElement.clientWidth;
 	let scale = 1;
 	scale = clientHeight / height;
@@ -451,7 +404,7 @@ function keepFit(designWidth: number, designHeight: number, renderDomId: string)
 }
 function initScale() {
 	let w = 1920,
-		h = 1080;
+		h = 1030;
 	keepFit(w, h, 'screenBox');
 	window.addEventListener('resize', () => {
 		keepFit(w, h, 'screenBox');
@@ -560,94 +513,16 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .remote-box {
-	$main-color: #006080;
 	width: 1920px;
-	height: 1080px;
+	height: 1020px;
 	background: #f1f3f5;
+	padding-top: 10px;
 	transform-origin: top left;
 	overflow-y: auto;
-
-	.head-box {
-		width: 100%;
-		height: 50px;
-		padding: 0 24px;
-		background: white;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-
-		.logo-box {
-			height: 100%;
-
-			img {
-				height: 100%;
-			}
-		}
-
-		.menu-box {
-			display: flex;
-			align-items: center;
-
-			.menu-item {
-				cursor: pointer;
-				display: flex;
-				align-items: center;
-				font-size: 18px;
-				font-weight: 600;
-				color: $main-color;
-				line-height: 50px;
-				padding: 0 20px;
-				margin: 0 10px;
-				transition: all .3s;
-				-webkit-transition: all .3s;
-
-				&:hover {
-					background: #F5F7FA;
-					transition: all .3s;
-					-webkit-transition: all .3s;
-				}
-
-				&.active {
-					background: rgba($main-color, .1);
-				}
-
-				img {
-					height: 20px;
-					margin-right: 10px;
-				}
-			}
-
-			.area {
-				cursor: pointer;
-				font-size: 14px;
-				color: $main-color;
-				line-height: 1.6;
-				padding: 0 20px;
-				border: 1px solid #8c9094;
-				border-radius: 7px;
-				margin-left: 20px;
-			}
-		}
-
-		.user-box {
-			display: flex;
-			align-items: center;
-
-			&>.el-button {
-				margin: 0;
-			}
-
-			&>.el-dropdown {
-				margin-left: 10px;
-			}
-		}
-	}
-
 	.main-box {
 		width: 100%;
-		height: calc(100% - 60px);
+		height: 100%;
 		// min-height: 1080px;
-		margin-top: 10px;
 		background: white;
 		padding: 20px;
 		box-sizing: border-box;
diff --git a/src/views/system-manage/system-manage.vue b/src/views/system-manage/system-manage.vue
new file mode 100644
index 0000000..c258b64
--- /dev/null
+++ b/src/views/system-manage/system-manage.vue
@@ -0,0 +1,14 @@
+<template>
+    <div>
+        后台管理
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>