1

jhzh

2026-01-09 f1aaecc9dc0a3d680f2f693ee963d5d060e75734

 src/page/login/register.vue

@@ -34,50 +34,115 @@
    </div>
    <el-alert v-show="alertShow" :closable="closable" :title="texts" :type="elType" center></el-alert> -->

    <div class="header">
      <div class="bock" @click="$router.go(-1)"></div>
    </div>
    <div class="logo"></div>
    <div class="formInt">
      <div class="formDemo">
        <span></span>
        <el-select v-model="areaCode" placeholder="请选择区号">
          <el-option label="86" :value="86"> </el-option>
        </el-select>
        <input :placeholder="$t('jy311')" v-model="phone" />
      </div>
      <div class="flex">
        <span></span>
        <input :placeholder="$t('jy459')" v-model="yzmCode" type="text" />
        <div class="num" @click="getCodeRandom()" :class="{ block: !showTime }">
          {{ $t("jy455") }}
    <div class="header-section">
      <div class="back-btn" @click="$router.go(-1)"></div>
      <div class="header-content">
        <h1 class="page-title">{{ $t('register_accountOpening') }}</h1>
        <div class="features">
          <div class="feature-item">
            <span class="check-icon">✓</span>
            <span>{{ $t('register_zeroCommissionOpening') }}</span>
          </div>
          <div class="feature-item">
            <span class="check-icon">✓</span>
            <span>{{ $t('register_fastTrading') }}</span>
          </div>
          <div class="feature-item">
            <span class="check-icon">✓</span>
            <span>{{ $t('register_secureReliable') }}</span>
          </div>
        </div>
        <div class="num" :class="{ block: showTime }">{{ countNum }}</div>
      </div>
      <div class="formDemos">
        <span class="pwdIcon"></span>
        <input
          :placeholder="$t('hj30')"
          v-model="userPassword"
          type="password"
        />
      </div>
      <div class="formDemos">
        <span class="pwdIcon"></span>
        <input
          :placeholder="$t('jy312')"
          v-model="rePassword"
          type="password"
        />
      </div>
      <div class="formDemos">
        <span class="pwdIcons"></span>
        <input :placeholder="$t('jy313')" v-model="userName" />
      </div>
    </div>
    <div class="form-container">
      <div class="form-card">
        <div class="form-field">
          <label class="field-label">{{ $t('login_phoneNumber') }}</label>
          <div class="input-wrapper">
            <el-select v-model="areaCode" :placeholder="$t('register_selectAreaCode')" class="area-select">
              <el-option label="86" :value="86"> </el-option>
            </el-select>
            <input :placeholder="$t('jy311')" v-model="phone" class="field-input" />
          </div>
        </div>
        
        <div class="form-field">
          <label class="field-label">{{ $t('login_loginPassword') }}</label>
          <input
            :placeholder="$t('hj30')"
            v-model="userPassword"
            type="password"
            class="field-input"
          />
        </div>
        
        <div class="form-field">
          <label class="field-label">{{ $t('register_confirmPassword') }}</label>
          <input
            :placeholder="$t('jy312')"
            v-model="rePassword"
            type="password"
            class="field-input"
          />
        </div>
        
        <div class="form-field">
          <label class="field-label">{{ $t('register_inviteCode') }}</label>
          <input :placeholder="$t('jy313')" v-model="userName" class="field-input" />
        </div>
        
        <div class="agreement">
          <input type="checkbox" id="agreement" v-model="agree" />
          <label for="agreement">
            {{ $t('login_agreeToTerms') }} <span class="agreement-link" @click.stop="viewAgreement">{{ $t('login_userAgreement') }}</span>
          </label>
        </div>
        
        <div class="loginBtn" v-loading="loginBtn" @click="gook">
          {{ $t('register_openAccountNow') }}
        </div>
        
        <div class="login-link">
          <span @click="$router.push('/login')">{{ $t('register_haveAccountLoginNow') }}</span>
        </div>

    <div class="loginBtn" v-loading="loginBtn" @click="gook">
      {{ $t("hj15") }}
        <div class="features-section">
        <div class="feature-item">
          <div class="feature-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
              <line x1="16" y1="13" x2="8" y2="13"></line>
              <line x1="16" y1="17" x2="8" y2="17"></line>
            </svg>
          </div>
          <div class="feature-title">{{ $t('register_fastAccountOpening') }}</div>
          <div class="feature-desc">{{ $t('register_completedIn3Minutes') }}</div>
        </div>
        
        <div class="feature-item">
          <div class="feature-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
            </svg>
          </div>
          <div class="feature-title">{{ $t('register_bankLevelSecurity') }}</div>
          <div class="feature-desc">{{ $t('register_fundProtection') }}</div>
        </div>
        
        <div class="feature-item">
          <div class="feature-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
          </div>
          <div class="feature-title">{{ $t('register_professionalService') }}</div>
          <div class="feature-desc">{{ $t('register_investmentAdvisor') }}</div>
        </div>
      </div>
      </div>
      
      
    </div>
  </div>
