修改登录页样式

Flex

2025-06-09 2036e7bd0c3b9744688ca9dcf08d2bf874bc5e8e

修改登录页样式

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

@@ -1,28 +1,28 @@
<template>
  <div class="bei">
      <div class="BeiArea">
        <!-- 左侧图片 -->
         <div class="Left-img">
            <div class="TitleText" >
              <text> 数字人 </text>智能交互平台
            </div>
         </div>
        <!-- 右边的登录界面 -->
        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
          <div class="form-box">
            <!-- 账号登录 -->
            <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
            <!-- 手机登录 -->
            <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
            <!-- 二维码登录 -->
            <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
            <!-- 注册 -->
            <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
            <!-- 三方登录 -->
            <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
          </div>
        </Transition>
    <div class="BeiArea">
      <!-- 左侧图片 -->
      <div class="Left-Area">
        <div class="TitleText">
          <h1>数字人智能交互平台</h1>
        </div>
      </div>
      <!-- 右边的登录界面 -->
      <Transition appear enter-active-class="animate__animated animate__bounceInRight">
        <div class="form-box">
          <!-- 账号登录 -->
          <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
          <!-- 手机登录 -->
          <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
          <!-- 二维码登录 -->
          <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
          <!-- 注册 -->
          <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
          <!-- 三方登录 -->
          <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
        </div>
      </Transition>
    </div>
  </div>
</template>
<script lang="ts" setup>
@@ -33,7 +33,7 @@
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'

import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
import * as ConfigApi from "@/api/infra/config";
import * as ConfigApi from '@/api/infra/config'

defineOptions({ name: 'Login' })

@@ -43,98 +43,100 @@
const prefixCls = getPrefixCls('login')
const passwordLoginSwitch = ref(undefined)


onMounted(async ()=>{
    const data = await ConfigApi.getConfigKey('password-login-switch')
    if (data && data.length > 0) {
      passwordLoginSwitch.value = data
    }
onMounted(async () => {
  const data = await ConfigApi.getConfigKey('password-login-switch')
  if (data && data.length > 0) {
    passwordLoginSwitch.value = data
  }
})
</script>
<style  scoped>
*{

<style>
.bei .BeiArea .form-box > .el-form {
  height: 100%;
}
.bei .BeiArea .form-box > .el-form > div {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.bei{

.bei {
  width: 100%;
  min-height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: scroll;
}
.bei .BeiArea{
  width: 100%;
  height: 100vh;

.bei .BeiArea {
  width: auto;
  max-width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000a25;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  overflow: hidden;
}
.bei .BeiArea .form-box{
  /* width: 25%; */
  width: 400px;
  margin-top: -36px;
  padding: 70px 30px;

.bei .BeiArea .Left-Area {
  width: calc(650px + (100vw - 1700px) * 0.5);
  height: calc(650px + (100vh - 900px) * 0.5);
  display: flex;
  justify-content: center;
  align-content: center;
  background: linear-gradient(to bottom right, #1b6ac2, #57b5f2);
}

.bei .BeiArea .Left-Area .TitleText {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bei .BeiArea .Left-Area .TitleText h1 {
  color: #fff;
}

.bei .BeiArea .form-box {
  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: 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 .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;
  width: calc(650px + (100vw - 1700px) * 0.5);
  height: calc(650px + (100vh - 900px) * 0.5);
  padding: 40px 80px;
}

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

  .form-box{
    width: 50% !important;
    margin: 0 auto !important;
@media ( max-width:1200px ) and (min-width:1000px) {
  .bei .BeiArea .form-box{
    width: 45%;
    height: 90vh;
  }

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

@media (max-width:1650px) and ( min-width: 1300px )  {
  .bei .BeiArea .Left-img{
    margin-left: 0;
  .bei .BeiArea .Left-Area{
    width: 45%;
    height: 90vh;
  }
}

@media (max-height:500px){
  .bei .BeiArea{
    align-items: flex-start;
@media ( max-width:1000px ){
  .bei .BeiArea .form-box{
    width: 50%;
    height: 100vh;
  }
  .bei .BeiArea .Left-Area{
    width: 50%;
    height: 100vh;
  }
}


</style>