uniccoo/uniViteTemplate
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

合并

Browse Source
This commit is contained in:
KuroSago@outlook.com 2024-09-19 20:31:55 +08:00
commit de90300e51
3 changed files with 93 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/colorCard/ColorPalette.vue
View File

@ -1,27 +1,29 @@
<script lang="ts"> <script lang="ts" setup>
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import ColorPaletteComponent from './ColorPalette.vue';
export default defineComponent({ const props = defineProps({
name: 'ColorPalette',
props: {
palette: { palette: {
type: Object as PropType<Record<string, any>>, type: Object as PropType<Record<string, any>>,
required: true, required: true,
}, },
}, });
defineComponent({
name: 'ColorPalette',
}); });
</script> </script>
<template> <template>
<div <div
v-for="(value, keyName) in palette" :key="keyName" class="flex flex-col" v-for="(value, keyName) in props.palette" :key="keyName" class="flex flex-col"
> >
<h2 v-if="typeof value === 'object'"> <h2 v-if="typeof value === 'object'">
{{ keyName }} {{ keyName }}
</h2> </h2>
<div v-if="typeof value === 'object'" class="flex haha flex-1"> <div v-if="typeof value === 'object'" class="flex haha flex-1">
<ColorPalette :palette="value" /> <ColorPaletteComponent class="flex" :palette="value" />
</div> </div>
<div <div
v-else v-else

4
src/pages/login/index.vue
View File

