feat: 美化

src/router/index.ts

@@ -15,7 +15,7 @@ const router = createRouter({
     {
       path: '/register',
       name: 'register', 
-      component: () => import('../views/LoginPage/component/Register.vue')
+      component: () => import('../views/LoginPage/RegisterPage.vue')
     },
     {
       path: '/course',

src/views/LoginPage/RegisterPage.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="login-container">
+      <div class="container-box">
+        <div class="login-logo">
+          <div class="logo-image">
+            <img src="../LoginPage/seecoderLogo.png" alt="logo" width="400vh">
+          </div>
+        </div>
+        <div class="login-box">
+          <div class="register-box-content">
+            <Register />
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+
+<script lang="ts" setup>
+import "./index.scss"
+import Register from "@/views/LoginPage/component/Register.vue";
+
+
+</script>
+
+<script lang="ts">
+export default {
+    name: "RegisterPage"
+}
+</script>

src/views/LoginPage/component/Register.vue

@@ -1,180 +1,187 @@
 <!-- 注册页面 -->
-    <!-- 姓名 密码 重复密码 南大官邮 验证码 南大学号 角色（选择卡） -->
-     <!-- TODO:验证码 美化 后端提交  -->
+<!-- 姓名 密码 重复密码 南大官邮 验证码 南大学号 角色（选择卡） -->
+<!-- TODO:验证码 美化 后端提交  -->
 <template>
-  <div style="background-color: #8e8e8e; padding: 20px; width: 600px; border-radius: 5px; margin: 20px auto">
-    <!--角色-->
-    <el-form
-        :rules="userRules"
-        :model="userRegisterDTO"
-        ref="formRef"
-        :size="formSize"
-    >
-      <el-form-item label="角色" prop="role">
-        <el-select v-model="userRegisterDTO.role" placeholder="请选择角色">
-          <el-option
-              v-for="item in roleOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-              :disabled="item.disabled"
-          />
-        </el-select>
-      </el-form-item>
-
-      <!--姓名-->
-      <el-form-item label="姓名" prop="name">
-        <el-input v-model="userRegisterDTO.name" placeholder="请输入真实姓名"></el-input>
-      </el-form-item>
-
-      <!--学号-->
-      <el-form-item label="学号" prop="officialNumber">
-        <el-input v-model="userRegisterDTO.officialNumber" placeholder="请输入学号"></el-input>
-      </el-form-item>
-
-      <!--邮箱-->
-      <el-form-item label="邮箱" prop="officialEmail">
-        <el-input v-model="userRegisterDTO.officialEmail" placeholder="请输入邮箱"></el-input>
-      </el-form-item>
-
-      <!--密码-->
-      <el-form-item label="密码" prop="password">
-        <el-input v-model="userRegisterDTO.password" placeholder="请输入密码" show-password></el-input>
-      </el-form-item>
-
-      <!--输入验证码-->
-      <!--TODO:发送验证码按钮和输入框在一起，参考登录界面-->
-      <el-form-item label="输入验证码" prop="verifyCode">
-        <el-input v-model="userRegisterDTO.verifyCode" placeholder="输入验证码"></el-input>
-      </el-form-item>
-
-      <el-button @click="sendVerifyCode">发送验证码</el-button>
-      <el-button @click="register(formRef)">注册</el-button>
-    </el-form>
+  <div class="login-style">
+    <div class="box-vessel">
+
+      <!-- <div style="background-color: #8e8e8e; padding: 20px; width: 600px; border-radius: 5px; margin: 20px auto"> -->
+
+      <div class="vessel-title">
+        欢迎注册SEEAI平台账号
+      </div>
+      <!--角色-->
+      <el-form :rules="userRules" :model="userRegisterDTO" ref="formRef" :size="formSize">
+        <el-form-item label="账号角色" prop="role">
+          <el-select v-model="userRegisterDTO.role" placeholder="请选择注册账号的角色">
+            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value"
+              :disabled="item.disabled" />
+          </el-select>
+        </el-form-item>
+
+        <!--姓名-->
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="userRegisterDTO.name" placeholder="请输入真实姓名"></el-input>
+        </el-form-item>
+
+        <!--学号-->
+        <el-form-item label="学号" prop="officialNumber">
+          <el-input v-model="userRegisterDTO.officialNumber" placeholder="请输入您的南大学号或工号"></el-input>
+        </el-form-item>
+
+        <!--邮箱-->
+        <el-form-item label="邮箱" prop="officialEmail">
+          <el-input v-model="userRegisterDTO.officialEmail" placeholder="例：5202024320xxx@smail.nju.edu.cn"></el-input>
+        </el-form-item>
+
+        <!--密码-->
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="userRegisterDTO.password" placeholder="请输入密码" show-password></el-input>
+        </el-form-item>
+
+        <!--输入验证码-->
+        <!--TODO:发送验证码按钮和输入框在一起，参考登录界面-->
+        <div class="verify-code">
+          <el-form-item label="验证码" prop="verifyCode" class="form-item">
+            <el-input v-model="userRegisterDTO.verifyCode" placeholder="输入验证码"></el-input>
+          </el-form-item>
+          <el-button @click="sendVerifyCode"  class="button">发送验证码</el-button>
+        </div>
+
+        <div style="display: flex; justify-content: center; align-items: center;">
+          <el-button @click="register(formRef)"  class="login-button" >注册</el-button>
+        </div>
+        
+      </el-form>
+
+    </div>
+
   </div>
 
 
+
 </template>
 
 <script lang="ts" setup>
-  import type {UserRegisterDTO} from "@/types/dto";
-  import {reactive, ref} from "vue";
-  import useApis from "@/apis";
-  import {Role} from "@/types/enums";
-  import {type ComponentSize, ElMessage, type FormInstance, type FormRules} from "element-plus";
-  import {useRoute} from "vue-router";
-  import router from "@/router";
-
-  const apis = useApis()
-  let userRegisterDTO = reactive<UserRegisterDTO>({} as UserRegisterDTO)
-
-  const roleOptions = [
+import "./index.scss";
+import type { UserRegisterDTO } from "@/types/dto";
+import { reactive, ref } from "vue";
+import useApis from "@/apis";
+import { Role } from "@/types/enums";
+import { type ComponentSize, ElMessage, type FormInstance, type FormRules } from "element-plus";
+import { useRoute } from "vue-router";
+import router from "@/router";
+
+const apis = useApis()
+let userRegisterDTO = reactive<UserRegisterDTO>({} as UserRegisterDTO)
+
+const roleOptions = [
+  {
+    label: "学生",
+    value: Role.STUDENT,
+    disabled: false
+  },
+  {
+    label: "教师",
+    value: Role.TEACHER,
+    disabled: true
+  },
+  {
+    label: "管理员",
+    value: Role.ADMIN,
+    disabled: true
+  }
+]
+
+const formSize = ref<ComponentSize>('default')
+const formRef = ref<FormInstance>()
+const userRules = reactive<FormRules<UserRegisterDTO>>({
+  role: [
     {
-      label: "学生",
-      value: Role.STUDENT,
-      disabled: false
-    },
+      required: true,
+      message: "角色不能为空",
+      trigger: 'change'
+    }
+  ],
+  name: [
+    {
+      required: true,
+      message: "姓名不能为空",
+      trigger: 'blur'
+    }
+  ],
+  officialNumber: [
     {
-      label: "教师",
-      value: Role.TEACHER,
-      disabled: true
-    },
+      required: true,
+      message: "学号不能为空",
+      trigger: 'blur'
+    }
+  ],
+  officialEmail: [
     {
-      label: "管理员",
-      value: Role.ADMIN,
-      disabled: true
+      required: true,
+      message: "邮箱不能为空",
+      trigger: 'blur'
+    }
+  ],
+  password: [
+    {
+      required: true,
+      message: "密码不能为空",
+      trigger: 'blur'
+    }
+  ],
+  verifyCode: [
+    {
+      required: true,
+      message: "验证码不能为空",
+      trigger: 'blur'
     }
   ]
-
-  const formSize = ref<ComponentSize>('default')
-  const formRef = ref<FormInstance>()
-  const userRules = reactive<FormRules<UserRegisterDTO>>({
-    role:[
-      {
-        required: true,
-        message: "角色不能为空",
-        trigger: 'change'
-      }
-    ],
-    name: [
-      {
-        required: true,
-        message: "姓名不能为空",
-        trigger: 'blur'
-      }
-    ],
-    officialNumber: [
-      {
-        required: true,
-        message: "学号不能为空",
-        trigger: 'blur'
-      }
-    ],
-    officialEmail: [
-      {
-        required: true,
-        message: "邮箱不能为空",
-        trigger: 'blur'
-      }
-    ],
-    password: [
-      {
-        required: true,
-        message: "密码不能为空",
-        trigger: 'blur'
-      }
-    ],
-    verifyCode: [
-      {
-        required: true,
-        message: "验证码不能为空",
-        trigger: 'blur'
-      }
-    ]
-  })
-
-  const register = async (formEl: FormInstance | undefined) => {
-    if (!formEl) return
-    await formEl.validate((valid, fields) => {
-      if (valid) {
-        console.log("合法输入")
-        apis.register(userRegisterDTO)
-            .then((res: any) => {
-              router.push(`/login`)
-            })
-            .catch((err: any) => {
-              console.error(err);
-            })
-            .finally(() => {
-            });
-      } else {
-        ElMessage({
-          message: '请将信息填写完整',
-          type: 'warning',
-        })
-      }
-    })
-
-  }
-
-  const sendVerifyCode = () => {
-    apis.sendVerifyCode(userRegisterDTO.officialEmail)
+})
+
+const register = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log("合法输入")
+      apis.register(userRegisterDTO)
         .then((res: any) => {
-          ElMessage({
-            message: '验证码发送成功',
-            type: 'success',
-          })
+          router.push(`/login`)
         })
         .catch((err: any) => {
-          ElMessage({
-            message: '验证码发送失败',
-            type: 'error',
-          })
-          console.log(err)
+          console.error(err);
         })
         .finally(() => {
         });
-  }
+    } else {
+      ElMessage({
+        message: '请将信息填写完整',
+        type: 'warning',
+      })
+    }
+  })
+
+}
+
+const sendVerifyCode = () => {
+  apis.sendVerifyCode(userRegisterDTO.officialEmail)
+    .then((res: any) => {
+      ElMessage({
+        message: '验证码发送成功',
+        type: 'success',
+      })
+    })
+    .catch((err: any) => {
+      ElMessage({
+        message: '验证码发送失败',
+        type: 'error',
+      })
+      console.log(err)
+    })
+    .finally(() => {
+    });
+}
 </script>
 
 <script lang="ts">

src/views/LoginPage/component/index.scss

@@ -36,9 +36,24 @@
 
     .sign {
       text-align: center;
-      font-size: 12px;
+      font-size: 16px;
       color: #8e8e8e;
       cursor: pointer;
     }
+
+    .verify-code {
+      display: flex;
+      align-items: center; /* 垂直居中 */
+      justify-content: space-between; /* 两端对齐 */
+    }
+    
+    .form-item {
+      flex: 1; /* 让表单项占据剩余空间 */
+      margin-right: 10px; /* 给表单项和按钮之间添加一些间距 */
+    }
+    
+    .button {
+      white-space: nowrap; /* 防止按钮文本换行 */
+    }
   }
 }

src/views/LoginPage/index.scss

@@ -43,6 +43,18 @@
     .login-box {
       @extend .size-width-100;
       position: relative;
+      .register-box-content {
+        position: absolute;
+        width: 450px;
+        @extend .position-center-center;
+        border: solid 1px var(--boder-color);
+        border-radius: 7px;
+        height: 450px;
+        display: flex;
+        flex-direction: column;
+
+
+      }
 
       .box-content {
         position: absolute;
@@ -81,6 +93,7 @@
         text-align: center;
         font-size: 20px;
       }
+
     }
   }
 }