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/login.vue | 445 +++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 315 insertions(+), 130 deletions(-)
diff --git a/src/page/login/login.vue b/src/page/login/login.vue
index 722ac7c..6157d0e 100644
--- a/src/page/login/login.vue
+++ b/src/page/login/login.vue
@@ -41,30 +41,74 @@
style="color: rgb(54,124,248);">{{ $t('hj15') }}</span> </div>
</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>
- <input :placeholder="$t('jy311')" v-model="userName"/>
+ <div class="login_content">
+ <!-- Logo区域 -->
+ <div class="logo_container">
+ <img :src="Logo" alt="logo" class="logo_icon" />
</div>
- <div class="formDemos">
- <span class="pwdIcon"></span>
- <input type="password" :placeholder="$t('hj30')" v-model="userPassword" @input="handleInput()"/>
+
+ <!-- 输入框区域 -->
+ <div class="input_container">
+ <div class="input_group">
+ <label class="input_label">{{ $t('login_phoneNumber') }}</label>
+ <div class="input_wrapper">
+ <input
+ class="input_field"
+ type="tel"
+ :placeholder="$t('jy311')"
+ v-model="userName"
+ maxlength="11"
+ />
+ <span v-if="userName" class="clear_icon" @click="userName = ''">×</span>
+ </div>
+ </div>
+ <div class="input_group">
+ <label class="input_label">{{ $t('login_loginPassword') }}</label>
+ <div class="input_wrapper">
+ <input
+ class="input_field password_input"
+ :type="showPassword ? 'text' : 'password'"
+ :placeholder="$t('hj30')"
+ v-model="userPassword"
+ @input="handleInput()"
+ />
+ <span
+ class="password_toggle"
+ @click="togglePassword"
+ :class="showPassword ? 'icon_eye_open' : 'icon_eye_close'"
+ ></span>
+ <span v-if="userPassword" class="clear_icon" @click="userPassword = ''">×</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- 用户协议复选框 -->
+ <div class="agreement_container">
+ <input
+ type="checkbox"
+ id="agreement"
+ v-model="agreedToTerms"
+ class="agreement_checkbox"
+ />
+ <label for="agreement" class="agreement_label">
+ {{ $t('login_agreeToTerms') }}<span class="agreement_link" @click.stop="viewAgreement">《{{ $t('login_userAgreement') }}》</span>
+ </label>
+ </div>
+
+ <!-- 按钮区域 -->
+ <div class="button_container">
+ <div @click="loginIN" v-loading="loginBtn" class="login_btn">{{ $t('hj24') }}</div>
+ <div @click="$router.push('/register')" class="register_btn">{{ $t('login_openAccountRegister') }}</div>
</div>
</div>
- <div class="djzc" @click="$router.push('/register')">{{ $t('jy310') }}</div>
- <div @click="loginIN" v-loading="loginBtn" class="loginBtn">{{ $t('hj24') }}</div>
+
<el-alert v-show="alertShow" :closable="closable" :title="texts" :type="eltype" center></el-alert>
</div>
</template>
<script>
import { Toast } from 'mint-ui'
import headers from "./components/header.vue";
-import Logo from "@/assets/img/LOGO2.png";
+import Logo from "@/assets/imgRed/logo.png";
import * as api from '@/axios/api';
export default {
@@ -88,6 +132,8 @@
docmHeight: document.documentElement.clientHeight, //默认屏幕高度
showHeight: document.documentElement.clientHeight, //实时屏幕高度
hideshow: true, //显示或者隐藏footer
+ showPassword: false, // 密码显示/隐藏
+ agreedToTerms: false, // 是否同意用户协议
};
},
components: {
@@ -133,8 +179,18 @@
this.btnClass = false;
}
},
+ togglePassword() {
+ this.showPassword = !this.showPassword;
+ },
+ viewAgreement() {
+ // 跳转到用户协议页面
+ this.$router.push('/about?e=2');
+ },
async loginIN() {
-
+ if (!this.agreedToTerms) {
+ Toast(this.$t('login_pleaseAgreeToTerms'));
+ return;
+ }
this.dengl = true
setTimeout(() => {
this.dengl = false
@@ -187,11 +243,251 @@
<style scoped lang="less">
.login_page {
position: relative;
- background-color: #fff !important;
+ background: url('~@/assets/imgRed/14.png') no-repeat center center;
+ background-size: cover;
width: 100%;
- height: 100%;
- overflow: hidden;
+ min-height: 100vh;
+ display: flex;
+ // align-items: center;
+ justify-content: center;
+ // padding: 1rem;
overflow-y: auto;
+}
+
+.login_content {
+ margin-top: 50px;
+ width: 100%;
+ max-width: 8.5rem;
+ max-height: 61vh;
+ border-radius: 0.4rem;
+ padding: .375rem;
+ background-color: rgba(255, 255, 255, .5);
+ box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1);
+}
+
+// Logo区域
+.logo_container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.logo_icon {
+ height: 3rem;
+ object-fit: contain;
+ display: block;
+}
+
+.logo_text {
+ display: flex;
+ flex-direction: column;
+}
+
+.logo_title {
+ font-size: 0.7rem;
+ font-weight: 600;
+ color: #000;
+ line-height: 1.2;
+}
+
+.logo_subtitle {
+ font-size: 0.28rem;
+ color: #666;
+ letter-spacing: 0.05rem;
+ margin-top: 0.1rem;
+}
+
+// 输入框区域
+.input_container {
+ width: 100%;
+ margin-bottom: 0.8rem;
+}
+
+.input_group {
+ margin-bottom: 0.6rem;
+}
+
+.input_label {
+ display: block;
+ font-size: 0.32rem;
+ color: #000;
+ margin-bottom: 0.25rem;
+ font-weight: 500;
+}
+
+.input_wrapper {
+ position: relative;
+ width: 100%;
+}
+
+.input_field {
+ width: 100%;
+ height: 1rem;
+ background: #fff;
+ border: 1px solid #e0e0e0;
+ border-radius: 0.15rem;
+ padding: 0 0.3rem;
+ padding-right: 0.7rem;
+ font-size: 0.32rem;
+ color: #000;
+ box-sizing: border-box;
+
+ &::placeholder {
+ color: #999;
+ font-size: 0.32rem;
+ }
+
+ &:focus {
+ outline: none;
+ border-color: #2567ff;
+ }
+}
+
+.password_input {
+ padding-right: 1.4rem;
+}
+
+.clear_icon {
+ position: absolute;
+ right: 0.3rem;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 0.35rem;
+ height: 0.35rem;
+ line-height: 0.35rem;
+ text-align: center;
+ color: #999;
+ font-size: 0.4rem;
+ cursor: pointer;
+ background: #f5f5f5;
+ border-radius: 50%;
+
+ &:hover {
+ background: #e0e0e0;
+ }
+}
+
+.password_toggle {
+ position: absolute;
+ right: 0.3rem;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 0.4rem;
+ height: 0.4rem;
+ cursor: pointer;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ z-index: 1;
+}
+
+.password_wrapper .clear_icon {
+ right: 0.75rem;
+}
+
+.icon_eye_close {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'%3E%3C/path%3E%3Cline x1='1' y1='1' x2='23' y2='23'%3E%3C/line%3E%3C/svg%3E");
+}
+
+.icon_eye_open {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
+}
+
+// 用户协议区域
+.agreement_container {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.agreement_checkbox {
+ width: 0.32rem;
+ height: 0.32rem;
+ margin-right: 0.25rem;
+ cursor: pointer;
+ appearance: none;
+ border: 2px solid #2567ff;
+ border-radius: 50%;
+ position: relative;
+
+ &:checked {
+ background-color: #2567ff;
+ border-color: #2567ff;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 0.12rem;
+ height: 0.12rem;
+ background: #fff;
+ border-radius: 50%;
+ }
+ }
+}
+
+.agreement_label {
+ font-size: 0.28rem;
+ color: #000;
+ cursor: pointer;
+ user-select: none;
+}
+
+.agreement_link {
+ color: #2567ff;
+ cursor: pointer;
+}
+
+// 按钮区域
+.button_container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ margin-top: 1rem;
+}
+
+.login_btn {
+ width: 100%;
+ height: 1rem;
+ background: #e03936;
+ border-radius: 0.15rem;
+ color: #fff;
+ font-size: 0.36rem;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: background 0.3s;
+ border: none;
+
+ &:active {
+ background: #c62828;
+ }
+}
+
+.register_btn {
+ width: 100%;
+ height: 1rem;
+ background: #2567ff;
+ border-radius: 0.15rem;
+ color: #fff;
+ font-size: 0.36rem;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: background 0.3s;
+ border: none;
+
+ &:active {
+ background: #1a56d9;
+ }
}
.logins_content {
@@ -425,116 +721,5 @@
/deep/.el-input__clear {
font-size: 0.5rem !important;
-}
-.header{
- height: 5.7rem;
- width: 100%;
- background: url('~@/assets/img/huxbj.8fe20e1f.png') no-repeat 50%;
- background-size: 100%;
- position: relative;
-}
-.bock{
- position: absolute;
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAgCAYAAAAffCjxAAAAAXNSR0IArs4c6QAAAVdJREFUSEut1usqBVEYxvH/c1MuRJJDkhwTEpIkJUlyCEk++CJJckpycw49Gs3Wa+y9Z82ePd/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;
-}
-.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;
-}
-.formInt{
- width: 8.63rem;
- margin: 0 auto;
- margin-top: 1rem;
-}
-.formDemo{
- display: flex;
- height: 1.26923rem;
- width: 8.63rem;
- background: #f5f5f5;
- border-radius: 0.126923rem;
- position: relative;
- margin-bottom: 0.253846rem;
-}
-.formDemo span{
- width: 0.406rem;
- height: 0.406rem;
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEAklEQVRYhbWXXWgcVRTHf2dmk1jjS4QK9qEKKamFYrDgixUfShKUipYiRgRL6iZtRUSpJpsvRCFN3V0CihY02fTDFmmKeVBTkIjBmvSh2Ddb1GLRllDMuxHzMXPkzkcy2WayOzb9s7Azd845//8998y5d4QE+PiUpubmeQHYi/A4yiaFeWAa4WdVRquqGH1znyyWG7VsAflB3S1CHtjmean3WxFF/ctfXKU90ybny4lrlTLY0TAhA0PaL8I3ZZCb/20ijOUKevTRpgslJ1jSID+onSIcXbJW/lYYVuUrV7lm26hCncAehTRwXyTykY609P5vAQNDukthHLAD8imF5vY2ubWafa6gm4ARhCeDIVWlMdMq38dxxC6BSb3CRxHyS7P/0hBHbtDRKrf+maMBuLQ0QeHD7U0/xk409kFuUBstYTwgn1tw2Np1SG7E2UfRP6gPpWx+U6gyw67S1NUq361mG5sBS3g+UnBflEtu0H1Abhif8F7huVie2CjCY2G1q1LWK1WEsYDcTGZHcgF+kwnFXE/K7irXI/4PJhag4ATOJgOJOmYgwAr9CWMlEQDMhLRiUZtUgG18lmXPJBcg/MRyh9uTVACmiAMofqxkAuDLSHttzg9rXbnc2ROe7Uuw1LJHEwtob5UpgctBgJQq5/oHtboUed+QVhtbz8cfutz1qkwlFmDguLzFcjHWp2wm88d1S5x99oRuSdlMAPUBuRPEiEXJ6s4V9B38bTjEvMJp4GsRfldfaK1leWv+ClAZvn6u0tmTluwdCfBmVtB2ET4wGdPIePGWHBlzA/Ko8FVR8jyQLehmEUxROWWSGziWxdYjx3VzqfhrZiBb0DeCs0B1DPlCcFURfe41L/9qVqGzZ798kkhAblgrgWNAKytndsVRzqoyYVn8cebcRa/BvLh35wMpm4cRdlkWLytsLxJaUHi9t0XmSwoIyM1G0hgJcg14+/ORyfNXx5/SYp8oHnn6ouxrfmK3wgBQF8mG2Y6fLRaxWg0UisiHLYv6TFrGSpEb/PrtTu3eL2PGB2E44tCocGrNDGQLmhbxBITk+UxaOkqRroW+k5ozfS0UotD2bosUbstA36e6UYRchPzM6ZHJzJ2QG/S2SEfQN8K4uZ6CbrxNQGUFh4H7A6Obiw6HrpSR8nKw6PCawk3PVKip8rmWBbx3TM3Z7WCkg3X3HJDZ9SA3eD8tsyZmZMEPZj7zOH0B997DMwo1Afl0VSUj60Ue4s8ZzqrLdHBbYziXBLjqV703YDFyOMG3Xbk42SmObfsTC86ZjUsCJDg0BhvLhfUmD+EqP4TLHHKGRVgbPrAsrt4tAY67Ira3rXsCFDb4sliwLf66WwIqUt7ZMNw/NgD8B2plfW1RGaDfAAAAAElFTkSuQmCC) no-repeat 50%;
- background-size: 100%;
- margin-top: 0.431rem;
- margin-left: 0.25346rem;
-}
-.formDemos{
- display: flex;
- height: 1.26923rem;
- width: 8.63rem;
- background: #f5f5f5;
- border-radius: 0.126923rem;
- position: relative;
-}
-.pwdIcon{
- width: 0.406rem;
- height: 0.406rem;
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADMklEQVRYha2WXYhMYRjHf88xu2uJ5EZJWiFFkq8LJYRSvpILRMQ2NheIlWXJd5F2JKTY3Qi5FeFKiciNC+Vjb2R9XOyVVqHFzJ7z6Mx5j52ZPWfmHTP/5nSa877P8/+/z9c5Qploa9fxjrADWK4wEQH16EZ4qMqVlib5Uo7HsgS0tes+RzgF1Gtordlf6O2XwtGWpKSqLiDVoacFWgk4fyHcVY+XPrkIcxHWKNQbTWdaknKoagJSHbpS4L4hf66waf/2/FCf7cim5rbCfPNoVUtSHlQs4NINddJp3gBTXeV1IsG85kbpi9p77poOcz1eADMQumprmL5ni3jF/DulBKTTLPDJNTj9zjhyH/sapc/12GWONTWdydoWRUkBnrLQFFz3gSZ5Vmp/a7CnO7StWIBCg6n2d6X2/rNR3prOaKhYgONQa1rth60AhJ8E3VFbsYC8Pi8TNnY2KQhQ5sy0FR3p9my7LhwiJBUm41/CaIVegY8aY537XGECMBqhF3jvX65H5+GkPC0pINWpR1FO5J5cB6auDXn8unCsdZucjBWQ6tSVKPeNQQ/CY4W+CsmHAYsRxqpfT8Kqw9sGJmQi7/hKs3HyKlHDor1b5TtVQNtNHZnp54kKM4Fm4J8AJ5+fOeZ+oVrkPvZvke8eXDDRmZO7VtgFI0zOv1aLPETWZ+B7RLyAnIKrNkSiWzOvBkLyoq8vgyOXtW74UF4YtfMONkq6RAQGd1KhgHCDzRCpr2MMwiyC000CukrZRPktLEJrSE6eXI8htuSFHJGjWMooAtuIRZFHCyiTHEvBcSIHdUG55NnOsQhB3EstEbHXKqQZl2+1NfT65BmPTxYmkQcclALbfB5rkh/9LlNcZcrx7VLyYyXkLtqGcZUahyNJsZ+YMYOoMAK/jYBR1o4tkePzdzEB74zKddOWPavaRG5Y8VJEWB9y5K7lpcBVrjvCbMdh9eb18x/JBr3jKf3ZRVPtGsqSwSmL+mYQIeEpa4El/n9HuBYr4HOPXpkwTpYCa3wDTwOj/yXPDqn8xN/70MPViK0DOH9LE38y7FZImu/BxP+SG/gR/AC019Vw8eBGCSLqA/gLhUArt4NKdJwAAAAASUVORK5CYII=) no-repeat 50%;
- background-size: 100%;
- margin-top: 0.431rem;
- margin-left: 0.25346rem;
-}
-.formDemos input{
- background: transparent;
- height: 1.25rem;
- width: 7rem;
- font-size: .4rem;
- color: #000;
- margin-left: 0.25rem;
-}
-.formDemo input{
- background: transparent;
- height: 1.25rem;
- width: 7rem;
- font-size: .4rem;
- color: #000;
- margin-left: 0.25rem;
-}
-
-//input默认字样式
-::-webkit-input-placeholder {
- color: #999;
- font-size: .4rem;
-}
-.djzc{
- width: 8.5rem;
- margin: 0.45rem auto;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: flex-end;
- font-size: .375rem;
- color: #5d7dfb;
-}
-.loginBtn{
- width: 8.5rem;
- height: 1.1rem;
- background: linear-gradient(-55deg,rgb(241, 22, 20),rgb(240, 40, 37));
- border-radius: 0.125rem;
- margin: 0 auto;
- margin-top: 1rem;
- color: #fff;
- font-weight: 600;
- font-size: .4rem;
- text-align: center;
- line-height: 1.125rem;
}
</style>
--
Gitblit v1.9.3