1、注册页界面搭建以及接口调取

2、首页用户信息弹框搭建

src/api/login/login.js

@@ -47,4 +47,14 @@ export function smsCode(headers,data){
         data,
         headers: headers,
     })
+}
+
+// 注册
+export function registerSignUp(headers,data){
+    return axios({
+        url: "bjdxWeb/web/register",
+        method: 'post',
+        data: data,
+        headers: headers,
+    })
 }

src/components/HomePage.vue

@@ -25,38 +25,60 @@
       </div>
       <div class="inner-box right-box">
         <div class="top-right-box">
+          <!-- 动态渲染按钮 -->
           <el-button
+            v-for="button in buttonConfigs"
+            :key="button.name"
             round
             class="top-right-btn"
-            :class="{ 'is-active': selectedButton === 'AI编程课' }"
-            @click="router.push(blocklyRoutes.home)"
-            >AI编程课</el-button
-          >
-          <el-button
-            round
-            class="top-right-btn"
-            :class="{ 'is-active': selectedButton === 'AI实验课' }"
-            @click="router.push(aiCourseRoutes.home)"
-            >AI实验课</el-button
-          >
-          <el-button
-            round
-            class="top-right-btn"
-            :class="{ 'is-active': selectedButton === 'AI艺术课' }"
-            @click="
-              ElMessage.warning('此版本未开放，敬请期待！')
-            "
-            >AI艺术课</el-button
+            :class="{ 'is-active': selectedButton === button.name }"
+            @click="handleButtonClick(button)"
+            >{{ button.name }}</el-button
           >
           <!-- 用户名显示 -->
-          <div class="user-name-box">
-            {{ userName }}
-          </div>
-          <!-- 退出登录 -->
-          <el-button round class="logout-box-btn" @click="LogoutClick()">
-            <img :src="logoutIcon" alt="Logout" />
-            退出登录
-          </el-button>
+          <el-dropdown>
+            <div class="user-name-box">
+              {{ userName }}
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu class="dropdown-menu user-popover-content">
+                <!-- 退出登录按钮 -->
+                <div class="user-logout-btn" @click="LogoutClick()">
+                  退出登录
+                </div>
+                <!-- 用户信息 -->
+                <div class="top-box">
+                  <div class="top-inner-box">
+                    <p>已激活课程</p>
+                  </div>
+                  <div class="bottom-inner-box">
+                    <div v-for="(course, index) in courses" :key="index" class="course-item">
+                      <div class="check-circle">✓</div>
+                      <span>{{ course.name }}</span>
+                      <span>{{ course.expireDate }}</span>
+                    </div>
+                  </div>
+                </div>
+                <!-- 激活码 -->
+                <div class="bottom-box">
+                   <el-input
+                    v-model="activationCode"
+                    placeholder="请输入课程激活码"
+                    class="activation-input"
+                    size="small"
+                  />
+                  <el-button
+                    type="primary"
+                    size="small"
+                    class="activation-btn"
+                    @click="handleActivation"
+                  >
+                    激活
+                  </el-button>
+                </div>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </div>
       </div>
     </div>
@@ -114,6 +136,15 @@ import logoutIcon from '@/assets/icon/logout.png'
 import {logoutLogic, removeLocalStorageKey} from '@/utils/loginUtils.js'
 import {aiCourseRoutes, blocklyRoutes, homeRoutes} from "@/router/index.js";
 
+// 激活码响应式变量
+const activationCode = ref('')
+
+// 课程列表响应式变量
+const courses = ref([
+  { name: 'AI编程课', expireDate: '2026.02.21到期' },
+  { name: 'AI实验课', expireDate: '2026.05.12到期' }
+])
+
 // 平台标题响应式变量
 const platformTitle = ref(import.meta.env.VITE_APP_TITLE)
 // 用户名响应式变量
@@ -134,8 +165,18 @@ const LogoutClick = async () => {
   await logoutLogic(router, homeRoutes.login)
 }
 
-// 默认选中 AI 通识课
-const selectedButton = ref('AI通识课')
+// 处理按钮点击事件
+const handleButtonClick = (button) => {
+  selectedButton.value = button.name
+  router.push(button.route)
+}
+// 按钮配置数组
+const buttonConfigs = ref([
+  { name: 'AI编程课', route: blocklyRoutes.home },
+  { name: 'AI实验课', route: aiCourseRoutes.home }
+])
+// 取消默认选中状态
+const selectedButton = ref('')
 
 // 图片路径
 const indexImages = ref([intelligenceImg, roomImg, testImg, studyImg])
