From e8bbc5d566fce981bb94edd3c1fbed1948c26cab Mon Sep 17 00:00:00 2001
From: hrx <18603305412@163.com>
Date: Thu, 11 Jun 2026 10:52:09 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B3=A8=E5=86=8Cbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/registrationPageMobile/index.vue    | 1185 +++++++++--------
 1 file changed, 623 insertions(+), 562 deletions(-)

diff --git a/f/web-kboss/src/views/registrationPageMobile/index.vue b/f/web-kboss/src/views/registrationPageMobile/index.vue
index a48a280..a054c9a 100644
--- a/f/web-kboss/src/views/registrationPageMobile/index.vue
+++ b/f/web-kboss/src/views/registrationPageMobile/index.vue
@@ -1,135 +1,101 @@
 <template>
   <div class="main-box">
-    <div v-if="logoImg" class="imgBoxOne">
-      <img :src="logoImg" alt="" class="logo-botton">
-      <img src="../../assets/kyy/register-bg.png" alt="">
+    <!-- 背景图片 -->
+    <div class="imgStyle" v-if="logoImg">
+      <img style="width: 100vw;height: 100vh;" src="../../assets/kyy/register-bg.png" alt="">
     </div>
-    <div v-else class="imgBoxTwo">
-      <img class="bg" src="../../assets/kyy/register-bg.png" alt="">
-      <img class="logo-top" src="../../assets/kyy/LOGO.png" alt="">
+    <div class="imgStyle" v-else>
+      <img style="width: 100vw;height: 100vh;background-position: center center" src="../../assets/kyy/register-bg.png"
+        alt="">
     </div>
 
-    <!--  注册表单-->
-    <div class="regist-container">
-      <div class="register-form">
-        <el-form ref="registForm" :model="registForm" :rules="rules" class="registFormStyle" autocomplete="on" label-position="left" style="z-index: 1">
+    <!-- 头部图标 -->
+    <img @click="goHomePage" style="cursor: pointer" class="logo-top1" :src="logoImg" alt="" v-if="isLogo && isShow">
+    <img @click="goHomePage" style="cursor: pointer" class="logo-top" src="../../assets/kyy/LOGONew.png" alt=""
+      v-else-if="isShow">
+
+    <!-- 注册表单 -->
+    <div class="register-form">
+      <div class="regist-container">
+        <el-form ref="registForm" :model="registForm" :rules="rules" class="regist-form" autocomplete="on"
+          label-position="left" style="z-index: 1">
+          <!-- 表单标题区域 -->
           <div class="title-container">
             <span class="title">注册</span>
+            <span class="subtitle" @click="handleLogin">前往登录 ></span>
           </div>
-          <el-form-item prop="username" class="formItem">
-            <div class="form-item">
-              <span class="svg-container">
-                <img src="../../assets/kyy/用户.svg" alt="">
-              </span>
-              <el-input class="input-style" ref="username" v-model="registForm.username" placeholder="请输入用户名" name="username" type="text" />
-            </div>
-          </el-form-item>
-          <el-form-item class="formItem" prop="password">
-            <div class="form-item">
-              <span class="svg-container">
-                <img src="../../assets/kyy/密码.svg" alt="">
-              </span>
-              <el-input class="input-style" :key="passwordType" ref="password" v-model="registForm.password" :type="passwordType" placeholder="请输入密码" name="password" />
-              <span class="show-pwd" @click="showPwd">
-                <svg-icon :icon-class="  passwordType === 'password' ? 'eye' : 'eye-open'   " />
-              </span>
-            </div>
-          </el-form-item>
-          <el-form-item prop="nick_name" class="formItem">
-            <div class="form-item">
-              <span class="svg-container">
-                <img src="../../assets/kyy/用户.svg" alt="">
-              </span>
-              <el-input class="input-style" ref="nick_name" v-model="registForm.nick_name" placeholder="请输入显示名" type="text" />
-            </div>
-          </el-form-item>
-          <el-form-item prop="email" class="formItem">
-            <div class="form-item">
-              <span class="svg-container">
-                <img src="../../assets/kyy/邮箱.svg" alt="">
-              </span>
-              <el-input class="input-style" ref="email" v-model="registForm.email" placeholder="请输入邮件地址" type="text" />
-            </div>
-          </el-form-item>
 
