/* ==================== Reset & 基础 ==================== */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Helvetica Neue", Arial, sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); display: flex; justify-content: center; align-items: center; height: 100vh; } /* ==================== 登录卡片 ==================== */ .login-container { background-color: #fff; padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); text-align: center; max-width: 400px; width: 90%; transition: all 0.3s ease; } .login-container:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); } .login-container h1 { margin-bottom: 30px; color: #333; font-size: 28px; font-weight: 600; } /* ==================== Logo ==================== */ .logo { width: 80px; height: 80px; margin-bottom: 20px; } /* ==================== 二维码 ==================== */ .qr-code { margin: 30px 0; position: relative; } .qr-code img { width: 200px; height: 200px; border-radius: 10px; transition: all 0.3s ease; } .qr-code::before { content: ""; position: absolute; inset: -5px; background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59); z-index: -1; filter: blur(20px); border-radius: 15px; opacity: 0; transition: opacity 0.3s ease; } .qr-code:hover::before { opacity: 1; } /* ==================== 说明文字 ==================== */ .instructions { color: #666; font-size: 16px; margin-top: 20px; line-height: 1.5; } /* ==================== 动画 ==================== */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 2s infinite; }