修改登录页样式

Flex

2025-06-09 2036e7bd0c3b9744688ca9dcf08d2bf874bc5e8e

修改登录页样式

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

@@ -2,9 +2,9 @@
  <div class="bei">
      <div class="BeiArea">
        <!-- 左侧图片 -->
         <div class="Left-img">
      <div class="Left-Area">
            <div class="TitleText" >
              <text> 数字人 </text>智能交互平台
          <h1>数字人智能交互平台</h1>
            </div>
         </div>
        <!-- 右边的登录界面 -->
@@ -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,7 +43,6 @@
const prefixCls = getPrefixCls('login')
const passwordLoginSwitch = ref(undefined)


onMounted(async ()=>{
    const data = await ConfigApi.getConfigKey('password-login-switch')
    if (data && data.length > 0) {
@@ -51,90 +50,93 @@
    }
})
</script>

<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{
  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;
  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 .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{
  /* 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: 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>