修改登录页

Flex

2025-05-30 c208475507d1adca547dba5cf8fd2cb88b80cf34

修改登录页

 easegen-front/src/views/Login/Login.vue

@@ -3,7 +3,9 @@
      <div class="BeiArea">
        <!-- 左侧图片 -->
         <div class="Left-img"  >
            <img src="@/assets/imgs/bei6-1.png" alt=""/>
            <div class="TitleText" >
              <text> 数字人 </text>智能交互平台
            </div>
         </div>
        <!-- 右边的登录界面 -->
        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
@@ -57,38 +59,66 @@
.bei{
  width: 100%;
  height: 100%;
  background-color: #061C43;
}
.bei .BeiArea{
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: space-around;
  justify-content: center;
  align-items: center;
}
.bei .BeiArea{
  width: 86%;
  height: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000a25;
}
.bei .BeiArea .form-box{
  width: 30%;
  padding: 20px;
  /* width: 25%; */
  width: 400px;
  margin-top: -36px;
  padding: 70px 30px;
  box-sizing: border-box;
  background: #fff;
  margin-left: 300px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.bei .BeiArea .Left-img{
  width: 677px;
  width: 729px;
  height: 655px;
  margin-top: 138px;
  margin-left: -74px;
  background-image:url( "@/assets/imgs/bei3-1.png" );
  /* background-size: 100%; */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bei .BeiArea .Left-img img{
.bei .BeiArea .Left-img .TitleText{
  margin-top: calc( -85% );
  margin-left: -60px;
  color: #fff;
  width: 100%;
  text-align: left;
  font-size: 48px;
  padding-left: 10%;
  box-sizing: border-box;
}
.bei .BeiArea .Left-img .TitleText text{
  color: #2d84fa;
}

@media screen and ( max-width: 1300px )  {

  .form-box{
    width: 80%;
    width: 80% !important;
    margin: 0 auto !important;
  }

  .Left-img{
    display: none;
    display: none !important;
  }
  
}

 easegen-front/src/views/Login/components/LoginForm.vue

@@ -4,7 +4,7 @@
    ref="formLogin"
    :model="loginData.loginForm"
    :rules="LoginRules"
    class="login-form"
    class="login-form NewClass"
    label-position="top"
    label-width="120px"
    size="large"
@@ -72,6 +72,7 @@
            class="w-[100%]"
            type="primary"
            @click="getCode()"
            style="background-color: #1D78F4;"
          />
        </el-form-item>
      </el-col>
@@ -82,24 +83,25 @@
        mode="pop"
        @success="handleLogin"
      />
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
      <!-- 注册不显示 -->
      <!-- <el-col :span="24"  > 
        <el-form-item>
          <el-row :gutter="5" justify="space-between" style="width: 100%">
            <!-- <el-col :span="12">
          <el-row :gutter="5" justify="space-between" style="width: 100%; margin-left: 0 !important;">
            <el-col :span="12">
              <XButton
                :title="t('login.btnMobile')"
                class="w-[100%]"
                @click="setLoginState(LoginStateEnum.MOBILE)"
              />
            </el-col> -->
<!--            <el-col :span="8">-->
<!--              <XButton-->
<!--                :title="t('login.btnQRCode')"-->
<!--                class="w-[100%]"-->
<!--                @click="setLoginState(LoginStateEnum.QR_CODE)"-->
<!--              />-->
<!--            </el-col>-->
            <el-col :span="24">
            </el-col>
                       <el-col :span="8">
                         <XButton
                           :title="t('login.btnQRCode')"
                           class="w-[100%]"
                           @click="setLoginState(LoginStateEnum.QR_CODE)"
                         />
                       </el-col>
            <el-col :span="24"  style="padding-right: 10px; padding-left: 10px" >
              <XButton
                :title="t('login.btnRegister')"
                class="w-[100%]"
@@ -108,7 +110,7 @@
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
      </el-col> -->
<!--      <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>-->
<!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
<!--        <el-form-item>-->
@@ -352,4 +354,19 @@
    cursor: pointer;
  }
}

.NewClass {
  ::v-deep( .el-input__inner ) {
    font-size: 20px;
    line-height: 40px;
    height: 60px;
  }
  ::v-deep(.el-button--large){
    padding: 20px;
    box-sizing: border-box;
    font-size: 20px;
    height: 60px;
    margin-top: 20px;
  }
}
</style>

 easegen-front/src/views/Login/components/LoginFormTitle.vue

@@ -1,5 +1,12 @@

<style>
.c717a8a{
  color: #717a8a
}
</style>

<template>
  <h2 class="enter-x mb-3 text-center text-2xl font-bold xl:text-center xl:text-3xl">
  <h2 class="enter-x mb-3 text-2xl font-bold xl:text-3xl c717a8a"  >
    {{ getFormTitle }}
  </h2>
</template>