feat: 登录页面demo

app.vue

@@ -1,5 +1,18 @@
 <template>
-  <div>
-    <NuxtWelcome />
+  <div class="container">
+    <NuxtPage />
   </div>
 </template>
+<script setup lang="ts">
+import './assets/var.less';
+import './assets/default.less';
+</script>
+<style lang="less" scoped>
+.container {
+  min-height: 100vh;
+  min-width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

assets/default.less

@@ -0,0 +1,4 @@
+* {
+  margin: 0;
+  padding: 0;
+}

assets/var.less

@@ -0,0 +1,8 @@
+:root {
+  --color-primary: #01579B;
+  --color-input-bg: rgba(0, 123, 221, 0.05);
+  --border-radius-m: 10px;
+  --border-radius-l: 20px;
+  --box-shadow-l: 0px 5px 30px rgba(0, 0, 0, 0.1);
+  --color-secondary: #8F8F8F;
+}

package.json

@@ -9,6 +9,8 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "nuxt": "^3.3.3"
+    "less": "^4.1.3",
+    "nuxt": "^3.3.3",
+    "typescript": "^5.0.4"
   }
 }

pages/login.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="container">
+    <header>
+      <h1>使用<strong>自强 Studio 账号</strong>登录</h1>
+      <p class="notice">使用同一个账号来登录所有的自强产品，从此无需重复输入个人信息</p>
+    </header>
+    <form @submit="submit">
+      <div class="form-item">
+        <label>用户名/手机号/学号</label>
+        <input v-model="username" placeholder="请输入用户名" />
+      </div>
+      <div class="form-item">
+        <div class="label-container">
+          <label>密码</label>
+          <a href="find"><strong>忘记密码？</strong></a>
+        </div>
+        <input v-model="password" type="password" placeholder="请输入密码" />
+      </div>
+      <button>登录</button>
+    </form>
+    <p class="action">还没有账号？<a href="/register"><strong>立即注册</strong></a></p>
+  </div>
+</template>
+<script lang="ts" setup>
+const username = ref("");
+const password = ref("");
+
+function submit(e: Event) {
+  console.log(username.value, password.value);
+  e.preventDefault();
+}
+</script>
+<style lang="less" scoped>
+.container header {
+  text-align: center;
+  margin-bottom: 20px;
+
+  h1 {
+    font-size: 28px;
+    margin-bottom: 6px;
+  }
+
+  .notice {
+    padding: 0 20px;
+    font-size: 15px;
+    color: var(--color-secondary);
+  }
+}
+
+strong,
+a {
+  color: var(--color-primary);
+}
+
+a {
+  text-decoration: none;
+}
+
+.form-item {
+  label,
+  input {
+    width: 100%;
+    display: block;
+    box-sizing: border-box;
+  }
+
+  label {
+    font-size: 13px;
+    margin-bottom: 4px;
+    font-weight: bold;
+  }
+
+  input {
+    padding: 12px 0 12px 42px;
+    border: none;
+    border-radius: var(--border-radius-m);
+    font-size: 15px;
+    background-color: var(--color-input-bg);
+  }
+
+  .label-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    white-space: nowrap;
+    font-size: 13px;
+  }
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+button {
+  margin-top: 38px;
+  width: 100%;
+  border: none;
+  border-radius: var(--border-radius-m);
+  background-color: var(--color-primary);
+  font-size: 18px;
+  padding: 8px 0;
+  color: #FFFFFF;
+}
+
+.action {
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  margin-top: 10px;
+}
+</style>