修改登录页

Flex

2025-05-30 c208475507d1adca547dba5cf8fd2cb88b80cf34

修改登录页

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

@@ -2,8 +2,10 @@
  <div class="bei">
      <div class="BeiArea">
        <!-- 左侧图片 -->
         <div class="Left-img"  >
            <img src="@/assets/imgs/bei6-1.png" alt=""/>
         <div class="Left-img">
            <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,38 +110,38 @@
            </el-col>
          </el-row>
        </el-form-item>
      </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>-->
<!--          <div class="w-[100%] flex justify-between">-->
<!--            <Icon-->
<!--              v-for="(item, key) in socialList"-->
<!--              :key="key"-->
<!--              :icon="item.icon"-->
<!--              :size="30"-->
<!--              class="anticon cursor-pointer"-->
<!--              color="#999"-->
<!--              @click="doSocialLogin(item.type)"-->
<!--            />-->
<!--          </div>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-divider content-position="center">萌新必读</el-divider>-->
<!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
<!--        <el-form-item>-->
<!--          <div class="w-[100%] flex justify-between">-->
<!--            <el-link href="https://doc.iocoder.cn/" target="_blank">📚开发指南</el-link>-->
<!--            <el-link href="https://doc.iocoder.cn/video/" target="_blank">🔥视频教程</el-link>-->
<!--            <el-link href="https://www.iocoder.cn/Interview/good-collection/" target="_blank">-->
<!--              ⚡面试手册-->
<!--            </el-link>-->
<!--            <el-link href="http://static.yudao.iocoder.cn/mp/Aix9975.jpeg" target="_blank">-->
<!--              🤝外包咨询-->
<!--            </el-link>-->
<!--          </div>-->
<!--        </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>-->
      <!--          <div class="w-[100%] flex justify-between">-->
      <!--            <Icon-->
      <!--              v-for="(item, key) in socialList"-->
      <!--              :key="key"-->
      <!--              :icon="item.icon"-->
      <!--              :size="30"-->
      <!--              class="anticon cursor-pointer"-->
      <!--              color="#999"-->
      <!--              @click="doSocialLogin(item.type)"-->
      <!--            />-->
      <!--          </div>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <!--      <el-divider content-position="center">萌新必读</el-divider>-->
      <!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
      <!--        <el-form-item>-->
      <!--          <div class="w-[100%] flex justify-between">-->
      <!--            <el-link href="https://doc.iocoder.cn/" target="_blank">📚开发指南</el-link>-->
      <!--            <el-link href="https://doc.iocoder.cn/video/" target="_blank">🔥视频教程</el-link>-->
      <!--            <el-link href="https://www.iocoder.cn/Interview/good-collection/" target="_blank">-->
      <!--              ⚡面试手册-->
      <!--            </el-link>-->
      <!--            <el-link href="http://static.yudao.iocoder.cn/mp/Aix9975.jpeg" target="_blank">-->
      <!--              🤝外包咨询-->
      <!--            </el-link>-->
      <!--          </div>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
    </el-row>
  </el-form>
</template>
@@ -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>