1

jhzh

2026-01-09 f1aaecc9dc0a3d680f2f693ee963d5d060e75734

 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>