From 03b6025d07e4df99474f80d3fa57e8b5238ba40c Mon Sep 17 00:00:00 2001
From: nebv <vbenadmin@163.com>
Date: 星期日, 11 十月 2020 00:05:29 +0800
Subject: [PATCH] refactor(style): remove tailwind css

---
 src/router/routes/modules/demo/permission.ts                |    2 
 src/design/index.less                                       |    1 
 src/layouts/default/setting/index.vue                       |   20 +
 src/components/Loading/BasicLoading.vue                     |   10 
 src/components/Container/src/collapse/CollapseContainer.vue |    3 
 src/design/helper/loop.less                                 |   67 ++++
 src/views/demo/comp/verify/Rotate.vue                       |    5 
 src/design/mixins.less                                      |   58 +++
 src/layouts/default/index.less                              |   10 
 src/views/demo/comp/verify/index.vue                        |    5 
 src/views/demo/permission/front/AuthPageB.vue               |   16 
 src/views/demo/permission/front/Btn.vue                     |    7 
 README.md                                                   |    2 
 src/components/Loading/FullLoading.vue                      |   15 
 tsconfig.json                                               |    3 
 yarn.lock                                                   |  214 +-------------
 src/views/demo/permission/front/AuthPageA.vue               |   16 
 src/layouts/default/LayoutBreadcrumb.tsx                    |    2 
 postcss.config.js                                           |    2 
 src/views/sys/login/Login.vue                               |   80 ++++
 src/views/sys/exception/Exception.tsx                       |    3 
 src/views/demo/comp/scroll/index.vue                        |   11 
 src/views/sys/exception/exception.less                      |    5 
 src/components/Basic/src/BasicArrow.vue                     |    9 
 src/views/demo/tree/ActionTree.vue                          |    2 
 src/views/demo/comp/strength-meter/index.vue                |    9 
 src/components/Icon/index.tsx                               |    1 
 src/views/demo/feat/tabs/index.vue                          |    7 
 src/views/demo/comp/click-out-side/index.vue                |   21 +
 src/views/demo/comp/scroll/Action.vue                       |   11 
 src/router/menus/modules/demo/comp.ts                       |    2 
 src/views/demo/permission/back/Btn.vue                      |    7 
 src/views/demo/permission/back/index.vue                    |    7 
 src/design/global.less                                      |   50 +++
 src/views/demo/tree/EditTree.vue                            |    4 
 src/views/demo/tree/index.vue                               |    6 
 .env                                                        |    2 
 src/components/ContextMenu/src/index.tsx                    |    4 
 src/main.ts                                                 |    1 
 src/views/demo/comp/scroll/VirtualScroll.vue                |    4 
 /dev/null                                                   |   74 ----
 src/design/helper/distance.less                             |   38 ++
 src/layouts/iframe/useFrameKeepAlive.ts                     |    7 
 src/router/routes/modules/demo/comp.ts                      |    2 
 src/layouts/Logo.vue                                        |   25 +
 src/layouts/default/LayoutHeader.tsx                        |   12 
 package.json                                                |    1 
 src/views/demo/permission/front/index.vue                   |    7 
 src/views/dashboard/welcome/index.vue                       |   11 
 49 files changed, 513 insertions(+), 368 deletions(-)

diff --git a/.env b/.env
index f5fa246..51d5db5 100644
--- a/.env
+++ b/.env
@@ -2,7 +2,7 @@
 VITE_PORT = 3100
 
 # spa-title
-VITE_GLOB_APP_TITLE = vben admin 2.0
+VITE_GLOB_APP_TITLE = Vben Admin 2.0
 
 # spa shortname
 VITE_GLOB_APP_SHORT_NAME = vue_vben_admin_2x
diff --git a/README.md b/README.md
index 8c133fd..93a3588 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,8 @@
 
 [2.0 鍦ㄧ嚎棰勮](https://vvbin.cn/next/)
 
+娴嬭瘯璐﹀彿: vben/123456
+
 <p align="center">
     <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview1.png">
     <img alt="VbenAdmin Logo" width="100%" src="./.github/res/imgs/preview2.png">
diff --git a/package.json b/package.json
index 44b56a8..43e7bcc 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,6 @@
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",
-    "tailwindcss": "^1.8.13",
     "tasksfile": "^5.1.1",
     "ts-node": "^9.0.0",
     "typescript": "^4.0.3",
diff --git a/postcss.config.js b/postcss.config.js
index c0544b4..501d049 100755
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,4 +1,4 @@
 const path = require('path');
 module.exports = {
-  plugins: [require('tailwindcss'), require('autoprefixer'), require('postcss-import')],
+  plugins: [require('autoprefixer'), require('postcss-import')],
 };
diff --git a/src/components/Basic/src/BasicArrow.vue b/src/components/Basic/src/BasicArrow.vue
index eb816d5..00f5ad2 100644
--- a/src/components/Basic/src/BasicArrow.vue
+++ b/src/components/Basic/src/BasicArrow.vue
@@ -37,7 +37,7 @@
 </script>
 <style lang="less" scoped>
   .base-arrow {
-    transform: rotate(-90deg) !important;
+    transform: rotate(-90deg);
     transition: all 0.3s ease 0.1s;
     transform-origin: center center;
 
@@ -50,9 +50,10 @@
     }
 
     &__active {
-      > span {
-        transform: rotate(90deg) !important;
-      }
+      transform: rotate(90deg);
+      // > span {
+      //   transform: rotate(90deg);
+      // }
     }
   }
 </style>
diff --git a/src/components/Container/src/collapse/CollapseContainer.vue b/src/components/Container/src/collapse/CollapseContainer.vue
index a3eb13b..dfb5a27 100644
--- a/src/components/Container/src/collapse/CollapseContainer.vue
+++ b/src/components/Container/src/collapse/CollapseContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="collapse-container p-2 bg:white rounded-sm">
+  <div class="collapse-container p-2">
     <CollapseHeader v-bind="$props" :show="show" @expand="handleExpand" />
     <CollapseTransition :enable="canExpan">
       <Skeleton v-if="loading" />
@@ -92,7 +92,6 @@
 </script>
 <style lang="less">
   .collapse-container {
-    padding: 10px;
     background: #fff;
     border-radius: 8px;
     transition: all 0.3s ease-in-out;
diff --git a/src/components/ContextMenu/src/index.tsx b/src/components/ContextMenu/src/index.tsx
index f008d86..ba9f8df 100644
--- a/src/components/ContextMenu/src/index.tsx
+++ b/src/components/ContextMenu/src/index.tsx
@@ -73,7 +73,9 @@
 
         return (
           <li class={`${prefixCls}__item ${disabled ? 'disabled' : ''}`} key={label}>
-            <a onClick={handleAction.bind(null, item)}>{renderContent(item)}</a>
+            <a onClick={handleAction.bind(null, item)} style="color:#333;">
+              {renderContent(item)}
+            </a>
           </li>
         );
       });
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
index ce64299..0a9a98d 100644
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -64,6 +64,7 @@
       return {
         fontSize: `${fs}px`,
         color,
+        display: 'inline-flex',
       };
     });
 
diff --git a/src/components/Loading/BasicLoading.vue b/src/components/Loading/BasicLoading.vue
index 8736aac..1015257 100644
--- a/src/components/Loading/BasicLoading.vue
+++ b/src/components/Loading/BasicLoading.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="flex justify-center items-center flex-col">
+  <section class="basic-loading">
     <img
       src="/@/assets/images/loading.svg"
       alt=""
