hookehuyr

feat: 添加 Tailwind 测试页面

...@@ -27,6 +27,7 @@ export default { ...@@ -27,6 +27,7 @@ export default {
27 'pages/weakNetwork/index', 27 'pages/weakNetwork/index',
28 'pages/offlineBookingCode/index', 28 'pages/offlineBookingCode/index',
29 'pages/nfcTest/index', 29 'pages/nfcTest/index',
30 + 'pages/tailwindTest/index',
30 ], 31 ],
31 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去 32 subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
32 { 33 {
......
1 +/*
2 + * @Date: 2026-01-12 22:53:54
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2026-01-12 22:53:55
5 + * @FilePath: /xyxBooking-weapp/src/pages/tailwindTest/index.config.js
6 + * @Description: 文件描述
7 + */
8 +export default {
9 + navigationBarTitleText: 'Tailwind 测试'
10 +}
1 +<template>
2 + <view class="min-h-screen bg-gray-100 p-4">
3 + <view class="mb-4 rounded-xl bg-white p-4 shadow">
4 + <text class="text-lg font-semibold text-gray-900">Tailwind 样式测试页</text>
5 + <text class="mt-1 block text-sm text-gray-500">下方颜色/布局生效则表示 Tailwind 可用</text>
6 + </view>
7 +
8 + <view class="mb-4 flex items-center justify-between rounded-xl bg-white p-4 shadow">
9 + <view class="flex items-center">
10 + <view class="mr-3 h-10 w-10 rounded-full bg-amber-600"></view>
11 + <view>
12 + <text class="block text-base font-medium text-gray-900">Flex 对齐</text>
13 + <text class="block text-xs text-gray-500">左侧应为琥珀色圆点</text>
14 + </view>
15 + </view>
16 + <view class="rounded-full bg-emerald-100 px-3 py-1">
17 + <text class="text-xs font-semibold text-emerald-700">OK</text>
18 + </view>
19 + </view>
20 +
21 + <view class="mb-4 rounded-xl bg-white p-4 shadow">
22 + <text class="mb-3 block text-sm font-medium text-gray-900">颜色与圆角</text>
23 + <view class="flex items-center">
24 + <view class="mr-2 h-8 w-8 rounded bg-red-500"></view>
25 + <view class="mr-2 h-8 w-8 rounded bg-orange-500"></view>
26 + <view class="mr-2 h-8 w-8 rounded bg-yellow-500"></view>
27 + <view class="mr-2 h-8 w-8 rounded bg-green-500"></view>
28 + <view class="mr-2 h-8 w-8 rounded bg-blue-500"></view>
29 + <view class="h-8 w-8 rounded bg-purple-500"></view>
30 + </view>
31 + </view>
32 +
33 + <view class="mb-4 rounded-xl bg-white p-4 shadow">
34 + <text class="mb-3 block text-sm font-medium text-gray-900">间距与边框</text>
35 + <view class="rounded-lg border border-gray-200 bg-white p-4">
36 + <view class="mb-2 flex items-center justify-between">
37 + <text class="text-sm text-gray-700">padding / border</text>
38 + <text class="text-xs text-gray-400">p-4 + border</text>
39 + </view>
40 + <view class="h-2 w-full rounded bg-gray-200">
41 + <view class="h-2 w-2/3 rounded bg-amber-600"></view>
42 + </view>
43 + </view>
44 + </view>
45 +
46 + <view class="rounded-xl bg-gray-900 p-4">
47 + <text class="block text-xs text-white">text-white + bg-gray-900</text>
48 + <text class="mt-1 block text-xs text-gray-300">如果这里是深色背景白字,Tailwind 生效</text>
49 + </view>
50 +
51 + <view class="mt-6 rounded-xl bg-amber-600 py-3 text-center" @tap="go_back">
52 + <text class="text-sm font-semibold text-white">返回</text>
53 + </view>
54 + </view>
55 +</template>
56 +
57 +<script setup>
58 +import Taro from '@tarojs/taro'
59 +
60 +const go_back = () => {
61 + const pages = Taro.getCurrentPages && Taro.getCurrentPages()
62 + if (pages && pages.length > 1) {
63 + Taro.navigateBack({ delta: 1 })
64 + return
65 + }
66 + Taro.redirectTo({ url: '/pages/index/index' })
67 +}
68 +</script>