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

45
index.html
View File

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

3
src/App.vue
View File

@ -2,9 +2,11 @@
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>
<div class="page-wrapper">
<ZodForm v-if="false" /> <ZodForm v-if="false" />
<TutorialForm v-if="false" /> <TutorialForm v-if="false" />
@ -20,4 +22,5 @@ import ZodForm from './zod-form/index.vue';
<InputText id="username"></InputText> <InputText id="username"></InputText>
</FloatLabel> </FloatLabel>
</div> </div>
</div>
</template> </template>