-          <el-form-item prop="mobile" class="formItem">
-            <div class="form-item">
-              <span class="svg-container">
-                <img src="../../assets/kyy/手机.svg" alt="">
-              </span>
-              <el-input class="input-style" ref="mobile" v-model="registForm.mobile" placeholder="请输入手机号" type="text" />
-            </div>
-          </el-form-item>
+          <!-- 手机号输入区域 -->
+          <div class="form-row">
+            <el-form-item prop="mobile" class="form-item-custom full-width">
+              <div class="form-item">
+                <span class="svg-container country-code">
+                  +86
+                </span>
+                <el-input ref="mobile" v-model="registForm.mobile" placeholder="请输入手机号" type="text"
+                  class="custom-input" />
+              </div>
+            </el-form-item>
+          </div>
 
-          <el-form-item prop="address" class="formItem">
-            <div class="form-item">
-              <span class="svg-container">
-                <img src="../../assets/kyy/地址.svg" alt="">
-              </span>
-              <el-input class="input-style" ref="address" v-model="registForm.address" placeholder="请输入地址" type="text" />
-            </div>
-          </el-form-item>
+          <!-- 验证码输入区域 -->
+          <div class="form-row">
+            <el-form-item prop="vcode" class="form-item-custom full-width">
+              <div class="form-item">
+                <span class="svg-container">
+                  验证码
+                </span>
+                <el-input ref="vcode" v-model="registForm.vcode" placeholder="请输入验证码" type="text"
+                  class="custom-input" />
+                <span class="get-code-btn" @click="getSmsCode" :class="{ disabled: countdown > 0 }">
+                  {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
+                </span>
+              </div>
+            </el-form-item>
+          </div>
 
-          <el-form-item prop="org_type" class="formItem orgTypeSelect">
-            <span class="svg-container">
-              <img src="../../assets/kyy/机构.svg" alt="">
-            </span>
-            <el-select class="select" v-model="registForm.org_type" placeholder="请选择所属机构" @change="change" :append-to-body="true" style="">
-              <el-option label="个人客户" value="2"></el-option>
-              <el-option label="公司客户" value="3"></el-option>
-            </el-select>
-          </el-form-item>
+          <!-- 账户名输入区域 -->
+          <div class="form-row">
+            <el-form-item prop="username" class="form-item-custom full-width">
+              <div class="form-item">
+                <span class="svg-container">
+                  账户名
+                </span>
+                <el-input ref="username" v-model="registForm.username" placeholder="请输入账户名" name="username" type="text"
+                  class="custom-input" />
+              </div>
+            </el-form-item>
+          </div>
 
-          <el-form-item prop="" v-if="registForm.org_type === '2'" class="formItemLast">
-            <div class="upload-box">
-            <el-upload   class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleAvatarSuccess" :on-remove="handleRemove">
-              <img  v-if="imageUrl" :src="imageUrl" class="avatar" />
-              <i v-else class="el-icon-plus  avatar-uploader-icon"></i>
-            </el-upload>
-            </div>
-          </el-form-item>
+          <!-- 密码输入区域 -->
+          <div class="form-row">
+            <el-form-item prop="password" class="form-item-custom full-width">
+              <div class="form-item">
+                <span class="svg-container">
+                  密码
+                </span>
+                <el-input :key="passwordType" ref="password" v-model="registForm.password" :type="passwordType"
+                  placeholder="请输入密码" name="password" class="custom-input" />
+                <span class="show-pwd" @click="showPwd">
+                  <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+                </span>
+              </div>
+            </el-form-item>
+          </div>
 
-          <el-form-item prop="orgname" class="formItem name-institution" v-if=" registForm.org_type == '3'">
-            <div class="form-item">
-              <span class="svg-container">
-                <img src="../../assets/kyy/用户.svg" alt="">
-              </span>
-              <el-input class="input-style" ref="orgname" v-model="registForm.orgname" placeholder="请输入机构名称" type="text" />
-            </div>
-          </el-form-item>
-
-          <el-form-item prop="" v-if="registForm.org_type == '3'" class="formItemLast">
-            <div class="upload-box">
-              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleAvatarSuccess">
-                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-              </el-upload>
-            </div>
-          </el-form-item>
-
-          <!-- <el-form-item prop="license_img" v-if="registForm.org_type == '3'">
-            <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleAvatarSuccess" :on-remove="handleRemove">
-              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload>
-          </el-form-item> -->
-          <!-- <el-form-item prop="id_img" v-if="registForm.org_type=='2'">
-            <span class="svg-container">
-              <svg-icon icon-class="user" />
-            </span>
-            <el-input ref="mobile" v-model="registForm.id_img" placeholder="身份证" type="text" />
-          </el-form-item> -->
-          <!-- <el-form-item prop="license_img" v-if="registForm.org_type=='3'">
-            <span class="svg-container">
-              <svg-icon icon-class="user" />
-            </span>
-            <el-input ref="license_img" v-model="registForm.license_img" placeholder="营业执照" type="text" />
-          </el-form-item> -->
+          <!-- 用户协议勾选区域 -->
+          <div class="agreement">
+            <el-checkbox v-model="agreeProtocol">
+              我已阅读并同意《用户协议》、《隐私政策》、《产品服务协议》
+            </el-checkbox>
+          </div>
 
+          <!-- 注册按钮区域 -->
           <div class="twoBtn">
-            <el-button class="register-btn" :loading="loading" type="primary" @click.native.prevent="handleRegister('registForm')">马上注册
+            <el-button class="register-btn" :loading="loading" type="primary"
+              @click.native.prevent="handleRegister('registForm')">
+              立即注册
             </el-button>
-            <span class="go-login" @click.native.prevent="handleLogin()">已有账号？<span @click="handleLogin" class="login-btn-style">去登录</span></span>
           </div>
         </el-form>
       </div>
@@ -138,117 +104,154 @@
 </template>
 
 <script>
-import { registerUserAPI, getLogoAPI } from "@/api/login";
+import { getLogoAPI, register, sendCode } from "@/api/login";
+import { cityArr } from '@/assets/province.js'
+import { mapState } from "vuex";
+import { getHomePath } from '@/views/setting/tools'
 
 export default {
   name: "indexNew",
   data() {
     return {
+      // 显示控制
+      isShow: false,
+      isLogo: false,
+      logoUrlOut: '',
+      logoImg: require("../../assets/kyy/LOGO.png"),
+      logoText: "开元云",
+      photosUrl: null,
+
+      // 用户协议勾选状态
+      agreeProtocol: false,
+      // 验证码倒计时秒数
+      countdown: 0,
+      // 倒计时定时器
+      countdownTimer: null,
+      // 短信验证码的codeid
+      codeid: '',
+
+      // 当前页面URL
       url: window.location.href,
       value: '',
+      // 注册表单数据
       registForm: {
-        username: "",
-        password: "",
-        email: "",
-        nick_name: "",
-        address: "",
-        mobile: "",
-        org_type: "",
-        orgname: "",
+        mobile: "",          // 手机号（必填）
+        vcode: "",           // 验证码（必填）
+        username: "",        // 账户名
+        password: "",        // 密码
+        org_type: "2",       // 机构类型（必填，固定为2）
+        wechat_openid: localStorage.getItem('wechat_openid') || "", // 微信openid（默认为空）
+        domain_name: ""      // 域名
       },
-      imageUrl: "",
-      currentFile: null,
-      invitecode: this.$route.query.invitecode,
+
+      // 表单验证规则
       rules: {
-        username: [
-          { required: true, message: "请输入姓名", trigger: "blur" },
-          { min: 6, message: '用户名长度至少应包含6个字符' }],
-        password: [{ required: true, message: "请输入密码", trigger: "blur" },
-          { min: 6, message: '密码长度至少应包含6个字符' }],
-        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
-        nick_name: [
-          { required: true, message: "请输入显示名", trigger: "blur" },
-        ],
+        // 手机号验证规则
         mobile: [
           {
-            pattern:
-              /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
+            pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
             message: "请输入有效的手机号",
           },
           { required: true, trigger: "blur", message: "请输入手机号" },
         ],
-        email: [
+        // 验证码验证规则
+        vcode: [
+          { required: true, message: "请输入验证码", trigger: "blur" }
+        ],
+        username: [
+          { required: true, message: "请输入账户名", trigger: "blur" }
+        ],
+        password: [
+          { required: true, message: "请输入密码", trigger: "blur" },
           {
-            pattern: /[\w.]+\@[-a-z0-9]+(\.[-a-z0-9]+)*\.(com|cn|edu|uk)/ig,
-            message: "请输入有效的邮箱",
-          },
-
-          { required: true, trigger: "blur", message: "请输入邮箱" },
-        ],
-        orgname: [{ required: true, message: "请输入机构", trigger: "blur" }],
-        id_img: [
-          { required: true, message: "请上传身份证", trigger: "change" },
-        ],
+            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z\d]).{8,}$/,
+            message: "密码至少8位，且需包含大小写字母、数字和特殊字符",
+            trigger: "blur"
+          }
+        ]
       },
+      // 密码显示类型（password/text）
       passwordType: "password",
+      // 注册按钮加载状态
       loading: false,
       redirect: undefined,
       otherQuery: {},
-      org_type: [
-        {
-          value: "2",
-          label: "个人客户",
-        },
-        {
-          value: "3",
-          label: "公司客户",
-        },
-      ],
-      photosUrl: null,
-      logoImg: null
     };
   },
