From 8bab2b01f1e26dac4629b2ee1ccb940610d89273 Mon Sep 17 00:00:00 2001
From: 62bfaa38f5bc8d75ce8dc685 <62bfaa38f5bc8d75ce8dc685@devide>
Date: Mon, 17 Apr 2023 07:57:58 +0000
Subject: [PATCH] UPDATE

---
 package.json        |   3 +
 postcss.config.js   |   6 ++
 src/App.vue         | 142 ++++++++++++++++++++++++++++++++++----------
 src/assets/base.css |   4 ++
 src/assets/main.css |  38 +-----------
 tailwind.config.js  |   9 +++
 6 files changed, 134 insertions(+), 68 deletions(-)
 create mode 100644 postcss.config.js
 create mode 100644 tailwind.config.js

diff --git a/package.json b/package.json
index aa1c7de..ab9ea71 100644
--- a/package.json
+++ b/package.json
@@ -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"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/App.vue b/src/App.vue
index 633a5df..b1e651e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
+
+  <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>
-  </header>
+  </div>
+</div>
 
-  <main>
-    <TheWelcome />
-  </main>
 </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>
diff --git a/src/assets/base.css b/src/assets/base.css
index 71dc55a..cf69402 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
   --vt-c-white: #ffffff;
diff --git a/src/assets/main.css b/src/assets/main.css
index c133f91..b5c61c9 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,35 +1,3 @@
-@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;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..a1f7cbe
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [    './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
-- 
GitLab