From f1aaecc9dc0a3d680f2f693ee963d5d060e75734 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 09 Jan 2026 16:18:43 +0800
Subject: [PATCH] 1
---
src/page/login/register.vue | 499 +++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 372 insertions(+), 127 deletions(-)
diff --git a/src/page/login/register.vue b/src/page/login/register.vue
index 7a981b4..59b7f2d 100644
--- a/src/page/login/register.vue
+++ b/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>
--
Gitblit v1.9.3