@@ -47,3 +47,11 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .basic-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+</style>
diff --git a/src/components/Loading/FullLoading.vue b/src/components/Loading/FullLoading.vue
index e06a648..ba82bc1 100644
--- a/src/components/Loading/FullLoading.vue
+++ b/src/components/Loading/FullLoading.vue
@@ -1,8 +1,5 @@
 <template>
-  <section
-    class="full-loading flex justify-center bg-mask-light items-center h-full w-full"
-    :style="getStyle"
-  >
+  <section class="full-loading" :style="getStyle">
     <BasicLoading :tip="tip" :size="SizeEnum.DEFAULT" />
   </section>
 </template>
@@ -39,3 +36,13 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .full-loading {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.3);
+    justify-content: center;
+    align-items: center;
+  }
+</style>
diff --git a/src/design/global.less b/src/design/global.less
new file mode 100644
index 0000000..e8f1d09
--- /dev/null
+++ b/src/design/global.less
@@ -0,0 +1,50 @@
+@import './helper/distance.less';
+// 鐢熸垚鏍峰紡
+.distance();
+
+.hidden {
+  display: none !important;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-start {
+  justify-content: start;
+}
+
+.justify-end {
+  justify-content: end;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: normal;
+  white-space: nowrap;
+}
diff --git a/src/design/helper/distance.less b/src/design/helper/distance.less
new file mode 100644
index 0000000..de9e8b9
--- /dev/null
+++ b/src/design/helper/distance.less
@@ -0,0 +1,38 @@
+@import 'loop.less';
+// margin 姝ラ暱
+@margin-size-base: 4;
+
+// 鏈�澶х敓鎴�
+@margin-size-max: 10;
+
+// padding姝ラ暱
+@padding-size-base: 4;
+
+// 鏈�澶х敓鎴�
+@padding-size-max: 10;
+
+.distance() {
+  // 鐢熸垚margin
+  .loop (m, margin, 1, @margin-size-base, @margin-size-max);
+  .loop (mt, margin-top, 1, @margin-size-base, @margin-size-max);
+  .loop (mr, margin-right, 1, @margin-size-base, @margin-size-max);
+  .loop (mb, margin-bottom, 1, @margin-size-base, @margin-size-max);
+  .loop (ml, margin-left, 1, @margin-size-base, @margin-size-max);
+  .loop (my, margin, 1, @margin-size-base, @margin-size-max, y);
+  .loop (mx, margin, 1, @margin-size-base, @margin-size-max, x);
+  .loop (mx-auto, margin, 1, @padding-size-base, @padding-size-max, autoX);
+  .loop (my-auto, margin, 1, @padding-size-base, @padding-size-max, autoY);
+  .loop (m-auto, margin, 1, @padding-size-base, @padding-size-max, auto);
+
+  // 鐢熸垚padding
+  .loop (p, padding, 1, @padding-size-base, @padding-size-max);
+  .loop (pt, padding-top, 1, @padding-size-base, @padding-size-max);
+  .loop (pr, padding-right, 1, @padding-size-base, @padding-size-max);
+  .loop (pb, padding-bottom, 1, @padding-size-base, @padding-size-max);
+  .loop (pl, padding-left, 1, @padding-size-base, @padding-size-max);
+  .loop (py, padding, 1, @padding-size-base, @padding-size-max, y);
+  .loop (px, padding, 1, @padding-size-base, @padding-size-max, x);
+  .loop (px-auto, padding, 1, @padding-size-base, @padding-size-max, autoX);
+  .loop (py-auto, padding, 1, @padding-size-base, @padding-size-max, autoY);
+  .loop (p-auto, padding, 1, @padding-size-base, @padding-size-max, auto);
+}
diff --git a/src/design/helper/loop.less b/src/design/helper/loop.less
new file mode 100644
index 0000000..62d0272
--- /dev/null
+++ b/src/design/helper/loop.less
@@ -0,0 +1,67 @@
+.loop (@style-name, @tag-name, @i,@base-size, @max:10,@xy:none) when (@i <= @max) {
+  @next: @i+1;
+  .fn() when (@xy =none) {
+    @size: @base-size * @i;
+
+    .@{style-name}-@{i} {
+      @{tag-name}: ~'@{size}px ';
+    }
+    .loop(@style-name, @tag-name, @next, @base-size, @max, @xy);
+  }
+
+  .fn() when (@xy =x) {
+    @size: @base-size * @i;
+
+    @tnl: ~'@{tag-name}-left';
+    @tnr: ~'@{tag-name}-right';
+
+    .@{style-name}-@{i} {
+      @{tnl}: ~'@{size}px';
+      @{tnr}: ~'@{size}px';
+    }
+    .loop(@style-name, @tag-name, @next, @base-size, @max, @xy);
+  }
+  .fn() when (@xy =y) {
+    @size: @base-size * @i;
+
+    @tnt: ~'@{tag-name}-top';
+    @tnb: ~'@{tag-name}-bottom';
+
+    .@{style-name}-@{i} {
+      @{tnt}: ~'@{size}px';
+      @{tnb}: ~'@{size}px';
+    }
+    .loop(@style-name, @tag-name, @next, @base-size, @max, @xy);
+  }
+  .fn() when (@xy =auto) {
+    @tnt: ~'@{tag-name}-top';
+    @tnb: ~'@{tag-name}-bottom';
+    @tnl: ~'@{tag-name}-left';
+    @tnr: ~'@{tag-name}-right';
+    .@{style-name} {
+      @{tnl}: ~'auto';
+      @{tnr}: ~'auto';
+      @{tnt}: ~'auto';
+      @{tnb}: ~'auto';
+    }
+  }
+
+  .fn() when (@xy =autoX) {
+    @tnl: ~'@{tag-name}-left';
+    @tnr: ~'@{tag-name}-right';
+    .@{style-name} {
+      @{tnl}: ~'auto';
+      @{tnr}: ~'auto';
+    }
+  }
+
+  .fn() when (@xy =autoY) {
+    @tnt: ~'@{tag-name}-top';
+    @tnb: ~'@{tag-name}-bottom';
+    .@{style-name} {
+      @{tnt}: ~'auto';
+      @{tnb}: ~'auto';
+    }
+  }
+  .fn();
+}
diff --git a/src/design/index.less b/src/design/index.less
index 1bf272e..542632b 100644
--- a/src/design/index.less
+++ b/src/design/index.less
@@ -3,6 +3,7 @@
 @import 'public.less';
 @import 'mixins.less';
 @import 'ant/index.less';
+@import './global.less';
 
 *,
 *::before,
diff --git a/src/design/main.postcss b/src/design/main.postcss
deleted file mode 100644
index a31e444..0000000
--- a/src/design/main.postcss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
diff --git a/src/design/mixins.less b/src/design/mixins.less
index 2346a04..e028e5b 100644
--- a/src/design/mixins.less
+++ b/src/design/mixins.less
@@ -42,13 +42,6 @@
   user-select: none;
 }
 
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-wrap: normal;
-  white-space: nowrap;
-}
-
 /* 閫傜敤浜巜ebkit鍐呮牳鍜岀Щ鍔ㄧ */
 .ellipsis-multiple(@num: 1) {
   display: -webkit-box;
@@ -56,3 +49,54 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: @num;
 }
