From b79b3d24493d4f7fa7c240f92d64216c99ee1b69 Mon Sep 17 00:00:00 2001
From: Amadeus <RealmeAmadeus@gmail.com>
Date: Fri, 17 May 2024 22:36:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B3=A8=E5=86=8C=E7=95=8C=E9=9D=A2=E7=BC=96?=
 =?UTF-8?q?=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 my-project-frontend/src/router/index.js       |  7 +-
 my-project-frontend/src/views/WelcomeView.vue |  7 +-
 .../src/views/welcome/LoginPage.vue           |  6 +-
 .../src/views/welcome/RegisterPage.vue        | 84 +++++++++++++++++++
 4 files changed, 96 insertions(+), 8 deletions(-)
 create mode 100644 my-project-frontend/src/views/welcome/RegisterPage.vue

diff --git a/my-project-frontend/src/router/index.js b/my-project-frontend/src/router/index.js
index 649541b..50d5ce1 100644
--- a/my-project-frontend/src/router/index.js
+++ b/my-project-frontend/src/router/index.js
@@ -14,12 +14,13 @@ const  router  = createRouter( {
                     path: '',
                     name: 'welcome-login',
                     component: () => import('@/views/welcome/LoginPage.vue')
+                },{
+                    path: 'register',
+                    name: 'welcome-register',
+                    component: () => import('@/views/welcome/RegisterPage.vue')
                 }
                 ]
         }, {
-        /*
-        添加路由
-         */
             path: '/index',
             name: 'index',
             component: () => import('@/views/IndexView.vue')
diff --git a/my-project-frontend/src/views/WelcomeView.vue b/my-project-frontend/src/views/WelcomeView.vue
index 94ab95c..2cb1335 100644
--- a/my-project-frontend/src/views/WelcomeView.vue
+++ b/my-project-frontend/src/views/WelcomeView.vue
@@ -14,7 +14,12 @@
       <div style="margin-top: 5px" >在这里你可以同性交友,因为都是男的,没有学java的女生</div>
     </div>
    <div class="right-card">
-    <router-view/>
+     <!--添加淡入淡出的效果-->
+    <router-view v-slot="{ Component }">
+      <transition name="el-fade-in-linear" mode="out-in">
+        <component :is="Component" />
+      </transition>
+    </router-view>
    </div>
   </div>
 
diff --git a/my-project-frontend/src/views/welcome/LoginPage.vue b/my-project-frontend/src/views/welcome/LoginPage.vue
index 379beff..c74e3df 100644
--- a/my-project-frontend/src/views/welcome/LoginPage.vue
+++ b/my-project-frontend/src/views/welcome/LoginPage.vue
@@ -2,9 +2,7 @@
 import { User , Lock} from '@element-plus/icons-vue'
 import {reactive, ref} from "vue";
 import {login} from "@/net";
-/*
-导入路由
- */
+
 import router from "@/router";
 
 const formRef = ref()
@@ -80,7 +78,7 @@ function userLogin(){
       <span style="font-size: 13px ; color: gray">没有账户?</span>
     </el-divider>
     <div>
-      <el-button style="width: 270px" type="warning" plain>立即注册</el-button>
+      <el-button @click="router.push('/register')" style="width: 270px" type="warning" plain>立即注册</el-button>
     </div>
 
   </div>
diff --git a/my-project-frontend/src/views/welcome/RegisterPage.vue b/my-project-frontend/src/views/welcome/RegisterPage.vue
new file mode 100644
index 0000000..e905d57
--- /dev/null
+++ b/my-project-frontend/src/views/welcome/RegisterPage.vue
@@ -0,0 +1,84 @@
+<script setup>
+import {reactive} from "vue";
+import {EditPen, Lock, Message, User} from "@element-plus/icons-vue";
+import router from "@/router";
+
+const form = reactive({
+  username: '',
+  password: '',
+  password_repeat: '',
+  email: '',
+  code: ''
+})
+
+const rule = {
+
+}
+</script>
+
+<template>
+  <div style="text-align: center;margin: 0 20px">
+    <div style="margin-top: 100px">
+      <div style="font-size: 25px; font-weight: bold">注册用户</div>
+      <div style="font-size: 14px ;  color: gray">欢迎注册我们的学习平台,请在下方填写相关信息</div>
+    </div>
+    <div style="margin-top: 50px">
+      <el-form :model="form" :rule="rule">
+        <el-form-item>
+          <el-input v-model="form.username" maxlength="10" type="text" placeholder="用户名">
+            <template #prefix >
+              <el-icon><User/></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="form.password" maxlength="10" type="password" placeholder="密码">
+            <template #prefix >
+              <el-icon><Lock/></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="form.password_repeat" maxlength="10" type="password" placeholder="重复密码">
+            <template #prefix >
+              <el-icon><Lock/></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="form.email" maxlength="10" type="email" placeholder="电子邮件地址">
+            <template #prefix >
+              <el-icon><Message/></el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-row :gutter="10" style="width: 100%;">
+            <el-col :span="17">
+              <el-input v-model="form.code" maxlength="6" type="text" placeholder="请输入验证码">
+                <template #prefix>
+                  <el-icon><EditPen/></el-icon>
+                </template>
+              </el-input>
+            </el-col>
+            <el-col :span="5">
+              <el-button type="success">获取验证码</el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="margin-top: 80px">
+      <el-button style="width: 270px" type="warning" plain>立即注册</el-button>
+    </div>
+    <div style="margin-top: 20px">
+      <span style="font-size: 15px;line-height: 15px;color: gray">已有账户?</span>
+      <el-link style="translate: 0 -1px" @click="router.push('/')">立即登录</el-link>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file