修改新增

祖安之光

昨天 91f61aa4bab9cfead8ff7e172f5ea47889f83a3e

 src/views/homePage.vue

@@ -1,9 +1,10 @@
<template>
  <el-row class="login-panel">
    <el-col :sm="24" :md="10" class="login-img">
    <el-col :sm="24" :md="13" class="login-img">

    </el-col>
    <el-col :sm="24" :md="14" class="login-box">
    <el-col :sm="24" :md="11" class="login-box">
      <div class="glass-bg"></div>
      <div class="login-title">多体系<br/>建设信息化系统</div>
      <div class="login-card">
        <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
@@ -200,10 +201,36 @@
  font-style: normal;
  font-weight: normal;
}

@keyframes move {
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes show {
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-opacity: 1;
    -ms-opacity: 1;
    opacity: 1
  }
}

.login-panel{
  width: 100%;
  height: 100%;
  background: url("@/assets/images/bg5.jpg") no-repeat center;
  background: url("@/assets/images/bg6.jpg") no-repeat center;
  background-size: cover;
  justify-content: center;
  align-items: center;
@@ -223,19 +250,41 @@
  text-shadow: -10px 10px 20px rgba(0,0,0,.4);
}
.login-box{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-40px);
  height: 100%;
  overflow: hidden;

  .glass-bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: (255,255,255,.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-left: 2px solid rgba(255,255,255,.4);
    animation: move 0.6s ease-in-out forwards;
  }
  .login-title{
    font-family: 'AliMa';
    color: #2563eb;
    font-size: clamp(3rem, 1.286rem + 2.68vw, 4.5rem);
    line-height: 1.2;
    text-shadow: 0 5px 10px rgba(37,99,235,.3);
    margin-bottom: 30px;
    margin-bottom: 40px;
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    opacity: 0;
    -webkit-opacity: 0;
    -ms-opacity: 0;
    animation: show 0.5s 0.7s ease-in-out forwards;
  }
  .login-card{
    width: 500px;
@@ -248,6 +297,13 @@
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 10px 20px rgba(0,0,0,.05);
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    opacity: 0;
    -webkit-opacity: 0;
    -ms-opacity: 0;
    animation: show 0.5s 0.7s ease-in-out forwards;
  }
  .login-form {
    width: 100%;