+
+  // 组件创建时调用
   created() {
-    this.init()
+    this.init();
   },
+
+  // 组件挂载后调用
   mounted() {
-    this.registForm.username = ''
-    if (this.invitecode) {
-      this.registForm.invitecode = this.invitecode;
-    }
+    // 初始化域名
+    this.registForm.domain_name = window.location.hostname;
   },
+
+  computed: {
+    // 从Vuex获取微信openid
+    ...mapState({
+      wechat_openid: state => state.login.wechat_openid,
+    }),
+  },
+
   methods: {
+    // 跳转到首页
+    goHomePage() {
+      this.$router.push(getHomePath())
+    },
+
+    // 获取城市数据
+    cityArr() {
+      return cityArr;
+    },
+
+    // 初始化函数 - 获取Logo等信息
     init() {
       let params = {
         url_link: this.GetQueryString(this.url)
-      }
+      };
+
       getLogoAPI(params).then((res) => {
         if (res.status == true && res.data && res.data.length) {
+          this.$store.commit('setLogoInfo', res.data[0]);
+          this.isShow = true
+          this.$store.commit('setLogoInfoNew', res.data[0].additional_msg);
+
+          // 特殊机构处理
+          if (res.data[0].orgname == '中关村数智人工智能产业联盟') {
+            this.logoUrlOut = 'https://www.ncmatch.cn'
+          }
+
           this.photosUrl = res.data[0];
           if (this.photosUrl.orgname != '业主机构') {
-            // this.isLogo = true
+            this.isLogo = true
             this.logoImg = this.photosUrl.logo;
-            // this.logoText = this.photosUrl.orgname;
+            this.$store.commit('setLogo', this.photosUrl.logo)
+            this.logoText = this.photosUrl.orgname;
+          } else {
+            this.$store.commit('setLogo', "")
           }
         } else {
           this.$message({
-            message: res.msg,
+            message: "获取ipc失败~",
             type: "error",
           });
         }
       });
     },
