zhouwx
2025-01-13 38160aea679d418a49c2573b2375cd03333c7d35
src/views/login.vue
@@ -1,7 +1,13 @@
<template>
  <el-row class="login">
    <el-col :sm="24" :md="12" class="login-name">
      新疆维吾尔自治区特种作业<br/>安全生产知识和管理能力考核平台
      <div class="bigName">
        <span>新疆维吾尔自治区</span>
        <br/>安全生产知识和管理能力考核平台
      </div>
      <div class="smallName">
        数据存档 / 远程监巡考 / 特种作业缴费 / 网络培训监管
      </div>
    </el-col>
    <el-col :sm="24" :md="12" class="login-box">
      <div class="login-card">
@@ -44,7 +50,7 @@
            </div>
          </el-form-item>
          <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;color: #ccc">记住密码</el-checkbox>
          <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px">
          <div style="display: flex;justify-content: space-between;align-items: center">
            <div style="width: 100%">
              <el-button
                class="btn-cont"
@@ -169,6 +175,7 @@
</script>
<style rel="stylesheet/scss" lang="scss">
@font-face {
  font-family: "AliMa";
  src: url("../assets/styles/AlimamaShuHeiTi-Bold.ttf");
@@ -198,18 +205,29 @@
.login-name{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  -webkit-opacity: 0;
  animation: floatDown ease 0.6s forwards;
  justify-content: center;
  align-items: center;
  font-family: 'AliMa';
  color: #fff;
  font-size: 3rem;
  text-align: center;
  line-height: 1.6;
  line-height: 1.5;
  transform: translateY(-120px);
  text-shadow: -10px 10px 20px rgba(0,0,0,.4);
  .bigName{
    font-family: 'AliMa';
    color: #fff;
    font-size: clamp(2.25rem, 0.401rem + 2.17vw, 3rem);
    text-shadow: -10px 10px 20px rgba(0,0,0,.4);
    span{
      font-size: clamp(3rem, 0.534rem + 2.89vw, 4rem);
    }
  }
  .smallName{
    margin-top: 20px;
    font-size: clamp(1.125rem, 0.2rem + 1.08vw, 1.5rem);
    color: #fff;
  }
}
@keyframes floatUp {
@@ -224,9 +242,7 @@
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  -webkit-opacity: 0;
  animation: floatUp ease 0.6s forwards;
  .login-card{
    width: 500px;
    padding: 30px;
@@ -238,6 +254,9 @@
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 10px 20px rgba(0,0,0,.05);
    opacity: 0;
    -webkit-opacity: 0;
    animation: floatUp ease 0.6s forwards;
  }
  .login-form {
    width: 100%;