修改登录页

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;
  }
  
}