更改12345678

src/views/enterprise/login/registerPage.vue

@@ -1,46 +1,51 @@
+
+
 <template>
-  <div class="page">
-    <div class="content" align="center">
-      <h1 style="margin-left:-23%;margin-top: 8%;display: inline-block">找回密码</h1>
+  <div class="page" >
+
+    <div class="content"  align="center">
+      <h1 style="margin-left:-23%;margin-top: 8%;display: inline-block">注册农业试验评价系统</h1>
+      <span style="font-size: 15px;display: inline-block;margin-left: 5px">(企业专属)</span>
       <form>
-        <div v-if="!showCodeInput" style="border-bottom:1px solid black ;width: 80%;margin-top:2% ">
-          <input
-            style="border:none;width: 100%;height:30px;font-size: 15px;outline: none"
-            name="phone"
+        <div style="border-bottom:1px solid black ;width: 80%;margin-top:2% " >
+          +86
+          <input style="border:none;width: 94%;height:30px;font-size: 15px;outline: none" name="phone" type="text" placeholder="请输入注册手机号">
+        </div>
+        <div style="border-bottom:1px solid black ;width: 80%;margin-top: 5%">
+          <input style="border:none;width: 80%;height:30px;font-size: 15px;outline: none" name="text" type="text" placeholder="请输入 6 位验证码" />
+          <el-button
             type="text"
-            placeholder="请输入注册手机号"
-            v-model="ruleForm.phone"
+            :style="{ width: '20%', height: '30px', paddingLeft: buttonPaddingLeft, color: buttonColor }"
+            @click="startCountdown"
+          >{{ buttonText }}</el-button>
+        </div>
+        <div style="border-bottom:1px solid black ;width: 80%;margin-top: 6%">
+          <input
+            :type="showPassword? 'text' : 'password'"
+            style="border:none;width: 96%;height:30px;font-size: 15px;outline: none"
+            name="password"
+            placeholder="设置密码"
+          />
+          <img
+            :src="showPassword? visibleImagePath : hiddenImagePath"
+            style="font-size: 20px; cursor: pointer;width: 20px;height: 20px"
+            @click="togglePasswordVisibility"
+            data-show-password="false"
           />
         </div>
-        <div v-if="showCodeInput" style="margin-top: 5%">
-          <p v-if="showMessage">验证码已通过手机号发送至{{ ruleForm.phone }}</p>
-          <div style="border-bottom:1px solid black ;width: 80%">
-            <input
-              style="border:none;width: 100%;height:30px;font-size: 15px;outline: none"
-              name="text"
-              type="text"
-              placeholder="请输入 6 位验证码"
-            />
-            <el-button
-              type="text"
-              :style="{ width: '20%', height: '30px', paddingLeft: buttonPaddingLeft, color: buttonColor }"
-              @click="startCountdown"
-            >{{ buttonText }}
-            </el-button>
-          </div>
+        <el-button class="gradient-button">立即注册</el-button>
+        <div align="left" style="margin-left: 10%;margin-top: 4%">
+          <el-checkbox  v-model="checked" style="">我已阅读并同意蚯蚓农服 <a href="" style="color: #00afff">许可协议</a> 和 <a href="" style="color: #00afff">隐私政策</a></el-checkbox>
         </div>
-        <el-button class="gradient-button" @click="checkPhoneAndProceed">下一步</el-button><br>
-        <el-button>返回</el-button>
       </form>
     </div>
   </div>
 </template>
-
 <script>
 import Index from "@/views/index.vue";
 
 export default {
-  components: { Index },
+  components: {Index},
   data() {
     return {
       countdown: 60,
@@ -49,8 +54,8 @@ export default {
       buttonColor: '#b3b3b3',
       buttonPaddingLeft: '40px',
       showPassword: false,
-      hiddenImagePath: require('../login/img/眼睛_闭.png'),
-      visibleImagePath: require('../login/img/发现-眼睛.png'),
+      hiddenImagePath: require('../login/img/眼睛_闭.png'), // 替换为你的隐藏密码状态图片路径
+      visibleImagePath: require('../login/img/发现-眼睛.png'), // 替换为你的显示密码状态图片路径
       radio: '1',
       checked: false,
       ruleForm: {
@@ -58,8 +63,6 @@ export default {
         text: '',
         password: ''
       },
-      showCodeInput: false,
-      showMessage: false,
     };
   },
   methods: {
@@ -70,7 +73,7 @@ export default {
       imgElement.dataset.showPassword = this.showPassword.toString();
     },
     startCountdown() {
-      if (!this.isCountingDown && this.showCodeInput) {
+      if (!this.isCountingDown) {
         this.isCountingDown = true;
         this.buttonText = `重新获取（${this.countdown}s）`;
         this.buttonColor = '#b3b3b3';
@@ -90,21 +93,10 @@ export default {
         }, 1000);
       }
     },
-    checkPhoneAndProceed() {
-      // 假设这里的手机号码是正确的格式，实际应用中需要进行更严格的验证
-      if (/^\d{11}$/.test(this.ruleForm.phone)) {
-        this.showCodeInput = true;
-        this.showMessage = true;
-      } else {
-        // 可以添加错误提示信息
-        alert('请输入正确的手机号码');
-      }
-    },
   },
-};
+}
 </script>
-
-<style>
+<style >
 .page {
   background-color: rgba(242, 242, 242, 1);
   position: relative;
@@ -113,47 +105,40 @@ export default {
   overflow: hidden;
 }
 
-.content {
+.content{
   width: 36%;
   height: 50vh;
   background: white;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 25vh;
+  margin-left:  auto;
+  margin-right:  auto;
+  margin-top:  25vh;
 }
-
 .gradient-button {
   margin-top: 6%;
   width: 80%;
   height: 12%;
   color: white;
   font-size: 16px;
-  background: linear-gradient(to bottom, #9aecfd, #99e2d9);
+  background: linear-gradient(to bottom, #9aecfd, #99e2d9); /* 这里设置了从红色到橙色的渐变，你可以根据需要调整颜色 */
 }
-
-.el-checkbox__inner:hover {
+.el-checkbox__inner:hover{
   border-color: #00c0bf;
 }
-
-.el-checkbox__input.is-checked.el-checkbox__inner {
+.el-checkbox__input.is-checked  .el-checkbox__inner {
   background-color: #00c0bf;
   border-color: #00c0bf;
 }
-
-.el-checkbox__inner {}
-
+.el-checkbox__inner{
+}
 .el-checkbox__label {
-  color: #b3b3b3;
+  color: #b3b3b3; /* 设置颜色为初始颜色，即不改变字体颜色 */
 }
-
-.el-checkbox__input.is-checked +.el-checkbox__label {
-  color: #b3b3b3;
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #b3b3b3; /* 当复选框被选中时，字体颜色也保持不变 */
 }
-
 input::-webkit-input-placeholder {
-  color: #b3b3b3;
+  color: #b3b3b3; /* 设置为你想要的颜色，这里以红色为例 */
 }
-
 .password-eye-icon {
   cursor: pointer;
 }