重新整理仓库

src/styles/as-needed.less

@@ -0,0 +1,6 @@
+/** 按需引入 */
+@import 'ant-design-vue/es/message/style/index.less';
+@import 'ant-design-vue/es/notification/style/index.less';
+@import 'ele-admin-pro/es/style/nprogress.less';
+@import 'ele-admin-pro/es/style/display.less';
+@import 'ele-admin-pro/es/style/common.less';

src/styles/component.less

@@ -0,0 +1,2 @@
+/** 组件样式 */
+//@input-item: 300px;

src/styles/global-import.less

@@ -0,0 +1,4 @@
+/** 全局引入 */
+@import 'cropperjs/dist/cropper.css';
+@import 'ant-design-vue/dist/antd.less';
+@import 'ele-admin-pro/es/style/index.less';

src/styles/index.less

@@ -0,0 +1,39 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/** 全局样式 */
+@style-entry-file: as-needed;
+@import './@{style-entry-file}.less';
+@import './transition/index.less';
+@import "./component.less";
+
+// 主题
+@import 'ele-admin-pro/es/style/themes/dynamic.less';
+
+:root {
+  // 灰色主题
+  --grey-1: #1b1b1b;
+  --grey-2: #363636;
+  --grey-3: #4d4d4d;
+  --grey-4: #737373;
+  --grey-5: #a6a6a6;
+  --grey-6: #d9d9d9;
+  --grey-7: #e6e6e6;
+  --grey-8: #f2f2f2;
+  --grey-9: #f7f7f7;
+  --grey-10: #fafafa;
+}
+
+.ele-admin-theme-dark {
+  // 灰色主题
+  --grey-1: #fafafa;
+  --grey-2: #f7f7f7;
+  --grey-3: #f2f2f2;
+  --grey-4: #e6e6e6;
+  --grey-5: #d9d9d9;
+  --grey-6: #a6a6a6;
+  --grey-7: #737373;
+  --grey-8: #4d4d4d;
+  --grey-9: #363636;
+  --grey-10: #1b1b1b;
+}

src/styles/transition/fade.less

@@ -0,0 +1,10 @@
+/* 渐变 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

src/styles/transition/index.less

@@ -0,0 +1,4 @@
+/** 路由切换动画 */
+@import './fade.less';
+@import './slide.less';
+@import './zoom.less';

src/styles/transition/slide.less

@@ -0,0 +1,31 @@
+/* 底部消退 */
+.slide-bottom-enter-active,
+.slide-bottom-leave-active {
+  transition: opacity 0.2s ease-out, transform 0.25s ease-out;
+}
+
+.slide-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.slide-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+/* 右侧消退 */
+.slide-right-leave-active,
+.slide-right-enter-active {
+  transition: opacity 0.2s ease-out, transform 0.25s ease-out;
+}
+
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-60px);
+}
+
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(60px);
+}

src/styles/transition/zoom.less

@@ -0,0 +1,31 @@
+/* 放大渐变 */
+.zoom-in-enter-active,
+.zoom-in-leave-active {
+  transition: opacity 0.2s ease-out, transform 0.25s ease-out;
+}
+
+.zoom-in-enter-from {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.zoom-in-leave-to {
+  opacity: 0;
+  transform: scale(1.1);
+}
+
+/* 缩小渐变 */
+.zoom-out-leave-active,
+.zoom-out-enter-active {
+  transition: opacity 0.2s ease-out, transform 0.25s ease-out;
+}
+
+.zoom-out-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+
+.zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}