|
@@ -30,17 +30,158 @@ export default defineConfig({
|
|
|
shortcuts: [
|
|
shortcuts: [
|
|
|
{
|
|
{
|
|
|
center: 'flex justify-center items-center',
|
|
center: 'flex justify-center items-center',
|
|
|
|
|
+ 'p-rtv': 'position: relative',
|
|
|
|
|
+ 'text-indent-2': 'text-indent: 2em',
|
|
|
|
|
+ 'w-s-no': 'white-space: nowrap',
|
|
|
},
|
|
},
|
|
|
],
|
|
],
|
|
|
rules: [
|
|
rules: [
|
|
|
|
|
+ [/^mg-([\.\d]+)$/, ([_, num]) => ({ margin: `${num}rpx` })],
|
|
|
|
|
+ [/^pd-([\.\d]+)$/, ([_, num]) => ({ padding: `${num}rpx` })],
|
|
|
|
|
+ [/^bg-([\w#-]+)$/, ([_, color]) => ({ 'background-color': color })],
|
|
|
|
|
+ [/^c-([\w#-]+)$/, ([_, color]) => ({ color: color })],
|
|
|
|
|
+ // bc-#fafafa
|
|
|
|
|
+ [/^bc-([\w#-]+)$/, ([_, color]) => ({ 'border-color': color })],
|
|
|
|
|
+ // 下边距
|
|
|
|
|
+ [/^mb-([\.\d]+)$/, ([_, num]) => ({ 'margin-bottom': `${num}rpx` })],
|
|
|
|
|
+ // 上边距
|
|
|
|
|
+ [/^mt-([\.\d]+)$/, ([_, num]) => ({ 'margin-top': `${num}rpx` })],
|
|
|
|
|
+ // 左边距
|
|
|
|
|
+ [/^ml-([\.\d]+)$/, ([_, num]) => ({ 'margin-left': `${num}rpx` })],
|
|
|
|
|
+ // 右边距
|
|
|
|
|
+ [/^mr-([\.\d]+)$/, ([_, num]) => ({ 'margin-right': `${num}rpx` })],
|
|
|
|
|
+ // 上padding
|
|
|
|
|
+ [/^pt-([\.\d]+)$/, ([_, num]) => ({ 'padding-top': `${num}rpx` })],
|
|
|
|
|
+ // 下padding
|
|
|
|
|
+ [/^pb-([\.\d]+)$/, ([_, num]) => ({ 'padding-bottom': `${num}rpx` })],
|
|
|
|
|
+ // pd3-40-0-20
|
|
|
|
|
+ // padding
|
|
|
[
|
|
[
|
|
|
- 'p-safe',
|
|
|
|
|
- {
|
|
|
|
|
- padding: 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ /^pd3-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
|
|
|
|
|
+ ([_, top, right, bottom]) => ({
|
|
|
|
|
+ padding: `${top}rpx ${right}rpx ${bottom}rpx`,
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // pd2-40-20
|
|
|
|
|
+ [
|
|
|
|
|
+ /^pd2-([\.\d]+)-([\.\d]+)$/,
|
|
|
|
|
+ ([_, top, right]) => ({
|
|
|
|
|
+ padding: `${top}rpx ${right}rpx`,
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // pd4-40-20-10-5
|
|
|
|
|
+ [
|
|
|
|
|
+ /^pd4-([\.\d]+)-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
|
|
|
|
|
+ ([_, top, right, bottom, left]) => ({
|
|
|
|
|
+ padding: `${top}rpx ${right}rpx ${bottom}rpx ${left}rpx`,
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // mg2-40-20
|
|
|
|
|
+ [
|
|
|
|
|
+ /^mg2-([\.\d]+)-([\.\d]+)$/,
|
|
|
|
|
+ ([_, top, right]) => ({
|
|
|
|
|
+ margin: `${top}rpx ${right}rpx`,
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // mg3-40-20-10
|
|
|
|
|
+ [
|
|
|
|
|
+ /^mg3-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
|
|
|
|
|
+ ([_, top, right, bottom]) => ({
|
|
|
|
|
+ margin: `${top}rpx ${right}rpx ${bottom}rpx`,
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // mg4-40-20-10-5
|
|
|
|
|
+ [
|
|
|
|
|
+ /^mg4-([\.\d]+)-([\.\d]+)-([\.\d]+)-([\.\d]+)$/,
|
|
|
|
|
+ ([_, top, right, bottom, left]) => ({
|
|
|
|
|
+ margin: `${top}rpx ${right}rpx ${bottom}rpx ${left}rpx`,
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // 左padding
|
|
|
|
|
+ [/^pl-([\.\d]+)$/, ([_, num]) => ({ 'padding-left': `${num}rpx` })],
|
|
|
|
|
+ // 右padding
|
|
|
|
|
+ [/^pr-([\.\d]+)$/, ([_, num]) => ({ 'padding-right': `${num}rpx` })],
|
|
|
|
|
+ // 字体大小
|
|
|
|
|
+ [/^f-s-([\.\d]+)$/, ([_, num]) => ({ 'font-size': `${num}rpx` })],
|
|
|
|
|
+ // 字体加粗
|
|
|
|
|
+ [/^f-w-([\.\d]+)$/, ([_, num]) => ({ 'font-weight': `${num > 100 ? num : num * 100}` })],
|
|
|
|
|
+ // 宽
|
|
|
|
|
+ [/^w-([\.\d]+)$/, ([_, num]) => ({ width: `${num}rpx` })],
|
|
|
|
|
+ // 高
|
|
|
|
|
+ [/^h-([\.\d]+)$/, ([_, num]) => ({ height: `${num}rpx` })],
|
|
|
|
|
+ // 带透明度的可传入颜色计算rgba值加背景
|
|
|
|
|
+ // 行高
|
|
|
|
|
+ [/^lh-([\.\d]+)$/, ([_, num]) => ({ 'line-height': `${num}` })],
|
|
|
|
|
+ // 黑色透明度
|
|
|
|
|
+ [
|
|
|
|
|
+ /^bg-black-([\.\d]+)$/,
|
|
|
|
|
+ ([_, num]) => ({
|
|
|
|
|
+ 'background-color': `rgba(0, 0, 0, ${num})`,
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // 透明度
|
|
|
|
|
+ [
|
|
|
|
|
+ /^opacity-([\.\d]+)$/,
|
|
|
|
|
+ ([_, num]) => ({
|
|
|
|
|
+ opacity: `${num}`,
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // z-index
|
|
|
|
|
+ [
|
|
|
|
|
+ /^z-index-([\.\d]+)$/,
|
|
|
|
|
+ ([_, num]) => ({
|
|
|
|
|
+ 'z-index': `${num}`,
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // 百分比高度
|
|
|
|
|
+ [/^h-([\.\d]+)%$/, ([_, num]) => ({ height: `${num}%` })],
|
|
|
|
|
+ [
|
|
|
|
|
+ /^wrapper-([\.\d]+)-([\.\d]+)$/,
|
|
|
|
|
+ ([_, maxWidth, minWidth]) => ({
|
|
|
|
|
+ 'max-width': `${maxWidth}rpx`,
|
|
|
|
|
+ 'min-width': `${minWidth}rpx`,
|
|
|
|
|
+ margin: '0 auto',
|
|
|
|
|
+ padding: '0 20px',
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // 最大宽
|
|
|
|
|
+ [/^max-w-([\.\d]+)$/, ([_, num]) => ({ 'max-width': `${num}rpx` })],
|
|
|
|
|
+ // 最小宽
|
|
|
|
|
+ [/^min-w-([\.\d]+)$/, ([_, num]) => ({ 'min-width': `${num}rpx` })],
|
|
|
|
|
+ // 最大高
|
|
|
|
|
+ [/^max-h-([\.\d]+)$/, ([_, num]) => ({ 'max-height': `${num}rpx` })],
|
|
|
|
|
+ // 最小高
|
|
|
|
|
+ [/^min-h-([\.\d]+)$/, ([_, num]) => ({ 'min-height': `${num}rpx` })],
|
|
|
|
|
+ // 栅格 30份
|
|
|
|
|
+ [/^hcol-([\.\d]+)$/, ([_, num]) => ({ width: `${(+num / 30) * 100}%` })],
|
|
|
|
|
+ // border-radius-8
|
|
|
|
|
+ [
|
|
|
|
|
+ /^border-radius-([\.\d]+)$/,
|
|
|
|
|
+ ([_, num]) => ({
|
|
|
|
|
+ 'border-radius': `${num}rpx`,
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // border-w-4
|
|
|
|
|
+ [
|
|
|
|
|
+ /^border-w-([\.\d]+)$/,
|
|
|
|
|
+ ([_, num]) => ({
|
|
|
|
|
+ 'border-width': `${num}rpx`,
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // 旋转度数
|
|
|
|
|
+ [
|
|
|
|
|
+ /^rotate-([\-\.\d]+)$/,
|
|
|
|
|
+ ([_, num]) => ({
|
|
|
|
|
+ transform: `rotate(${num}deg)`,
|
|
|
|
|
+ }),
|
|
|
|
|
+ ],
|
|
|
|
|
+ // gap-20
|
|
|
|
|
+ [
|
|
|
|
|
+ /^gap-([\.\d]+)$/,
|
|
|
|
|
+ ([_, num]) => ({
|
|
|
|
|
+ gap: `${num}rpx`,
|
|
|
|
|
+ }),
|
|
|
],
|
|
],
|
|
|
- ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
|
|
|
|
|
- ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
|
|
|
|
|
],
|
|
],
|
|
|
theme: {
|
|
theme: {
|
|
|
colors: {
|
|
colors: {
|