@@ -219,6 +260,17 @@ const handleGradeSelect = (command) => {
   }
 }
 
+// 处理激活按钮点击
+const handleActivation = () => {
+  if (!activationCode.value) {
+    ElMessage.warning('请输入激活码')
+    return
+  }
+  // 这里可以添加激活码验证逻辑
+  ElMessage.success('激活码：' + activationCode.value + ' 提交成功')
+  activationCode.value = ''
+}
+
 onMounted(() => {
   fetchCtTypes()
   // 初始化平台标题
@@ -254,23 +306,7 @@ window.updateTenantName = (newName) => {
 @function rpx($px) {
   @return math.div($px, 750) * 100vw;
 }
-.logout-box {
-  width: rpx(100);
-  position: fixed;
-}
-.logout-box-btn {
-  width: rpx(65); // 使用 rpx 函数设置按钮宽度
-  height: rpx(15); // 使用 rpx 函数设置按钮高度
-  margin: rpx(10) rpx(10) 0 0; // 使用 rpx 函数设置外边距
-  background-color: transparent;
-  color: white;
-  border: none; // 移除默认边框
-  font-size: rpx(7); // 使用 rpx 函数设置字体大小
-  outline: none; // 移除默认的外边框
-}
-.logout-box-btn img {
-  width: rpx(10);
-}
+
 // 用户名显示
 .user-name-box {
   width: auto;
@@ -413,7 +449,7 @@ window.updateTenantName = (newName) => {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  margin-right: rpx(25);
+  margin-right: rpx(60);
 }
 .top-right-box {
   width: 100%;
@@ -496,12 +532,154 @@ window.updateTenantName = (newName) => {
   );
   box-shadow: 0 4px 8px rgba(202, 52, 52, 0.1);
 }
+
+// 用户信息弹框样式
+
+
+.user-popover-content {
+  width: auto;
+  min-width: rpx(100);
+  max-width: rpx(200);
+  border-radius: rpx(5);
+  background-color: white;
+  backdrop-filter: blur(rpx(5));
+  box-shadow: 0 rpx(2) rpx(4) rgba(202, 52, 52, 0.1);
+  padding-bottom: rpx(0);
+  position: relative;
+}
+
+.user-logout-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: rpx(2) rpx(6);
+  background: linear-gradient(
+    to bottom,
+    #fee78a,
+    #ffce1b
+  );
+  border-bottom-left-radius: rpx(5);
+  border-top-right-radius: rpx(5);
+  color: black;
+  font-size: rpx(6);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.user-popover-content p {
+  font-size: rpx(8);
+  color: black;
+  margin: rpx(5) 0;
+}
+
+.user-popover-content p:first-child {
+  font-weight: bold;
+}
+
+.top-box {
+  display: flex;
+  flex-direction: column;
+}
+.top-inner-box{
+  padding-top: rpx(5);
+}
+
+.top-inner-box,
+.bottom-inner-box {
+  padding-left: rpx(6);
+}
+
+.top-inner-box p{
+  font-size: rpx(8);
+  margin: rpx(2) 0;
+}
+
+.top-inner-box p:first-child {
+  font-weight: bold;
+}
+
+.bottom-inner-box {
+  display: flex;
+  flex-direction: column;
+}
+
+.course-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: rpx(4);
+  padding: rpx(2);
+  border-radius: rpx(3);
+}
+
+.course-item span {
+  font-size: rpx(7);
+  color: #525050;
+  white-space: nowrap;
+}
+.course-item span:nth-child(3) {
+   font-size: rpx(6);
+   color: #a6a4a4;
+}
+
+.check-circle {
+  width: rpx(7);
+  height: rpx(7);
+  border-radius: 50%;
+  background: linear-gradient(
+    to bottom,
+    #fee78a,
+    #ffce1b
+  );
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: rpx(5);
+  font-weight: bold;
+}
+
+.bottom-box {
+  border-bottom-right-radius: rpx(5);
+  border-bottom-left-radius: rpx(5);
+  background-color: rgba(240, 240, 240, 0.9);
+  display: flex;
+  align-items: center;
+  gap: rpx(10);
+  padding: rpx(8);
+}
+
+.activation-input {
+  flex: 1;
+}
+
+.activation-input :deep(.el-input__wrapper) {
+  border-radius: rpx(3);
+  width: rpx(60);
+  height: rpx(15);
+  font-size: rpx(7);
+}
+
+.activation-btn {
+  width: rpx(40);
+  height: rpx(15);
+  font-size: rpx(7);
+  border: none;
+  color: black;
+  border-radius: rpx(10);
+  background: linear-gradient(
+    to bottom,
+    #fee78a,
+    #ffce1b
+  );
+}
 </style>
 
 
 <style lang="scss">
-/* 消除小三角 */
-.el-popper__arrow{
+/* 只消除非user-name-box的小三角 */
+.no-arrow-dropdown .el-popper__arrow{
   display: none;
 }
 .el-popper.is-light,
@@ -513,4 +691,16 @@ window.updateTenantName = (newName) => {
 .el-dropdown__popper{
   --el-dropdown-menuItem-hover-color: none;
 }
+/* 移除用户名下拉菜单的焦点边框 */
+.user-name-box:focus,
+.user-name-box:focus-within,
+.user-name-box:hover{
+  outline: none;
+  box-shadow: none;
+}
+/* 确保Element Plus下拉菜单触发元素没有焦点边框 */
+.el-dropdown .el-dropdown__trigger:focus{
+  outline: none;
+  box-shadow: none;
+}
 </style>

src/components/videopage/VideoPlayer.vue

@@ -659,7 +659,7 @@ const toggleWebFullscreen = () => {
 /* 章节要点标记样式 */
 .progress-markers {
   position: absolute;
-  bottom: 17px;
+  bottom: 26px;
   left: 15px;
   right: 15px;
   height: 10px;

src/router/index.js

@@ -14,7 +14,11 @@ const routes = [
   { path: '/ai-login', component: () => import('../views/AiCourseLogin.vue') },
   //【blockly编程课】免租户登录
   { path: '/blockly-login', meta: {TENANT: '内部测试租户'}, component: () => import('../views/BlocklyLogin.vue') },
-
+  // 网页版登录注册页
+  {
+    path: '/register-login',
+    component: () => import('../views/RegisterLogin.vue')
+  },
   // 【通识课】首页
   {
     path: '/home',
@@ -209,7 +213,8 @@ const loginToHomeMap = {
   '/quick-login': homeRoutes.home,
   '/promotion-login': homeRoutes.home,
   '/blockly-login': blocklyRoutes.home,
-  '/ai-login': aiCourseRoutes.home
+  '/ai-login': aiCourseRoutes.home,
+   '/register-login': homeRoutes.home
 }
 
 const router = createRouter({

src/views/AiCourseLogin.vue

@@ -81,6 +81,7 @@
         </el-form>
         <!-- 多选框 -->
         <div class="check-box">
+          <router-link to="/register-login" class="register-link">没有账号？立即注册</router-link>
           <el-checkbox
               v-model="loginData.loginForm.rememberMe"
               label="记住我"
@@ -289,17 +290,26 @@ onMounted(() => {
   height: rpx(18);
   margin: rpx(5) auto;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
 }
 .check-box .el-checkbox {
   color: white;
-  padding-right: rpx(10);
+  // padding-right: rpx(10);
   font-size: rpx(6);
 }
 .el-checkbox ::v-deep(.el-checkbox__label){
   font-size: rpx(6);
 }
+.check-box .register-link {
+  color: white;
+  font-size: rpx(6);
+  text-decoration: none;
+  margin-right: rpx(5);
+}
+.check-box .register-link:hover {
+  text-decoration: underline;
+}
 .check-box .forgot-password {
   color: white;
   font-size: rpx(6);
@@ -342,4 +352,123 @@ onMounted(() => {
   // background: linear-gradient(to bottom, #78c0ff, #0070f3);
   border: none;
 }
+
+// 移动端响应式设计
+@media screen and (max-width: 768px) {
+  .login-content {
+    flex-direction: column;
+  }
+  
+  .bg-image-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .login-wrapper {
+    flex: none;
+    width: 70%;
+    margin: 0 auto;
+    padding: 30px;
+    background: rgba(0, 17, 105, 0.85);
+    border-radius: 15px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-height: 40%;
+    overflow-y: auto;
+  }
+  
+  .login-input {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .login-input span {
+    font-size: rpx(18);
+    padding-bottom: rpx(20);
+  }
+  
+  .input-item {
+    width: 100%;
+    align-items: stretch;
+  }
+  
+  .input-item .el-input {
+    width: 100% !important;
+    max-width: none;
+    height: rpx(45) !important;
+    font-size: rpx(14) !important;
+    margin-bottom: rpx(25) !important;
+  }
+  
+  .el-input ::v-deep(.el-input__wrapper) {
+    height: rpx(45) !important;
+  }
+  
+  .el-input ::v-deep(.el-input__inner) {
+    height: rpx(45) !important;
+    font-size: rpx(14) !important;
+  }
+  
+  .login-btn {
+    width: 100% !important;
+    max-width: none;
+    height: rpx(45) !important;
+    font-size: rpx(16) !important;
+    margin: rpx(25) 0 !important;
+    letter-spacing: rpx(15);
+  }
+  
+  .check-box {
+    width: 100% !important;
+    max-width: none;
+    height: auto;
+    margin: rpx(15) 0 !important;
+  }
+  
+  .check-box .el-checkbox {
+    font-size: rpx(12) !important;
+  }
+  
+  .check-box .register-link {
+    font-size: rpx(12) !important;
+    margin-right: rpx(15) !important;
+  }
+  
+  .el-checkbox ::v-deep(.el-checkbox__label) {
+    font-size: rpx(12) !important;
+  }
+  
+  .sms-code-container {
+    width: 100% !important;
+    max-width: none;
+    height: rpx(45) !important;
+  }
+  
+  .sms-input {
+    width: calc(100% - rpx(75)) !important;
+    height: rpx(45) !important;
+  }
+  
+  .get-code-btn {
+    width: rpx(75) !important;
+    height: rpx(45) !important;
+    font-size: rpx(10) !important;
+  }
+  
+  .el-form-item ::v-deep(.el-form-item__error) {
+    top: rpx(50) !important;
+    font-size: rpx(10) !important;
+  }
+}
 </style>

src/views/BlocklyLogin.vue

@@ -82,6 +82,7 @@
         </el-form>
         <!-- 多选框 -->
         <div class="check-box">
+          <router-link to="/register-login" class="register-link">没有账号？立即注册</router-link>
           <el-checkbox
               v-model="loginData.loginForm.rememberMe"
               label="记住我"
@@ -296,17 +297,26 @@ onMounted(() => {
   height: rpx(18);
   margin: rpx(5) auto;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
 }
 .check-box .el-checkbox {
   color: white;
-  padding-right: rpx(10);
+  // padding-right: rpx(10);
   font-size: rpx(6);
 }
 .el-checkbox ::v-deep(.el-checkbox__label){
   font-size: rpx(6);
 }
+.check-box .register-link {
+  color: white;
+  font-size: rpx(6);
+  text-decoration: none;
+  margin-right: rpx(5);
+}
+.check-box .register-link:hover {
+  text-decoration: underline;
+}
 .check-box .forgot-password {
   color: white;
   font-size: rpx(6);
@@ -349,4 +359,122 @@ onMounted(() => {
   // background: linear-gradient(to bottom, #78c0ff, #0070f3);
   border: none;
 }
+// 移动端响应式设计
+@media screen and (max-width: 768px) {
+  .login-content {
+    flex-direction: column;
+  }
+  
+  .bg-image-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .login-wrapper {
+    flex: none;
+    width: 70%;
+    margin: 0 auto;
+    padding: 30px;
+    background: rgba(0, 17, 105, 0.85);
+    border-radius: 15px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-height: 40%;
+    overflow-y: auto;
+  }
+  
+  .login-input {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .login-input span {
+    font-size: rpx(18);
+    padding-bottom: rpx(20);
+  }
+  
+  .input-item {
+    width: 100%;
+    align-items: stretch;
+  }
+  
+  .input-item .el-input {
+    width: 100% !important;
+    max-width: none;
+    height: rpx(45) !important;
+    font-size: rpx(14) !important;
+    margin-bottom: rpx(25) !important;
+  }
+  
+  .el-input ::v-deep(.el-input__wrapper) {
+    height: rpx(45) !important;
+  }
+  
+  .el-input ::v-deep(.el-input__inner) {
+    height: rpx(45) !important;
+    font-size: rpx(14) !important;
+  }
+  
+  .login-btn {
+    width: 100% !important;
+    max-width: none;
+    height: rpx(45) !important;
+    font-size: rpx(16) !important;
+    margin: rpx(25) 0 !important;
+    letter-spacing: rpx(15);
+  }
+  
+  .check-box {
+    width: 100% !important;
+    max-width: none;
+    height: auto;
+    margin: rpx(15) 0 !important;
+  }
+  
+  .check-box .el-checkbox {
+    font-size: rpx(12) !important;
+  }
+  
+  .check-box .register-link {
+    font-size: rpx(12) !important;
+    margin-right: rpx(15) !important;
+  }
+  
+  .el-checkbox ::v-deep(.el-checkbox__label) {
+    font-size: rpx(12) !important;
+  }
+  
+  .sms-code-container {
+    width: 100% !important;
+    max-width: none;
+    height: rpx(45) !important;
+  }
+  
+  .sms-input {
+    width: calc(100% - rpx(75)) !important;
+    height: rpx(45) !important;
+  }
+  
+  .get-code-btn {
+    width: rpx(75) !important;
+    height: rpx(45) !important;
+    font-size: rpx(10) !important;
+  }
+  
+  .el-form-item ::v-deep(.el-form-item__error) {
+    top: rpx(50) !important;
+    font-size: rpx(10) !important;
+  }
+}
 </style>

src/views/Login.vue

@@ -82,10 +82,10 @@
         </el-form>
         <!-- 多选框 -->
         <div class="check-box">
+          <router-link to="/register-login" class="register-link">没有账号？立即注册</router-link>
           <el-checkbox
               v-model="loginData.loginForm.rememberMe"
               label="记住我"
-              size="large"
           />
         </div>
       </div>
@@ -265,6 +265,7 @@ onMounted(() => {
 }
 .el-form-item ::v-deep(.el-form-item__error) {
   top: rpx(25);
+  font-size: rpx(7);
 }
 .login-btn {
   width: rpx(150);
@@ -286,14 +287,23 @@ onMounted(() => {
   height: rpx(18);
   margin: rpx(5) auto;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
 }
 .check-box .el-checkbox {
   color: white;
-  padding-right: rpx(10);
+  // padding-right: rpx(10);
   font-size: rpx(6);
 }
+.check-box .register-link {
+  color: white;
+  font-size: rpx(6);
+  text-decoration: none;
+  margin-right: rpx(5);
+}
+.check-box .register-link:hover {
+  text-decoration: underline;
+}
 .el-checkbox ::v-deep(.el-checkbox__label){
   font-size: rpx(6);
 }
@@ -427,6 +437,11 @@ onMounted(() => {
     font-size: rpx(12) !important;
   }
   
+  .check-box .register-link {
+    font-size: rpx(12) !important;
+    margin-right: rpx(15) !important;
+  }
+  
   .el-checkbox ::v-deep(.el-checkbox__label) {
     font-size: rpx(12) !important;
   }

src/views/RegisterLogin.vue

@@ -0,0 +1,410 @@
+<template>
+  <!-- 网页版登录页面 -->
+  <div class="login-content">
+    <!-- 登录输入框 -->
+    <div class="login-wrapper">
+      <!-- 左侧图片背景盒子 -->
+      <div class="login-left">
+        <img :src="homeBG" alt="背景图片" class="bg-image">
+      </div>
+      <!-- 右侧输入框盒子 -->
+      <div class="login-right">
+        <div class="login-input">
+          <span>{{ appTitle }}</span>
+          <el-form
+            ref="loginFormRef"
+            :model="loginForm"
+            :rules="rules"
+            label-width="0px"
+            class="input-item"
+          >
+            <!-- 手机号登录 -->
+            <el-form-item prop="phone">
+              <el-input 
+                v-model="loginForm.phone" 
+                :prefix-icon="Iphone" 
+                placeholder="请输入手机号" 
+              />
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
+                v-model="loginForm.password"
+                class="password-input"
+                type="password"
+                :prefix-icon="Lock"
+                placeholder="请输入密码"
+                show-password
+              />
+            </el-form-item>
+            <el-form-item prop="confirmPassword">
+              <el-input
+                v-model="loginForm.confirmPassword"
+                class="password-input"
+                type="password"
+                :prefix-icon="Lock"
+                placeholder="请再次确认密码"
+                show-password
+              />
+            </el-form-item>
+            <el-form-item prop="inviteCode">
+              <el-input v-model="loginForm.inviteCode" :prefix-icon="Key" placeholder="请输入邀请码" />
+            </el-form-item>
+
+            <!-- 登录按钮 -->
+            <el-form-item>
+              <div class="login-btn-container">
+                <el-button @click="handleRegister" class="login-btn" type="primary">注册</el-button>
+              </div>
+            </el-form-item>
+
+          </el-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Lock, Iphone, Key } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+import homeBG from "@/assets/images/homeBG.png";
+import { registerSignUp } from '@/api/login/login.js';
+import { getTenantId } from '@/utils/loginUtils.js';
+
+// 获取环境变量
+const appTitle = ref("注册账号");
+
+const loginFormRef = ref(null);
+
+// 登录表单数据
+const loginForm = ref({
+  phone: "", // 手机号
+  password: "", // 密码
+  confirmPassword: "", // 确认密码
+  inviteCode: "", // 邀请码
+  rememberMe: false,
+});
+
+// 表单验证规则
+const rules = ref({
+  phone: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号格式", trigger: "blur" }
+  ],
+  password: [
+    { required: true, message: "请输入密码", trigger: "blur" },
+    { min: 6, max: 20, message: "密码长度应在6-20位之间", trigger: "blur" }
+  ],
+  confirmPassword: [
+    { required: true, message: "请确认密码", trigger: "blur" },
+    {
+      validator: (rule, value, callback) => {
+        if (value !== loginForm.value.password) {
+          callback(new Error("两次输入的密码不一致"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  inviteCode: [{ required: true, message: "请输入邀请码", trigger: "blur" }],
+});
+
+// 处理注册
+const handleRegister = async () => {
+  try {
+    // 表单验证
+    await loginFormRef.value.validate();
+    // 获取默认租户名称
+    const tenantName = '内部测试租户';
+    // 获取租户ID
+    const tenantId = await getTenantId(tenantName);
+    if (!tenantId) {
+      // 租户验证失败
+      return;
+    }
+    // 准备请求数据
+    const registerData = {
+      username: loginForm.value.phone,
+      nickname: loginForm.value.phone,
+      password: loginForm.value.password,
+      inviteCode: 'RTGx3rarJo', // 写死的邀请码
+      rememberMe: loginForm.value.rememberMe
+    };
+    // 调用注册接口
+    const res = await registerSignUp({ 'Tenant-Id': tenantId },registerData);
+    console.log('registerSignUp response:', res);
+    // 注册成功处理
+    if (res && res.code === 200) {
+      ElMessage.success('注册成功，请登录');
+    } else {
+      ElMessage.error(res && res.message || '注册失败，请稍后重试');
+    }
+  } catch (error) {
+    console.error('注册失败:', error);
+    ElMessage.error('注册失败，请检查输入信息或网络连接');
+  }
+};
+
+</script>
+
+<style scoped lang="scss">
+@use "sass:math";
+// 定义rpx转换函数
+@function rpx($px) {
+  @return math.div($px, 750) * 100vw;
+}
+
+.login-content {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center; // 水平居中
+  align-items: center; // 垂直居中
+  background: linear-gradient(to bottom, #001169, #8a78d0);
+}
+
+.login-wrapper {
+  width: rpx(500); // 固定宽度
+  height: rpx(300); // 固定高度
+  max-width: 90%; // 响应式最大宽度
+  padding: 0;
+  border-radius: rpx(15);
+  box-shadow: 0 rpx(5) rpx(15) rgba(0, 0, 0, 0.3);
+  display: flex;
+  overflow: hidden;
+  background-color: white;
+}
+
+/* 左侧图片背景盒子 */
+.login-left {
+  width: 50%;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 背景图片样式 */
+.bg-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 右侧输入框盒子 */
+.login-right {
+  width: 50%;
+  padding: rpx(20);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+}
+.login-input {
+  width: 80%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+
+.login-input span {
+  color: black;
+  font-size: rpx(12);
+  padding-bottom: rpx(10);
+  letter-spacing: rpx(1);
+}
+.input-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.el-input ::v-deep(.el-input__wrapper) {
+  border-radius: rpx(5);
+}
+.input-item .el-form-item {
+  margin-bottom: 0;
+  width: 100%;
+}
+.input-item .el-input {
+  width: 100%;
+  height: rpx(22);
+  margin-bottom: rpx(15);
+  font-size: rpx(8);
+}
+.el-form-item ::v-deep(.el-form-item__error) {
+  top: rpx(25);
+  font-size: rpx(7);
+}
+
+/* 按钮容器，用于控制按钮位置 */
+.login-btn-container {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+.login-btn {
+  width: rpx(70); /* 缩小宽度 */
+  height: rpx(25);
+  color: black;
+  font-size: rpx(9);
+  letter-spacing: rpx(5); /* 调整字间距以适应较小宽度 */
+  border-radius: rpx(5);
+  margin: 0;
+  border: none;
+  outline: none;
+  background: linear-gradient(to bottom, #fee78a, #ffce1b);
+  box-shadow: 0 rpx(4) rpx(4) rgb(0, 0, 0, 0.2);
+}
+.check-box {
+  width: 100%;
+  height: rpx(18);
+  margin: rpx(10) 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.check-box .el-checkbox {
+  color: white;
+  padding-right: rpx(10);
+  font-size: rpx(7);
+}
+.el-checkbox ::v-deep(.el-checkbox__label) {
+  font-size: rpx(7);
+}
+.el-checkbox ::v-deep(.el-checkbox__label) {
+  font-size: 14px;
+}
+
+// 移动端响应式设计
+@media screen and (max-width: 768px) {
+  .login-content {
+    flex-direction: column;
+    background: url('@/assets/images/homeBG.png') no-repeat center center fixed;
+    background-size: cover;
+  }
+  
+  .bg-image-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .login-wrapper {
+    flex: none;
+    width: 70%;
+    margin: 0 auto;
+    padding: 30px;
+    border-radius: 15px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-height: 40%;
+    overflow-y: auto;
+  }
+
+  .login-left{
+    display: none;
+  }
+  .login-right{
+    width: 100%;
+  }
+  
+  .login-input {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .login-input span {
+    font-size: rpx(18);
+    padding-bottom: rpx(20);
+  }
+  
+  .input-item {
+    width: 100%;
+    align-items: stretch;
+  }
+  
+  .input-item .el-input {
+    width: 100% !important;
+    max-width: none;
+    height: rpx(45) !important;
+    font-size: rpx(14) !important;
+    margin-bottom: rpx(25) !important;
+  }
+  
+  .el-input ::v-deep(.el-input__wrapper) {
+    height: rpx(45) !important;
+    border-radius: rpx(15);
+  }
+  
+  .el-input ::v-deep(.el-input__inner) {
+    height: rpx(45) !important;
+    font-size: rpx(14) !important;
+  }
+  
+  .login-btn {
+    width: 40% !important;
+    max-width: none;
+    height: rpx(45) !important;
+    font-size: rpx(16) !important;
+    margin: rpx(25) 0 !important;
+    letter-spacing: rpx(15);
+    border-radius: rpx(10);
+  }
+  
+  .check-box {
+    width: 100% !important;
+    max-width: none;
+    height: auto;
+    margin: rpx(15) 0 !important;
+  }
+  
+  .check-box .el-checkbox {
+    font-size: rpx(12) !important;
+  }
+  
+  .el-checkbox ::v-deep(.el-checkbox__label) {
+    font-size: rpx(12) !important;
+  }
+  
+  .sms-code-container {
+    width: 100% !important;
+    max-width: none;
+    height: rpx(45) !important;
+  }
+  
+  .sms-input {
+    width: calc(100% - rpx(75)) !important;
+    height: rpx(45) !important;
+  }
+  
+  .get-code-btn {
+    width: rpx(75) !important;
+    height: rpx(45) !important;
+    font-size: rpx(10) !important;
+  }
+  
+  .el-form-item ::v-deep(.el-form-item__error) {
+    top: rpx(50) !important;
+    font-size: rpx(10) !important;
+  }
+}
+</style>