examples/vue-formkit-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新 index.html 和 App.vue，优化页面结构和样式
All checks were successful
/ test (push) Successful in 27s
Details
/ surge (push) Successful in 41s
Details

Browse Source
This commit is contained in:
严浩
2024-12-03 22:34:56 +08:00
parent 45e5396153
commit 8be5378514
2 changed files with 76 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
index.html
View File

@ -1,35 +1,66 @@
<!doctype html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
type="image/svg+xml"
href="/vite.svg"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Vue FormKit Example</title>
<link
rel="stylesheet"
href="/src/assets/tailwind.css"
/>
<link
rel="stylesheet"
href="/src/assets/main.css"
/>
<head> <script>
<meta charset="UTF-8" /> function setAppHeight() {
<link const app = document.getElementById('app');
rel="icon" app.style.minHeight = `${window.innerHeight}px`;
type="image/svg+xml" }
href="/vite.svg"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Vue FormKit Example</title>
<link
rel="stylesheet"
href="/src/assets/tailwind.css"
>
<link
rel="stylesheet"
href="/src/assets/main.css"
>
</head> window.addEventListener('resize', setAppHeight);
window.addEventListener('load', setAppHeight);
</script>
<style>
#app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
<body> @supports (min-height: 100dvh) {
<div id="app"></div> #app {
<script min-height: 100dvh;
type="module" }
src="/src/main.ts" }
></script>
</body>
</html> .page-wrapper {
flex-grow: 1;
}
</style>
</head>
<body>
<div id="app">
<div
class="page-wrapper"
style="display: flex; justify-content: center; align-items: center"
>
Loading...
</div>
</div>
<script
type="module"
src="/src/main.ts"
></script>
</body>
</html>

27
src/App.vue
View File

@ -2,22 +2,25 @@
import AllCustom from './all-custom/all-custom.vue'; import AllCustom from './all-custom/all-custom.vue';
import TutorialForm from './tutorial-form/index.vue'; import TutorialForm from './tutorial-form/index.vue';
import ZodForm from './zod-form/index.vue'; import ZodForm from './zod-form/index.vue';
</script> </script>
<template> <template>
<ZodForm v-if="false" /> <div class="page-wrapper">
<TutorialForm v-if="false" /> <ZodForm v-if="false" />
<TutorialForm v-if="false" />
<!-- <div class="flex flex-col md:flex-row items-start p-4 gap-4"> --> <!-- <div class="flex flex-col md:flex-row items-start p-4 gap-4"> -->
<div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white"> <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white">
<AllCustom /> <AllCustom />
</div> </div>
<!-- </div> --> <!-- </div> -->
<div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white mt-4"> <div class="p-4 w-full bg-white rounded-lg shadow-md dark:bg-gray-800 dark:text-white mt-4">
<FloatLabel> <FloatLabel>
<label for="username">用户名</label> <label for="username">用户名</label>
<InputText id="username"></InputText> <InputText id="username"></InputText>
</FloatLabel> </FloatLabel>
</div>
</div> </div>
</template> </template>