*[data-v-197fbf56] { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; } /* 移除全局body样式,改为在main-view中设置背景 */ .main-view[data-v-197fbf56] { z-index: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; position: relative; overflow: hidden; background: linear-gradient(135deg, #0a0e17 0%, #131826 100%); color: #e8f4f8; } .container[data-v-197fbf56] { display: flex; flex-direction: column; width: 100%; max-width: 500px; background: linear-gradient(135deg, rgba(23, 32, 56, 0.9), rgba(19, 28, 46, 0.95)); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 10, 30, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.15), inset 0 0 30px rgba(0, 0, 0, 0.5); text-align: center; align-items: center; justify-content: center; padding: 45px 35px; margin: 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(59, 130, 246, 0.2); } .logo[data-v-197fbf56] { width: 110px; height: 110px; margin: 0 auto 30px; background: linear-gradient(135deg, rgba(23, 32, 56, 0.8), rgba(59, 130, 246, 0.2)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.3), inset 0 0 20px rgba(59, 130, 246, 0.2); overflow: hidden; padding: 12px; position: relative; } .logo[data-v-197fbf56]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05)); z-index: 1; } .logo uni-image[data-v-197fbf56] { max-width: 100%; max-height: 100%; object-fit: contain; display: block; position: relative; z-index: 2; filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5)); } h1[data-v-197fbf56] { font-size: 2.1rem; font-weight: 700; color: #60a5fa; margin-bottom: 18px; text-shadow: 0 0 15px rgba(96, 165, 250, 0.5); letter-spacing: -0.3px; } .description[data-v-197fbf56] { color: #93c5fd; font-size: 0.95rem; margin: 0 0 30px 0; line-height: 1.6; font-weight: 400; opacity: 0.9; } .login-form[data-v-197fbf56] { width: 100%; } .form-group[data-v-197fbf56] { margin-bottom: 22px; text-align: left; } .form-group uni-label[data-v-197fbf56] { display: block; margin-bottom: 10px; font-weight: 500; color: #93c5fd; font-size: 14px; } .form-group uni-input[data-v-197fbf56] { border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 12px; width: 100%; height: 30px; padding-left: 8px; } .form-group uni-input .uni-input-input[data-v-197fbf56] { width: 100%; padding: 15px 20px; border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 12px; font-size: 15px; transition: all 0.3s ease; background: rgba(15, 23, 42, 0.8); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05); color: #e2e8f0; } /* 修复输入框无法选中的问题 */ .form-group uni-input .uni-input-input[data-v-197fbf56] { pointer-events: auto !important; user-select: auto !important; -webkit-user-select: auto !important; -moz-user-select: auto !important; -ms-user-select: auto !important; } .form-group uni-input[data-v-197fbf56]:focus { outline: none; border-color: #3b82f6; background: rgba(15, 23, 42, 0.9); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), inset 0 2px 10px rgba(0, 0, 0, 0.4); } .form-group uni-input[data-v-197fbf56]::-webkit-input-placeholder { color: #64748b; } .form-group uni-input[data-v-197fbf56]::placeholder { color: #64748b; } .form-group uni-input.error[data-v-197fbf56] { border-color: #ef4444; background: rgba(239, 68, 68, 0.05); } .error-message[data-v-197fbf56] { color: #fca5a5; font-size: 13px; margin-top: 8px; font-weight: 500; } .password-input[data-v-197fbf56] { position: relative; } .toggle-password[data-v-197fbf56] { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: transparent; color: #93c5fd; cursor: pointer; font-size: 15px; transition: all 0.2s ease; z-index: 2; } /* .toggle-password:hover { color: #60a5fa; border-color: #3b82f6; background: rgba(30, 41, 59, 0.9); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); } */ .toggle-password span[data-v-197fbf56] { font-size: 16px; display: inline-block; vertical-align: middle; } .form-options[data-v-197fbf56] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; font-size: 14px; } .remember-me[data-v-197fbf56] { display: flex; align-items: center; gap: 10px; color: #93c5fd; cursor: pointer; font-weight: 500; } .custom-checkbox[data-v-197fbf56] { width: 18px; height: 18px; border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 4px; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .custom-checkbox.checked[data-v-197fbf56] { /* background: #3b82f6; */ border-color: #3b82f6; } .custom-checkbox.checked i[data-v-197fbf56] { color: white; font-size: 12px; } /* 对✓字符加粗效果有限 */ /* .custom-checkbox span { font-size: 12px; font-weight: bold; line-height: 1; } */ /* checkbox样式 */ /* .remember-me uni-checkbox { width: 18px; height: 18px; margin: 0; padding: 0; background: transparent; border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 4px; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; cursor: pointer; transition: all 0.2s ease; } .remember-me uni-checkbox:checked { background: #3b82f6; border-color: #3b82f6; } .remember-me uni-checkbox:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 12px; font-weight: bold; } .remember-me uni-checkbox:focus { outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); } */ .forgot-password[data-v-197fbf56] { color: #60a5fa; text-decoration: none; font-weight: 500; transition: all 0.2s ease; } .forgot-password[data-v-197fbf56]:hover { color: #3b82f6; text-decoration: underline; } .login-btn[data-v-197fbf56] { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; border: none; width: 100%; padding: 18px; border-radius: 14px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: 0.5px; position: relative; overflow: hidden; } .login-btn span[data-v-197fbf56] { font-size: 16px; display: inline-block; vertical-align: middle; } .login-btn:disabled span[data-v-197fbf56] { animation: spin-197fbf56 1s linear infinite; } @keyframes spin-197fbf56 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .login-btn[data-v-197fbf56]::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s; } .login-btn[data-v-197fbf56]:hover:not(:disabled)::before { left: 100%; } .login-btn[data-v-197fbf56]:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(59, 130, 246, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2); background: linear-gradient(135deg, #60a5fa, #2563eb); } .login-btn[data-v-197fbf56]:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1); } .login-btn[data-v-197fbf56]:disabled { opacity: 0.7; cursor: not-allowed; transform: none !important; } .login-error[data-v-197fbf56] { margin-top: 18px; padding: 14px; background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05)); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 12px; color: #fca5a5; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 500; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1); } .login-error span[data-v-197fbf56] { font-size: 16px; } .redirect-section[data-v-197fbf56] { margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(59, 130, 246, 0.2); animation: fadeIn-197fbf56 0.5s ease; } @keyframes fadeIn-197fbf56 { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .success-message[data-v-197fbf56] { color: #4ade80; font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; text-shadow: 0 0 10px rgba(74, 222, 128, 0.3); } .success-message span[data-v-197fbf56] { font-size: 16px; } .url-display[data-v-197fbf56] { background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.8)); padding: 15px; border-radius: 12px; margin-bottom: 18px; border: 1px solid rgba(59, 130, 246, 0.3); display: flex; align-items: center; gap: 12px; box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3); } .url-display uni-input[data-v-197fbf56] { flex: 1; border: none; background: transparent; font-size: 14px; color: #60a5fa; outline: none; font-family: 'Monaco', 'Consolas', monospace; font-weight: 500; pointer-events: auto !important; -webkit-user-select: auto !important; user-select: auto !important; } .copy-btn[data-v-197fbf56] { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 8px; padding: 9px 14px; color: #93c5fd; cursor: pointer; transition: all 0.2s ease; font-size: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; } .copy-btn span[data-v-197fbf56] { font-size: 16px; } .copy-btn[data-v-197fbf56]:hover { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border-color: #3b82f6; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); } .access-btn[data-v-197fbf56] { background: linear-gradient(135deg, #0ea5e9, #0369a1); color: white; border: none; width: 100%; padding: 16px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(14, 165, 233, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: 0.5px; } .access-btn span[data-v-197fbf56] { font-size: 16px; } .access-btn[data-v-197fbf56]:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(14, 165, 233, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2); background: linear-gradient(135deg, #38bdf8, #0284c7); } .access-btn[data-v-197fbf56]:active { transform: translateY(0); box-shadow: 0 4px 15px rgba(14, 165, 233, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1); } @media (max-width: 600px) { .container[data-v-197fbf56] { padding: 35px 25px; } h1[data-v-197fbf56] { font-size: 1.9rem; } .form-options[data-v-197fbf56] { flex-direction: column; align-items: flex-start; gap: 15px; } .logo[data-v-197fbf56] { width: 95px; height: 95px; } .form-group uni-input uni-input[data-v-197fbf56] { padding: 14px 16px; } }