Skip to content

V
VueJS

TPEngineer / VueJS
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 3
Fork 3
V
VueJS
提交 8bab2b01 编写于 作者: 6 62bfaa38f5bc8d75ce8dc685
浏览文件
操作

UPDATE

上级 4f39fc67
显示空白变更内容
内联 并排
Showing with 134 addition and 68 deletion
package.json
浏览文件 @ 8bab2b01
......@@ -12,6 +12,9 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.1",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.22",
"tailwindcss": "^3.3.1",
"vite": "^3.0.1"
}
}
postcss.config.js 0 → 100644
浏览文件 @ 8bab2b01
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
src/App.vue
浏览文件 @ 8bab2b01
......@@ -4,44 +4,120 @@ import TheWelcome from './components/TheWelcome.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<!-- 使用Tailwind CSS v2.1.2 -->
<!-- 需要引入Tailwind的CSS文件 -->
<div class="wrapper">
<HelloWorld msg="You did it!" />
<!-- 表单页面内容 -->
<div class="min-h-screen bg-gray-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div class="sm:mx-auto sm:w-full sm:max-w-md">
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
报名表单
</h2>
</div>
</header>
<main>
<TheWelcome />
</main>
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div class="bg-white py-8 px-4 shadow rounded-lg sm:px-10">
<form class="space-y-6" action="#" method="POST">
<div>
<label for="name" class="block text-sm font-medium text-gray-700">
姓名
</label>
<div class="mt-1">
<input id="name" name="name" type="text" autocomplete="name" required
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
>
</div>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700">
手机号
</label>
<div class="mt-1">
<input id="phone" name="phone" type="text" autocomplete="tel" required
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
pattern="^1[3|4|5|7|8][0-9]{9}$"
>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">性别</label>
<div class="mt-2">
<div>
<label for="gender_male" class="inline-flex items-center">
<input id="gender_male" type="radio" name="gender" value="male"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
>
<span class="ml-2 text-gray-900">男</span>
</label>
</div>
<div class="mt-2">
<label for="gender_female" class="inline-flex items-center">
<input id="gender_female" type="radio" name="gender" value="female"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
>
<span class="ml-2 text-gray-900">女</span>
</label>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">
兴趣爱好
</label>
<div class="mt-2 space-y-2">
<div>
<label for="interest_music" class="inline-flex items-center">
<input id="interest_music" type="checkbox" name="interests[]" value="music"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
>
<span class="ml-2 text-gray-900">音乐</span>
</label>
</div>
<div>
<label for="interest_reading" class="inline-flex items-center">
<input id="interest_reading" type="checkbox" name="interests[]" value="reading"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
>
<span class="ml-2 text-gray-900">阅读</span>
</label>
</div>
<div>
<label for="interest_travelling" class="inline-flex items-center">
<input id="interest_travelling" type="checkbox" name="interests[]" value="travelling"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
>
<span class="ml-2 text-gray-900">旅游</span>
</label>
</div>
</div>
</div>
<div>
<label for="about" class="block text-sm font-medium text-gray-700">
个人介绍
</label>
<div class="mt-1">
<textarea id="about" name="about" rows="3"
class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
></textarea>
</div>
<p class="mt-2 text-sm text-gray-500">
简要介绍自己的兴趣爱好或者其他信息。
</p>
</div>
<div>
<button
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
提交
</button>
</div>
</form>
</div>
</div>
</div>
</template>
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
src/assets/base.css
浏览文件 @ 8bab2b01
@tailwind base;
@tailwind components;
@tailwind utilities;
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
......
src/assets/main.css
浏览文件 @ 8bab2b01
@import "./base.css";
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js 0 → 100644
浏览文件 @ 8bab2b01
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [ './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或