+
+    // 从URL中获取查询参数
     GetQueryString(name) {
       if (name.indexOf("#") != -1) {
         const params = name.split("#")[0];
         return params;
       }
     },
-    change(row) {
-      if (row == 3) {
-        this.registForm.orgname = null
-      }
-    },
+
+    // 显示/隐藏密码
     showPwd() {
       if (this.passwordType === "password") {
         this.passwordType = "";
@@ -259,443 +262,501 @@ export default {
         this.$refs.password.focus();
       });
     },
-    handleAvatarSuccess(file, fileList) {
-      this.imageUrl = URL.createObjectURL(file.raw);
-      this.currentFile = file;
-    },
-    handleRemove(file, fileList) { //移除照片
 
-    },
-    handleLogin() {//返回登录页
-      this.$router.push({ name: "Login" });
-    },
-    handleRegister(formName) { //注册
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          if (this.registForm.org_type) {
-            if (this.registForm.org_type == "2") {
-              this.registForm.orgname = this.registForm.username;
-              this.registForm.domain_name = this.photosUrl.domain_name;
-              const formdata = this.getFormData(this.registForm);
-              if (this.currentFile) {
-                formdata.append("id_img", this.currentFile.raw);
-                registerUserAPI(formdata).then((res) => {
-                  if (res.status == true) {
-                    this.$message({
-                      message: "注册成功",
-                      type: "success",
-                    });
-                    this.$router.push({ name: "Login" });
-                  } else {
-                    this.$message({
-                      message: res.msg,
-                      type: "error",
-                    });
-                  }
-                });
-              } else {
-                this.$message({
-                  message: '请上传身份证照片',
-                  type: "error",
-                });
-              }
-            } else {
-              this.registForm.domain_name = this.photosUrl.domain_name;
-              const formdata = this.getFormData(this.registForm);
-              if (this.currentFile) {
-                formdata.append("license_img", this.currentFile.raw);
-                registerUserAPI(formdata).then((res) => {
-                  if (res.status == true) {
-                    this.$message({
-                      message: "注册成功",
-                      type: "success",
-                    });
-                    this.$router.push({ name: "Login" });
-                  } else {
-                    this.$message({
-                      message: res.msg,
-                      type: "error",
-                    });
-                  }
-                });
-              } else {
-                this.$message({
-                  message: '请上传营业执照',
-                  type: "error",
-                });
-              }
-            }
+    // 获取短信验证码
+    async getSmsCode() {
+      // 如果正在倒计时，直接返回
+      if (this.countdown > 0) return;
+
+      // 验证手机号是否为空
+      if (!this.registForm.mobile) {
+        this.$message({
+          message: "请输入手机号",
+          type: "error",
+        });
+        return;
+      }
+
+      const mobileRegex = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
+      if (!mobileRegex.test(this.registForm.mobile)) {
+        this.$message({
+          message: "请输入有效的手机号",
+          type: "error",
+        });
+        return;
+      }
+
+      let params = {
+        mobile: this.registForm.mobile,
+        action_type: "register",
+      };
+
+      try {
+        let res = await sendCode(params)
+        console.log('短信验证码完整响应:', res);
+
+        if (res.status == true) {
+          this.$message({
+            message: "验证码已发送",
+            type: "success",
+          });
+          let codeid = '';
+
+          // 尝试从不同的响应结构获取 codeid
+          if (res.data && res.data.codeid) {
+            // 结构: { data: { codeid: 'xxx' } }
+            codeid = res.data.codeid;
+          } else if (res.codeid) {
+            // 结构: { codeid: 'xxx' }
+            codeid = res.codeid;
+          } else if (res.data && typeof res.data === 'string') {
+            // 结构: { data: 'xxx' } 且 data 直接是 codeid
+            codeid = res.data;
+          } else if (res.data && res.data.data && res.data.data.codeid) {
+            // 结构: { data: { data: { codeid: 'xxx' } } }
+            codeid = res.data.data.codeid;
           } else {
-            this.$message({
-              message: "请选择机构类型",
-              type: "error",
-            });
+            // 如果都没有找到，使用手机号和时间戳生成一个临时的 codeid
+            console.warn('无法从响应中获取 codeid，使用临时值。响应结构:', res);
+            codeid = `temp_${this.registForm.mobile}_${Date.now()}`;
           }
+
+          this.codeid = codeid;
+          console.log('最终获取的 codeid:', this.codeid);
+
+          // 开始倒计时
+          this.startCountdown();
         } else {
           this.$message({
-            message: "请查看注册信息是否完整",
+            message: res.msg,
             type: "error",
           });
         }
-      });
+      } catch (error) {
+        console.error('发送验证码失败:', error);
+
+      }
     },