+
+.respond-to (small, @content) {
+  @media only screen and (min-width: @screen-sm-min) {
+    @content();
+  }
+}
+.respond-to (medium, @content) {
+  @media only screen and (min-width: @screen-md-min) {
+    @content();
+  }
+}
+.respond-to (large, @content) {
+  @media only screen and (min-width: @screen-lg-min) {
+    @content();
+  }
+}
+.respond-to (xlarge, @content) {
+  @media only screen and (min-width: @screen-xl-min) {
+    @content();
+  }
+}
+.respond-to (xsmall-only, @content) {
+  @media only screen and (max-width: @screen-xs-max) {
+    @content();
+  }
+}
+.respond-to (small-only, @content) {
+  @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    @content();
+  }
+}
+.respond-to (medium-only, @content) {
+  @media only screen and (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    @content();
+  }
+}
+.respond-to (large-only, @content) {
+  @media only screen and (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
+    @content();
+  }
+}
+.respond-to (xsmall-and-small, @content) {
+  @media only screen and (max-width: @screen-sm-max) {
+    @content();
+  }
+}
+.respond-to (small-and-medium, @content) {
+  @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
+    @content();
+  }
+}
diff --git a/src/layouts/Logo.vue b/src/layouts/Logo.vue
index 545e7fc..3823568 100644
--- a/src/layouts/Logo.vue
+++ b/src/layouts/Logo.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="flex justify-items-center items-center cursor-pointer" @click="handleGoHome">
+  <div class="app-logo" @click="handleGoHome">
     <img :src="logo" />
-    <div v-if="show" class="logo-title ml-2 text-xl hidden md:block font-logo ellipsis">{{
-      globSetting.title
-    }}</div>
+    <div v-if="show" class="logo-title ml-2 ellipsis">{{ globSetting.title }}</div>
   </div>
 </template>
 <script lang="ts">
