添加全局字号,动态调整大小

This commit is contained in:
icssoa
2025-08-13 15:21:16 +08:00
parent b04cfb0066
commit e7b17195dd
49 changed files with 682 additions and 292 deletions

View File

@@ -1,6 +1,8 @@
<template>
<view class="demo-item dark:!bg-surface-800">
<text class="label" v-if="label != ''">{{ label }}</text>
<cl-text :pt="{ className: '!text-sm !text-surface-400 mb-2' }" v-if="label != ''">{{
label
}}</cl-text>
<slot></slot>
</view>
@@ -22,9 +24,5 @@ const props = defineProps({
<style lang="scss" scoped>
.demo-item {
@apply p-3 rounded-xl bg-white mb-3;
.label {
@apply text-sm text-surface-400 mb-2;
}
}
</style>

View File

@@ -36,11 +36,21 @@
}"
>
<template #prev>
<cl-text class="!text-sm">{{ t("上一页") }}</cl-text>
<cl-text
:pt="{
className: '!text-sm'
}"
>{{ t("上一页") }}</cl-text
>
</template>
<template #next>
<cl-text class="!text-sm">{{ t("下一页") }}</cl-text>
<cl-text
:pt="{
className: '!text-sm'
}"
>{{ t("下一页") }}</cl-text
>
</template>
</cl-pagination>
</demo-item>

View File

@@ -10,7 +10,6 @@
v-model="direction"
:list="directionList"
show-slider
fill
:height="66"
></cl-tabs>
</view>

View File

@@ -25,6 +25,11 @@
className: parseClass({
'!text-sky-700': isCustom
})
},
cursor: {
className: parseClass({
'!bg-sky-700': isCustom
})
}
}"
@done="toDone"

View File

@@ -54,7 +54,7 @@
className: 'justify-between'
},
item: {
className: '!h-8 !w-8'
className: '!h-9 !w-9'
},
cursor: {
className: '!h-3'

View File

@@ -10,17 +10,17 @@
<cl-row :gutter="12">
<cl-col :span="8">
<view class="item">
<text class="text">1</text>
<cl-text :pt="{ className: 'text' }">1</cl-text>
</view>
</cl-col>
<cl-col :span="8">
<view class="item">
<text class="text">2</text>
<cl-text :pt="{ className: 'text' }">2</cl-text>
</view>
</cl-col>
<cl-col :span="8">
<view class="item">
<text class="text">3</text>
<cl-text :pt="{ className: 'text' }">3</cl-text>
</view>
</cl-col>
</cl-row>
@@ -28,12 +28,12 @@
<cl-row :gutter="12" :pt="{ className: 'mt-3' }">
<cl-col :span="12">
<view class="item">
<text class="text">1</text>
<cl-text :pt="{ className: 'text' }">1</cl-text>
</view>
</cl-col>
<cl-col :span="12">
<view class="item">
<text class="text">2</text>
<cl-text :pt="{ className: 'text' }">2</cl-text>
</view>
</cl-col>
</cl-row>
@@ -41,22 +41,22 @@
<cl-row :gutter="12" :pt="{ className: 'mt-3' }">
<cl-col :span="6">
<view class="item">
<text class="text">1</text>
<cl-text :pt="{ className: 'text' }">1</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<text class="text">2</text>
<cl-text :pt="{ className: 'text' }">2</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<text class="text">3</text>
<cl-text :pt="{ className: 'text' }">3</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<text class="text">4</text>
<cl-text :pt="{ className: 'text' }">4</cl-text>
</view>
</cl-col>
</cl-row>
@@ -66,17 +66,17 @@
<cl-row :gutter="12">
<cl-col :span="6">
<view class="item">
<text class="text">1</text>
<cl-text :pt="{ className: 'text' }">1</cl-text>
</view>
</cl-col>
<cl-col :span="6" :offset="6">
<view class="item active">
<text class="text">2</text>
<cl-text :pt="{ className: 'text' }">2</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<text class="text">3</text>
<cl-text :pt="{ className: 'text' }">3</cl-text>
</view>
</cl-col>
</cl-row>
@@ -86,42 +86,42 @@
<cl-row :gutter="12">
<cl-col :span="6">
<view class="item">
<text class="text">1</text>
<cl-text :pt="{ className: 'text' }">1</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<text class="text">2</text>
<cl-text :pt="{ className: 'text' }">2</cl-text>
</view>
</cl-col>
<cl-col :span="6" :push="6">
<view class="item active">
<text class="text">3</text>
<cl-text :pt="{ className: 'text' }">3</cl-text>
</view>
</cl-col>
</cl-row>
</demo-item>
<demo-item :label="t('左移动')">
<cl-row :gutter="12" :pt="{ className: 'mt-3' }">
<cl-row :gutter="12">
<cl-col :span="6">
<view class="item">
<text class="text">1</text>
<cl-text :pt="{ className: 'text' }">1</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<text class="text">2</text>
<cl-text :pt="{ className: 'text' }">2</cl-text>
</view>
</cl-col>
<cl-col :span="6">
<view class="item">
<text class="text">3</text>
<cl-text :pt="{ className: 'text' }">3</cl-text>
</view>
</cl-col>
<cl-col :span="6" :pull="6">
<view class="item active">
<text class="text">4</text>
<cl-text :pt="{ className: 'text' }">4</cl-text>
</view>
</cl-col>
</cl-row>
@@ -131,7 +131,7 @@
<cl-row :gutter="12">
<cl-col :span="4" v-for="item in 20" :key="item">
<view class="item mb-2">
<text class="text">{{ item }}</text>
<cl-text :pt="{ className: 'text' }">{{ item }}</cl-text>
</view>
</cl-col>
</cl-row>

View File

@@ -2,7 +2,7 @@
<cl-page back-top>
<cl-sticky>
<view class="bg-primary-500 p-3 h-[40px] flex flex-row items-center">
<text class="text-white">Header</text>
<cl-text color="white">Header - 1</cl-text>
</view>
</cl-sticky>
@@ -14,7 +14,7 @@
<cl-sticky :offset-top="40">
<view class="bg-red-500 p-3 h-[40px] flex flex-row items-center">
<text class="text-white">Header - 2</text>
<cl-text color="white">Header - 2</cl-text>
</view>
</cl-sticky>
@@ -26,7 +26,7 @@
<cl-sticky :offset-top="80">
<view class="bg-purple-500 p-3 h-[40px] flex flex-row items-center">
<text class="text-white">Header - 3</text>
<cl-text color="white">Header - 3</cl-text>
</view>
</cl-sticky>

View File

@@ -37,13 +37,7 @@
</cl-list-item>
<view class="p-2">
<cl-tabs
v-model="mode"
:height="66"
:list="modeList"
show-slider
fill
></cl-tabs>
<cl-tabs v-model="mode" :height="66" :list="modeList" show-slider></cl-tabs>
</view>
</cl-list>
</demo-item>

View File

@@ -14,7 +14,7 @@
</demo-item>
<demo-item :label="t('结合按钮')">
<view class="flex flex-row pt-2">
<view class="flex flex-row overflow-visible">
<cl-button>
{{ t("购买") }}
<template #content>