From 03ffda3fd6bad07193726c1b3adbd35d3f6f190f Mon Sep 17 00:00:00 2001
From: zhangyong <1224458590@qq.com>
Date: Wed, 20 Nov 2024 15:02:25 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E8=AE=BE=E7=9A=84=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |    2 +-
 src/App.vue                                   |   60 +-
 ...egister copy.html => 01Register copy.html} |    0
 src/components/01Register.html                |  838 +++++++++++
 ...ister2 copy.html => 02register2 copy.html} |    0
 src/components/HeaderNav.vue                  |   16 +-
 src/components/MobilePage.vue                 |   13 +
 src/components/Register.html                  | 1272 +++++++----------
 src/components/isMobile.js                    |    6 +
 src/components/register2.html                 |  539 -------
 src/components/router.js                      |   28 +-
 src/main.js                                   |   10 +
 12 files changed, 1444 insertions(+), 1340 deletions(-)
 rename src/components/{Register copy.html => 01Register copy.html} (100%)
 create mode 100644 src/components/01Register.html
 rename src/components/{register2 copy.html => 02register2 copy.html} (100%)
 create mode 100644 src/components/MobilePage.vue
 create mode 100644 src/components/isMobile.js
 delete mode 100644 src/components/register2.html

diff --git a/index.html b/index.html
index 7187419..f9447e2 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
   <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
   <!-- <link rel="icon" type="image/svg+xml" href="/assets/img/icon_svg.png" /> -->
   <link rel="icon" type="image/svg+xml" href="/AImzhu.svg" />
-  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="软件著作权登记申请,软件著作权申请流程,如何申请软件著作权,软件著作权的作用,软件著作权申请需要多久,软件著作权登记有什么意义？" />
   <meta name="keywords" content="软件著作权登记,软件著作权申请,软件著作权材料编写,如何申请软件著作权,软件著作权加急办理,提供专业知识产权代理服务,全程服务,不通过不收费,简单快捷" />
 
diff --git a/src/App.vue b/src/App.vue
index bdbbd30..f503ad0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,12 @@
 <template>
   <div id="app">
     <!-- 头部导航 -->
-    <HeaderNav></HeaderNav>
+    <HeaderNav v-show="!isMobileView"></HeaderNav>
 
     <!-- <router-view :class="{ active: isActiveRoute }"></router-view> -->
     <!-- <router-view></router-view> -->
     <!-- 尾部版权 -->
-    <Footer></Footer>
+    <Footer v-show="!isMobileView"></Footer>
 
   </div>
 </template>
@@ -24,13 +24,67 @@ import HeaderNav from './components/HeaderNav.vue'
 // import RegisterPage from './components/RegisterPage.vue'
 
 import Footer from './components/Footer.vue'