@@ -52,3 +50,22 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  @import (reference) '../design/index.less';
+
+  .app-logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    .logo-title {
+      display: none;
+      font-family: Georgia, serif;
+      font-size: 18px;
+      .respond-to(medium,{
+       display: block;
+     });
+    }
+  }
+</style>
diff --git a/src/layouts/default/LayoutBreadcrumb.tsx b/src/layouts/default/LayoutBreadcrumb.tsx
index 0a07cf2..ec4554f 100644
--- a/src/layouts/default/LayoutBreadcrumb.tsx
+++ b/src/layouts/default/LayoutBreadcrumb.tsx
@@ -65,7 +65,7 @@
 
     return () => (
       <>
-        <Breadcrumb class="layout-breadcrumb flex-grow">
+        <Breadcrumb class="layout-breadcrumb ">
           {() => (
             <>
               <TransitionGroup name="breadcrumb">
diff --git a/src/layouts/default/LayoutHeader.tsx b/src/layouts/default/LayoutHeader.tsx
index 9356871..9ef2c8b 100644
--- a/src/layouts/default/LayoutHeader.tsx
+++ b/src/layouts/default/LayoutHeader.tsx
@@ -55,23 +55,17 @@
 
       const isSidebarType = menuType === MenuTypeEnum.SIDEBAR;
       return (
-        <Layout.Header
-          class={[
-            'layout-header',
-            'bg-white flex p-0 px-4 justify-items-center',
-            unref(headerClass),
-          ]}
-        >
+        <Layout.Header class={['layout-header', 'flex p-0 px-4 ', unref(headerClass)]}>
           {() => (
             <>
-              <div class="flex-grow flex justify-center items-center">
+              <div class="layout-header__content ">
                 {showLogo && !isSidebarType && <Logo class={`layout-header__logo`} />}
 
                 {mode !== MenuModeEnum.HORIZONTAL && showBreadCrumb && !splitMenu && (
                   <LayoutBreadcrumb />
                 )}
                 {(mode === MenuModeEnum.HORIZONTAL || splitMenu) && (
-                  <div class={[`layout-header__menu flex-grow `, `justify-${topMenuAlign}`]}>
+                  <div class={[`layout-header__menu `, `justify-${topMenuAlign}`]}>
                     <LayoutMenu
                       theme={headerTheme}
                       splitType={splitMenu ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE}
diff --git a/src/layouts/default/index.less b/src/layouts/default/index.less
index b6f1942..9b26e43 100644
--- a/src/layouts/default/index.less
+++ b/src/layouts/default/index.less
@@ -191,8 +191,16 @@
   height: @header-height;
   padding: 0 20px 0 0;
   color: @white;
+  background: @white;
   align-items: center;
   justify-content: space-between;
+
+  &__content {
+    flex-grow: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
   &__header--light {
     background: @white;
@@ -334,6 +342,7 @@
     margin-left: 20px;
     overflow: hidden;
     align-items: center;
+    flex-grow: 1;
   }
 
   &__user-dropdown {
@@ -398,4 +407,5 @@
 
 .layout-breadcrumb {
   padding: 0 16px;
+  flex-grow: 1;
 }
diff --git a/src/layouts/default/setting/index.vue b/src/layouts/default/setting/index.vue
index 01c3c68..dedd5f3 100644
--- a/src/layouts/default/setting/index.vue
+++ b/src/layouts/default/setting/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    @click="openDrawer"
-    class="setting-button bg-primary flex justify-center items-center text-white p-4 absolute z-10 cursor-pointer"
-  >
+  <div @click="openDrawer" class="setting-button">
     <SettingOutlined :spin="true" />
     <SettingDrawer @register="register" />
   </div>
@@ -26,3 +23,18 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  @import (reference) '../../../design/index.less';
+
+  .setting-button {
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    padding: 10px;
+    color: @white;
+    cursor: pointer;
+    background: @primary-color;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
diff --git a/src/layouts/iframe/useFrameKeepAlive.ts b/src/layouts/iframe/useFrameKeepAlive.ts
index 3f5bab9..9be03f5 100644
--- a/src/layouts/iframe/useFrameKeepAlive.ts
+++ b/src/layouts/iframe/useFrameKeepAlive.ts
@@ -6,12 +6,13 @@
 import { AppRouteRecordRaw } from '/@/router/types';
 import { useRouter } from 'vue-router';
 import router from '/@/router';
+import { unique } from '/@/utils';
 
 export function useFrameKeepAlive() {
   const { currentRoute } = useRouter();
 
   function getAllFramePages(routes: AppRouteRecordRaw[]): AppRouteRecordRaw[] {
-    const res: AppRouteRecordRaw[] = [];
+    let res: AppRouteRecordRaw[] = [];
     for (const route of routes) {
       const { meta: { frameSrc } = {}, children } = route;
       if (frameSrc) {
@@ -21,6 +22,7 @@
         res.push(...getAllFramePages(children));
       }
     }
+    res = unique(res, 'name');
     return res;
   }
 
@@ -30,6 +32,9 @@
   const getFramePages = computed(() => {
     const ret =
       getAllFramePages((toRaw(router.getRoutes()) as unknown) as AppRouteRecordRaw[]) || [];
+    console.log('======================');
+    console.log(ret);
+    console.log('======================');
     return ret;
   });
 
diff --git a/src/main.ts b/src/main.ts
index acbc467..bfee405 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,7 +10,6 @@
 
 import { setupProdMockServer } from '../mock/_createProductionServer';
 import '/@/design/index.less';
-import '/@/design/main.postcss';
 
 const app = createApp(App);
 
diff --git a/src/router/menus/modules/demo/comp.ts b/src/router/menus/modules/demo/comp.ts
index fd604d8..2cc0a08 100644
--- a/src/router/menus/modules/demo/comp.ts
+++ b/src/router/menus/modules/demo/comp.ts
@@ -59,7 +59,7 @@
           },
           {
             path: '/mergeHeader',
-            name: '鍚堝苟琛ㄥご',
+            name: '鍚堝苟鍗曞厓鏍�',
           },
           {
             path: '/expandTable',
diff --git a/src/router/routes/modules/demo/comp.ts b/src/router/routes/modules/demo/comp.ts
index adba5c3..46181ee 100644
--- a/src/router/routes/modules/demo/comp.ts
+++ b/src/router/routes/modules/demo/comp.ts
@@ -183,7 +183,7 @@
           name: 'MergeHeaderDemo',
           component: () => import('/@/views/demo/table/MergeHeader.vue'),
           meta: {
-            title: '鍚堝苟琛ㄥご',
+            title: '鍚堝苟鍗曞厓鏍�',
           },
         },
         {
diff --git a/src/router/routes/modules/demo/permission.ts b/src/router/routes/modules/demo/permission.ts
index 58ae1a6..a4ecc70 100644
--- a/src/router/routes/modules/demo/permission.ts
+++ b/src/router/routes/modules/demo/permission.ts
@@ -8,7 +8,7 @@
     path: '/permission',
     name: 'Permission',
     component: PAGE_LAYOUT_COMPONENT,
-    redirect: '/permission/front',
+    redirect: '/permission/front/page',
     meta: {
       icon: 'carbon:user-role',
       title: '鏉冮檺绠$悊',
diff --git a/src/settings/asyncComponentSetting.ts b/src/settings/asyncComponentSetting.ts
deleted file mode 100644
index 5e824b9..0000000
--- a/src/settings/asyncComponentSetting.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// import { FullLoading } from '/@/components/Loading/index';
-// import { LoadTimeOut } from '/@/views/sys/exception/';
-
-// /**
-//  * @description:  Load page displayed by page switching
-//  */
-// export const LOADING_PAGE = FullLoading;
-
-// /**
-//  * @description:  Switch to switch timeout page
-//  */
-// export const TIMEOUT_PAGE = LoadTimeOut;
-
-// /**
-//  * @description: If there is no response for the specified time, the loading page will be displayed
-//  * 400 m
-//  */
-// export const DELAY = 400;
-
-// /**
-//  * @description: Switch page if there is no response for more than the specified time, the timeout page will be displayed
-//  * 10绉�
-//  */
-// export const TIMEOUT = 60 * 1000;
diff --git a/src/views/dashboard/welcome/index.vue b/src/views/dashboard/welcome/index.vue
index 8229486..ddb69fd 100644
--- a/src/views/dashboard/welcome/index.vue
+++ b/src/views/dashboard/welcome/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full flex justify-center items-center">
+  <div class="welcome">
     <House />
   </div>
 </template>
@@ -14,3 +14,12 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .welcome {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
diff --git a/src/views/demo/comp/click-out-side/index.vue b/src/views/demo/comp/click-out-side/index.vue
index d6f6752..b4cdba0 100644
--- a/src/views/demo/comp/click-out-side/index.vue
+++ b/src/views/demo/comp/click-out-side/index.vue
@@ -1,11 +1,8 @@
 <template>
-  <div class="px-64">
+  <div class="px-10">
     <Alert message="鐐瑰唴澶栭儴瑙﹀彂浜嬩欢" show-icon class="mt-4"></Alert>
     <ClickOutSide @clickOutside="handleClickOutside" class="flex justify-center mt-10">
-      <div
-        @click="innerClick"
-        class="bg-primary w-full h-64 flex justify-center items-center text-2xl text-white rounded-lg shadow-lg"
-      >
+      <div @click="innerClick" class="demo-box">
         {{ text }}
       </div>
     </ClickOutSide>
@@ -30,3 +27,17 @@
     },
   });
 </script>
+
+<style lang="less" scoped>
+  .demo-box {
+    display: flex;
+    width: 100%;
+    height: 300px;
+    font-size: 24px;
+    color: #fff;
+    background: #408ede;
+    border-radius: 10px;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
diff --git a/src/views/demo/comp/scroll/Action.vue b/src/views/demo/comp/scroll/Action.vue
index a9d801f..65b893e 100644
--- a/src/views/demo/comp/scroll/Action.vue
+++ b/src/views/demo/comp/scroll/Action.vue
@@ -8,11 +8,11 @@
       <a-button @click="scrollTo(0)" class="mr-2">婊氬姩鍒伴《閮�</a-button>
       <a-button @click="scrollBottom()" class="mr-2">婊氬姩鍒板簳閮�</a-button>
     </div>
-    <div class="w-1/2 h-64 bg-white">
+    <div class="scroll-wrap">
       <ScrollContainer class="mt-4" ref="scrollRef">
         <ul class="p-3">
           <template v-for="index in 100" :key="index">
-            <li class="leading-8 px-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
+            <li class="p-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
           </template>
         </ul>
       </ScrollContainer>
@@ -50,3 +50,10 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .scroll-wrap {
+    width: 50%;
+    height: 300px;
+    background: #fff;
+  }
+</style>
diff --git a/src/views/demo/comp/scroll/VirtualScroll.vue b/src/views/demo/comp/scroll/VirtualScroll.vue
index c781a61..9d13b76 100644
--- a/src/views/demo/comp/scroll/VirtualScroll.vue
+++ b/src/views/demo/comp/scroll/VirtualScroll.vue
@@ -9,9 +9,9 @@
       </VirtualScroll>
     </div>
 
-    <Divider>鍗充娇涓嶅彲瑙侊紝涔熼鍏堝姞杞�30鏉℃暟鎹紝闃叉绌虹櫧</Divider>
+    <Divider>鍗充娇涓嶅彲瑙侊紝涔熼鍏堝姞杞�50鏉℃暟鎹紝闃叉绌虹櫧</Divider>
     <div class="virtual-scroll-demo-wrap">
-      <VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="30">
+      <VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50">
         <template v-slot="{ item }">
           <div class="virtual-scroll-demo__item">{{ item.title }}</div>
         </template>
diff --git a/src/views/demo/comp/scroll/index.vue b/src/views/demo/comp/scroll/index.vue
index 145ce2b..ac0440e 100644
--- a/src/views/demo/comp/scroll/index.vue
+++ b/src/views/demo/comp/scroll/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="p-4">
     <Alert message="鎶藉彇el-scrollbar锛屽苟瀵瑰叾杩涜鎵╁睍,婊氬姩鏉$編鍖�,閫傜敤浜庡悇涓祻瑙堝櫒" type="info" />
-    <div class="w-1/2 h-64 bg-white">
+    <div class="scroll-wrap">
       <ScrollContainer class="mt-4">
         <ul class="p-3">
           <template v-for="index in 100" :key="index">
-            <li class="leading-8 px-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
+            <li class="p-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
           </template>
         </ul>
       </ScrollContainer>
@@ -24,3 +24,10 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .scroll-wrap {
+    width: 50%;
+    height: 300px;
+    background: #fff;
+  }
+</style>
diff --git a/src/views/demo/comp/strength-meter/index.vue b/src/views/demo/comp/strength-meter/index.vue
index 770a50b..87978b7 100644
--- a/src/views/demo/comp/strength-meter/index.vue
+++ b/src/views/demo/comp/strength-meter/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="p-4 flex justify-center">
-    <div class="w-1/2 bg-white p-10 rounded-md">
+    <div class="demo-wrap p-10">
       <StrengthMeter placeholder="榛樿" />
       <StrengthMeter placeholder="绂佺敤" disabled />
       <br />
@@ -21,3 +21,10 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo-wrap {
+    width: 50%;
+    background: #fff;
+    border-radius: 10px;
+  }
+</style>
diff --git a/src/views/demo/comp/verify/Rotate.vue b/src/views/demo/comp/verify/Rotate.vue
index f668dec..c7b7225 100644
--- a/src/views/demo/comp/verify/Rotate.vue
+++ b/src/views/demo/comp/verify/Rotate.vue
@@ -21,3 +21,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .bg-gray-700 {
+    background: #4a5568;
+  }
+</style>
diff --git a/src/views/demo/comp/verify/index.vue b/src/views/demo/comp/verify/index.vue
index c7f9c02..ad7c484 100644
--- a/src/views/demo/comp/verify/index.vue
+++ b/src/views/demo/comp/verify/index.vue
@@ -88,3 +88,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .bg-gray-700 {
+    background: #4a5568;
+  }
+</style>
diff --git a/src/views/demo/feat/tabs/index.vue b/src/views/demo/feat/tabs/index.vue
index 5fbb6ea..edb3ece 100644
--- a/src/views/demo/feat/tabs/index.vue
+++ b/src/views/demo/feat/tabs/index.vue
@@ -1,13 +1,10 @@
 <template>
   <div class="p-4">
-    <CollapseContainer
-      class="px-20 bg-white w-full h-32 rounded-md"
-      title="鍦ㄤ笅闈㈣緭鍏ユ杈撳叆鏂囨湰,鍒囨崲鍚庡洖鏉ュ唴瀹逛細淇濆瓨"
-    >
+    <CollapseContainer title="鍦ㄤ笅闈㈣緭鍏ユ杈撳叆鏂囨湰,鍒囨崲鍚庡洖鏉ュ唴瀹逛細淇濆瓨">
       <a-input placeholder="璇疯緭鍏�" />
     </CollapseContainer>
 
-    <CollapseContainer class="px-20 mt-10 bg-white w-full h-32 rounded-md" title="鏍囩椤垫搷浣�">
+    <CollapseContainer class="mt-4 px-4" title="鏍囩椤垫搷浣�">
       <a-button class="mr-2" @click="closeAll">鍏抽棴鎵�鏈�</a-button>
       <a-button class="mr-2" @click="closeLeft">鍏抽棴宸︿晶</a-button>
       <a-button class="mr-2" @click="closeRight">鍏抽棴鍙充晶</a-button>
diff --git a/src/views/demo/permission/back/Btn.vue b/src/views/demo/permission/back/Btn.vue
index 8a128f3..218681d 100644
--- a/src/views/demo/permission/back/Btn.vue
+++ b/src/views/demo/permission/back/Btn.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-10 m-4 rounded-md bg-white">
+  <div class="p-4 m-4 demo">
     <Alert message="鍒锋柊鍚庝細杩樺師" show-icon />
 
     <CurrentPermissionMode />
@@ -83,3 +83,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo {
+    background: #fff;
+  }
+</style>
diff --git a/src/views/demo/permission/back/index.vue b/src/views/demo/permission/back/index.vue
index 9480ee5..52d2c48 100644
--- a/src/views/demo/permission/back/index.vue
+++ b/src/views/demo/permission/back/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-10 m-4 rounded-md bg-white">
+  <div class="p-4 m-4 demo">
     <Alert
       message="鐩墠mock浜嗕袱缁勬暟鎹紝 id涓�1 鍜� 2 鍏蜂綋杩斿洖鐨勮彍鍗曞彲浠ュ湪mock/sys/menu.ts鍐呮煡鐪�"
       show-icon
@@ -35,3 +35,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo {
+    background: #fff;
+  }
+</style>
diff --git a/src/views/demo/permission/front/AuthPageA.vue b/src/views/demo/permission/front/AuthPageA.vue
index 3c2ac4c..0fcca04 100644
--- a/src/views/demo/permission/front/AuthPageA.vue
+++ b/src/views/demo/permission/front/AuthPageA.vue
@@ -1,9 +1,19 @@
 <template>
-  <div class="m-10 bg-primary text-2xl h-64 rounded-lg flex justify-center items-center text-white">
-    Super 瑙掕壊鍙
-  </div>
+  <div class="m-10 auth-page"> Super 瑙掕壊鍙 </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   export default defineComponent({});
 </script>
+<style lang="less" scoped>
+  .auth-page {
+    display: flex;
+    height: 300px;
+    font-size: 24px;
+    color: #fff;
+    background: #409efe;
+    border-radius: 12px;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
diff --git a/src/views/demo/permission/front/AuthPageB.vue b/src/views/demo/permission/front/AuthPageB.vue
index b9aed00..00bf9a4 100644
--- a/src/views/demo/permission/front/AuthPageB.vue
+++ b/src/views/demo/permission/front/AuthPageB.vue
@@ -1,9 +1,19 @@
 <template>
-  <div class="m-10 bg-primary text-2xl h-64 rounded-lg flex justify-center items-center text-white">
-    Test 瑙掕壊鍙
-  </div>
+  <div class="m-10 auth-page"> Test 瑙掕壊鍙 </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   export default defineComponent({});
 </script>
+<style lang="less" scoped>
+  .auth-page {
+    display: flex;
+    height: 300px;
+    font-size: 24px;
+    color: #fff;
+    background: #409efe;
+    border-radius: 12px;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
diff --git a/src/views/demo/permission/front/Btn.vue b/src/views/demo/permission/front/Btn.vue
index 4befaf6..e8d293d 100644
--- a/src/views/demo/permission/front/Btn.vue
+++ b/src/views/demo/permission/front/Btn.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-10 m-4 rounded-md bg-white">
+  <div class="demo p-4 m-4">
     <Alert
       message="鐢变簬鍒锋柊鐨勬椂鍊欎細璇锋眰鐢ㄦ埛淇℃伅鎺ュ彛锛屼細鏍规嵁鎺ュ彛閲嶇疆瑙掕壊淇℃伅锛屾墍浠ュ埛鏂板悗鐣岄潰浼氭仮澶嶅師鏍凤紝濡傛灉涓嶉渶瑕侊紝鍙互娉ㄩ噴 src/layout/default/index鍐呯殑鑾峰彇鐢ㄦ埛淇℃伅鎺ュ彛"
       show-icon
@@ -82,3 +82,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo {
+    background: #fff;
+  }
+</style>
diff --git a/src/views/demo/permission/front/index.vue b/src/views/demo/permission/front/index.vue
index e766cb9..760707d 100644
--- a/src/views/demo/permission/front/index.vue
+++ b/src/views/demo/permission/front/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-10 m-4 rounded-md bg-white">
+  <div class="p-4 m-4 demo">
     <Alert
       message="鐢变簬鍒锋柊鐨勬椂鍊欎細璇锋眰鐢ㄦ埛淇℃伅鎺ュ彛锛屼細鏍规嵁鎺ュ彛閲嶇疆瑙掕壊淇℃伅锛屾墍浠ュ埛鏂板悗鐣岄潰浼氭仮澶嶅師鏍凤紝濡傛灉涓嶉渶瑕侊紝鍙互娉ㄩ噴 src/layout/default/index鍐呯殑鑾峰彇鐢ㄦ埛淇℃伅鎺ュ彛"
       show-icon
@@ -46,3 +46,8 @@
     },
   });
 </script>
+<style lang="less" scoped>
+  .demo {
+    background: #fff;
+  }
+</style>
diff --git a/src/views/demo/tree/ActionTree.vue b/src/views/demo/tree/ActionTree.vue
index 3b804e2..1a402ee 100644
--- a/src/views/demo/tree/ActionTree.vue
+++ b/src/views/demo/tree/ActionTree.vue
@@ -17,7 +17,7 @@
       <a-button @click="deleteNodeByKey('2-2')" class="mr-2">鍒犻櫎parent3鑺傜偣</a-button>
       <a-button @click="updateNodeByKey('1-1')" class="mr-2">鏇存柊parent2鑺傜偣</a-button>
     </div>
-    <CollapseContainer title="鍑芥暟鎿嶄綔" class="w-1/3 mr-4" :canExpan="false">
+    <CollapseContainer title="鍑芥暟鎿嶄綔" class="mr-4" :canExpan="false" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" ref="treeRef" :checkable="true" />
     </CollapseContainer>
   </div>
diff --git a/src/views/demo/tree/EditTree.vue b/src/views/demo/tree/EditTree.vue
index 203e211..4e46cda 100644
--- a/src/views/demo/tree/EditTree.vue
+++ b/src/views/demo/tree/EditTree.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex p-4">
-    <CollapseContainer title="鍙充晶鎿嶄綔鎸夐挳" class="w-1/3 mr-4">
+    <CollapseContainer title="鍙充晶鎿嶄綔鎸夐挳" class="mr-4" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" :actionList="actionList" />
     </CollapseContainer>
 
-    <CollapseContainer title="鍙抽敭鑿滃崟" class="w-1/3 mr-4">
+    <CollapseContainer title="鍙抽敭鑿滃崟" class="mr-4" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" :beforeRightClick="getRightMenuList" />
     </CollapseContainer>
   </div>
diff --git a/src/views/demo/tree/index.vue b/src/views/demo/tree/index.vue
index b968b6d..b2b846e 100644
--- a/src/views/demo/tree/index.vue
+++ b/src/views/demo/tree/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="flex p-4">
-    <CollapseContainer title="鍩虹绀轰緥" class="w-1/3 mr-4">
+    <CollapseContainer title="鍩虹绀轰緥" :style="{ width: '33%' }" class="mr-4">
       <BasicTree :treeData="treeData" />
     </CollapseContainer>
 
-    <CollapseContainer title="鍙嬀閫�" class="w-1/3 mr-4">
+    <CollapseContainer title="鍙嬀閫�" class="mr-4" :style="{ width: '33%' }">
       <BasicTree :treeData="treeData" :checkable="true" />
     </CollapseContainer>
 
-    <CollapseContainer title="榛樿灞曞紑/鍕鹃�夌ず渚�" class="w-1/3">
+    <CollapseContainer title="榛樿灞曞紑/鍕鹃�夌ず渚�" :style="{ width: '33%' }">
       <BasicTree
         :treeData="treeData"
         :checkable="true"
diff --git a/src/views/index.vue b/src/views/index.vue
deleted file mode 100644
index ab5a437..0000000
--- a/src/views/index.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <h1>{{ msg }}</h1>
-  <a-button @click="test">change </a-button>
-  <div class="sw">
-    <Scrollbar ref="a">
-      <div class="ss">13123</div>
-    </Scrollbar>
-  </div>
-
-  <a-button @click="test1" type="primary">change</a-button>
-  <ScrollYTransition>
-    <div class="box" v-show="show"> 1 </div>
-  </ScrollYTransition>
-
-  <!-- <BasicModal /> -->
-</template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { Scrollbar } from '/@/components/Scrollbar/index';
-  import { ScrollContainer } from '/@/components/Container/index';
-  import { defHttp } from '/@/utils/http/axios';
-  import { useThemeMode } from '/@/useApp';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import {
-    CollapseTransition,
-    ExpandXTransition,
-    ScaleTransition,
-    ScaleRotateTransition,
-    ScrollYTransition,
-  } from '/@/components/Transition';
-  import { ThemeModeEnum } from '../enums/appEnum';
-  // import { BasicModal } from '/@/components/modal';
-  export default defineComponent({
-    name: 'Home',
-    components: {
-      Scrollbar,
-      CollapseTransition,
-      ExpandXTransition,
-      ScaleTransition,
-      ScaleRotateTransition,
-      ScrollYTransition,
-      ScrollContainer,
-      // BasicModal
-    },
-    setup() {
-      const { createMessage } = useMessage();
-      createMessage.success({
-        content: '123',
-        duration: 999999,
-      });
-      // createMessage.error('123');
-      // createMessage.info('123');
-      // createMessage.warning('123');
-      // createConfirm({
-      //   iconType: 'success',
-      //   title: '123',
-      //   content: '123',
-      // });
-      const { runChangeThemeMode } = useThemeMode(ThemeModeEnum.DARK);
-      let msg = ref('hello Home');
-      const show = ref(true);
-      function test() {
-        msg.value = 'hello Home1';
-      }
-      defHttp.request({
-        method: 'post',
-        url: '/login',
-        params: {
-          username: 'vben',
-          password: '123456',
-        },
-      });
-
-      const a = ref(null);
-      function test1() {
-        runChangeThemeMode();
-        // show.value = !show.value;
-        // a.value.scrollTo(200);
-      }
-      return {
-        a,
-        msg,
-        test,
-        show,
-        test1,
-      };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .sw {
-    width: 300px;
-    height: 300px;
-    border: 1px solid red;
-
-    .scrollbar {
-      height: 100%;
-    }
-
-    .ss {
-      height: 500px;
-    }
-  }
-
-  .box {
-    width: 200px;
-    height: 200px;
-    background: #000;
-  }
-</style>
diff --git a/src/views/sys/exception/Exception.tsx b/src/views/sys/exception/Exception.tsx
index 69cb551..dec709d 100644
--- a/src/views/sys/exception/Exception.tsx
+++ b/src/views/sys/exception/Exception.tsx
@@ -15,6 +15,7 @@
 import { useGo, useRedo } from '/@/hooks/web/usePage';
 import { PageEnum } from '/@/enums/pageEnum';
 
+import './exception.less';
 interface MapValue {
   title: string;
   subTitle: string;
@@ -105,7 +106,7 @@
       const { title, subTitle, btnText, icon, handler } = unref(getMapValue) || {};
       return (
         <Result
-          class="flex items-center flex-col"
+          class="exception "
           title={props.title || title}
           sub-title={props.subTitle || subTitle}
         >
diff --git a/src/views/sys/exception/exception.less b/src/views/sys/exception/exception.less
new file mode 100644
index 0000000..343999a
--- /dev/null
+++ b/src/views/sys/exception/exception.less
@@ -0,0 +1,5 @@
+.exception {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
diff --git a/src/views/sys/login/Login.vue b/src/views/sys/login/Login.vue
index 9e4d4cc..9eb644a 100644
--- a/src/views/sys/login/Login.vue
+++ b/src/views/sys/login/Login.vue
@@ -1,17 +1,15 @@
 <template>
-  <div class="login h-screen relative">
-    <div class="login-mask h-full hidden lg:block" />
-    <div
-      class="h-full absolute right-0 top-0 w-full lg:w-2/5 xl:w-1/3 flex justify-center items-center"
-    >
-      <div class="login-form bg-white w-full rounded-sm border-solid bg-clip-padding mx-6 xl:mx-14">
-        <div class="w-full h-full border border-gray-600 px-2 py-10 rounded-sm">
-          <header class="flex justify-center items-center">
-            <img src="/@/assets/images/logo.png" class="w-12 mr-4 inline-block" />
-            <h1 class="text-2xl text-center text-primary tracking-wide">Vben Admin 2.0</h1>
+  <div class="login">
+    <div class="login-mask" />
+    <div class="login-form-wrap">
+      <div class="login-form mx-6">
+        <div class="login-form__content px-2 py-10">
+          <header>
+            <img src="/@/assets/images/logo.png" class="mr-4" />
+            <h1>{{ title }}</h1>
           </header>
 
-          <a-form class="w-4/5 mx-auto mt-10" :model="formData" :rules="formRules" ref="formRef">
+          <a-form class="mx-auto mt-10" :model="formData" :rules="formRules" ref="formRef">
             <a-form-item name="account">
               <a-input size="large" v-model:value="formData.account" placeholder="vben" />
             </a-form-item>
@@ -50,9 +48,11 @@
   import { userStore } from '/@/store/modules/user';
   import { appStore } from '/@/store/modules/app';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { useSetting } from '/@/hooks/core/useSetting';
   export default defineComponent({
     components: { BasicDragVerify },
     setup() {
+      const { globSetting } = useSetting();
       const { notification } = useMessage();
       const formRef = ref<any>(null);
       const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);
@@ -115,23 +115,79 @@
         formRules,
         login: handleLogin,
         openLoginVerify: openLoginVerifyRef,
+        title: globSetting && globSetting.title,
       };
     },
   });
 </script>
 <style lang="less" scoped>
+  @import (reference) '../../../design/index.less';
+
   .login {
+    position: relative;
+    height: 100vh;
     background: url(../../../assets/images/login/login-bg.png) no-repeat;
     background-size: 100% 100%;
 
     &-mask {
+      display: none;
+      height: 100%;
       background: url(../../../assets/images/login/login-in.png) no-repeat;
       background-size: 100% 100%;
+
+      .respond-to(large, { display: block;});
     }
 
     &-form {
-      border-color: rgba(255, 255, 255, 0.5);
+      width: 100%;
+      background: @white;
+      border: 10px solid rgba(255, 255, 255, 0.5);
       border-width: 10px;
+      border-radius: 4px;
+      background-clip: padding-box;
+      .respond-to(xlarge, { margin: 0 56px});
+
+      &-wrap {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+        .respond-to(large, { width: 40%;});
+        .respond-to(xlarge, { width: 33.3%;});
+      }
+
+      &__content {
+        width: 100%;
+        height: 100%;
+        border: 1px solid #999;
+        border-radius: 2px;
+
+        header {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          img {
+            display: inline-block;
+            width: 48px;
+          }
+
+          h1 {
+            margin-bottom: 0;
+            font-size: 24px;
+            color: @primary-color;
+            text-align: center;
+          }
+        }
+
+        form {
+          width: 80%;
+        }
+      }
     }
   }
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 2c41e95..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,74 +0,0 @@
-// #4c5eb8
-const { colors, inset } = require('tailwindcss/defaultTheme');
-
-const themeColors = {
-  mask: {
-    light: 'rgba(255,255,255,0.3)',
-  },
-  primary: '#018ffb',
-  success: '#55d187',
-  warning: '#ffd164',
-  danger: '#ed6f6f',
-};
-
-module.exports = {
-  purge: {
-    enabled: process.env.NODE_ENV === 'production',
-    content: [
-      './index.html',
-      './src/**/*.vue',
-      './src/**/*.js',
-      './src/**/*.jsx',
-      './src/**/*.ts',
-      './src/**/*.tsx',
-    ],
-  },
-  theme: {
-    colors: {
-      ...colors,
-      ...themeColors,
-    },
-    inset: {
-      ...inset,
-      '1/2': '50%',
-    },
-    screens: {
-      xs: '480px',
-      sm: '576px',
-      md: '768px',
-      lg: '992px',
-      xl: '1200px',
-      xxl: '1600px',
-    },
-    fontSize: {
-      xs: '.75rem', // 12px
-      sm: '.875rem', // 14px
-      base: '1rem', // 16px
-      lg: '1.125rem', // 18px
-      xl: '1.25rem', // 20px
-      '2xl': '1.5rem', // 24px
-      '3xl': '1.875rem', // 30px
-      '4xl': '2.25rem', // 36px
-      '5xl': '3rem', // 48px
-      '6xl': '4rem', // 64px
-      logo: '9rem', // 134px
-    },
-    fontWeight: {
-      light: 300,
-      normal: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-      extrabold: 800,
-      black: 900,
-    },
-    fontFamily: {
-      logo: [' Georgia', 'serif'],
-    },
-  },
-  future: {
-    // 2.0 remove col-gap-{n}
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
-  },
-};
diff --git a/tsconfig.json b/tsconfig.json
index 8b4979b..0ef987e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,9 +23,6 @@
     "paths": {
       "/@/*": [
         "src/*"
-      ],
-      "/@design/": [
-        "src/design/index.less"
       ]
     }
   },
diff --git a/yarn.lock b/yarn.lock
index 111744b..eef4344 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -367,14 +367,6 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fullhuman/postcss-purgecss@^2.1.2":
-  version "2.3.0"
-  resolved "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz#50a954757ec78696615d3e118e3fee2d9291882e"
-  integrity sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==
-  dependencies:
-    postcss "7.0.32"
-    purgecss "^2.3.0"
-
 "@iconify/iconify@2.0.0-rc.1", "@iconify/iconify@>=2.0.0-rc.1", "@iconify/iconify@^2.0.0-rc.1":
   version "2.0.0-rc.1"
   resolved "https://registry.npmjs.org/@iconify/iconify/-/iconify-2.0.0-rc.1.tgz#a8bae29d71016d5af98c69f56a73c4a040217b3a"
@@ -976,21 +968,7 @@
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
   integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
 
-acorn-node@^1.6.1:
-  version "1.8.2"
-  resolved "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
-  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
-  dependencies:
-    acorn "^7.0.0"
-    acorn-walk "^7.0.0"
-    xtend "^4.0.2"
-
-acorn-walk@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
-  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
-
-acorn@^7.0.0, acorn@^7.1.1, acorn@^7.4.0:
+acorn@^7.1.1, acorn@^7.4.0:
   version "7.4.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -1211,7 +1189,7 @@
   resolved "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@^9.4.5, autoprefixer@^9.8.6:
+autoprefixer@^9.8.6:
   version "9.8.6"
   resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
   integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
@@ -1376,7 +1354,7 @@
   resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
   integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==
 
-bytes@3.1.0, bytes@^3.0.0:
+bytes@3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
@@ -1432,11 +1410,6 @@
   version "3.1.0"
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
-
-camelcase-css@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
-  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 camelcase-keys@^2.0.0:
   version "2.1.0"
@@ -1507,7 +1480,7 @@
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@4.1.0, "chalk@^3.0.0 || ^4.0.0", chalk@^4.0.0, chalk@^4.1.0:
+chalk@4.1.0, chalk@^4.0.0, chalk@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
   integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
@@ -1685,7 +1658,7 @@
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.1:
+color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -1704,26 +1677,10 @@
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
-color-string@^1.5.4:
-  version "1.5.4"
-  resolved "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6"
-  integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@^3.1.2:
-  version "3.1.3"
-  resolved "https://registry.npmjs.org/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
-  integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
-  dependencies:
-    color-convert "^1.9.1"
-    color-string "^1.5.4"
 
 colorette@^1.2.1:
   version "1.2.1"
@@ -1739,11 +1696,6 @@
   version "2.20.3"
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-
-commander@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
-  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
 commitizen@^4.0.3, commitizen@^4.2.1:
   version "4.2.1"
@@ -2069,11 +2021,6 @@
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-css-unit-converter@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
-  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -2222,11 +2169,6 @@
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
-defined@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
-  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
-
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -2256,15 +2198,6 @@
   version "6.0.0"
   resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
   integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
-
-detective@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
-  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
-  dependencies:
-    acorn-node "^1.6.1"
-    defined "^1.0.0"
-    minimist "^1.1.1"
 
 diff@^4.0.1:
   version "4.0.2"
@@ -2910,7 +2843,7 @@
   resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
-fs-extra@8.1.0, fs-extra@^8.0.0:
+fs-extra@8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
   integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
@@ -3557,11 +3490,6 @@
   version "0.2.1"
   resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
-
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
 is-binary-path@~2.1.0:
   version "2.1.0"
@@ -4532,7 +4460,7 @@
     arrify "^1.0.1"
     is-plain-obj "^1.1.0"
 
-minimist@1.2.5, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
+minimist@1.2.5, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
@@ -4645,7 +4573,7 @@
   resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-node-emoji@^1.10.0, node-emoji@^1.8.1:
+node-emoji@^1.10.0:
   version "1.10.0"
   resolved "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
   integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
@@ -4687,11 +4615,6 @@
   resolved "https://registry.npmjs.org/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"
   integrity sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=
 
-normalize.css@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
-  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
-
 npm-run-path@^4.0.0:
   version "4.0.1"
   resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
@@ -4714,7 +4637,7 @@
   resolved "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
-object-assign@4.x, object-assign@^4.0.1, object-assign@^4.1.1:
+object-assign@4.x, object-assign@^4.0.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@@ -4727,11 +4650,6 @@
     copy-descriptor "^0.1.0"
     define-property "^0.2.5"
     kind-of "^3.0.3"
-
-object-hash@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/object-hash/-/object-hash-2.0.3.tgz#d12db044e03cd2ca3d77c0570d87225b02e1e6ea"
-  integrity sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==
 
 object-visit@^1.0.0:
   version "1.0.1"
@@ -5109,16 +5027,6 @@
   dependencies:
     postcss "^7.0.0"
 
-postcss-functions@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
-  integrity sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=
-  dependencies:
-    glob "^7.1.2"
-    object-assign "^4.1.1"
-    postcss "^6.0.9"
-    postcss-value-parser "^3.3.0"
-
 postcss-html@^0.36.0:
   version "0.36.0"
   resolved "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204"
@@ -5135,14 +5043,6 @@
     postcss-value-parser "^3.2.3"
     read-cache "^1.0.0"
     resolve "^1.1.7"
-
-postcss-js@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz#a96f0f23ff3d08cec7dc5b11bf11c5f8077cdab9"
-  integrity sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==
-  dependencies:
-    camelcase-css "^2.0.1"
-    postcss "^7.0.18"
 
 postcss-less@^3.1.4:
   version "3.1.4"
@@ -5212,14 +5112,6 @@
     postcss-modules-values "^3.0.0"
     string-hash "^1.1.1"
 
-postcss-nested@^4.1.1:
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
-  integrity sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==
-  dependencies:
-    postcss "^7.0.32"
-    postcss-selector-parser "^6.0.2"
-
 postcss-resolve-nested-selector@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
@@ -5270,7 +5162,7 @@
   resolved "https://registry.npmjs.org/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c"
   integrity sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==
 
-postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
+postcss-value-parser@^3.2.3:
   version "3.3.1"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
@@ -5280,25 +5172,7 @@
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@7.0.32:
-  version "7.0.32"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
-  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-postcss@^6.0.9:
-  version "6.0.23"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
-  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
-  dependencies:
-    chalk "^2.4.1"
-    source-map "^0.6.1"
-    supports-color "^5.4.0"
-
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.18, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.28, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.28, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.35"
   resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
   integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
@@ -5323,11 +5197,6 @@
   version "2.1.2"
   resolved "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5"
   integrity sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==
-
-pretty-hrtime@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
-  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
 process-nextick-args@~2.0.0:
   version "2.0.1"
@@ -5363,16 +5232,6 @@
   integrity sha512-hEJH0s8PXLY/cdXh66tNEQGndDrIKNqNC5xmrysZy3i5C3oEoLna7YAOad+7u125+zH1HNXUmGEkrhb3c2VriA==
   dependencies:
     escape-goat "^2.0.0"
-
-purgecss@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz#5327587abf5795e6541517af8b190a6fb5488bb3"
-  integrity sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==
-  dependencies:
-    commander "^5.0.0"
-    glob "^7.0.0"
-    postcss "7.0.32"
-    postcss-selector-parser "^6.0.2"
 
 q@^1.5.1:
   version "1.5.1"
@@ -5551,14 +5410,6 @@
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-reduce-css-calc@^2.1.6:
-  version "2.1.7"
-  resolved "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz#1ace2e02c286d78abcd01fd92bfe8097ab0602c2"
-  integrity sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss-value-parser "^3.3.0"
-
 regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@@ -5713,7 +5564,7 @@
   resolved "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.3.2:
+resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.17.0, resolve@^1.3.2:
   version "1.17.0"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
@@ -6000,13 +5851,6 @@
   version "3.0.3"
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
-
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
-  dependencies:
-    is-arrayish "^0.3.1"
 
 slash@^3.0.0:
   version "3.0.0"
@@ -6435,7 +6279,7 @@
   dependencies:
     has-flag "^2.0.0"
 
-supports-color@^5.3.0, supports-color@^5.4.0:
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -6480,34 +6324,6 @@
     lodash "^4.17.20"
     slice-ansi "^4.0.0"
     string-width "^4.2.0"
-
-tailwindcss@^1.8.13:
-  version "1.8.13"
-  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.8.13.tgz#ee57050a516d342bafc92cb74b4de6f92e44c189"
-  integrity sha512-z3R/6qPqfjauSR4qHhlA8I0OnfSyuotvigXISq666k+V52VSs5HV//KZ0Xe3qrZ4h5Um4OG5g+lcgjXSfURjDw==
-  dependencies:
-    "@fullhuman/postcss-purgecss" "^2.1.2"
-    autoprefixer "^9.4.5"
-    browserslist "^4.12.0"
-    bytes "^3.0.0"
-    chalk "^3.0.0 || ^4.0.0"
-    color "^3.1.2"
-    detective "^5.2.0"
-    fs-extra "^8.0.0"
-    html-tags "^3.1.0"
-    lodash "^4.17.20"
-    node-emoji "^1.8.1"
-    normalize.css "^8.0.1"
-    object-hash "^2.0.3"
-    postcss "^7.0.11"
-    postcss-functions "^3.0.0"
-    postcss-js "^2.0.0"
-    postcss-nested "^4.1.1"
-    postcss-selector-parser "^6.0.0"
-    postcss-value-parser "^4.1.0"
-    pretty-hrtime "^1.0.3"
-    reduce-css-calc "^2.1.6"
-    resolve "^1.14.2"
 
 tasksfile@^5.1.1:
   version "5.1.1"
@@ -7137,7 +6953,7 @@
   resolved "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8"
   integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==
 
-xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==

--
Gitblit v1.8.0