添加全局字号,动态调整大小
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
v-model="direction"
|
||||
:list="directionList"
|
||||
show-slider
|
||||
fill
|
||||
:height="66"
|
||||
></cl-tabs>
|
||||
</view>
|
||||
|
||||
@@ -25,6 +25,11 @@
|
||||
className: parseClass({
|
||||
'!text-sky-700': isCustom
|
||||
})
|
||||
},
|
||||
cursor: {
|
||||
className: parseClass({
|
||||
'!bg-sky-700': isCustom
|
||||
})
|
||||
}
|
||||
}"
|
||||
@done="toDone"
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
className: 'justify-between'
|
||||
},
|
||||
item: {
|
||||
className: '!h-8 !w-8'
|
||||
className: '!h-9 !w-9'
|
||||
},
|
||||
cursor: {
|
||||
className: '!h-3'
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user