NCZY/WAI_Project_UNIX
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

8
pages/demo/components/item.uvue
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>

14
pages/demo/data/pagination.uvue
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>

1
pages/demo/feedback/popup.uvue
View File

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

5
pages/demo/form/input-otp.uvue
View File

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

2
pages/demo/form/keyboard.uvue
View File

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

42
pages/demo/layout/flex.uvue
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>

6
pages/demo/layout/sticky.uvue
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>

8
pages/demo/other/qrcode.uvue
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>

2
pages/demo/status/badge.uvue
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>

40
pages/index/home.uvue
View File

@@ -16,9 +16,21 @@
></cl-image>
</view>
<text class="text-xl text-primary-500 dark:!text-white mr-auto ml-2 flex-1">
<cl-text
color="primary"
:pt="{
className: '!text-xl mr-auto ml-2 flex-1'
}"
>
{{ config.name }}
</text>
</cl-text>
<view
class="bg-surface-500 h-8 w-8 rounded-full flex flex-row items-center justify-center mr-3"
@tap="setSize"
>
<cl-icon name="font-size" color="white"></cl-icon>
</view>
<view
class="bg-primary-500 h-8 w-8 rounded-full flex flex-row items-center justify-center"
@@ -34,7 +46,9 @@
<view class="p-3">
<view class="group" v-for="item in data" :key="item.label">
<text class="title dark:!text-surface-50">{{ item.label }}</text>
<cl-text :pt="{ className: '!text-sm !text-surface-400 mb-2 ml-1' }">{{
item.label
}}</cl-text>
<view class="list">
<cl-row :gutter="10">
@@ -60,18 +74,24 @@
</view>
<tabbar></tabbar>
<!-- 主题设置 -->
<locale-set :ref="refs.set('localeSet')"></locale-set>
<!-- 字体大小设置 -->
<size-set :ref="refs.set('sizeSet')"></size-set>
</cl-page>
</template>
<script lang="ts" setup>
import { isMp, router, useRefs } from "@/cool";
import LocaleSet from "@/components/locale-set.uvue";
import { t } from "@/locale";
import { computed } from "vue";
import Tabbar from "@/components/tabbar.uvue";
import { useUi } from "@/uni_modules/cool-ui";
import { config } from "@/config";
import LocaleSet from "@/components/locale-set.uvue";
import SizeSet from "@/components/size-set.uvue";
import Tabbar from "@/components/tabbar.uvue";
const ui = useUi();
const refs = useRefs();
@@ -414,20 +434,20 @@ function toPath(item: Item) {
function setLocale() {
refs.open("localeSet");
}
function setSize() {
refs.open("sizeSet");
}
</script>
<style lang="scss" scoped>
.group {
@apply mb-10;
.title {
@apply text-sm mb-2 ml-1 text-surface-500;
}
.list {
.item {
@apply flex flex-col items-center;
@apply rounded-xl bg-white p-2;
@apply rounded-xl bg-white px-2;
height: 140rpx;
margin-bottom: 10rpx;
padding-top: 36rpx;

14
pages/index/my.uvue
View File

@@ -1,6 +1,12 @@
<template>
<cl-page>
<cl-topbar fixed :show-back="false" safe-area-top background-color="transparent">
<cl-topbar
fixed
:height="100"
:show-back="false"
safe-area-top
background-color="transparent"
>
<view class="flex flex-row items-center w-full flex-1 px-3">
<view class="top-icon dark:!bg-surface-700" @tap="toSet">
<cl-icon name="settings-line"></cl-icon>
@@ -30,7 +36,7 @@
</view>
</view>
<view class="flex-1 flex flex-col justify-center items-center" @tap="toEdit">
<view class="flex-1 flex flex-col justify-center items-center w-full" @tap="toEdit">
<cl-text :pt="{ className: '!text-xl mt-5 mb-1 font-bold' }">{{
user.info.nickName ?? t("未登录")
}}</cl-text>
@@ -264,8 +270,6 @@ onReady(() => {
<style lang="scss" scoped>
.top-icon {
@apply flex items-center justify-center rounded-lg bg-white mr-3;
height: 50rpx;
width: 50rpx;
@apply flex items-center justify-center rounded-lg bg-white mr-3 p-2;
}
</style>

27
pages/user/login.uvue
View File

@@ -3,6 +3,7 @@
<cl-topbar safe-area-top background-color="transparent"></cl-topbar>
<view class="px-10">
<!-- Logo -->
<view class="flex flex-col items-center justify-center py-20">
<view class="p-3 bg-primary-500 rounded-2xl">
<cl-image
@@ -16,9 +17,13 @@
<cl-text :pt="{ className: '!text-xl font-bold mt-3' }">{{ config.name }}</cl-text>
</view>
<!-- 手机号登录 -->
<login-phone :form="form" @success="toLogin"></login-phone>
<!-- 微信登录 -->
<login-wx :ref="refs.set('loginWx')" @success="toLogin"></login-wx>
<!-- 协议 -->
<view class="mt-6 flex flex-row flex-wrap items-center justify-center">
<cl-checkbox
v-model="agree"
@@ -45,17 +50,19 @@
</cl-text>
</view>
<!-- 第三方登录 -->
<view class="flex flex-row justify-center mt-10 px-10">
<view
class="mx-5flex items-center justify-center h-10 w-10 rounded-full bg-white dark:bg-surface-700 border border-solid border-surface-100 dark:border-surface-600"
class="login-item"
:class="{
'is-dark': isDark
}"
@tap="refs.callMethod('loginWx', 'login')"
>
<cl-icon name="wechat-fill" :size="38" color="#00b223"></cl-icon>
</view>
<view
class="mx-5 flex items-center justify-center h-10 w-10 rounded-full bg-white dark:bg-surface-700 border border-solid border-surface-100 dark:border-surface-600"
>
<view class="login-item" :class="{ 'is-dark': isDark }">
<cl-icon name="apple-fill" :size="38"></cl-icon>
</view>
</view>
@@ -65,7 +72,7 @@
<script setup lang="ts">
import { config } from "@/config";
import { parse, router, useRefs, useStore, type Token } from "@/cool";
import { isDark, parse, router, useRefs, useStore, type Token } from "@/cool";
import { t } from "@/locale";
import { provide, reactive, ref } from "vue";
import type { LoginForm } from "./types";
@@ -110,3 +117,13 @@ function isAgree() {
provide("isAgree", isAgree);
</script>
<style lang="scss" scoped>
.login-item {
@apply mx-2 p-2 flex items-center justify-center rounded-full bg-white border border-solid border-surface-100;
&.is-dark {
@apply border-surface-600 bg-surface-700;
}
}
</style>