ai创建注册页面

src/pages/login/LoginPage.vue

@@ -1,8 +1,38 @@
 <template>
-  <div class="hello">
+  <main class="login-page">
-    <el-input placeholder="请输入用户名" v-model="username" clearable> </el-input>
+    <section class="login-card">
-    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
+      <p class="eyebrow">CHAT DEMO</p>
-  </div>
+      <h1>欢迎回来</h1>
+      <p class="subtitle">登录后继续你的聊天</p>
+
+      <el-form class="login-form" @submit.native.prevent="handleLogin">
+        <el-form-item>
+          <el-input
+            v-model="username"
+            placeholder="请输入账号"
+            clearable
+            prefix-icon="el-icon-user"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="password"
+            placeholder="请输入密码"
+            show-password
+            prefix-icon="el-icon-lock"
+          ></el-input>
+        </el-form-item>
+        <el-button class="login-button" type="primary" native-type="submit">
+          登录
+        </el-button>
+      </el-form>
+
+      <p class="register-tip">
+        还没有账号？
+        <router-link to="/register">立即注册</router-link>
+      </p>
+    </section>
+  </main>
 </template>
 
 <script>
@@ -13,23 +43,92 @@ export default {
       username: '',
       password: ''
     }
+  },
+  methods: {
+    handleLogin() {
+      // 登录接口接入后在这里提交账号和密码。
+    }
   }
 };
 </script>
 
 <style scoped>
-h3 {
+.login-page {
-  margin: 40px 0 0;
+  align-items: center;
+  background: #eef5f3;
+  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(211, 235, 229, 0.75));
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
 }
-ul {
+
-  list-style-type: none;
+.login-card {
-  padding: 0;
+  background: #ffffff;
+  border: 1px solid rgba(35, 91, 80, 0.08);
+  border-radius: 8px;
+  box-shadow: 0 22px 55px rgba(35, 91, 80, 0.14);
+  max-width: 420px;
+  padding: 48px 44px 38px;
+  transform: translateY(-60px);
+  width: 100%;
 }
-li {
+
-  display: inline-block;
+.eyebrow {
-  margin: 0 10px;
+  color: #3e8b7a;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  margin-bottom: 18px;
+}
+
+h1 {
+  color: #193b37;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.subtitle {
+  color: #82948f;
+  font-size: 14px;
+  margin: 12px 0 32px;
+}
+
+.login-form :deep(.el-form-item) {
+  margin-bottom: 18px;
+}
+
+.login-form :deep(.el-input__inner) {
+  border-color: #dce8e4;
+  border-radius: 4px;
+  height: 46px;
+  margin-bottom: 10px;
+}
+
+.login-button {
+  border: 0;
+  border-radius: 4px;
+  font-size: 15px;
+  height: 46px;
+  margin-top: 4px;
+  width: 100%;
+}
+
+.register-tip {
+  color: #82948f;
+  font-size: 13px;
+  margin: 26px 0 0;
+  text-align: center;
+}
+
+.register-tip a {
+  color: #2f806f;
+  font-weight: 600;
+}
+
+@media (max-width: 480px) {
+  .login-card {
+    padding: 36px 24px 30px;
   }
-a {
-  color: #42b983;
 }
 </style>

src/pages/login/RegisterPage.vue

@@ -1,9 +1,46 @@
 <template>
-  <div class="hello">
+  <main class="register-page">
-    <el-input placeholder="请输入用户名" v-model="username" clearable> </el-input>
+    <section class="register-card">
-    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
+      <p class="eyebrow">CHAT DEMO</p>
-    <el-input placeholder="请确认密码" v-model="password2" show-password></el-input>
+      <h1>创建账号</h1>
-  </div>
+      <p class="subtitle">注册后开启你的聊天体验</p>
+
+      <el-form class="register-form" @submit.native.prevent="handleRegister">
+        <el-form-item>
+          <el-input
+            v-model="username"
+            placeholder="请输入账号"
+            clearable
+            prefix-icon="el-icon-user"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="password"
+            placeholder="请输入密码"
+            show-password
+            prefix-icon="el-icon-lock"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="password2"
+            placeholder="请确认密码"
+            show-password
+            prefix-icon="el-icon-check"
+          ></el-input>
+        </el-form-item>
+        <el-button class="register-button" type="primary" native-type="submit">
+          注册
+        </el-button>
+      </el-form>
+
+      <p class="login-tip">
+        已有账号？
+        <router-link to="/login">返回登录</router-link>
+      </p>
+    </section>
+  </main>
 </template>
 
 <script>
@@ -15,23 +52,97 @@ export default {
       password: '',
       password2: ''
     }
+  },
+  methods: {
+    handleRegister() {
+      if (this.password !== this.password2) {
+        this.$message.error('两次输入的密码不一致')
+        return
+      }
+
+      // 注册接口接入后在这里提交账号和密码。
+    }
   }
 };
 </script>
 
 <style scoped>
-h3 {
+.register-page {
-  margin: 40px 0 0;
+  align-items: center;
+  background: #eef5f3;
+  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(211, 235, 229, 0.75));
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
 }
-ul {
+
-  list-style-type: none;
+.register-card {
-  padding: 0;
+  background: #ffffff;
+  border: 1px solid rgba(35, 91, 80, 0.08);
+  border-radius: 8px;
+  box-shadow: 0 22px 55px rgba(35, 91, 80, 0.14);
+  max-width: 420px;
+  padding: 48px 44px 38px;
+  transform: translateY(-60px);
+  width: 100%;
 }
-li {
+
-  display: inline-block;
+.eyebrow {
-  margin: 0 10px;
+  color: #3e8b7a;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  margin-bottom: 18px;
+}
+
+h1 {
+  color: #193b37;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.subtitle {
+  color: #82948f;
+  font-size: 14px;
+  margin: 12px 0 32px;
+}
+
+.register-form :deep(.el-form-item) {
+  margin-bottom: 18px;
+}
+
+.register-form :deep(.el-input__inner) {
+  border-color: #dce8e4;
+  border-radius: 4px;
+  height: 46px;
+  margin-bottom: 10px;
+}
+
+.register-button {
+  border: 0;
+  border-radius: 4px;
+  font-size: 15px;
+  height: 46px;
+  margin-top: 4px;
+  width: 100%;
+}
+
+.login-tip {
+  color: #82948f;
+  font-size: 13px;
+  margin: 26px 0 0;
+  text-align: center;
+}
+
+.login-tip a {
+  color: #2f806f;
+  font-weight: 600;
+}
+
+@media (max-width: 480px) {
+  .register-card {
+    padding: 36px 24px 30px;
   }
-a {
-  color: #42b983;
 }
 </style>

src/router.js

@@ -20,7 +20,7 @@ const routes = [
     {
         path: '/register',
         name: 'RegisterPage',
-        componenr: RegisterPage
+        component: RegisterPage
     },
     {
         path: '/index',