+import isMobile from './components/isMobile'
 export default {
   components: {
     // ShortCut,
     HeaderNav,
     Footer,
-
   },
+  data() {
+    return {
+      isMobileView: false
+    }
+  },
+
+  beforeMount() {
+    this.checkDeviceAndRedirect();
+    window.addEventListener('resize', this.checkDeviceAndRedirect);
+  },
+  methods: {
+    checkDeviceAndRedirect() {
+      const mobile = isMobile();
+      if (mobile && this.$route.name !== 'MobilePage') {
+        this.isMobileView = true;
+        this.$router.replace({ name: 'MobilePage' });
+      } else if (!mobile && this.$route.name !== 'HomePage') {
+        this.isMobileView = false;
+        this.$router.replace({ name: 'HomePage' });
+      }
+    }
+  },
+  beforeUnmount() {
+    window.removeEventListener('resize', this.checkDeviceAndRedirect);
+  }
+
+  // watch: {
+  //   $route(to, from) {
+  //     if (to.name === 'MobilePage') {
+  //       this.HeaderNav = false;
+  //       this.Footer = false;
+  //     } else {
+  //       this.HeaderNav = true;
+  //       this.Footer = true;
+  //     }
+  //   },
+  // },
+  // created() {
+  //   if (this.$route) {
+  //     this.updateComponentVisibility(this.$route);
+  //   }
+  // },
+  // methods: {
+  //   updateComponentVisibility(route) {
+  //     if (route.name === 'MobilePage') {
+  //       this.HeaderNav = false;
+  //       this.Footer = false;
+  //     } else {
+  //       this.HeaderNav = true;
+  //       this.Footer = true;
+  //     }
+  //   },
+  // },
+
 
   // watch: {
   //   // 监听路由变化
diff --git a/src/components/Register copy.html b/src/components/01Register copy.html
similarity index 100%
rename from src/components/Register copy.html
rename to src/components/01Register copy.html
diff --git a/src/components/01Register.html b/src/components/01Register.html
new file mode 100644
index 0000000..291bbb8
--- /dev/null
+++ b/src/components/01Register.html
@@ -0,0 +1,838 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
+  <title>注册界面</title>
+</head>
+<link rel="stylesheet" href="./style.css">
+<!-- <link rel="stylesheet" href="./layer/layer.css"> -->
+<link rel="stylesheet" href="./layui/css/layui.css">
+<link rel="stylesheet" href="./assets/font/iconfont.css">
+
+<style>
+  .register-page {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    background: url(./assets/img/login-register-bj.png) no-repeat;
+    background-size: cover;
+  }
+
+  .nav {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+    padding: 0, 10px;
+  }
+
+  .sign {
+    display: flex;
+    /* position: absolute; */
+    width: 500px;
+    height: 80px;
+  }
+
+  .sign h2 {
+    width: 180px;
+    height: 60px;
+    line-height: 60px;
+    text-align: center;
+    /* padding: auto 20px auto 50px; */
+    font-size: 36px;
+    margin: auto 20px auto 50px;
+  }
+
+  .sign p {
+    width: 180px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    margin: auto 0;
+    /* height: 20px; */
+    padding: 0 25px;
+    border-left: 2px solid rgba(0, 0, 0, .2);
+  }
+
+  .sign a {
+    width: 260px;
+    height: 46px;
+    margin-left: 50px;
+    margin-top: 17px;
+  }
+
+  .go-page {
+    display: flex;
+    justify-content: end;
+    /* position: absolute; */
+    width: 260px;
+    height: 80px;
+    /* border: 2px solid red; */
+    font-size: 16px;
+    /* right: 0; */
+  }
+
+  .go-page #login {
+    height: 30px;
+    line-height: 30px;
+    margin: auto 0;
+    margin-right: 20px;
+    padding: 0 20px;
+    border-radius: 20px;
+    /* border: none; */
+    background-color: rgba(255, 255, 255, .4);
+    color: #42210B;
+  }
+
+  .go-page #back-homepage {
+    height: 30px;
+    line-height: 30px;
+    margin: auto 0;
+    margin-right: 40px;
+    padding: 0 20px;
+    border-radius: 20px;
+    border: none;
+    /* background-color: rgba(255, 255, 255, .3); */
+    background-color: #42210B;
+    color: #FFF;
+  }
+
+  #login:hover {
+    background-color: #42210B;
+    color: #FFF;
+    font-weight: 700;
+    cursor: pointer;
+  }
+
+  #back-homepage:hover {
+    background-color: #332817;
+    color: #FFF;
+    font-weight: 700;
+    cursor: pointer;
+  }
+
+  #zcbd {
+    width: 420px;
+    margin: 50px auto;
+  }
+
+  ul {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    /* width: 380px; */
+    /* margin: auto; */
+    padding: 20px 40px;
+    border-radius: 20px;
+    background-color: #fff;
+  }
+
+  ul li {
+    display: flex;
+    margin: auto;
+    width: 340px;
+    height: 38px;
+    margin-bottom: 20px;
+  }
+
+  ul li input,
+  ul li select {
+    width: 340px;
+    height: 36px;
+    padding-left: 20px;
+    border: 1.25px solid #CCCCCC;
+    border-radius: 3px;
+    background-color: #fff;
+  }
+
+
+  input:-webkit-autofill {
+    background: transparent;
+    transition: background-color 50000s ease-in-out 0s;
+    -webkit-text-fill-color: unset;
+  }
+
+  input::-webkit-input-placeholder {
+    color: #999999
+  }
+
+  ul li input:focus {
+    border: 0.5px solid #fa911e;
+  }
+
+  ul li input:hover {
+    border: 0.25px solid #fa911e;
+  }
+
+  ul li:nth-child(1) {
+    display: flex;
+    flex-direction: column;
+    height: 50px;
+  }
+
+  ul li:nth-child(1) h4 {
+    /* width: 100px; */
+    height: 30px;
+    line-height: 30px;
+    /* text-align: center; */
+    font-size: 18px;
+    font-weight: 700;
+    /* border-bottom: 5px solid #fda633; */
+    margin: auto 10px;
+    margin-bottom: 5px;
+  }
+
+  ul li:nth-child(1) span {
+    height: 5px;
+    width: 50px;
+    margin-left: 35px;
+    background-color: #fda633;
+  }
+
+  /* ul li:nth-child(3) #yzm:hover {
+    cursor: pointer;
+    color: #333;
+    font-weight: 550;
+    -webkit-box-shadow: 0 0 10px #fda633;
+    -moz-box-shadow: 0 0 10px #fda633;
+    box-shadow: 0 0 10px #fda633;
+  } */
+
+  ul li:nth-child(3) {
+    position: relative;
+  }
+
+  ul li:nth-child(3) #yzm {
+    position: absolute;
+    right: 10px;
+    font-size: 14px;
+    line-height: 36px;
+    color: #0095ff;
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+  }
+
+  ul li:nth-child(3) #yzm:hover {
+    opacity: 0.6;
+  }
+
+  ul li:nth-child(4) {
+    position: relative;
+  }
+
+  ul li:nth-child(4) span {
+    position: absolute;
+    top: 11px;
+    right: 5px;
+    width: 16px;
+    height: 16px;
+    /* border: 1px solid red; */
+  }
+
+
+  ul li:nth-child(4) span:hover {
+    color: #007bff;
+  }
+
+  /* ul li:nth-child(5) #userRole {
+    color: #333;
+  } */
+
+  ul li:nth-child(5) {
+    height: 26px;
+    /* line-height: 16px; */
+    font-size: 12px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+  }
+
+  ul li:nth-child(5) .row {
+    display: flex;
+    position: relative;
+    width: 340px;
+  }
+
+  ul li:nth-child(5) #chec {
+    /* display: flex; */
+    position: absolute;
+    bottom: 5px;
+    width: 16px;
+    height: 16px;
+    /* margin-left: 10px; */
+  }
+
+  ul li:nth-child(5) p {
+    /* display: flex; */
+    position: absolute;
+    bottom: 6px;
+    height: 16px;
+    margin-left: 24px;
+  }
+
+  ul li:nth-child(5) p a:hover {
+    color: #007bff;
+  }
+
+  ul li:nth-child(6) button {
+    width: 340px;
+    height: 40px;
+    border: none;
+    border-radius: 6px;
+    background-color: #fda633;
+    color: #FFF;
+    font-size: 16px;
+  }
+
+  ul li:nth-child(6) button:hover {
+    cursor: pointer;
+    font-size: 18px;
+    -webkit-box-shadow: 0 0 10px #fda633;
+    -moz-box-shadow: 0 0 10px #fda633;
+    box-shadow: 0 0 10px #fda633;
+  }
+
+  ul li:nth-child(7) {
+    font-size: 14px;
+    margin-bottom: 0;
+    justify-content: flex-end;
+  }
+
+  ul li:nth-child(7) a {
+    color: #007bff;
+  }
+
+  ul li:nth-child(7) a:hover {
+    opacity: 0.6;
+  }
+
+  .custom-bg-color {
+    background-color: rgba(8, 195, 237, 0.3) !important;
+  }
+
+  .custom-font-size {
+    font-size: 20px !important;
+  }
+
+  .custom-bold-font {
+    font-weight: bold !important;
+  }
+
+  .custom-color {
+    color: #FFF !important;
+  }
+
+  .custom-border {
+    border: 2px solid red !important;
+  }
+</style>
+
+
+<body>
+  <div class="register-page">
+    <div class="nav">
+      <div class="sign">
+        <!-- <h2><a href="http://121.36.71.250:58040/src/components/#/HomePage">腾狮科技</a></h2>
+        <p>AI人工智能软著申请</p> -->
+        <a href="https://www.aimzhu.com">
+          <img src="./assets/img/headicon2.png" alt="logo图标">
+        </a>
+      </div>
+      <div class="go-page">
+        <a id="login" href="https://www.aimzhu.com/operator/">登录</a>
+        <a id="back-homepage" href="https://www.aimzhu.com">返回首页</a>
+      </div>
+    </div>
+
+
+    <!-- 注册框 -->
+    <form action="" id="zcbd" class="register">
+      <ul class="register_box">
+        <!-- 1 标题 -->
+        <li>
+          <h4>平台账号注册</h4>
+          <span></span>
+        </li>
+        <!-- 2 手机号输入框 -->
+        <li>
+          <input id="phone" type="text" placeholder="请输入您的真实手机号" onfocus="getphone()" onblur="losephone()">
+
+        </li>
+
+        <!-- 3 输入短信验证码 -->
+        <li>
+          <input id="inputyzm" type="text" placeholder="请输入短信验证码" onfocus="getinputyzm()" onblur="loseinputyzm()">
+          <button type="button" id="yzm">获取验证码</button>
+        </li>
+        <!-- 4. 设置密码 -->
+        <li>
+          <input id="password" type="password" placeholder="请输入8~16位密码，区分大小写" onfocus="getpassword()"
+            onblur="losepassword()">
+          <span id="passwordeye" class="iconfont icon-xianshiyincang1"></span>
+        </li>
+        <!-- 5. 勾选用户协议 -->
+        <li>
+          <div class="row" id="row123">
+            <input id="chec" type="checkbox">
+            <p>我同意平台
+              <a id="openUserAgreement" class="layer-btn" href="https://www.aimzhu.com/UserAgreement.html"
+                target="_blank">《用户服务协议》</a>和<a href="https://www.aimzhu.com/PrivacyPolicy.html"
+                target="_blank">《隐私条款》</a>
+            </p>
+          </div>
+
+
+        </li>
+        <!-- 6. 点击注册 -->
+        <li>
+          <button type="button" id="register" class="stopbtn" onclick="usersubmit()">注册</button>
+        </li>
+        <!-- 7. 已有账号，立即登录 -->
+        <li>
+          <p>已有账号？<a href="https://www.aimzhu.com/operator/">立即登录</a></p>
+        </li>
+      </ul>
+
+    </form>
+
+  </div>
+
+  <script src="./jquery.min.js"></script>
+  <script src="./layui/layui.js"></script>
+  <!-- <script src="./layer/layer.js"></script> -->
+  <script src="./Register.js"></script>
+  <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script>
+
+    // const phone = document.querySelector('#phone')
+    // 2. 验证手机号
+    function getphone() {
+      layer.tips('请输入您的真实手机号', '#phone', {
+        // id: 'tips1',
+        shadeClose: false,
+        tips: [2, '#30a6f5'],
+        time: 0,
+        area: ['auto', '36px'],
+        show: true
+      })
+    }
+    //手机号失去焦点
+    function losephone() {
+      var phone = document.getElementById('phone');
+      var reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
+      if (phone.value == '') {
+        layer.tips('X 请您填写手机号', '#phone', {
+          // id: 'tips1-1',
+          shadeClose: false,
+          tips: [2, 'red'],
+          time: 0,
+          area: ['auto', '36px'],
+          show: true
+        })
+        return false;
+      } else {
+        if (!reg.test(phone.value)) {
+          layer.tips('X 请输入正确的手机号', '#phone', {
+            // id: 'tips1-2',
+            shadeClose: false,
+            tips: [2, 'red'],
+            time: 0,
+            area: ['auto', '36px'],
+            show: true
+
+          })
+          return false;
+        } else {
+          layer.tips('√', '#phone', {
+            // id: 'tips1-3',
+            shadeClose: false,
+            tips: [2, 'green'],
+            time: 0,
+            area: ['auto', '36px'],
+            show: true
+          })
+          return true;
+        }
+        return true;
+      }
+    }
+
+    // 4. 验证输入短信验证码
+    function getinputyzm() {
+      layer.tips('请输入验证码', '#inputyzm', {
+        // id: 'tips2',
+        shadeClose: false,
+        tips: [2, '#30a6f5'],
+        time: 0,
+        area: ['auto', '36px']
+      })
+    }
+    function loseinputyzm() {
+      var inputyzm = document.querySelector('#inputyzm')
+      var yzmcode = /^[0-9]\d{5}$/;
+      if (inputyzm.value == '') {
+        layer.tips('X 请您填写验证码', '#inputyzm', {
+          // id: 'tips2-1',
+          tips: [2, 'red'],
+          time: 0,
+          area: ['auto', '36px'],
+          show: true
+        })
+        return false;
+      } else {
+        if (!yzmcode.test(inputyzm.value)) {
+          //验证不成功
+          layer.tips('X 请您正确填写验证码', '#inputyzm', {
+            // id: 'tips2-2',
+            tips: [2, 'red'],
+            time: 0,
+            area: ['auto', '36px'],
+            show: true
+          })
+          return false;
+        } else {
+          //验证成功
+          layer.tips('√', '#inputyzm', {
+            // id: 'tips2-3',
+            tips: [2, 'green'],
+            time: 0,
+            area: ['auto', '36px'],
+            show: true
+          })
+          return true;
+        }
+        return true;
+      }
+    }
+
+    // 5.密码验证
+    function getpassword() {
+      layer.tips('请输入8~16位密码，区分大小写', '#password', {
+        // id: 'tips3',
+        shadeClose: false,
+        tips: [2, '#30a6f5'],
+        time: 0,
+        area: ['auto', '36px']
+      })
+    }
+    function losepassword() {
+      var password = document.querySelector('#password').value
+      var pwdyz = /^[A-Za-z0-9!@#$%^&*()_+{}\[\]:;<>,.?\/~`-]{8,16}$/
+
+      if (password.value = '') {
+        layer.tips('X 请您填写密码(8-16位，区分大小写)', '#password', {
+          // id: 'tips3-1',
+          tips: [2, 'red'],
+          time: 0,
+          area: ['auto', '36px'],
+          show: true
+        })
+        return false;
+      } else {
+        if (!pwdyz.test(password)) {
+          //验证不成功
+          layer.tips('X 请您正确填写密码(8-16位，区分大小写)', '#password', {
+            // id: 'tips3-2',
+            tips: [2, 'red'],
+            time: 0,
+            area: ['auto', '36px'],
+            show: true
+          })
+          return false;
+        } else {
+          //验证成功
+          layer.tips('√', '#password', {
+            // id: 'tips3-3',
+            tips: [2, 'green'],
+            time: 0,
+            area: ['auto', '36px'],
+            show: true
+          })
+          return true;
+        }
+        return true;
+      }
+    }
+
+    // 点击注册按钮验证所填内容与是否勾选同意并遵守《用户服务协议》
+    function usersubmit() {
+      var chec = document.querySelector('#chec')
+      // var myselect = document.querySelector('#userRole')
+      // var index = myselect.selectedIndex
+      var userchecked = false;
+      // console.log(myselect.options[index].value);
+
+      var phone = losephone()
+      if (phone === false) {
+        return
+      }
+      var yzm11 = loseinputyzm()
+      if (yzm11 === false) {
+        return
+      }
+      var pwd = losepassword()
+      if (pwd === false) {
+        return
+      }
+
+      if (chec.checked == true) {
+        userchecked = true
+        layer.tips('√', '#row123', {
+          tips: [2, 'green'],
+          time: 0,
+          area: ['auto', '36px'],
+          show: true
+        })
+
+      } else {
+        layer.tips('请阅读并同意《用户服务协议》和《隐私条款》', '#row123', {
+          tips: [2, 'red'],
+          time: 0,
+          area: ['auto', '36px'],
+          show: true
+        })
+        return
+        // userchecked = false;
+      }
+      DoSomething()
+
+    }
+    // 显示隐藏密码
+    switchPwd()
+    function switchPwd() {
+      var passwordeye = $('#passwordeye')
+      var showPwd = $('#password')
+      passwordeye.off('click').on('click', function () {
+        if (passwordeye.hasClass('icon-xianshiyincang1')) {
+          // 密码可见
+          passwordeye.removeClass('icon-xianshiyincang1').addClass('icon-xianshiyincang')
+          showPwd.prop('type', 'text')
+        } else {
+          passwordeye.removeClass('icon-xianshiyincang').addClass('icon-xianshiyincang1')
+          showPwd.prop('type', 'password')
+        }
+      })
+    }
+
+    $("#yzm").click(function (e) {
+      let phoneVal = $("#phone").val()
+      if (phoneVal === '') {
+        layer.msg('请填写手机号', {
+          icon: 2,
+          time: 2000,
+          offset: '50px',
+        })
+      } else {
+        let phoneResult = "https://www.aimzhu.com/operator/api/systemuser/check-exists/" + phoneVal
+
+        $.ajax({
+          type: "GET",
+          dataType: 'json',
+          url: "https://www.aimzhu.com/operator/api/systemuser/check-exists/" + phoneVal,
+          success: function (msg) {
+            if (msg) {
+              layer.msg('用户已经存在，请更换手机号', {
+                icon: 2,
+                time: 2000,
+                offset: '50px',
+              })
+            } else {
+              $.ajax({
+                type: "GET",
+                dataType: 'json',
+                url: "https://www.aimzhu.com/operator/app/sms/verify-code/" + phoneVal,
+                success: function (msg) {
+                  // alert('验证码已发送')
+                  layer.msg('注册验证码已经发送到手机上，有效时间2分钟', {
+                    icon: 1,
+                    time: 6000,
+                    offset: '50px',
+                    // shade: [0.5, '#000'],
+                    // skin: ['custom-bg-color']
+                  })
+
+                  // 启动倒计时
+                  startCountdown()
+                },
+                error: function (data) {
+                  console.log(data);
+                  document.getElementById('yzm').disabled = false;
+                  document.getElementById('yzm').innerText = '获取验证码';
+                  layer.msg('获取验证码失败,请不要在验证码有效期内重新获取', {
+                    icon: 2,
+                    time: 2000,
+                    offset: '50px',
+                    // skin: ['custom-bg-color']
+                    // shade: [0.5, '#000'],
+
+                  })
+                }
+              });
+            }
+          },
+          error: function (data) {
+
+          }
+        })
+
+        // axios.get(phoneResult).then(response => {
+        //   console.log(response.data);
+        //   let jieguo = response.data
+        //   if (jieguo) {
+        //     layer.msg('用户已经存在，请更换手机号', {
+        //       icon: 2,
+        //       time: 2000,
+        //       offset: '50px',
+        //     })
+        //   } else {
+        //     $.ajax({
+        //       type: "GET",
+        //       dataType: 'json',
+        //       url: "https://www.aimzhu.com/operator/app/sms/verify-code/" + phoneVal,
+        //       success: function (msg) {
+        //         // alert('验证码已发送')
+        //         layer.msg('注册验证码已经发送到手机上，有效时间2分钟', {
+        //           icon: 1,
+        //           time: 6000,
+        //           offset: '50px',
+        //           // shade: [0.5, '#000'],
+        //           // skin: ['custom-bg-color']
+        //         })
+
+        //         // 启动倒计时
+        //         startCountdown()
+        //       },
+        //       error: function (data) {
+        //         console.log(data);
+        //         document.getElementById('yzm').disabled = false;
+        //         document.getElementById('yzm').innerText = '获取验证码';
+        //         layer.msg('获取验证码失败,请不要在验证码有效期内重新获取', {
+        //           icon: 2,
+        //           time: 2000,
+        //           offset: '50px',
+        //           // skin: ['custom-bg-color']
+        //           // shade: [0.5, '#000'],
+
+        //         })
+        //       }
+        //     });
+        //   }
+        // })
+      }
+
+    });
+    function startCountdown() {
+      remainingTime = 120;
+      document.getElementById('yzm').disabled = true;
+      // countdownTimer = setInterval(() => {
+      //   remainingTime--;
+      //   if (remainingTime <= 0) {
+      //     clearInterval(countdownTimer);
+      //     document.getElementById('yzm').disabled = false;
+      //     document.getElementById('yzm').innerText = '获取验证码';
+      //   } else {
+      //     document.getElementById('yzm').innerText = `重新获取(${remainingTime}秒)`;
+      //   }
+      // }, 1000);
+
+      countdownTimer = setInterval(function () {
+        remainingTime--;
+        if (remainingTime <= 0) {
+          clearInterval(countdownTimer);
+          document.getElementById('yzm').disabled = false;
+          document.getElementById('yzm').innerText = '获取验证码';
+        } else {
+          document.getElementById('yzm').innerText = '重新获取(' + remainingTime + '秒)';
+        }
+      }, 1000);
+
+    }
+
+
+    function DoSomething(e) {
+      var phoneVal = $("#phone").val();
+      var inputyzm = $("#inputyzm").val();
+      var password = $("#password").val();
+      var password2 = $("#password").val();
+      var userRole = "606f85bc-63fd-407e-8e2e-6ce48178b70a";
+
+      var data = {
+        password: password,
+        passwordSame: password,
+        phone: phoneVal,
+        verifyCode: inputyzm
+      }
+      console.log('data', data);
+      $('#register').attr('disabled', 'disabled')
+      $('#register').css('cursor', 'no-drop')
+      $.ajax({
+        type: "POST",
+        data: JSON.stringify(data),
+        contentType: "application/json;charset=utf-8",
+        url: "https://www.aimzhu.com/operator/app/register/phone-password?userRole=" + userRole,
+        success: function (data) {
+          // $('#register').attr('disabled', 'disabled')
+          // $('#register').css('cursor', 'no-drop')
+          // alert("注册成功");
+          layer.msg('注册成功', {
+            time: 2000,
+            icon: 6,
+            shadeClose: false,
+            shift: 1,
+            offset: '50px',
+          }, function () {
+            // 当消息关闭后执行的回调函数  
+            startCountdown()
+          })
+
+          console.log('success', data);
+
+          function startCountdown() {
+            // 设置倒计时 3s
+            var countdownSeconds = 3
+            // 每秒更新倒计时
+            var countdownInterval = setInterval(function () {
+              countdownSeconds--;
+              // 显示倒计时信息
+              layer.msg(countdownSeconds + '秒后跳转到登录页', {
+                time: 3000,
+                shadeClose: false,
+                icon: 6
+              })
+              if (countdownSeconds <= 0) {
+                clearInterval(countdownInterval)
+                // 跳转到登录页
+                window.location.href = 'https://www.aimzhu.com/operator/'
+              }
+            }, 1000)
+          }
+
+        },
+        error: function (data, code) {
+          // alert("注册失败")
+          $('#register').removeAttr('disabled')
+          $('#register').css('cursor', 'pointer')
+          layer.msg(data.responseJSON.msg, {
+            icon: 5,
+            time: 3000,
+          })
+          // const errmsg = data.responseJSON.msg
+          // alert(data.responseJSON.msg)
+          console.log('error', data);
+          console.log('error', code);
+        }
+      });
+    }
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/components/register2 copy.html b/src/components/02register2 copy.html
similarity index 100%
rename from src/components/register2 copy.html
rename to src/components/02register2 copy.html
diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue
index 55cd925..0c41386 100644
--- a/src/components/HeaderNav.vue
+++ b/src/components/HeaderNav.vue
@@ -1,6 +1,5 @@
 <template>
-
-  <div id="nav" class="header-nav" :class="{ 'fixed-nav': isFixed }">
+  <div id="nav" class="header-nav" :class="{ 'fixed-nav': isFixed }" v-show="HeaderNav">
     <div class="box">
       <a class="nav-icon" href="https://www.aimzhu.com" @click="gotoHomePage">
         <img :src="logoSrc" alt="首页logo">
@@ -43,6 +42,9 @@ export default {
       shouldReloadHomePage: false, // 添加标志，用于判断是否需要刷新首页
       // isHomePage: true, // 用于跟踪是否在首页
       // logoSrc: import('/assets/img/headicon1.png'), // 默认的logo图片
+      
+      currentRoute: '/HomePage', // 默认激活首页
+      HeaderNav: true,
     }
   },
   