-    getFormData(object) {//转换参数为formdata格式
-      const formData = new FormData();
-      Object.keys(object).forEach((key) => {
-        const value = object[key];
-        if (Array.isArray(value)) {
-          value.forEach((subValue, i) => {
-            formData.append(key + `[${i}]`, subValue);
-          });
-        } else {
-          formData.append(key, object[key]);
+
+    // 开始验证码倒计时
+    startCountdown() {
+      this.countdown = 60;
+      this.countdownTimer = setInterval(() => {
+        this.countdown--;
+        if (this.countdown <= 0) {
+          clearInterval(this.countdownTimer);
         }
-      });
-      return formData;
+      }, 1000);
     },
+
+    // 跳转到登录页面
+    handleLogin() {
+      this.$router.push({ name: "Login" });
+    },
+
+    // 注册处理函数
+    handleRegister(formName) {
+      // 第一步：检查用户是否同意协议
+      if (!this.agreeProtocol) {
+        this.$message({
+          message: "请先阅读并同意用户协议",
+          type: "error",
+        });
+        return;
+      }
+
+      // 第二步：进行表单验证
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 表单验证通过，开始注册流程
+          this.loading = true;
+
+          // 第三步：构建注册数据
+          const registerData = {
+            mobile: this.registForm.mobile,        // 手机号（必填）
+            vcode: this.registForm.vcode,          // 验证码（必填）
+            codeid: this.codeid,                   // 短信接口返回的codeid（必填）
+            org_type: "2",                         // 机构类型（必填，固定为2）
+            username: this.registForm.username || this.registForm.mobile,  // 用户名（默认手机号）
+            password: this.registForm.password,    // 密码
+            nick_name: this.registForm.mobile,     // 显示名（默认手机号）
+            wechat_openid: this.registForm.wechat_openid, // 微信openid（默认为空）
+            domain_name: this.registForm.domain_name || window.location.hostname // 域名
+          };
+
+          console.log('注册参数:', registerData);
+
+          // 第四步：调用注册API
+          register(registerData).then((res) => {
+            this.loading = false;
+            console.log('注册返回:', res);
+            if (res.status == true) {
+              // 注册成功
+              this.$message({
+                message: "注册成功",
+                type: "success",
+              });
+              // 跳转到登录页面
+              this.$router.push({ name: "Login" });
+            } else {
+              // 注册失败，显示错误信息
+              this.$message({
+                message: res.message || res.msg || "注册失败",
+                type: "error",
+              });
+            }
+          }).catch((error) => {
+            // 网络错误处理
+            console.error('注册失败:', error);
+            this.loading = false;
+            this.$message({
+              message: "注册失败，请重试",
+              type: "error",
+            });
+          });
+        } 
+      });
+    },
+  },
+
+  // 组件销毁前清理定时器
+  beforeDestroy() {
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+    }
   }
 }
 </script>
 
 <style scoped lang="scss">
