分享一个毛玻璃样式的登录页面 使用的是scss 记得安装sass 任选以下一个都可以，取决于你的包管理工具是啥# npm install sass # yarn add sass # pnpm add sasstemplate部分代码<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>