@@ -102,6 +104,16 @@ export default {
         
       }
     },  
+
+    '$route': {
+      immediate: true, // 立即执行一次监听函数
+      handler(newRoute) {
+        // 根据路由名称或路径来设置show的值
+        this.HeaderNav = newRoute.name !== 'MobilePage' && !newRoute.path.includes('MobilePage');
+        this.currentRoute = newRoute.path; // 更新当前路由路径
+      }
+    }
+
     // $route(to, from) {
     //   // 当路由跳转到首页且设置了刷新标志时，刷新页面
     //   if (to.path === '/HomePage' && this.shouldRefreshHome) {
diff --git a/src/components/MobilePage.vue b/src/components/MobilePage.vue
new file mode 100644
index 0000000..8a141de
--- /dev/null
+++ b/src/components/MobilePage.vue
@@ -0,0 +1,13 @@
+<template>
+  1111111111111111
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Register.html b/src/components/Register.html
index 291bbb8..1eabb6b 100644
--- a/src/components/Register.html
+++ b/src/components/Register.html
@@ -6,831 +6,535 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
   <title>注册界面</title>
+  <link rel="stylesheet" href="./style.css">
+  <link rel="stylesheet" href="./assets/font/iconfont.css">
+  <link rel="stylesheet" href="./layui/css/layui.css">
+  <style>
+    @media screen and (max-width: 1920px) {
+      html {
+        font-size: 66px !important;
+      }
+    }
+
+    @media screen and (min-width: 1360px) {
+      html {
+        font-size: 80px !important;
+      }
+    }
+
+    .page {
+      position: relative;
+      width: 100vw;
+      height: 100vh;
+      background: url(./assets/img/login-register-bj.png) no-repeat;
+      background-size: cover;
+    }
+
+    .page .top {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-content: center;
+      width: 100vw;
+      height: 1rem;
+    }
+
+    .top .left {
+      width: 3.25rem;
+      height: .625rem;
+      margin: .1875rem .625rem;
+    }
+
+    .top .left .logo {
+      width: 100%;
+      height: 100%;
+      background: url(./assets/img/headicon2.png) no-repeat;
+      background-size: contain;
+    }
+
+    .top .right {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-content: center;
+      width: 2.5rem;
+      height: .5rem;
+      margin: .25rem .375rem;
+    }
+
+    .top .right #login {
+      font-size: .2rem;
+      padding: .0625rem .25rem;
+      border: none;
+      border-radius: .3125rem;
+      background: rgba(255, 255, 255, 0.4);
+      color: #42210B;
+    }
+
+    .top .right #login:hover {
+      cursor: pointer;
+      background: #42210B;
+      color: #FFF;
+      font-weight: 700;
+    }
+
+    .top .right #goHomePage {
+      font-size: .2rem;
+      padding: .0625rem .25rem;
+      border: none;
+      border-radius: .3125rem;
+      color: #FFF;
+      background: #42210B;
+    }
+
+    .top .right #goHomePage:hover {
+      cursor: pointer;
+      font-weight: 700;
+    }
+
+    .loginBox {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      flex-direction: column;
+      width: 6.25rem;
+      height: 6.875rem;
+      background-color: #fff;
+      border-radius: .25rem;
+      padding: .5rem;
+    }
+
+    .loginBox .title {
+      width: 100%;
+    }
+
+    .loginBox .title h3 {
+      font-size: .275rem;
+      font-weight: 700;
+    }
+
+    .loginBox .title span {
+      display: block;
+      width: .875rem;
+      height: .0625rem;
+      background-color: #fda633;
+      margin-left: .375rem;
+      margin-top: .0625rem;
+    }
+
+    .loginBox .msg {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      margin-top: .5rem;
+    }
+
+    .loginBox .msg .msgBox {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .loginBox .msg .msgBox li {
+      position: relative;
+      width: 100%;
+      height: .625rem;
+      margin-bottom: .25rem;
+      border: none;
+    }
+
+    .loginBox .msg .msgBox li input {
+      position: absolute;
+      width: 100%;
+      height: .625rem;
+      text-indent: .1875rem;
+      border: none;
+      border: .0187rem solid #CCC;
+      border-radius: .1rem;
+      font-size: .1875rem;
+      color: #999999;
+    }
+
+    input:-webkit-autofill {
+      background: transparent;
+      transition: background-color 50000s ease-in-out 0s;
+      -webkit-text-fill-color: unset;
+    }
+
+    input::-webkit-input-placeholder {
+      color: #999999
+    }
+
+    /*去除ie edge的密码框默认出现的小眼睛*/
+    input[type="password"]::-ms-reveal {
+      display: none;
+    }
+
+    input[type="password"]::-ms-clear {
+      display: none;
+    }
+
+    input[type="password"]::-o-clear {
+      display: none;
+    }
+
+    .loginBox .msg .msgBox li input:focus-within {
+      border: .0156rem solid #fa911e;
+    }
+
+    .loginBox .msg .msgBox li input:hover {
+      border: .0156rem solid #fa911e;
+    }
+
+    .loginBox .msg .msgBox li:nth-child(2) button {
+      position: absolute;
+      right: .125rem;
+      width: 1.25rem;
+      height: .375rem;
+      border: none;
+      background-color: transparent;
+      letter-spacing: .025rem;
+      margin: .125rem 0;
+      cursor: pointer;
+      color: #0095ff;
+      font-size: .1875rem;
+    }
+
+    .loginBox .msg .msgBox li:nth-child(2) button:hover {
+      opacity: 0.7;
+    }
+
+    .loginBox .msg .msgBox li:nth-child(3) i {
+      position: absolute;
+      top: .1875rem;
+      right: .125rem;
+      display: block;
+      width: .25rem;
+      height: .25rem;
+      color: #999999;
+    }
+
+    .loginBox .msg .msgBox li:nth-child(3) i:hover {
+      color: #007bff;
+    }
+
+    .loginBox .msg .agreement {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: start;
+      align-content: center;
+      width: 100%;
+      height: .5rem;
+      line-height: .5rem;
+      color: #333;
+      font-size: .175rem;
+      margin-top: .25rem;
+    }
+
+    .loginBox .msg .agreement input {
+      width: .25rem;
+      height: .25rem;
+      margin: .125rem 0;
+      color: #333;
+      font-size: .15rem;
+      margin-right: .125rem;
+    }
+
+    .loginBox .msg .agreement a {
+      color: #0095ff;
+    }
+
+    .loginBox .msg .agreement a:hover {
+      opacity: 0.7;
+    }
+
+    .loginBox .msg #register {
+      width: 100%;
+      height: .625rem;
+      border: none;
+      border-radius: .1rem;
+      background-color: #C0C0C0;
+      color: #FFF;
+      font-size: .225rem;
+      margin-top: .125rem;
+      cursor: not-allowed;
+    }
+
+    .loginBox .msg .register-disabled {
+      background-color: #fda633;
+      cursor: not-allowed;
+    }
+
+    .loginBox .msg .register:not(.register-disabled):hover {
+      font-size: .25rem;
+      font-weight: 700;
+      -webkit-box-shadow: 0 0 .125rem #fda633;
+      -moz-box-shadow: 0 0 .125rem #fda633;
+      box-shadow: 0 0 .125rem #fda633;
+      /* cursor: pointer; */
+      background-color: #fda633;
+    }
+
+    .loginBox .goPage {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-content: center;
+      width: 100%;
+      height: .5rem;
+      margin-top: .125rem;
+      font-size: .1875rem;
+      color: #333;
+    }
+
+    .loginBox .goPage a {
+      color: #0095ff;
+    }
+  </style>
 </head>
