分享一个毛玻璃样式的登录页面

使用的是scss 记得安装sass 任选以下一个都可以，取决于你的包管理工具是啥

# npm install sass
# yarn add sass
# pnpm add sass

template部分代码

<template>
<div class="login-container">
  <div class="login-background">
    <div class="gradient-circles">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>
  </div>
  
  <div class="glassmorphism-card">
    <div class="login-content">
      <div class="login-header">
        <img src="/vite.svg" alt="Logo" class="logo" />
        <h1>系统</h1>
        <p class="subtitle">知识的殿堂，智慧的源泉</p>
      </div>
      
      <login-form @login="handleLogin" />
      
      <div class="login-footer">
        <p>© {{ new Date().getFullYear() }}  System. All rights reserved.</p>
      </div>
    </div>
  </div>
</div>
</template>

JavaScript部分代码

<script setup>
import LoginForm from '../components/login/LoginForm.vue';
const handleLogin = (credentials) => {
//处理逻辑
};
</script>

css部分代码

<style scoped lang="scss">
.login-container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
}

.login-background {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.gradient-circles {
position: absolute;
width: 100%;
height: 100%;

.circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}

.circle-1 {
  width: 600px;
  height: 600px;
  background: rgba(64, 158, 255, 0.3);
  top: -200px;
  right: -100px;
  animation: float 8s infinite;
}

.circle-2 {
  width: 450px;
  height: 450px;
  background: rgba(103, 58, 183, 0.3);
  bottom: -150px;
  left: -100px;
  animation: float 10s infinite;
}

.circle-3 {
  width: 300px;
  height: 300px;
  background: rgba(233, 30, 99, 0.3);
  top: 40%;
  left: 60%;
  animation: float 12s infinite;
}
}

.glassmorphism-card {
width: 460px;
padding: 40px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
animation: slideIn 0.6s ease-out;
}

.login-content {
.login-header {
  text-align: center;
  margin-bottom: 2rem;
  
  .logo {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
    animation: pulse 2s infinite;
  }
  
  h1 {
    font-size: 2rem;
    color: #ffffff;
    margin: 0;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .subtitle {
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5rem;
    font-size: 1rem;
  }
}
}

.login-footer {
text-align: center;
margin-top: 2rem;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}

@keyframes float {
0%, 100% {
  transform: translateY(0) rotate(0deg);
}
50% {
  transform: translateY(-20px) rotate(5deg);
}
}

@keyframes slideIn {
from {
  transform: translateY(20px);
  opacity: 0;
}
to {
  transform: translateY(0);
  opacity: 1;
}
}

@keyframes pulse {
0%, 100% {
  transform: scale(1);
}
50% {
  transform: scale(1.05);
}
}
</style>

loginForm组件

• template部分

  <template>
  <el-form
  ref="formRef"
  :model="form"
  :rules="rules"
  class="login-form"
  @submit.prevent="handleSubmit"
  >
  <el-form-item prop="username">
    <el-input
      v-model="form.username"
      prefix-icon="User"
      placeholder="用户名"
      :class="{ 'input-focus': activeInput === 'username' }"
      @focus="activeInput = 'username'"
      @blur="activeInput = ''"
    />
  </el-form-item>
  
  <el-form-item prop="password">
    <el-input
      v-model="form.password"
      prefix-icon="Lock"
      type="password"
      placeholder="密码"
      :class="{ 'input-focus': activeInput === 'password' }"
      @focus="activeInput = 'password'"
      @blur="activeInput = ''"
      show-password
    />
  </el-form-item>
  
  <div class="form-options">
    <el-checkbox v-model="form.remember" class="remember-checkbox">
      记住我
    </el-checkbox>
    <el-button link type="primary" class="forgot-password">
      忘记密码？
    </el-button>
  </div>
  
  <el-button
    type="primary"
    native-type="submit"
    class="submit-button"
    :loading="loading"
    round
  >
    登录
  </el-button>
  </el-form>
  </template>

  -JavaScript部分

  <script setup>
  import { ref } from 'vue';
  const emit = defineEmits(['login']);
  
  
  const formRef = ref();
  const loading = ref(false);
  const activeInput = ref('');
  
  const form = ref({
  username: '',
  password: '',
  remember: false
  });
  
  const rules = {
  username: [
  { required: true, message: '请输入用户名', trigger: 'blur' },
  { min: 3, message: '用户名至少3个字符', trigger: 'blur' }
  ],
  password: [
  { required: true, message: '请输入密码', trigger: 'blur' },
  { min: 6, message: '密码至少6个字符', trigger: 'blur' }
  ]
  };
  
  const handleSubmit = async() => {
  if (!formRef.value) return;
  
  try {
  loading.value = true;
  await formRef.value.validate();
  emit('login', {
    username: form.value.username,
    password: form.value.password,
    remember: form.value.remember
  });
  } catch (error) {
  console.error('表单验证失败:', error);
  } finally {
  loading.value = false;
  }
  };
  </script>

  • css部分

  <style scoped lang="scss">
  .login-form {
  .el-input {
  --el-input-bg-color: rgba(255, 255, 255, 0.1);
  --el-input-border-color: rgba(255, 255, 255, 0.2);
  --el-input-hover-border: rgba(255, 255, 255, 0.3);
  --el-input-focus-border: rgba(255, 255, 255, 0.4);
  --el-input-text-color: #ffffff;
  --el-input-placeholder-color: rgba(255, 255, 255, 0.6);
  
  :deep(.el-input__wrapper) {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(255, 255, 255, 0.15);
    }
    
    &.is-focus {
      background: rgba(255, 255, 255, 0.2);
    }
  }
  
  :deep(.el-input__icon) {
    color: rgba(255, 255, 255, 0.8);
  }
  }
  
  .el-form-item {
  margin-bottom: 1.5rem;
  }
  }
  
  .form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  
  .remember-checkbox {
  :deep(.el-checkbox__label) {
    color: rgba(255, 255, 255, 0.8);
  }
  
  :deep(.el-checkbox__input) {
    .el-checkbox__inner {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.3);
    }
  }
  }
  
  .forgot-password {
  color: rgba(255, 255, 255, 0.8);
  
  &:hover {
    color: #ffffff;
  }
  }
  }
  
  .submit-button {
  width: 100%;
  height: 44px;
  font-size: 1.1rem;
  letter-spacing: 1px;
  background: linear-gradient(45deg, #42a5f5, #1976d2);
  border: none;
  transition: all 0.3s ease;
  
  &:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background: linear-gradient(45deg, #64b5f6, #1e88e5);
  }
  
  &:active {
  transform: translateY(0);
  }
  }
  </style>