+// 定义样式变量
 $cursor: black;
+$primary-color: #409EFF;
+$border-color: #E4E7ED;
+$background-color: #F5F7FA;
+$light-gray: #909399;
+
+// 主容器样式
 .main-box {
   position: relative;
-  width: 100%;
+  width: 100vw;
   height: 100vh;
-  .imgBoxTwo {
-    .bg {
-      width: 100%;
-      height: 100vh;
-    }
-  }
-  .imgBoxOne {
-    .logo-botton {
-      width: 100px !important;
-      height: 100px !important;
-      position: absolute;
-      top: 3%;
-      left: 2%;
-    }
-  }
+  overflow: hidden;
+
   img {
     width: 100%;
     height: 100%;
-  }
-
-  .register-form {
-    // overflow-y: hidden;
-    position: absolute;
-    top: 47%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40%;
-    height: 76%;
-    min-width: 500px;
+    object-fit: cover;
   }
 }
 
+// 头部图标样式
 .logo-top {
   width: 200px !important;
-  height: 45px !important;
+  height: 70px !important;
+  position: absolute;
+  top: 2%;
+  left: 2%;
+  z-index: 1000;
+}
+
+.logo-top1 {
+  width: 260px !important;
+  height: 80px !important;
   position: absolute;
   top: 3%;
-  left: 2%;
+  left: 3%;
+  z-index: 1000;
 }
 