-<link rel="stylesheet" href="./style.css">
-<!-- <link rel="stylesheet" href="./layer/layer.css"> -->
-<link rel="stylesheet" href="./layui/css/layui.css">
-<link rel="stylesheet" href="./assets/font/iconfont.css">
-
-<style>
-  .register-page {
-    position: relative;
-    width: 100vw;
-    height: 100vh;
-    background: url(./assets/img/login-register-bj.png) no-repeat;
-    background-size: cover;
-  }
-
-  .nav {
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    width: 100%;
-    padding: 0, 10px;
-  }
-
-  .sign {
-    display: flex;
-    /* position: absolute; */
-    width: 500px;
-    height: 80px;
-  }
-
-  .sign h2 {
-    width: 180px;
-    height: 60px;
-    line-height: 60px;
-    text-align: center;
-    /* padding: auto 20px auto 50px; */
-    font-size: 36px;
-    margin: auto 20px auto 50px;
-  }
-
-  .sign p {
-    width: 180px;
-    height: 30px;
-    line-height: 30px;
-    font-size: 14px;
-    margin: auto 0;
-    /* height: 20px; */
-    padding: 0 25px;
-    border-left: 2px solid rgba(0, 0, 0, .2);
-  }
-
-  .sign a {
-    width: 260px;
-    height: 46px;
-    margin-left: 50px;
-    margin-top: 17px;
-  }
-
-  .go-page {
-    display: flex;
-    justify-content: end;
-    /* position: absolute; */
-    width: 260px;
-    height: 80px;
-    /* border: 2px solid red; */
-    font-size: 16px;
-    /* right: 0; */
-  }
-
-  .go-page #login {
-    height: 30px;
-    line-height: 30px;
-    margin: auto 0;
-    margin-right: 20px;
-    padding: 0 20px;
-    border-radius: 20px;
-    /* border: none; */
-    background-color: rgba(255, 255, 255, .4);
-    color: #42210B;
-  }
-
-  .go-page #back-homepage {
-    height: 30px;
-    line-height: 30px;
-    margin: auto 0;
-    margin-right: 40px;
-    padding: 0 20px;
-    border-radius: 20px;
-    border: none;
-    /* background-color: rgba(255, 255, 255, .3); */
-    background-color: #42210B;
-    color: #FFF;
-  }
-
-  #login:hover {
-    background-color: #42210B;
-    color: #FFF;
-    font-weight: 700;
-    cursor: pointer;
-  }
-
-  #back-homepage:hover {
-    background-color: #332817;
-    color: #FFF;
-    font-weight: 700;
-    cursor: pointer;
-  }
-
-  #zcbd {
-    width: 420px;
-    margin: 50px auto;
-  }
-
-  ul {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    flex-direction: column;
-    /* width: 380px; */
-    /* margin: auto; */
-    padding: 20px 40px;
-    border-radius: 20px;
-    background-color: #fff;
-  }
-
-  ul li {
-    display: flex;
-    margin: auto;
-    width: 340px;
-    height: 38px;
-    margin-bottom: 20px;
-  }
-
-  ul li input,
-  ul li select {
-    width: 340px;
-    height: 36px;
-    padding-left: 20px;
-    border: 1.25px solid #CCCCCC;
-    border-radius: 3px;
-    background-color: #fff;
-  }
-
-
-  input:-webkit-autofill {
-    background: transparent;
-    transition: background-color 50000s ease-in-out 0s;
-    -webkit-text-fill-color: unset;
-  }
-
-  input::-webkit-input-placeholder {
-    color: #999999
-  }
-
-  ul li input:focus {
-    border: 0.5px solid #fa911e;
-  }
-
-  ul li input:hover {
-    border: 0.25px solid #fa911e;
-  }
-
-  ul li:nth-child(1) {
-    display: flex;
-    flex-direction: column;
-    height: 50px;
-  }
-
-  ul li:nth-child(1) h4 {
-    /* width: 100px; */
-    height: 30px;
-    line-height: 30px;
-    /* text-align: center; */
-    font-size: 18px;
-    font-weight: 700;
-    /* border-bottom: 5px solid #fda633; */
-    margin: auto 10px;
-    margin-bottom: 5px;
-  }
-
-  ul li:nth-child(1) span {
-    height: 5px;
-    width: 50px;
-    margin-left: 35px;
-    background-color: #fda633;
-  }
-
-  /* ul li:nth-child(3) #yzm:hover {
-    cursor: pointer;
-    color: #333;
-    font-weight: 550;
-    -webkit-box-shadow: 0 0 10px #fda633;
-    -moz-box-shadow: 0 0 10px #fda633;
-    box-shadow: 0 0 10px #fda633;
-  } */
-
-  ul li:nth-child(3) {
-    position: relative;
-  }
-
-  ul li:nth-child(3) #yzm {
-    position: absolute;
-    right: 10px;
-    font-size: 14px;
-    line-height: 36px;
-    color: #0095ff;
-    cursor: pointer;
-    background-color: transparent;
-    border: none;
-  }
-
-  ul li:nth-child(3) #yzm:hover {
-    opacity: 0.6;
-  }
-
-  ul li:nth-child(4) {
-    position: relative;
-  }
-
-  ul li:nth-child(4) span {
-    position: absolute;
-    top: 11px;
-    right: 5px;
-    width: 16px;
-    height: 16px;
-    /* border: 1px solid red; */
-  }
-
-
-  ul li:nth-child(4) span:hover {
-    color: #007bff;
-  }
-
-  /* ul li:nth-child(5) #userRole {
-    color: #333;
-  } */
-
-  ul li:nth-child(5) {
-    height: 26px;
-    /* line-height: 16px; */
-    font-size: 12px;
-    margin-bottom: 10px;
-    margin-top: 10px;
-  }
-
-  ul li:nth-child(5) .row {
-    display: flex;
-    position: relative;
-    width: 340px;
-  }
-
-  ul li:nth-child(5) #chec {
-    /* display: flex; */
-    position: absolute;
-    bottom: 5px;
-    width: 16px;
-    height: 16px;
-    /* margin-left: 10px; */
-  }
-
-  ul li:nth-child(5) p {
-    /* display: flex; */
-    position: absolute;
-    bottom: 6px;
-    height: 16px;
-    margin-left: 24px;
-  }
-
-  ul li:nth-child(5) p a:hover {
-    color: #007bff;
-  }
-
-  ul li:nth-child(6) button {
-    width: 340px;
-    height: 40px;
-    border: none;
-    border-radius: 6px;
-    background-color: #fda633;
-    color: #FFF;
-    font-size: 16px;
-  }
-
-  ul li:nth-child(6) button:hover {
-    cursor: pointer;
-    font-size: 18px;
-    -webkit-box-shadow: 0 0 10px #fda633;
-    -moz-box-shadow: 0 0 10px #fda633;
-    box-shadow: 0 0 10px #fda633;
-  }
-
-  ul li:nth-child(7) {
-    font-size: 14px;
-    margin-bottom: 0;
-    justify-content: flex-end;
-  }
-
-  ul li:nth-child(7) a {
-    color: #007bff;
-  }
-
-  ul li:nth-child(7) a:hover {
-    opacity: 0.6;
-  }
-
-  .custom-bg-color {
-    background-color: rgba(8, 195, 237, 0.3) !important;
-  }
-
-  .custom-font-size {
-    font-size: 20px !important;
-  }
-
-  .custom-bold-font {
-    font-weight: bold !important;
-  }
-
-  .custom-color {
-    color: #FFF !important;
-  }
-
-  .custom-border {
-    border: 2px solid red !important;
-  }
-</style>
-
 
 <body>
