From beca65f4d01ca07c358102a35b949c2a4f277afe Mon Sep 17 00:00:00 2001
From: baoshiwei <baoshiwei@shlanbao.cn>
Date: 星期三, 24 五月 2023 10:36:27 +0800
Subject: [PATCH] 增加车间监控界面
---
windi.config.ts | 130 +++++++++++++++++++++---------------------
1 files changed, 65 insertions(+), 65 deletions(-)
diff --git a/windi.config.ts b/windi.config.ts
index 6d18915..901cf64 100644
--- a/windi.config.ts
+++ b/windi.config.ts
@@ -1,74 +1,74 @@
-import { defineConfig } from 'vite-plugin-windicss';
-import { primaryColor } from './build/config/themeConfig';
+import { defineConfig } from 'vite-plugin-windicss'
+import { primaryColor } from './build/config/themeConfig'
export default defineConfig({
- darkMode: 'class',
- plugins: [createEnterPlugin()],
- theme: {
- extend: {
- zIndex: {
- '-1': '-1',
- },
- colors: {
- primary: primaryColor,
- },
- screens: {
- sm: '576px',
- md: '768px',
- lg: '992px',
- xl: '1200px',
- '2xl': '1600px',
- },
- },
- },
-});
+ darkMode: 'class',
+ plugins: [createEnterPlugin()],
+ theme: {
+ extend: {
+ zIndex: {
+ '-1': '-1',
+ },
+ colors: {
+ primary: primaryColor,
+ },
+ screens: {
+ sm: '576px',
+ md: '768px',
+ lg: '992px',
+ xl: '1200px',
+ '2xl': '1600px',
+ },
+ },
+ },
+})
/**
* Used for animation when the element is displayed
* @param maxOutput The larger the maxOutput output, the larger the generated css volume
*/
function createEnterPlugin(maxOutput = 8) {
- const createCss = (index: number, d = 'x') => {
- const upd = d.toUpperCase();
- return {
- [`*> .enter-${d}:nth-child(${index})`]: {
- transform: `translate${upd}(50px)`,
- },
- [`*> .-enter-${d}:nth-child(${index})`]: {
- transform: `translate${upd}(-50px)`,
- },
- [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
- 'z-index': `${10 - index}`,
- opacity: '0',
- animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
- 'animation-fill-mode': 'forwards',
- 'animation-delay': `${(index * 1) / 10}s`,
- },
- };
- };
- const handler = ({ addBase }) => {
- const addRawCss = {};
- for (let index = 1; index < maxOutput; index++) {
- Object.assign(addRawCss, {
- ...createCss(index, 'x'),
- ...createCss(index, 'y'),
- });
- }
- addBase({
- ...addRawCss,
- [`@keyframes enter-x-animation`]: {
- to: {
- opacity: '1',
- transform: 'translateX(0)',
- },
- },
- [`@keyframes enter-y-animation`]: {
- to: {
- opacity: '1',
- transform: 'translateY(0)',
- },
- },
- });
- };
- return { handler };
+ const createCss = (index: number, d = 'x') => {
+ const upd = d.toUpperCase()
+ return {
+ [`*> .enter-${d}:nth-child(${index})`]: {
+ transform: `translate${upd}(50px)`,
+ },
+ [`*> .-enter-${d}:nth-child(${index})`]: {
+ transform: `translate${upd}(-50px)`,
+ },
+ [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
+ 'z-index': `${10 - index}`,
+ opacity: '0',
+ animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
+ 'animation-fill-mode': 'forwards',
+ 'animation-delay': `${(index * 1) / 10}s`,
+ },
+ }
+ }
+ const handler = ({ addBase }) => {
+ const addRawCss = {}
+ for (let index = 1; index < maxOutput; index++) {
+ Object.assign(addRawCss, {
+ ...createCss(index, 'x'),
+ ...createCss(index, 'y'),
+ })
+ }
+ addBase({
+ ...addRawCss,
+ [`@keyframes enter-x-animation`]: {
+ to: {
+ opacity: '1',
+ transform: 'translateX(0)',
+ },
+ },
+ [`@keyframes enter-y-animation`]: {
+ to: {
+ opacity: '1',
+ transform: 'translateY(0)',
+ },
+ },
+ })
+ }
+ return { handler }
}
--
Gitblit v1.9.3