|
@@ -1,12 +1,11 @@
|
|
|
import { defineConfig, presetWind } from 'unocss'
|
|
|
-import proSettings from './config/defaultSettings'
|
|
|
export function createConfig({ dev = true } = {}) {
|
|
|
return defineConfig({
|
|
|
envMode: dev ? 'dev' : 'build',
|
|
|
presets: [presetWind()],
|
|
|
theme: {
|
|
|
colors: {
|
|
|
- primary: proSettings.primaryColor
|
|
|
+ primary: '#1890ff'
|
|
|
},
|
|
|
screens: {
|
|
|
sm: '576px',
|
|
@@ -20,58 +19,7 @@ export function createConfig({ dev = true } = {}) {
|
|
|
}
|
|
|
}
|
|
|
// transformers: [transformerDirectives()]
|
|
|
- // rules: [createEnterPlugin()]
|
|
|
- // variants: [createEnterPlugin()]
|
|
|
})
|
|
|
}
|
|
|
|
|
|
export default createConfig()
|
|
|
-/**
|
|
|
- * Used for animation when the element is displayed
|
|
|
- * @param maxOutput The larger the maxOutput output, the larger the generated css volume
|
|
|
- */
|
|
|
-function createEnterPlugin(maxOutput = 10) {
|
|
|
- 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 = () => {
|
|
|
- const addRawCss = {}
|
|
|
- for (let index = 1; index < maxOutput; index++) {
|
|
|
- Object.assign(m, {
|
|
|
- ...createCss(index, 'x'),
|
|
|
- ...createCss(index, 'y')
|
|
|
- })
|
|
|
- }
|
|
|
- return {
|
|
|
- ...addRawCss,
|
|
|
- [`@keyframes enter-x-animation`]: {
|
|
|
- to: {
|
|
|
- opacity: '1',
|
|
|
- transform: 'translateX(0)'
|
|
|
- }
|
|
|
- },
|
|
|
- [`@keyframes enter-y-animation`]: {
|
|
|
- to: {
|
|
|
- opacity: '1',
|
|
|
- transform: 'translateY(0)'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- return [/^enter-(x|y)/, () => handler()]
|
|
|
-}
|