</template>
@@ -142,6 +207,10 @@
        }, 1000);
      }
    },
    viewAgreement() {
      // 跳转到用户协议页面
      this.$router.push('/about?e=2');
    },
   getCodeRandom(){
      const code = Math.floor(1000 + Math.random() * 9000).toString();
      this.yzmCode = code;
@@ -159,7 +228,7 @@
        phoneNum: this.phone
      });
      if (data.status === 0) {
        Toast("验证码发送成功")
        Toast(this.$t('register_verificationCodeSentSuccess'))
        this.setTime();
      } else {
        return Toast(data.msg);
@@ -415,7 +484,10 @@
<style scoped lang="less">
.login_page {
  position: relative;
  background-color: #fff !important;
  background-image: url("~@/assets/imgRed/14.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  overflow: hidden;
@@ -659,89 +731,135 @@
  margin-top: 0.2rem;
}

.header {
  height: 5.7rem;
.header-section {
  width: 100%;
  background: url("~@/assets/img/huxbj.8fe20e1f.png") no-repeat 50%;
  background-size: 100%;
  position: relative;
  margin-bottom: 0.5rem;
}
.bock {

.back-btn {
  position: absolute;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAAXNSR0IArs4c6QAAAVdJREFUSEut1usqBVEYxvH/c1MuRJJDkhwTEpIkJUlyCEk++CJJckpycw49Gs3Wa+y9Z82ePd/Xr5n38KwRNR7bE0APMK1OHdtTwAWQGZcdQbZngPMc+QImK0O2Z4GzgIxLuqoE2Z4DTgMyJuk6K08yZHseOAnIqKSbRo2TINsLwHFARiTdxkaVQrYXgaOADEu6K3a7LWR7CTjMD2XdaYq0rZHtFWA/Rz6BIUn3reau6RvZXgX28kMfOfLQbnj/QbbXgN380HuOPJZtwB/I9jqwE5ABSc9lyJ8a2d4AtgPSL+klBfmFbG8CWwHpk/SaivxAtjMgg7Inq0mvpLcqSHehTOvKpzU+oSvFDlj99gesOJCDkp7Kip+yIknT3XL7C0tbum9lMbIMHKQkQEqwJWVSKZTPWTElq0dt6GYxt6uHf8DqX0cBq39BBqz+lR2w+j8RAfv9rfkGqF24CUdT9E4AAAAASUVORK5CYII=)
  left: 0.5rem;
  top: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAAXNSR0IArs4c6QAAAVdJREFUSEut1usqBVEYxvH/c1MuRJJDkhwTEpIkJUlyCEk++CJJckpycw49Gs3Wa+y9Z82eNd/Xr5n38KwRNR7bE0APMK1OHdtTwAWQGZcdQbZngPMc+QImK0O2Z4GzgIxLuqoE2Z4DTgMyJuk6K08yZHseOAnIqKSbRo2TINsLwHFARiTdxkaVQrYXgaOADEu6K3a7LWR7CTjMD2XdaYq0rZHtFWA/Rz6BIUn3reau6RvZXgX28kMfOfLQbnj/QbbXgN380HuOPJZtwB/I9jqwE5ABSc9lyJ8a2d4AtgPSL+klBfmFbG8CWwHpk/SaivxAtjMgg7Inq0mvpLcqSHehTOvKpzU+oSvFDlj99gesOJCDkp7Kip+yIknT3XL7C0tbum9lMbIMHKQkQEqwJWVSKZTPWTElq0dt6GYxt6uHf8DqX0cBq39BBqz+lR2w+j8RAfv9rfkGqF24CUdT9E4AAAAASUVORK5CYII=)
    no-repeat 50%;
  background-size: 100%;
  width: 0.23rem;
  height: 0.41rem;
  left: 0.38461rem;
  top: 0.38461rem;
  cursor: pointer;
  z-index: 10;
}
.logo {
  width: 2.03rem;
  height: 2.03rem;
  background: url("~@/assets/imgRed/logo.png") no-repeat 50%;
  background-size: 100%;
  margin: 0 auto;
  border-radius: 50%;
  margin-top: -1.0153rem;
  position: relative;

.header-content {
  padding-top: 1rem;
  
  .page-title {
    font-size: 0.65rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 0.5rem 0;
    padding-left: 0.5rem;
  }
  
  .features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-left: 0.5rem;
    
    .feature-item {
      display: flex;
      align-items: center;
      gap: 0.2rem;
      font-size: 0.28rem;
      color: #666;
      
      .check-icon {
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 50%;
        background: #4CAF50;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.25rem;
        font-weight: bold;
      }
    }
  }
}
.formInt {
  width: 8.63rem;
  margin: 0 auto;
  margin-top: 1rem;

.form-container {
  width: 100%;
  margin-top: 100px;
}
.formDemo {
  display: flex;
  height: 1.26923rem;
  width: 8.63rem;
  background: #f5f5f5;
  border-radius: 0.126923rem;
  position: relative;
  margin-bottom: 0.253846rem;

.form-card {
  background: #fff;
  border-radius: 0.3rem;
  padding: 30px 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.flex {
  display: flex;
  height: 1.26923rem;
  width: 8.63rem;
  align-items: center;
  margin-bottom: 0.253846rem;
}
.block {
  display: block !important;
}
.flex input {
  background: #f5f5f5;
  height: 1.25rem;
  width: 5rem;
  font-size: 0.4rem;
  color: #000;
  padding-left: 0.4rem;
}
.flex .num {
  flex: 1;
  background: #f5f5f5;
  color: #ec4a58;
  text-align: center;
  height: 100%;
  line-height: 4;
  border-radius: 0.1rem;
  margin-left: 0.25rem;
  display: none;
}
.formDemo .el-select {
  height: 100%;
  width: 2rem;
  background: #f5f5f5;
  border: none;
}
/deep/ .formDemo .el-select .el-input {
  height: 100%;
}
/deep/ .formDemo .el-select .el-input__inner {
  height: 100%;
  border: none;
  background: transparent;

.form-field {
  margin-bottom: 1rem;
  
  .field-label {
    display: block;
    font-size: 0.32rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.3rem;
  }
  
  .input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 0.2rem;
    overflow: hidden;
    background: #F5F7FA;
    
    .area-select {
      width: 2rem;
      border: none;
      border-right: 1px solid #e0e0e0;
      background: #F5F7FA;
      
      /deep/ .el-input__inner {
        border: none;
        height: 1.3rem;
        padding: 0 0.3rem;
        font-size: 0.32rem;
        background: #F5F7FA;
      }
    }
    
    .field-input {
      flex: 1;
      border: none;
      height: 1.3rem;
      padding: 0 0.3rem;
      font-size: 0.32rem;
      background: #F5F7FA;
    }
  }
  
  .field-input {
    width: 100%;
    height: 1.3rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.2rem;
    padding: 0 0.3rem;
    font-size: 0.32rem;
    background: #F5F7FA;
    
    &:focus {
      outline: none;
      border-color: #1890ff;
    }
  }
}

.formDemo span {
@@ -757,11 +875,13 @@
.formDemos {
  display: flex;
  height: 1.26923rem;
  width: 8.63rem;
  background: #f5f5f5;
  border-radius: 0.126923rem;
  width: 100%;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0.2rem;
  position: relative;
  margin-bottom: 0.253846rem;
  margin-bottom: 0.4rem;
  align-items: center;
}
.pwdIcon {
  width: 0.406rem;
@@ -801,7 +921,7 @@
//input默认字样式
::-webkit-input-placeholder {
  color: #999;
  font-size: 0.4rem;
  font-size: 0.32rem;
}
.djzc {
  width: 8.5rem;
@@ -815,17 +935,142 @@
  font-size: 0.375rem;
  color: #ec4a58;
}
.agreement {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
  font-size: 0.28rem;
  color: #666;
  
  input[type="checkbox"] {
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.25rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #d9d9d9;
    border-radius: 0.08rem;
    background-color: #fff;
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s ease;
    
    &:checked {
      background-color: #1890ff;
      border-color: #1890ff;
      
      &::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 0.32rem;
        font-weight: bold;
        line-height: 1;
      }
    }
    
    &:hover {
      border-color: #1890ff;
    }
    
    &:focus {
      outline: none;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
  }
  
  label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }
  
  .agreement-link {
    color: #1890ff;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

.loginBtn {
  width: 8.5rem;
  height: 1.1rem;
  width: 100%;
  height: 1.3rem;
  background: linear-gradient(-55deg, rgb(241, 22, 20), rgb(240, 40, 37));
  border-radius: 0.125rem;
  margin: 0 auto;
  margin-top: 1rem;
  border-radius: 0.2rem;
  margin: 0.5rem 0;
  color: #fff;
  font-weight: 600;
  font-size: 0.4rem;
  font-size: 0.38rem;
  text-align: center;
  line-height: 1.125rem;
  line-height: 1.3rem;
  cursor: pointer;
  border: none;
}

.login-link {
  text-align: center;
  margin-top: 0.5rem;
  
  span {
    font-size: 0.28rem;
    color: #999;
    cursor: pointer;
    
    &:hover {
      color: #1890ff;
    }
  }
}

.features-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1rem 0.5rem;
  background: #fff;
  
  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    
    .feature-icon {
      width: 1rem;
      height: 1rem;
      background: #1890ff;
      border-radius: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.3rem;
      
      svg {
        width: 0.6rem;
        height: 0.6rem;
        color: #fff;
      }
    }
    
    .feature-title {
      font-size: 0.28rem;
      font-weight: 600;
      color: #333;
      margin-bottom: 0.15rem;
    }
    
    .feature-desc {
      font-size: 0.24rem;
      color: #999;
    }
  }
}
</style>