diff --git a/frontend-h5/src/views/Login.vue b/frontend-h5/src/views/Login.vue
index 644cf3f..7b0e633 100644
--- a/frontend-h5/src/views/Login.vue
+++ b/frontend-h5/src/views/Login.vue
@@ -1,2 +1,55 @@
-<script setup>defineOptions({ name: 'Login' })</script>
-<template><div class="p-4">Login 占位</div></template>
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/store/auth'
+import { useToast } from '@/composables/useToast'
+
+defineOptions({ name: 'Login' })
+const auth = useAuthStore()
+const route = useRoute()
+const router = useRouter()
+const { show } = useToast()
+
+const username = ref('')
+const password = ref('')
+const loading = ref(false)
+
+const submit = async () => {
+  if (!username.value || !password.value) {
+    show('请输入账号和密码', 'error')
+    return
+  }
+  loading.value = true
+  try {
+    await auth.login({ username: username.value, password: password.value })
+    const redirect = route.query.redirect || '/'
+    router.replace(redirect)
+  } catch (e) {
+    show(e?.response?.data?.detail || '登录失败', 'error')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="min-h-screen flex flex-col bg-surface">
+    <div class="flex-[0.55] flex items-end justify-center pb-10">
+      <div class="text-center">
+        <div class="w-16 h-16 mx-auto rounded-2xl bg-brand text-white text-3xl font-bold flex items-center justify-center">材</div>
+        <h1 class="mt-4 text-xl font-semibold">材料浏览</h1>
+        <p class="mt-1 text-sm text-muted">登录后查看材料库</p>
+      </div>
+    </div>
+    <div class="flex-[0.45] px-6 space-y-3">
+      <input v-model="username" placeholder="账号"
+        class="w-full h-12 px-4 rounded-card bg-surface-alt border border-line focus:border-brand outline-none" />
+      <input v-model="password" type="password" placeholder="密码"
+        class="w-full h-12 px-4 rounded-card bg-surface-alt border border-line focus:border-brand outline-none" />
+      <button :disabled="loading" @click="submit"
+        class="w-full h-12 rounded-card bg-brand text-white text-base font-medium active:bg-brand-dark disabled:opacity-60">
+        {{ loading ? '登录中…' : '登录' }}
+      </button>
+    </div>
+  </div>
+</template>