完成了注册页面的绘制，在登录和注册界面上分别添加了相互跳转的链接。

注册了注册页面的路由

src/router/authentication.js

@@ -1,10 +1,10 @@
 // ！！！这是一个示例，请根据实际情况修改！！！
 import Login from '../views/authentication/Login.vue'
-// import Register from '../views/authentication/Register.vue'
+import Register from '../views/authentication/Register.vue'
 // import Profile from '../views/authentication/Profile.vue'
 
 export default [
     { path: '/login', component: Login },
-    // { path: '/register', component: Register },
+    { path: '/register', component: Register },
     // { path: '/profile', component: Profile }
 ]

src/views/authentication/Login.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { ref } from 'vue';
+import { ElInput, ElButton, ElCheckbox, ElForm, ElFormItem } from 'element-plus';
+import 'element-plus/dist/index.css';
 
 const username = ref('');
 const password = ref('');
@@ -15,25 +17,29 @@ const handleLogin = () => {
   <div class="login-container">
     <div class="login-box">
       <h2>测盟汇管理系统</h2>
-      <form @submit.prevent="handleLogin">
+      <ElForm @submit.prevent="handleLogin">
-        <div class="input-group">
+        <ElFormItem>
           <label for="username">
             <i class="fas fa-user"></i> 账号
           </label>
-          <input v-model="username" type="text" id="username" placeholder="请输入您的账号" required />
+          <ElInput v-model="username" type="text" id="username" placeholder="请输入您的账号" required />
-        </div>
+        </ElFormItem>
-        <div class="input-group">
+        <ElFormItem>
           <label for="password">
             <i class="fas fa-lock"></i> 密码
           </label>
-          <input v-model="password" type="password" id="password" placeholder="请输入您的密码" required />
+          <ElInput v-model="password" type="password" id="password" placeholder="请输入您的密码" required />
-        </div>
+        </ElFormItem>
-        <div class="checkbox-group">
+        <ElFormItem>
-          <input v-model="rememberMe" type="checkbox" id="rememberMe" />
+          <ElCheckbox v-model="rememberMe" id="rememberMe">记住密码</ElCheckbox>
-          <label for="rememberMe">记住密码</label>
+        </ElFormItem>
-        </div>
+        <ElFormItem>
-        <button type="submit" class="login-button">登录</button>
+          <ElButton type="primary" native-type="submit" class="login-button">登录</ElButton>
-      </form>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="text" @click="() => $router.push('/register')">注册</ElButton>
+        </ElFormItem>
+      </ElForm>
     </div>
   </div>
 </template>
@@ -61,45 +67,31 @@ h2 {
   margin-bottom: 1rem;
 }
 
-.input-group {
+.el-form-item {
   margin-bottom: 1rem;
   text-align: left;
 }
 
-.input-group label {
+.el-form-item label {
   display: block;
   margin-bottom: 0.5rem;
 }
 
-.input-group input {
+.el-input {
   width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
 }
 
-.checkbox-group {
+.el-button {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.checkbox-group input {
-  margin-right: 0.5rem;
-}
-
-.login-button {
   width: 100%;
   padding: 0.75rem;
-  border: none;
-  border-radius: 4px;
-  background-color: #007bff;
-  color: white;
-  font-size: 1rem;
-  cursor: pointer;
 }
 
-.login-button:hover {
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
   background-color: #0056b3;
 }
-</style>
+</style>

src/views/authentication/Register.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { ref } from 'vue';
+import { ElInput, ElButton, ElForm, ElFormItem, ElMessage } from 'element-plus';
+import 'element-plus/dist/index.css';
+
+const companyName = ref('');
+const contactInfo = ref('');
+const password = ref('');
+const verificationCode = ref('');
+
+const handleRegister = () => {
+  console.log('Registering with', { companyName: companyName.value, contactInfo: contactInfo.value, password: password.value, verificationCode: verificationCode.value });
+  // 处理注册逻辑
+};
+
+const sendVerificationCode = () => {
+  ElMessage.success('验证码已发送');
+  // 处理发送验证码逻辑
+};
+</script>
+
+<template>
+  <div class="register-container">
+    <div class="register-box">
+      <h2>企业租户注册</h2>
+      <ElForm @submit.prevent="handleRegister">
+        <ElFormItem>
+          <label for="companyName">企业名称</label>
+          <ElInput v-model="companyName" type="text" id="companyName" placeholder="请输入企业名称" required />
+        </ElFormItem>
+        <ElFormItem>
+          <label for="contactInfo">企业联系方式</label>
+          <ElInput v-model="contactInfo" type="text" id="contactInfo" placeholder="请输入企业联系方式" required />
+        </ElFormItem>
+        <ElFormItem>
+          <label for="password">密码</label>
+          <ElInput v-model="password" type="password" id="password" placeholder="请输入密码" required />
+        </ElFormItem>
+        <ElFormItem>
+          <label for="verificationCode">验证码</label>
+          <ElInput v-model="verificationCode" type="text" id="verificationCode" placeholder="请输入验证码" required>
+            <template #append>
+              <ElButton type="primary" @click="sendVerificationCode" class="verification-button">获取验证码</ElButton>
+            </template>
+          </ElInput>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="primary" native-type="submit" class="register-button">注册</ElButton>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="text" @click="() => $router.push('/login')">返回登录</ElButton>
+        </ElFormItem>
+      </ElForm>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.register-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: url('background.jpg') no-repeat center center;
+  background-size: cover;
+}
+
+.register-box {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  width: 20%;
+}
+
+h2 {
+  margin-bottom: 1rem;
+}
+
+.el-form-item {
+  margin-bottom: 1rem;
+  text-align: left;
+}
+
+.el-form-item label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.el-input {
+  width: 100%;
+}
+
+.verification-button {
+  width: 120px; /* 确保按钮宽度合适 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0; /* 去除默认内边距 */
+}
+
+.el-button {
+  width: 100%;
+  padding: 0.75rem;
+}
+
+.el-button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.el-button--primary:hover {
+  background-color: #0056b3;
+}
+</style>