root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加 Tailwind CSS 配置并优化组件样式

Browse Source
This commit is contained in:
Seven
2025-12-14 20:31:52 +07:00
parent 3b13a23982
commit 9d6bceb6cd
6 changed files with 69 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/theme/index.css
View File

@@ -1 +1,2 @@
@import "tailwindcss";
@config "../../tailwind.config.ts";

14
src/views/user/components/recharge-channel.vue
View File

@@ -12,27 +12,27 @@ async function handleFiatRecharge() {
</script>
<template>
<div class="w-full h-200px p-20px flex justify-center flex-col gap-30px">
<div class="flex items-center gap-10px">
<div class="w-full h-50 p-5 flex justify-center flex-col gap-7.5">
<div class="flex items-center gap-2.5">
<i-ic-baseline-downloading class="text-2xl" />
<ion-label class="flex-1">
<h2>Chain recharge</h2>
<p class="w-80% text-sm">
<p class="w-[80%] text-sm">
Transfer crypto from on-chain wallet or exchange.
</p>
</ion-label>
<i-ic-round-arrow-forward-ios class="ml-auto color-text-400" />
<i-ic-round-arrow-forward-ios class="ml-auto text-text-400" />
</div>
<div class="flex items-center gap-10px" @click="handleFiatRecharge">
<div class="flex items-center gap-2.5" @click="handleFiatRecharge">
<i-ic-baseline-data-saver-off class="text-2xl" />
<ion-label class="flex-1">
<h2>Fiat currency</h2>
<p class="w-80% text-sm">
<p class="w-[80%] text-sm">
Transfer fiat currency through bank or other financial institutions.
</p>
</ion-label>
<i-ic-round-arrow-forward-ios class="ml-auto color-text-400" />
<i-ic-round-arrow-forward-ios class="ml-auto text-text-400" />
</div>
</div>
</template>

2
src/views/withdraw/index.vue
View File

@@ -66,7 +66,7 @@ async function onSubmit() {
</ion-toolbar>
</IonHeader>
<IonContent :fullscreen="true" class="ion-padding">
<div class="flex flex-col gap-20px">
<div class="flex flex-col gap-5">
<ion-radio-group v-model="form.assetCode" @ion-change="handleCurrentChange">
<ion-label class="text-sm">
Choose Currency

59
tailwind.config.ts Normal file
View File

@@ -0,0 +1,59 @@
import type { Config } from "tailwindcss";
const config: Config = {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
primary: "var(--ion-color-primary)",
secondary: "var(--ion-color-secondary)",
tertiary: "var(--ion-color-tertiary)",
success: "var(--ion-color-success)",
warning: "var(--ion-color-warning)",
danger: "var(--ion-color-danger)",
light: "var(--ion-color-light)",
medium: "var(--ion-color-medium)",
dark: "var(--ion-color-dark)",
text: {
50: "var(--ion-text-color-step-50)",
100: "var(--ion-text-color-step-100)",
150: "var(--ion-text-color-step-150)",
200: "var(--ion-text-color-step-200)",
250: "var(--ion-text-color-step-250)",
300: "var(--ion-text-color-step-300)",
350: "var(--ion-text-color-step-350)",
400: "var(--ion-text-color-step-400)",
450: "var(--ion-text-color-step-450)",
500: "var(--ion-text-color-step-500)",
550: "var(--ion-text-color-step-550)",
600: "var(--ion-text-color-step-600)",
650: "var(--ion-text-color-step-650)",
700: "var(--ion-text-color-step-700)",
750: "var(--ion-text-color-step-750)",
800: "var(--ion-text-color-step-800)",
850: "var(--ion-text-color-step-850)",
900: "var(--ion-text-color-step-900)",
},
},
},
},
plugins: [
function ({ addUtilities }) {
addUtilities({
".flex-center": {
"display": "flex",
"align-items": "center",
"justify-content": "center",
},
".flex-col-center": {
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"justify-content": "center",
},
});
},
],
};
export default config;

2
tsconfig.node.json
View File

@@ -10,5 +10,5 @@
},
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
"include": ["vite.config.ts", "tailwind.config.ts"]
}

58
uno.config.ts
View File

@@ -1,58 +0,0 @@
import { presetWind4 } from "@unocss/preset-wind4";
import {
defineConfig,
presetIcons,
transformerDirectives,
transformerVariantGroup,
} from "unocss";
export default defineConfig({
presets: [
presetWind4(),
presetIcons(),
],
transformers: [
transformerDirectives({
applyVariable: ["--at-apply", "--uno-apply", "--uno"],
}),
transformerVariantGroup(),
],
shortcuts: {
"flex-center": "flex items-center justify-center",
"flex-col-center": "flex flex-col items-center justify-center",
},
// 为 Ionic 添加 CSS 变量支持
theme: {
colors: {
primary: "var(--ion-color-primary)",
secondary: "var(--ion-color-secondary)",
tertiary: "var(--ion-color-tertiary)",
success: "var(--ion-color-success)",
warning: "var(--ion-color-warning)",
danger: "var(--ion-color-danger)",
light: "var(--ion-color-light)",
medium: "var(--ion-color-medium)",
dark: "var(--ion-color-dark)",
text: {
50: "var(--ion-text-color-step-50)",
100: "var(--ion-text-color-step-100)",
150: "var(--ion-text-color-step-150)",
200: "var(--ion-text-color-step-200)",
250: "var(--ion-text-color-step-250)",
300: "var(--ion-text-color-step-300)",
350: "var(--ion-text-color-step-350)",
400: "var(--ion-text-color-step-400)",
450: "var(--ion-text-color-step-450)",
500: "var(--ion-text-color-step-500)",
550: "var(--ion-text-color-step-550)",
600: "var(--ion-text-color-step-600)",
650: "var(--ion-text-color-step-650)",
700: "var(--ion-text-color-step-700)",
750: "var(--ion-text-color-step-750)",
800: "var(--ion-text-color-step-800)",
850: "var(--ion-text-color-step-850)",
900: "var(--ion-text-color-step-900)",
},
},
},
});