feat: 添加登录页面样式和布局

实现登录页面的HTML结构和CSS样式，包括表单输入框和按钮的交互效果

src/app/app.component.css

@@ -7,4 +7,73 @@ h1 {
 p {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 150%;
+}
+
+.login-container {
+  max-width: 340px;
+  margin: 60px auto;
+  padding: 32px 24px;
+  background: #fff;
+  border-radius: 24px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.app-title {
+  font-size: 2rem;
+  font-weight: 600;
+  margin-bottom: 32px;
+  color: #222;
+  letter-spacing: 2px;
+}
+
+.login-form {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.input-group label {
+  font-size: 0.95rem;
+  color: #555;
+}
+
+.input-group input {
+  padding: 10px 12px;
+  border: 1px solid #e5e5ea;
+  border-radius: 12px;
+  font-size: 1rem;
+  background: #f7f7fa;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.input-group input:focus {
+  border-color: #007aff;
+}
+
+.login-btn {
+  padding: 12px 0;
+  background: linear-gradient(90deg, #007aff 60%, #34c759 100%);
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 500;
+  border: none;
+  border-radius: 16px;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0,122,255,0.08);
+  transition: background 0.2s;
+}
+
+.login-btn:hover {
+  background: linear-gradient(90deg, #0051a8 60%, #28a745 100%);
 }

src/app/app.component.html

@@ -1,4 +1,14 @@
-<h1>{{ title }}</h1>
-<div>
-  <p>Welcome to your Angular application!</p>
+<div class="login-container">
+  <h1 class="app-title">法言桥</h1>
+  <form class="login-form">
+    <div class="input-group">
+      <label for="username">用户名</label>
+      <input id="username" type="text" placeholder="请输入用户名" />
+    </div>
+    <div class="input-group">
+      <label for="password">密码</label>
+      <input id="password" type="password" placeholder="请输入密码" />
+    </div>
+    <button type="submit" class="login-btn">登录</button>
+  </form>
 </div>