@ -66,6 +66,10 @@ function toColorCard() {
<button form-type="submit" class="submit-btn" hover-class="none"> <button form-type="submit" class="submit-btn" hover-class="none">
登录 登录
</button> </button>
<button @click="toColorCard">
色卡
</button>
</form> </form>
</view> </view>

35
unocss.config.ts
View File

@ -1,15 +1,17 @@
/**
/**
* unocss defineConfig * unocss defineConfig
* @link unocss: https://github.com/unocss/unocss * @link unocss: https://github.com/unocss/unocss
* @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp * @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
*/ * */
import { defineConfig, presetIcons } from 'unocss'; import { defineConfig, presetIcons } from 'unocss';
import presetWeapp from 'unocss-preset-weapp'; import presetWeapp from 'unocss-preset-weapp';
import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer'; import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
import transformerDirectives from '@unocss/transformer-directives'; import transformerDirectives from '@unocss/transformer-directives';
const transformRules = { const transformRules = {
'.': '-d111-', '.': '-d111-',
'/': '-s111-', '/': '-s111-',
':': '-c111-', ':': '-c111-',
@ -20,18 +22,18 @@ const transformRules = {
')': '-b111r-', ')': '-b111r-',
'[': '-f111l-', '[': '-f111l-',
']': '-f111r-', ']': '-f111r-',
'$': '-r111-', $: '-r111-',
',': '-r222-', ',': '-r222-',
}; };
const prefix = ''; const prefix = '';
export default defineConfig({ export default defineConfig({
presets: [ presets: [
// https://github.com/MellowCo/unocss-preset-weapp // https://github.com/MellowCo/unocss-preset-weapp
presetWeapp({ presetWeapp({
nonValuedAttribute: true, nonValuedAttribute: true,
prefix, prefix: prefix,
whRpx: true, whRpx: true,
transform: true, transform: true,
platform: 'uniapp', platform: 'uniapp',
@ -54,14 +56,14 @@ export default defineConfig({
'border-base': 'border border-gray-500_10', 'border-base': 'border border-gray-500_10',
'z-tar-both': 'z-988', 'z-tar-both': 'z-988',
'head-fixed': 'fixed top-0 left-0 w-full z-tar-both', 'head-fixed': 'fixed top-0 left-0 w-full z-tar-both',
'center': 'flex justify-center items-center', center: 'flex justify-center items-center',
}, },
], ],
theme: { extend: { opacity: { disabled: 'var(--opacity-disabled)' } }, colors: { primary: 'var(--colors-primary)', secondary: 'var(--colors-secondary)', accent: 'var(--colors-accent)', success: 'var(--colors-success)', warning: 'var(--colors-warning)', error: 'var(--colors-error)', disable: 'var(--colors-disable)', danger: 'var(--colors-danger)', mark: 'var(--colors-mark)', title: 'var(--colors-title)', subtitle: 'var(--colors-subtitle)', paragraph: 'var(--colors-paragraph)', fontColorblack: 'var(--colors-fontColorblack)', fontColorPrimary: 'var(--colors-fontColorPrimary)', fontColorInverse: 'var(--colors-fontColorInverse)', fontColorGrey: 'var(--colors-fontColorGrey)', fontColorPlaceholder: 'var(--colors-fontColorPlaceholder)', fontColorDisable: 'var(--colors-fontColorDisable)', fontColorBottomText: 'var(--colors-fontColorBottomText)', container: 'var(--colors-container)', page: 'var(--colors-page)', containerInverse: 'var(--colors-containerInverse)', containerHover: 'var(--colors-containerHover)', secondaryHover: 'var(--colors-secondaryHover)', containerMask: 'var(--colors-containerMask)', iconButton: 'var(--colors-iconButton)', borderColor: 'var(--colors-borderColor)' }, fontSize: { sm: 'var(--fontSize-sm)', base: 'var(--fontSize-base)', lg: 'var(--fontSize-lg)', title: 'var(--fontSize-title)', subtitle: 'var(--fontSize-subtitle)', paragraph: 'var(--fontSize-paragraph)' }, borderRadius: { sm: 'var(--borderRadius-sm)', base: 'var(--borderRadius-base)', lg: 'var(--borderRadius-lg)', circle: 'var(--borderRadius-circle)' }, spacing: { rowSm: 'var(--spacing-rowSm)', rowBase: 'var(--spacing-rowBase)', rowLg: 'var(--spacing-rowLg)', colSm: 'var(--spacing-colSm)', colBase: 'var(--spacing-colBase)', colLg: 'var(--spacing-colLg)' } }, theme: {"extend":{"opacity":{"disabled":"var(--opacity-disabled)"}},"colors":{"primary":"var(--colors-primary)","secondary":"var(--colors-secondary)","accent":"var(--colors-accent)","success":"var(--colors-success)","warning":"var(--colors-warning)","error":"var(--colors-error)","disable":"var(--colors-disable)","danger":"var(--colors-danger)","mark":"var(--colors-mark)","title":"var(--colors-title)","subtitle":"var(--colors-subtitle)","paragraph":"var(--colors-paragraph)","fontColorblack":"var(--colors-fontColorblack)","fontColorPrimary":"var(--colors-fontColorPrimary)","fontColorInverse":"var(--colors-fontColorInverse)","fontColorGrey":"var(--colors-fontColorGrey)","fontColorPlaceholder":"var(--colors-fontColorPlaceholder)","fontColorDisable":"var(--colors-fontColorDisable)","fontColorBottomText":"var(--colors-fontColorBottomText)","container":"var(--colors-container)","page":"var(--colors-page)","containerInverse":"var(--colors-containerInverse)","containerHover":"var(--colors-containerHover)","secondaryHover":"var(--colors-secondaryHover)","containerMask":"var(--colors-containerMask)","iconButton":"var(--colors-iconButton)","borderColor":"var(--colors-borderColor)"},"fontSize":{"sm":"var(--fontSize-sm)","base":"var(--fontSize-base)","lg":"var(--fontSize-lg)","title":"var(--fontSize-title)","subtitle":"var(--fontSize-subtitle)","paragraph":"var(--fontSize-paragraph)"},"borderRadius":{"sm":"var(--borderRadius-sm)","base":"var(--borderRadius-base)","lg":"var(--borderRadius-lg)","circle":"var(--borderRadius-circle)"},"spacing":{"rowSm":"var(--spacing-rowSm)","rowBase":"var(--spacing-rowBase)","rowLg":"var(--spacing-rowLg)","colSm":"var(--spacing-colSm)","colBase":"var(--spacing-colBase)","colLg":"var(--spacing-colLg)"}},
transformers: [ transformers: [
transformerDirectives({ transformerDirectives({
applyVariable: ['--at-apply', '--uno-apply', '--uno'], applyVariable: ['--at-apply', '--uno-apply', '--uno'],
enforce: 'pre', enforce: 'pre'
}), }),
transformerAttributify({ transformerAttributify({
classPrefix: prefix, classPrefix: prefix,
@ -72,4 +74,5 @@ export default defineConfig({
transformRules, transformRules,
}), }),
], ],
}); });