-  <div class="register-page">
-    <div class="nav">
-      <div class="sign">
-        <!-- <h2><a href="http://121.36.71.250:58040/src/components/#/HomePage">腾狮科技</a></h2>
-        <p>AI人工智能软著申请</p> -->
-        <a href="https://www.aimzhu.com">
-          <img src="./assets/img/headicon2.png" alt="logo图标">
-        </a>
-      </div>
-      <div class="go-page">
-        <a id="login" href="https://www.aimzhu.com/operator/">登录</a>
-        <a id="back-homepage" href="https://www.aimzhu.com">返回首页</a>
+  <div class="page">
+    <div class="top">
+      <a class="left" href="https://www.aimzhu.com">
+        <div class="logo"></div>
+      </a>
+      <div class="right">
+        <a id="login" class="login" href="https://www.aimzhu.com/operator/">登录</a>
+        <a id="goHomePage" class="goHomePage" href="https://www.aimzhu.com">返回首页</a>
+      </div>
+    </div>
+    <div class="loginBox">
+      <div class="title">
+        <h3>平台账号注册</h3>
+        <span></span>
+      </div>
+      <form action="" class="msg">
+        <ul class="msgBox">
+          <li>
+            <input id="phone" type="text" placeholder="请输入您的手机号">
+          </li>
+          <li>
+            <input id="code" type="text" placeholder="请输入短信验证码">
+            <button id="getCode" type="button">获取验证码</button>
+          </li>
+          <li>
+            <input id="pwd" type="password" placeholder="请输入密码(8~16位，大小写字母，数字或特殊字符)">
+            <i id="showHide" class="iconfont icon-xianshiyincang1"></i>
+          </li>
+        </ul>
+        <div class="agreement">
+          <input type="checkbox">我同意平台
+          <a href="https://www.aimzhu.com/UserAgreement.html" target="_blank">《用户服务协议》</a>
+          和
+          <a href="https://www.aimzhu.com/PrivacyPolicy.html" target="_blank">《隐私条款》</a>
+        </div>
+        <button id="register" class="register" type="button" disabled>注册</button>
+      </form>
+      <div class="goPage">
+        <span>已有账号？<a href="https://www.aimzhu.com/operator/">立即登录</a></span>
       </div>
     </div>
-
-
-    <!-- 注册框 -->
-    <form action="" id="zcbd" class="register">
-      <ul class="register_box">
-        <!-- 1 标题 -->
-        <li>
-          <h4>平台账号注册</h4>
-          <span></span>
-        </li>
-        <!-- 2 手机号输入框 -->
-        <li>
-          <input id="phone" type="text" placeholder="请输入您的真实手机号" onfocus="getphone()" onblur="losephone()">
-
-        </li>
-
-        <!-- 3 输入短信验证码 -->
-        <li>
-          <input id="inputyzm" type="text" placeholder="请输入短信验证码" onfocus="getinputyzm()" onblur="loseinputyzm()">
-          <button type="button" id="yzm">获取验证码</button>
-        </li>
-        <!-- 4. 设置密码 -->
-        <li>
-          <input id="password" type="password" placeholder="请输入8~16位密码，区分大小写" onfocus="getpassword()"
-            onblur="losepassword()">
-          <span id="passwordeye" class="iconfont icon-xianshiyincang1"></span>
-        </li>
-        <!-- 5. 勾选用户协议 -->
-        <li>
-          <div class="row" id="row123">
-            <input id="chec" type="checkbox">
-            <p>我同意平台
-              <a id="openUserAgreement" class="layer-btn" href="https://www.aimzhu.com/UserAgreement.html"
-                target="_blank">《用户服务协议》</a>和<a href="https://www.aimzhu.com/PrivacyPolicy.html"
-                target="_blank">《隐私条款》</a>
-            </p>
-          </div>
-
-
-        </li>
-        <!-- 6. 点击注册 -->
-        <li>
-          <button type="button" id="register" class="stopbtn" onclick="usersubmit()">注册</button>
-        </li>
-        <!-- 7. 已有账号，立即登录 -->
-        <li>
-          <p>已有账号？<a href="https://www.aimzhu.com/operator/">立即登录</a></p>
-        </li>
-      </ul>
-
-    </form>
-
   </div>
 
   <script src="./jquery.min.js"></script>
   <script src="./layui/layui.js"></script>
-  <!-- <script src="./layer/layer.js"></script> -->
   <script src="./Register.js"></script>
   <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script>
 