-.form-item {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 0;
-  width: 360px;
-  height: 42px;
-}
-
-//old
-$bg: #2d3a4b;
-$dark_gray: #889aa4;
-$light_gray: #eee;
-
-.regist-container {
-  min-height: 100%;
-  width: 100%;
-  overflow: hidden;
-  background-color: white;
-  .registFormStyle {
-    border-radius: .2667rem;
-    height: 100%;
-    position: relative;
-    width: 60%;
-    // max-width: 100%;
-    padding: 20px 25px 0;
-    margin: 0 auto;
-    overflow: hidden;
-    background-color: white;
-    .formItem {
-      border: 1px solid #d9d9d9;
-      .form-item {
-        img {
-          width: 14px;
-          height: 14px;
-        }
-        el-input {
-          width: 50%;
-        }
-        .input-style {
-          width: 140px !important;
-          height: 30px !important;
-        }
-      }
-    }
-    .orgTypeUpload{
-
-    }
-    .formItemLast {
-      .upload-box {
-        .avatar-uploader {
-          height: 60px;
-          width: 60px;
-          .avatar {
-            height: 60px;
-            width: 60px;
-          }
-          .el-icon-plus {
-            height: 60px;
-            width: 60px;
-          }
-        }
-      }
-    }
-    .title-container {
-      margin-bottom: 15px;
-      position: relative;
-      .title {
-        mix-blend-mode: normal;
-        color: rgba(0, 0, 0, 1);
-        font-family: PingFang SC;
-        font-size: 24px;
-        letter-spacing: 1.1px;
-        padding-left: 40%;
-        //font-size: 26px;
-        //color: $dark_gray;
-        // margin: 0px 10px 0px;
-        //text-align: center;
-        //font-weight: bold;
-      }
-    }
-  }
-.el-form-item{
-  margin-bottom:10px;
-}
-  .svg-container {
-    padding: 6px 5px 6px 15px;
-    color: $dark_gray;
-    vertical-align: middle;
-    width: 30px;
-    display: inline-block;
-  }
-
-  .show-pwd {
-    position: absolute;
-    right: 10px;
-    top: 7px;
-    font-size: 16px;
-    color: $dark_gray;
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .thirdparty-button {
-    position: absolute;
-    right: 0;
-    bottom: 6px;
-  }
-
-  @media only screen and (max-width: 470px) {
-    .thirdparty-button {
-      display: none;
-    }
-  }
-
-  // .avatar-uploader .el-upload {
-  //   border: 1px dashed #d9d9d9;
-  //   border-radius: 6px;
-  //   cursor: pointer;
-  //   position: relative;
-  //   overflow: hidden;
-  // }
-
-  // .avatar-uploader .el-upload:hover {
-  //   border-color: #409eff;
-  // }
-
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    height: 60px;
-    width: 60px;
-    line-height: 60px;
-    text-align: center;
-    border: 1px solid #d9d9d9;
-  }
-
-  .avatar {
-    width: 2.3733rem;
-    height: 2.3733rem;
-    display: block;
-  }
-}
-
-.mainBg {
-  width: 100vw;
-  height: 100vh;
-  position: relative; /* 让容器成为相对定位的父元素 */
-}
-
-.mainBg::before {
+// 注册表单容器样式
+.register-form {
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 480px;
+  min-height: 560px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+  overflow: hidden;
+  z-index: 999;
+}
+
+// 注册内容区域样式
+.regist-container {
   width: 100%;
   height: 100%;
-  margin-left: -48%;
-  background-image: url("./svgNew/login-bg.svg");
-  background-position: 100%;
-  background-repeat: no-repeat;
-  background-size: auto 100%;
-  content: "";
-}
+  padding: 40px 35px;
 
-.svgImg {
-  //width: 10%!important;
-  //border: 100px solid red;
-  //height: auto;
-
-  //position: absolute; /* 设置绝对定位以脱离文档流 */
-  //top: 0;
-  //left: 0;
-  //width: 50%;
-  //height: 100%; /* 拉伸图片高度至容器高度 */
-}
-
-.loginFromStyle {
-  position: absolute;
-  top: 0;
-  right: 8%;
-  z-index: 1;
-}
-
-.leftLogo {
-  //border: 1px solid red;
-  width: 35vw;
-  height: 80vh;
-  position: absolute;
-  top: 5%;
-  left: 5%;
-  z-index: 9999999;
-  img {
-    width: 30%;
-    height: 30%;
+  .regist-form {
+    width: 100%;
   }
-}
 
-.logoStyleTwo {
-  display: flex;
-  justify-content: flex-start;
-}
+  // 标题区域样式
+  .title-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
 
-.windowsLogo {
-  img {
-    width: 90%;
-    height: 90%;
+    .title {
+      font-size: 24px;
+      font-weight: 600;
+      color: #303133;
+    }
+
+    .subtitle {
+      font-size: 14px;
+      color: $primary-color;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
-}
 
-.titleHeader {
-  --un-text-opacity: 1;
-  color: rgba(255, 255, 255, var(--un-text-opacity));
-  font-size: 24px;
-  margin-top: 100px !important;
-}
+  // 表单行样式
+  .form-row {
+    margin-bottom: 20px;
+  }
 
-.el-select .el-select-dropdown__item {
-  font-size: 14px;
-  padding: 0 20px;
-  position: relative;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #606266;
-  height: 34px;
-  line-height: 34px;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  cursor: pointer;
-  z-index: 99999999999999999999999999999999999999999999999 !important;
-}
+  // 表单项样式
+  .form-item-custom {
+    margin-bottom: 0;
 
-.twoBtn {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
+    &.full-width {
+      width: 100%;
+    }
+  }
 
-.regist-container ::v-deep.el-input__inner {
-  border: none;
-}
+  // 表单项目样式
+  .form-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 48px;
+    background: white;
+    border: 1px solid $border-color;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    position: relative;
 
-.name-institution ::v-deep .el-input__inner {
-  border: none;
-}
-.regist-container {
-  .orgTypeSelect {
-    .select {
-      width: 65%;
+    &:hover {
+      border-color: $primary-color;
+    }
+
+    &:focus-within {
+      border-color: $primary-color;
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+    }
+  }
+
+  // 图标容器样式
+  .svg-container {
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: #606266;
+    font-size: 14px;
+    background: #f8f9fa;
+    border-right: 1px solid $border-color;
+    border-radius: 8px 0 0 8px;
+    min-width: 80px;
+
+    &.country-code {
+      min-width: 60px;
+      background: transparent;
+      border-right: none;
+      color: #303133;
+      font-weight: 500;
+    }
+  }
+
+  // 自定义输入框样式
+  .custom-input {
+    flex: 1;
+    border: none !important;
+    outline: none !important;
+    background: transparent;
+    height: 100%;
+
+    ::v-deep .el-input__inner {
+      border: none !important;
+      background: transparent !important;
+      height: 46px;
+      padding: 0 16px;
+      font-size: 14px;
+
+      &:focus {
+        border: none !important;
+        box-shadow: none !important;
+      }
+
+      &::placeholder {
+        color: $light-gray;
+      }
+    }
+  }
+
+  // 获取验证码按钮样式
+  .get-code-btn {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: $primary-color;
+    font-size: 14px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: background-color 0.3s ease;
+    white-space: nowrap;
+
+    &:hover {
+      background: rgba(64, 158, 255, 0.1);
+    }
+
+    &.disabled {
+      color: $light-gray;
+      cursor: not-allowed;
+
+      &:hover {
+        background: none;
+      }
+    }
+  }
+
+  // 显示密码按钮样式
+  .show-pwd {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 16px;
+    color: #909399;
+    cursor: pointer;
+    z-index: 2;
+  }
+
+  // 信息补充区域样式
+  .info-supplement {
+    margin: 24px 0 16px 0;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+
+    .info-title {
+      font-size: 14px;
+      color: $light-gray;
+      font-weight: 500;
+    }
+  }
+
+  // 协议勾选区域样式
+  .agreement {
+    margin: 20px 0;
+
+    ::v-deep .el-checkbox {
+      .el-checkbox__label {
+        font-size: 14px;
+        color: #606266;
+      }
+    }
+  }
+
+  // 按钮区域样式
+  .twoBtn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 30px;
+  }
+
+  // 注册按钮样式
+  .register-btn {
+    width: 100%;
+    height: 48px;
+    background: $primary-color;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 500;
+    color: white;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: #66b1ff;
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+    }
+
+    &:active {
+      transform: translateY(0);
     }
   }
 }
 
-.upload-box {
-  width: 65px;
-}
+// 响应式设计 - 移动端适配
+@media (max-width: 768px) {
+  .register-form {
+    width: 95%;
+    min-width: unset;
+    height: auto;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
 
-.register-btn {
-  mix-blend-mode: normal;
-  text-align: center;
-  color: rgba(255, 255, 255, 1);
-  font-family: PingFang SC;
-  font-size: 16px;
-  width: 200px;
-  height: 42px;
-}
+  .regist-container {
+    padding: 24px 20px;
+  }
 
-.go-login {
-  padding-top: 10px;
-  cursor: default;
-  align-self: flex-end;
-  margin-bottom: 0;
-  mix-blend-mode: normal;
-  text-align: center;
-  color: rgba(0, 0, 0, 1);
-  font-family: PingFang SC;
-  font-size: 14px;
-  letter-spacing: 0.7px;
-}
-.login-btn-style {
-  display: inline-block;
-  color: blue;
-  border-bottom: 2px solid blue !important;
-  cursor: pointer;
-}
-.el-input ::v-deep .el-input__inner {
-  border: none;
-  background-color: white;
-  &:-webkit-autofill {
-    background-color: white;
-    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
-    -webkit-text-fill-color: $cursor !important;
+  // 移动端调整头部图标大小
+  .logo-top {
+    width: 150px !important;
+    height: 52px !important;
+  }
+
+  .logo-top1 {
+    width: 200px !important;
+    height: 62px !important;
   }
 }
+
+// 动画效果
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+// 自定义滚动条样式
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
 </style>