hunk-2025-02-28 10:35:09

src/views/login.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100/50">
+    <div class="container mx-auto px-4">
+      <!-- Login Form -->
+      <div class="max-w-md mx-auto mt-12 bg-white rounded-lg shadow-lg p-8">
+        <h2 class="text-3xl font-bold text-center mb-2 text-blue-600">
+          登录
+        </h2>
+        <p class="text-center text-gray-600 mb-8">请输入您的账号和密码</p>
+
+        <form @submit.prevent="handleSubmit">
+          <div class="space-y-6">
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
+              <input
+                  v-model="form.username"
+                  type="text"
+                  placeholder="请输入"
+                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
+              <input
+                  v-model="form.password"
+                  type="password"
+                  placeholder="请输入"
+                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+
+            <div class="flex items-center justify-between">
+              <label class="flex items-center">
+                <input
+                    v-model="form.remember"
+                    type="checkbox"
+                    class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                />
+                <span class="ml-2 text-sm text-gray-600">记住我</span>
+              </label>
+              <a href="#" class="text-sm text-blue-600 hover:text-blue-700">忘记密码?</a>
+            </div>
+
+            <button
+                type="submit"
+                class="w-full bg-[#2563EB] text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            >
+              登录
+            </button>
+          </div>
+        </form>
+
+        <div v-if="errorMessage" class="mt-4 text-red-500 text-center">
+          {{ errorMessage }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const form = ref({
+  username: '',
+  password: '',
+  remember: false
+})
+
+const errorMessage = ref('')
+
+const handleSubmit = () => {
+  if (form.value.username === 'admin' && form.value.password === 'admin') {
+    router.push('/')
+  } else {
+    errorMessage.value = '账号或密码错误'
+  }
+}
+</script>
+
+<style scoped>
+/* Add any additional custom styles here if needed */
+</style>