-    // const phone = document.querySelector('#phone')
-    // 2. 验证手机号
-    function getphone() {
-      layer.tips('请输入您的真实手机号', '#phone', {
-        // id: 'tips1',
-        shadeClose: false,
-        tips: [2, '#30a6f5'],
-        time: 0,
-        area: ['auto', '36px'],
-        show: true
-      })
-    }
-    //手机号失去焦点
-    function losephone() {
-      var phone = document.getElementById('phone');
-      var reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
-      if (phone.value == '') {
-        layer.tips('X 请您填写手机号', '#phone', {
-          // id: 'tips1-1',
-          shadeClose: false,
-          tips: [2, 'red'],
-          time: 0,
-          area: ['auto', '36px'],
-          show: true
-        })
-        return false;
-      } else {
-        if (!reg.test(phone.value)) {
-          layer.tips('X 请输入正确的手机号', '#phone', {
-            // id: 'tips1-2',
-            shadeClose: false,
-            tips: [2, 'red'],
-            time: 0,
-            area: ['auto', '36px'],
-            show: true
+    const $ = layui.jquery;
+    const layer = layui.layer;
 
-          })
-          return false;
-        } else {
-          layer.tips('√', '#phone', {
-            // id: 'tips1-3',
-            shadeClose: false,
-            tips: [2, 'green'],
-            time: 0,
-            area: ['auto', '36px'],
-            show: true
-          })
-          return true;
-        }
-        return true;
-      }
+    let isPhoneValid = false;
+    let isCodeSent = false;
+    let countdown = 120;
+
+    // 手机号校验
+    function validatePhone(phone) {
+      const phoneRegex = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
+      return phoneRegex.test(phone);
     }
 
-    // 4. 验证输入短信验证码
-    function getinputyzm() {
-      layer.tips('请输入验证码', '#inputyzm', {
-        // id: 'tips2',
-        shadeClose: false,
-        tips: [2, '#30a6f5'],
-        time: 0,
-        area: ['auto', '36px']
-      })
-    }
-    function loseinputyzm() {
-      var inputyzm = document.querySelector('#inputyzm')
-      var yzmcode = /^[0-9]\d{5}$/;
-      if (inputyzm.value == '') {
-        layer.tips('X 请您填写验证码', '#inputyzm', {
-          // id: 'tips2-1',
-          tips: [2, 'red'],
-          time: 0,
-          area: ['auto', '36px'],
-          show: true
-        })
-        return false;
-      } else {
-        if (!yzmcode.test(inputyzm.value)) {
-          //验证不成功
-          layer.tips('X 请您正确填写验证码', '#inputyzm', {
-            // id: 'tips2-2',
-            tips: [2, 'red'],
-            time: 0,
-            area: ['auto', '36px'],
-            show: true
-          })
-          return false;
-        } else {
-          //验证成功
-          layer.tips('√', '#inputyzm', {
-            // id: 'tips2-3',
-            tips: [2, 'green'],
-            time: 0,
-            area: ['auto', '36px'],
-            show: true
-          })
-          return true;
-        }
-        return true;
-      }
+    // 验证码校验
+    function validateCode(code) {
+      const codeRegex = /^\d{6}$/;
+      return codeRegex.test(code)
     }
 
-    // 5.密码验证
-    function getpassword() {
-      layer.tips('请输入8~16位密码，区分大小写', '#password', {
-        // id: 'tips3',
-        shadeClose: false,
-        tips: [2, '#30a6f5'],
-        time: 0,
-        area: ['auto', '36px']
-      })
-    }
-    function losepassword() {
-      var password = document.querySelector('#password').value
-      var pwdyz = /^[A-Za-z0-9!@#$%^&*()_+{}\[\]:;<>,.?\/~`-]{8,16}$/
-
-      if (password.value = '') {
-        layer.tips('X 请您填写密码(8-16位，区分大小写)', '#password', {
-          // id: 'tips3-1',
-          tips: [2, 'red'],
-          time: 0,
-          area: ['auto', '36px'],
-          show: true
-        })
-        return false;
-      } else {
-        if (!pwdyz.test(password)) {
-          //验证不成功
-          layer.tips('X 请您正确填写密码(8-16位，区分大小写)', '#password', {
-            // id: 'tips3-2',
-            tips: [2, 'red'],
-            time: 0,
-            area: ['auto', '36px'],
-            show: true
-          })
-          return false;
-        } else {
-          //验证成功
-          layer.tips('√', '#password', {
-            // id: 'tips3-3',
-            tips: [2, 'green'],
-            time: 0,
-            area: ['auto', '36px'],
-            show: true
-          })
-          return true;
-        }
-        return true;
-      }
+    // 密码校验
+    function validatePassword(password) {
+      const passwordRegex = /^[A-Za-z0-9!@#$%^&*()_+{}\[\]:;<>,.?\/~\-]{8,16}$/;
+      return passwordRegex.test(password);
     }
 
-    // 点击注册按钮验证所填内容与是否勾选同意并遵守《用户服务协议》
-    function usersubmit() {
-      var chec = document.querySelector('#chec')
-      // var myselect = document.querySelector('#userRole')
-      // var index = myselect.selectedIndex
-      var userchecked = false;
-      // console.log(myselect.options[index].value);
-
-      var phone = losephone()
-      if (phone === false) {
-        return
-      }
-      var yzm11 = loseinputyzm()
-      if (yzm11 === false) {
-        return
-      }
-      var pwd = losepassword()
-      if (pwd === false) {
-        return
-      }
-
-      if (chec.checked == true) {
-        userchecked = true
-        layer.tips('√', '#row123', {
-          tips: [2, 'green'],
-          time: 0,
-          area: ['auto', '36px'],
-          show: true
-        })
-
-      } else {
-        layer.tips('请阅读并同意《用户服务协议》和《隐私条款》', '#row123', {
-          tips: [2, 'red'],
-          time: 0,
-          area: ['auto', '36px'],
-          show: true
-        })
-        return
-        // userchecked = false;
-      }
-      DoSomething()
-
-    }
     // 显示隐藏密码
     switchPwd()
     function switchPwd() {
-      var passwordeye = $('#passwordeye')
-      var showPwd = $('#password')
-      passwordeye.off('click').on('click', function () {
-        if (passwordeye.hasClass('icon-xianshiyincang1')) {
-          // 密码可见
-          passwordeye.removeClass('icon-xianshiyincang1').addClass('icon-xianshiyincang')
-          showPwd.prop('type', 'text')
+      var pwd = $('#pwd')
+      var showHide = $('#showHide')
+      showHide.off('click').on('click', function () {
+        if (showHide.hasClass('icon-xianshiyincang1')) {
+          pwd.attr('type', 'text') // 密码可见
+          showHide.removeClass('icon-xianshiyincang1').addClass('icon-xianshiyincang')
         } else {
-          passwordeye.removeClass('icon-xianshiyincang').addClass('icon-xianshiyincang1')
-          showPwd.prop('type', 'password')
+          pwd.attr('type', 'password') // 密码隐藏
+          showHide.removeClass('icon-xianshiyincang').addClass('icon-xianshiyincang1')
         }
       })
     }
 
-    $("#yzm").click(function (e) {
-      let phoneVal = $("#phone").val()
-      if (phoneVal === '') {
-        layer.msg('请填写手机号', {
-          icon: 2,
-          time: 2000,
-          offset: '50px',
-        })
+
+    // 更新注册按钮状态
+    function updateRegisterButtonStatus() {
+      const phone = $('#phone').val();
+      const code = $('#code').val();
+      const pwd = $('#pwd').val();
+      const agreement = $('.agreement input').prop('checked');
+      const isFormValid = isPhoneValid && isCodeSent && validateCode(code) && validatePassword(pwd) && agreement;
+      if (isFormValid) {
+        $('#register').removeClass('register-disabled');
+        $('#register').css('cursor', 'pointer'); // 设置鼠标样式为指针
+        $('#register').prop('disabled', false); // 移除disabled属性
+        $('#register').css('background-color', '#fda633'); // 设置按钮背景颜色为橘色
       } else {
-        let phoneResult = "https://www.aimzhu.com/operator/api/systemuser/check-exists/" + phoneVal
+        $('#register').addClass('register-disabled');
+        $('#register').css('cursor', 'not-allowed'); // 设置鼠标样式为禁止
+        $('#register').prop('disabled', true); // 设置disabled属性
+        $('#register').css('background-color', '#C0C0C0'); // 设置按钮背景颜色为橘色
+      }
+    }
 
+    // 获取验证码按钮倒计时
+    function startCountdown() {
+      const getCodeButton = $('#getCode');
+      // getCodeButton.text('重新获取(' + countdown + 's)后');
+      getCodeButton.text(+ countdown + 's');
+      getCodeButton.prop('disabled', true);
+      countdown--;
+
+      if (countdown >= 0) {
+        setTimeout(startCountdown, 1000);
+      } else {
+        getCodeButton.text('获取验证码');
+        getCodeButton.prop('disabled', false);
+        countdown = 120;
+      }
+    }
+
+    // 事件绑定
+    $(document).ready(function () {
+
+      // 绑定事件以更新注册按钮状态
+      $('#phone').on('input', updateRegisterButtonStatus);
+      $('#code').on('input', updateRegisterButtonStatus);
+      $('#pwd').on('input', updateRegisterButtonStatus);
+      $('.agreement input').on('change', updateRegisterButtonStatus);
+
+      // 页面加载完成后检查本地存储中的验证码状态
+      if (localStorage.getItem('isCodeSent') === 'true') {
+        isCodeSent = true;
+        updateRegisterButtonStatus(); // 更新注册按钮状态
+      }
+
+      // 页面加载完成后调用 switchPwd 函数
+      switchPwd();
+
+      // 初始化注册按钮状态
+      updateRegisterButtonStatus();
+
+      $('#phone').on('input', function () {
+        const phone = $(this).val();
+        isPhoneValid = validatePhone(phone);
+        updateRegisterButtonStatus();
+      });
+
+      $('#getCode').on('click', function () {
+        const phone = $('#phone').val();
+        if (!isPhoneValid) {
+          layer.msg('请输入正确的手机号');
+          return;
+        }
+
+        // 发送请求1，校验手机号是否存在
         $.ajax({
-          type: "GET",
-          dataType: 'json',
-          url: "https://www.aimzhu.com/operator/api/systemuser/check-exists/" + phoneVal,
-          success: function (msg) {
-            if (msg) {
-              layer.msg('用户已经存在，请更换手机号', {
-                icon: 2,
-                time: 2000,
-                offset: '50px',
-              })
+          url: 'https://www.aimzhu.com/operator/api/systemuser/check-exists/' + phone,
+          // url: 'https://www.aimzhu.com/operator/api/verify/code/send/' + phone,
+          type: 'GET',
+          success: function (response) {
+            console.log(response)
+            if (response) {
+              layer.msg('此用户已存在');
             } else {
+              // 发送请求2，发送验证码
               $.ajax({
-                type: "GET",
-                dataType: 'json',
-                url: "https://www.aimzhu.com/operator/app/sms/verify-code/" + phoneVal,
-                success: function (msg) {
-                  // alert('验证码已发送')
-                  layer.msg('注册验证码已经发送到手机上，有效时间2分钟', {
-                    icon: 1,
-                    time: 6000,
-                    offset: '50px',
-                    // shade: [0.5, '#000'],
-                    // skin: ['custom-bg-color']
-                  })
-
-                  // 启动倒计时
-                  startCountdown()
+                // url: 'https://www.aimzhu.com/operator/app/sms/verify-code/' + phone,
+                url: 'https://www.aimzhu.com/operator/api/verify/code/send/' + phone,
+                type: 'GET',
+                success: function (response) {
+                  layer.msg('验证码已发送');
+                  isCodeSent = true; //验证码已发送标志
+                  startCountdown();
+                  updateRegisterButtonStatus(); // 更新注册按钮状态
+                  // 存储验证码状态到本地存储
+                  localStorage.setItem('isCodeSent', true);
                 },
-                error: function (data) {
-                  console.log(data);
-                  document.getElementById('yzm').disabled = false;
-                  document.getElementById('yzm').innerText = '获取验证码';
-                  layer.msg('获取验证码失败,请不要在验证码有效期内重新获取', {
-                    icon: 2,
-                    time: 2000,
-                    offset: '50px',
-                    // skin: ['custom-bg-color']
-                    // shade: [0.5, '#000'],
-
-                  })
+                error: function (error) {
+                  // console.error(error);
+                  layer.msg(error.responseJSON.msg);
                 }
               });
             }
           },
-          error: function (data) {
-
+          error: function (error) {
+            // console.error(error);
+            layer.msg('校验手机号失败');
           }
-        })
-
-        // axios.get(phoneResult).then(response => {
-        //   console.log(response.data);
-        //   let jieguo = response.data
-        //   if (jieguo) {
-        //     layer.msg('用户已经存在，请更换手机号', {
-        //       icon: 2,
-        //       time: 2000,
-        //       offset: '50px',
-        //     })
-        //   } else {
-        //     $.ajax({
-        //       type: "GET",
-        //       dataType: 'json',
-        //       url: "https://www.aimzhu.com/operator/app/sms/verify-code/" + phoneVal,
-        //       success: function (msg) {
-        //         // alert('验证码已发送')
-        //         layer.msg('注册验证码已经发送到手机上，有效时间2分钟', {
-        //           icon: 1,
-        //           time: 6000,
-        //           offset: '50px',
-        //           // shade: [0.5, '#000'],
-        //           // skin: ['custom-bg-color']
-        //         })
-
-        //         // 启动倒计时
-        //         startCountdown()
-        //       },
-        //       error: function (data) {
-        //         console.log(data);
-        //         document.getElementById('yzm').disabled = false;
-        //         document.getElementById('yzm').innerText = '获取验证码';
-        //         layer.msg('获取验证码失败,请不要在验证码有效期内重新获取', {
-        //           icon: 2,
-        //           time: 2000,
-        //           offset: '50px',
-        //           // skin: ['custom-bg-color']
-        //           // shade: [0.5, '#000'],
-
-        //         })
-        //       }
-        //     });
-        //   }
-        // })
-      }
-
-    });
-    function startCountdown() {
-      remainingTime = 120;
-      document.getElementById('yzm').disabled = true;
-      // countdownTimer = setInterval(() => {
-      //   remainingTime--;
-      //   if (remainingTime <= 0) {
-      //     clearInterval(countdownTimer);
-      //     document.getElementById('yzm').disabled = false;
-      //     document.getElementById('yzm').innerText = '获取验证码';
-      //   } else {
-      //     document.getElementById('yzm').innerText = `重新获取(${remainingTime}秒)`;
-      //   }
-      // }, 1000);
-
-      countdownTimer = setInterval(function () {
-        remainingTime--;
-        if (remainingTime <= 0) {
-          clearInterval(countdownTimer);
-          document.getElementById('yzm').disabled = false;
-          document.getElementById('yzm').innerText = '获取验证码';
-        } else {
-          document.getElementById('yzm').innerText = '重新获取(' + remainingTime + '秒)';
-        }
-      }, 1000);
-
-    }
-
-
-    function DoSomething(e) {
-      var phoneVal = $("#phone").val();
-      var inputyzm = $("#inputyzm").val();
-      var password = $("#password").val();
-      var password2 = $("#password").val();
-      var userRole = "606f85bc-63fd-407e-8e2e-6ce48178b70a";
-
-      var data = {
-        password: password,
-        passwordSame: password,
-        phone: phoneVal,
-        verifyCode: inputyzm
-      }
-      console.log('data', data);
-      $('#register').attr('disabled', 'disabled')
-      $('#register').css('cursor', 'no-drop')
-      $.ajax({
-        type: "POST",
-        data: JSON.stringify(data),
-        contentType: "application/json;charset=utf-8",
-        url: "https://www.aimzhu.com/operator/app/register/phone-password?userRole=" + userRole,
-        success: function (data) {
-          // $('#register').attr('disabled', 'disabled')
-          // $('#register').css('cursor', 'no-drop')
-          // alert("注册成功");
-          layer.msg('注册成功', {
-            time: 2000,
-            icon: 6,
-            shadeClose: false,
-            shift: 1,
-            offset: '50px',
-          }, function () {
-            // 当消息关闭后执行的回调函数  
-            startCountdown()
-          })
-
-          console.log('success', data);
-
-          function startCountdown() {
-            // 设置倒计时 3s
-            var countdownSeconds = 3
-            // 每秒更新倒计时
-            var countdownInterval = setInterval(function () {
-              countdownSeconds--;
-              // 显示倒计时信息
-              layer.msg(countdownSeconds + '秒后跳转到登录页', {
-                time: 3000,
-                shadeClose: false,
-                icon: 6
-              })
-              if (countdownSeconds <= 0) {
-                clearInterval(countdownInterval)
-                // 跳转到登录页
-                window.location.href = 'https://www.aimzhu.com/operator/'
-              }
-            }, 1000)
-          }
-
-        },
-        error: function (data, code) {
-          // alert("注册失败")
-          $('#register').removeAttr('disabled')
-          $('#register').css('cursor', 'pointer')
-          layer.msg(data.responseJSON.msg, {
-            icon: 5,
-            time: 3000,
-          })
-          // const errmsg = data.responseJSON.msg
-          // alert(data.responseJSON.msg)
-          console.log('error', data);
-          console.log('error', code);
-        }
+        });
       });
-    }
 
+      $('#pwd').on('input', updateRegisterButtonStatus);
+      $('.agreement input').on('change', updateRegisterButtonStatus);
+
+      $('#register').on('click', function () {
+        const phone = $('#phone').val();
+        const verifyCode = $('#code').val();
+        const password = $('#pwd').val();
+        const passwordSame = $('#pwd').val();
+
+        $(this).prop('disabled', true);
+        // 发送请求到后端
+        $.ajax({
+          url: 'https://www.aimzhu.com/operator/app/register/phone-password?userRole=606f85bc-63fd-407e-8e2e-6ce48178b70a',
+          type: 'POST',
+          data: JSON.stringify({
+            phone: phone,
+            verifyCode: verifyCode,
+            password: password,
+            passwordSame: password
+          }),
+          contentType: "application/json;charset=utf-8",
+          success: function (response) {
+            $('#register').addClass('register-disabled');
+            $('#register').css('cursor', 'not-allowed');
+            $('#register').prop('disabled', true); // 注册成功后，重新设置按钮为不可点击
+            $('#register').css('background-color', '#C0C0C0');
+            layer.msg('注册成功，3秒后跳转登录页', { time: 3000 },
+              function () {
+                window.location.href = 'https://www.aimzhu.com/operator/';
+              });
+          },
+          error: function (error) {
+            // console.error(error);
+            layer.msg('注册失败：' + error.responseJSON.msg);
+            $('#register').prop('disabled', false);
+          }
+        });
+        // 注册成功后，清除本地存储中的验证码状态
+        localStorage.removeItem('isCodeSent');
+      });
+    });
 
   </script>
 </body>
diff --git a/src/components/isMobile.js b/src/components/isMobile.js
new file mode 100644
index 0000000..8150930
--- /dev/null
+++ b/src/components/isMobile.js
@@ -0,0 +1,6 @@
+// utils/isMobile.js
+export default function isMobile() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  const mobileRegex = /phone|pad|pod|iphone|ipod|ios|ipad|android|mobile|blackberry|iemobile|opera mini|mqqbrowser|juc|fennec|wosbrowser|browserng|webos|symbian|windows phone/i;
+  return mobileRegex.test(userAgent);
+}
diff --git a/src/components/register2.html b/src/components/register2.html
deleted file mode 100644
index 39cb5cb..0000000
--- a/src/components/register2.html
+++ /dev/null
@@ -1,539 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" type="image/svg+xml" href="./assets/AImzhu.svg">
-  <title>注册界面</title>
-  <link rel="stylesheet" href="./style.css">
-  <link rel="stylesheet" href="./assets/font/iconfont.css">
-  <link rel="stylesheet" href="./layui/css/layui.css">
-  <style>
-    @media screen and (max-width: 1920px) {
-      html {
-        font-size: 66px !important;
-      }
-    }
-
-    @media screen and (min-width: 1360px) {
-      html {
-        font-size: 80px !important;
-      }
-    }
-
-    .page {
-      position: relative;
-      width: 100vw;
-      height: 100vh;
-      background: url(./assets/img/login-register-bj.png) no-repeat;
-      background-size: cover;
-    }
-
-    .page .top {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      align-content: center;
-      width: 100vw;
-      height: 1rem;
-    }
-
-    .top .left {
-      width: 3.25rem;
-      height: .625rem;
-      margin: .1875rem .625rem;
-    }
-
-    .top .left .logo {
-      width: 100%;
-      height: 100%;
-      background: url(./assets/img/headicon2.png) no-repeat;
-      background-size: contain;
-    }
-
-    .top .right {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      align-content: center;
-      width: 2.5rem;
-      height: .5rem;
-      margin: .25rem .375rem;
-    }
-
-    .top .right #login {
-      font-size: .2rem;
-      padding: .0625rem .25rem;
-      border: none;
-      border-radius: .3125rem;
-      background: rgba(255, 255, 255, 0.4);
-      color: #42210B;
-    }
-
-    .top .right #login:hover {
-      cursor: pointer;
-      background: #42210B;
-      color: #FFF;
-      font-weight: 700;
-    }
-
-    .top .right #goHomePage {
-      font-size: .2rem;
-      padding: .0625rem .25rem;
-      border: none;
-      border-radius: .3125rem;
-      color: #FFF;
-      background: #42210B;
-    }
-
-    .top .right #goHomePage:hover {
-      cursor: pointer;
-      font-weight: 700;
-    }
-
-    .loginBox {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      display: flex;
-      flex-direction: column;
-      width: 6.25rem;
-      height: 6.875rem;
-      background-color: #fff;
-      border-radius: .25rem;
-      padding: .5rem;
-    }
-
-    .loginBox .title {
-      width: 100%;
-    }
-
-    .loginBox .title h3 {
-      font-size: .275rem;
-      font-weight: 700;
-    }
-
-    .loginBox .title span {
-      display: block;
-      width: .875rem;
-      height: .0625rem;
-      background-color: #fda633;
-      margin-left: .375rem;
-      margin-top: .0625rem;
-    }
-
-    .loginBox .msg {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      margin-top: .5rem;
-    }
-
-    .loginBox .msg .msgBox {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .loginBox .msg .msgBox li {
-      position: relative;
-      width: 100%;
-      height: .625rem;
-      margin-bottom: .25rem;
-      border: none;
-    }
-
-    .loginBox .msg .msgBox li input {
-      position: absolute;
-      width: 100%;
-      height: .625rem;
-      text-indent: .1875rem;
-      border: none;
-      border: .0187rem solid #CCC;
-      border-radius: .1rem;
-      font-size: .1875rem;
-      color: #999999;
-    }
-
-    input:-webkit-autofill {
-      background: transparent;
-      transition: background-color 50000s ease-in-out 0s;
-      -webkit-text-fill-color: unset;
-    }
-
-    input::-webkit-input-placeholder {
-      color: #999999
-    }
-
-    /*去除ie edge的密码框默认出现的小眼睛*/
-    input[type="password"]::-ms-reveal {
-      display: none;
-    }
-
-    input[type="password"]::-ms-clear {
-      display: none;
-    }
-
-    input[type="password"]::-o-clear {
-      display: none;
-    }
-
-    .loginBox .msg .msgBox li input:focus-within {
-      border: .0156rem solid #fa911e;
-    }
-
-    .loginBox .msg .msgBox li input:hover {
-      border: .0156rem solid #fa911e;
-    }
-
-    .loginBox .msg .msgBox li:nth-child(2) button {
-      position: absolute;
-      right: .125rem;
-      width: 1.25rem;
-      height: .375rem;
-      border: none;
-      background-color: transparent;
-      letter-spacing: .025rem;
-      margin: .125rem 0;
-      cursor: pointer;
-      color: #0095ff;
-      font-size: .1875rem;
-    }
-
-    .loginBox .msg .msgBox li:nth-child(2) button:hover {
-      opacity: 0.7;
-    }
-
-    .loginBox .msg .msgBox li:nth-child(3) i {
-      position: absolute;
-      top: .1875rem;
-      right: .125rem;
-      display: block;
-      width: .25rem;
-      height: .25rem;
-      color: #999999;
-    }
-
-    .loginBox .msg .msgBox li:nth-child(3) i:hover {
-      color: #007bff;
-    }
-
-    .loginBox .msg .agreement {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: start;
-      align-content: center;
-      width: 100%;
-      height: .5rem;
-      line-height: .5rem;
-      color: #333;
-      font-size: .175rem;
-      margin-top: .25rem;
-    }
-
-    .loginBox .msg .agreement input {
-      width: .25rem;
-      height: .25rem;
-      margin: .125rem 0;
-      color: #333;
-      font-size: .15rem;
-      margin-right: .125rem;
-    }
-
-    .loginBox .msg .agreement a {
-      color: #0095ff;
-    }
-
-    .loginBox .msg .agreement a:hover {
-      opacity: 0.7;
-    }
-
-    .loginBox .msg #register {
-      width: 100%;
-      height: .625rem;
-      border: none;
-      border-radius: .1rem;
-      background-color: #C0C0C0;
-      color: #FFF;
-      font-size: .225rem;
-      margin-top: .125rem;
-      cursor: not-allowed;
-    }
-
-    .loginBox .msg .register-disabled {
-      background-color: #fda633;
-      cursor: not-allowed;
-    }
-
-    .loginBox .msg .register:not(.register-disabled):hover {
-      font-size: .25rem;
-      font-weight: 700;
-      -webkit-box-shadow: 0 0 .125rem #fda633;
-      -moz-box-shadow: 0 0 .125rem #fda633;
-      box-shadow: 0 0 .125rem #fda633;
-      /* cursor: pointer; */
-      background-color: #fda633;
-    }
-
-    .loginBox .goPage {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: end;
-      align-content: center;
-      width: 100%;
-      height: .5rem;
-      margin-top: .125rem;
-      font-size: .1875rem;
-      color: #333;
-    }
-
-    .loginBox .goPage a {
-      color: #0095ff;
-    }
-  </style>
-</head>
-
-<body>
-  <div class="page">
-    <div class="top">
-      <a class="left" href="https://www.aimzhu.com">
-        <div class="logo"></div>
-      </a>
-      <div class="right">
-        <a id="login" class="login" href="https://www.aimzhu.com/operator/">登录</a>
-        <a id="goHomePage" class="goHomePage" href="https://www.aimzhu.com">返回首页</a>
-      </div>
-    </div>
-    <div class="loginBox">
-      <div class="title">
-        <h3>平台账号注册</h3>
-        <span></span>
-      </div>
-      <form action="" class="msg">
-        <ul class="msgBox">
-          <li>
-            <input id="phone" type="text" placeholder="请输入您的手机号">
-          </li>
-          <li>
-            <input id="code" type="text" placeholder="请输入短信验证码">
-            <button id="getCode" type="button">获取验证码</button>
-          </li>
-          <li>
-            <input id="pwd" type="password" placeholder="请输入密码(8~16位，大小写字母，数字或特殊字符)">
-            <i id="showHide" class="iconfont icon-xianshiyincang1"></i>
-          </li>
-        </ul>
-        <div class="agreement">
-          <input type="checkbox">我同意平台
-          <a href="https://www.aimzhu.com/UserAgreement.html" target="_blank">《用户服务协议》</a>
-          和
-          <a href="https://www.aimzhu.com/PrivacyPolicy.html" target="_blank">《隐私条款》</a>
-        </div>
-        <button id="register" class="register" type="button" disabled>注册</button>
-      </form>
-      <div class="goPage">
-        <span>已有账号？<a href="https://www.aimzhu.com/operator/">立即登录</a></span>
-      </div>
-    </div>
-  </div>
-
-  <script src="./jquery.min.js"></script>
-  <script src="./layui/layui.js"></script>
-  <script src="./Register.js"></script>
-  <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
-  <script>
-
-    const $ = layui.jquery;
-    const layer = layui.layer;
-
-    let isPhoneValid = false;
-    let isCodeSent = false;
-    let countdown = 120;
-
-    // 手机号校验
-    function validatePhone(phone) {
-      const phoneRegex = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
-      return phoneRegex.test(phone);
-    }
-
-    // 验证码校验
-    function validateCode(code) {
-      const codeRegex = /^\d{6}$/;
-      return codeRegex.test(code)
-    }
-
-    // 密码校验
-    function validatePassword(password) {
-      const passwordRegex = /^[A-Za-z0-9!@#$%^&*()_+{}\[\]:;<>,.?\/~\-]{8,16}$/;
-      return passwordRegex.test(password);
-    }
-
-    // 显示隐藏密码
-    switchPwd()
-    function switchPwd() {
-      var pwd = $('#pwd')
-      var showHide = $('#showHide')
-      showHide.off('click').on('click', function () {
-        if (showHide.hasClass('icon-xianshiyincang1')) {
-          pwd.attr('type', 'text') // 密码可见
-          showHide.removeClass('icon-xianshiyincang1').addClass('icon-xianshiyincang')
-        } else {
-          pwd.attr('type', 'password') // 密码隐藏
-          showHide.removeClass('icon-xianshiyincang').addClass('icon-xianshiyincang1')
-        }
-      })
-    }
-
-
-    // 更新注册按钮状态
-    function updateRegisterButtonStatus() {
-      const phone = $('#phone').val();
-      const code = $('#code').val();
-      const pwd = $('#pwd').val();
-      const agreement = $('.agreement input').prop('checked');
-      const isFormValid = isPhoneValid && isCodeSent && validateCode(code) && validatePassword(pwd) && agreement;
-      if (isFormValid) {
-        $('#register').removeClass('register-disabled');
-        $('#register').css('cursor', 'pointer'); // 设置鼠标样式为指针
-        $('#register').prop('disabled', false); // 移除disabled属性
-        $('#register').css('background-color', '#fda633'); // 设置按钮背景颜色为橘色
-      } else {
-        $('#register').addClass('register-disabled');
-        $('#register').css('cursor', 'not-allowed'); // 设置鼠标样式为禁止
-        $('#register').prop('disabled', true); // 设置disabled属性
-        $('#register').css('background-color', '#C0C0C0'); // 设置按钮背景颜色为橘色
-      }
-    }
-
-    // 获取验证码按钮倒计时
-    function startCountdown() {
-      const getCodeButton = $('#getCode');
-      // getCodeButton.text('重新获取(' + countdown + 's)后');
-      getCodeButton.text(+ countdown + 's');
-      getCodeButton.prop('disabled', true);
-      countdown--;
-
-      if (countdown >= 0) {
-        setTimeout(startCountdown, 1000);
-      } else {
-        getCodeButton.text('获取验证码');
-        getCodeButton.prop('disabled', false);
-        countdown = 120;
-      }
-    }
-
-    // 事件绑定
-    $(document).ready(function () {
-
-      // 绑定事件以更新注册按钮状态
-      $('#phone').on('input', updateRegisterButtonStatus);
-      $('#code').on('input', updateRegisterButtonStatus);
-      $('#pwd').on('input', updateRegisterButtonStatus);
-      $('.agreement input').on('change', updateRegisterButtonStatus);
-
-      // 页面加载完成后检查本地存储中的验证码状态
-      if (localStorage.getItem('isCodeSent') === 'true') {
-        isCodeSent = true;
-        updateRegisterButtonStatus(); // 更新注册按钮状态
-      }
-
-      // 页面加载完成后调用 switchPwd 函数
-      switchPwd();
-
-      // 初始化注册按钮状态
-      updateRegisterButtonStatus();
-
-      $('#phone').on('input', function () {
-        const phone = $(this).val();
-        isPhoneValid = validatePhone(phone);
-        updateRegisterButtonStatus();
-      });
-
-      $('#getCode').on('click', function () {
-        const phone = $('#phone').val();
-        if (!isPhoneValid) {
-          layer.msg('请输入正确的手机号');
-          return;
-        }
-
-        // 发送请求1，校验手机号是否存在
-        $.ajax({
-          url: 'https://www.aimzhu.com/operator/api/systemuser/check-exists/' + phone,
-          type: 'GET',
-          success: function (response) {
-            if (response) {
-              layer.msg('此用户已存在');
-            } else {
-              // 发送请求2，发送验证码
-              $.ajax({
-                url: 'https://www.aimzhu.com/operator/app/sms/verify-code/' + phone,
-                type: 'GET',
-                success: function (response) {
-                  layer.msg('验证码已发送');
-                  isCodeSent = true; //验证码已发送标志
-                  startCountdown();
-                  updateRegisterButtonStatus(); // 更新注册按钮状态
-                  // 存储验证码状态到本地存储
-                  localStorage.setItem('isCodeSent', true);
-                },
-                error: function (error) {
-                  // console.error(error);
-                  layer.msg(error.responseJSON.msg);
-                }
-              });
-            }
-          },
-          error: function (error) {
-            // console.error(error);
-            layer.msg('校验手机号失败');
-          }
-        });
-      });
-
-      $('#pwd').on('input', updateRegisterButtonStatus);
-      $('.agreement input').on('change', updateRegisterButtonStatus);
-
-      $('#register').on('click', function () {
-        const phone = $('#phone').val();
-        const verifyCode = $('#code').val();
-        const password = $('#pwd').val();
-        const passwordSame = $('#pwd').val();
-
-        $(this).prop('disabled', true);
-        // 发送请求到后端
-        $.ajax({
-          url: 'https://www.aimzhu.com/operator/app/register/phone-password?userRole=606f85bc-63fd-407e-8e2e-6ce48178b70a',
-          type: 'POST',
-          data: JSON.stringify({
-            phone: phone,
-            verifyCode: verifyCode,
-            password: password,
-            passwordSame: password
-          }),
-          contentType: "application/json;charset=utf-8",
-          success: function (response) {
-            $('#register').addClass('register-disabled');
-            $('#register').css('cursor', 'not-allowed');
-            $('#register').prop('disabled', true); // 注册成功后，重新设置按钮为不可点击
-            $('#register').css('background-color', '#C0C0C0');
-            layer.msg('注册成功，3秒后跳转登录页', { time: 3000 },
-              function () {
-                window.location.href = 'https://www.aimzhu.com/operator/';
-              });
-          },
-          error: function (error) {
-            // console.error(error);
-            layer.msg('注册失败：' + error.responseJSON.msg);
-            $('#register').prop('disabled', false);
-          }
-        });
-        // 注册成功后，清除本地存储中的验证码状态
-        localStorage.removeItem('isCodeSent');
-      });
-    });
-
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/src/components/router.js b/src/components/router.js
index 9efad0e..fd04c66 100644
--- a/src/components/router.js
+++ b/src/components/router.js
@@ -1,4 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+import { reactive, onMounted, onBeforeUnmount } from 'vue'
 
 
 import HomePage from './HomePage.vue'
@@ -11,6 +12,8 @@ import TransactionCenter from './TransactionCenter.vue'
 import AboutUs from './AboutUs.vue'
 import Report from './Report.vue'
 import ProductsNews from './ProductsNews.vue'
+import MobilePage from './MobilePage.vue'
+import isMobile from './isMobile'
 
 
 // 调用createRouter方法
@@ -43,28 +46,31 @@ const router = createRouter({
     { path: '/AboutUs', name: 'AboutUs', component: AboutUs },
     { path: '/Report', name: 'Report', component: Report },
     { path: '/ProductsNews', name: 'ProductsNews', component: ProductsNews },
+
+    { path: '/MobilePage', name: 'MobilePage', component: MobilePage },
   ],
 
 })
 
+router.beforeEach((to, from, next) => {
+  const mobile = isMobile();
+  if (mobile && to.name !== 'MobilePage') {
+    next({ name: 'MobilePage' });
+  } else if (!mobile && to.name === 'MobilePage') {
+    next({ name: 'HomePage' });
+  } else {
+    next();
+  }
+});
+
 // 点击路由后滚动条跳转到顶部
 router.afterEach(() => {
   document.body.scrollTop = 0;
   document.documentElement.scrollTop = 0;
 })
 
-router.beforeEach((to, from, next) => {
-  next()
-})
-// router.beforeEach((to, from, next) => {
-//   if (to.path === '/') {
-//     window.location.reload(); // 刷新页面
-//   } else {
-//     next();
-//   }
-// })
 
-// 创建的路由对象共享出去
+// // 创建的路由对象共享出去
 export default router
 
 
diff --git a/src/main.js b/src/main.js
index ff06edc..7aa5f57 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,8 +26,18 @@ import 'vue3-layer/dist/s3Layer.css'
 // import VueAmazingUI from 'vue-amazing-ui'
 // import 'vue-amazing-ui/css'
 
+// import {isMobilePage} from './components/screenSize.js'
+
 const app = createApp(App)
 
+// router.beforeEach((to, from, next) => {
+//   if (isMobilePage() && to.path !== '/MobilePage') {
+//     next({ name: 'MobilePage' });
+//   } else {
+//     next();
+//   }
+// })
+
 // 全局注册el-icon
 for (const [name, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(name, component);