*[data-v-68542e3f] { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; } body[data-v-68542e3f] { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(135deg, #f8fcff 0%, #f0f8ff 100%); } .main-view[data-v-68542e3f] { z-index: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; position: relative; overflow: hidden; background: linear-gradient(135deg, #f8fcff 0%, #f0f8ff 100%); color: #333; } .container[data-v-68542e3f] { display: flex; flex-direction: column; width: 100%; max-width: 500px; background: rgba(255, 255, 255, 0.95); border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(33, 150, 243, 0.08), 0 5px 15px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.9); text-align: center; align-items: center; justify-content: center; padding: 45px 35px; margin: 10px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .logo[data-v-68542e3f] { width: 110px; height: 110px; margin: 0 auto 30px; background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(100, 181, 246, 0.15)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; box-shadow: 0 8px 25px rgba(33, 150, 243, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 0 15px rgba(255, 255, 255, 0.8); overflow: hidden; padding: 12px; position: relative; } .logo[data-v-68542e3f]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)); z-index: 1; } .logo uni-image[data-v-68542e3f] { max-width: 100%; max-height: 100%; object-fit: contain; display: block; position: relative; z-index: 2; filter: drop-shadow(0 2px 5px rgba(33, 150, 243, 0.3)); } h1[data-v-68542e3f] { font-size: 2.1rem; font-weight: 700; color: #1565c0; margin-bottom: 18px; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); letter-spacing: -0.3px; } .description[data-v-68542e3f] { color: #5d7b9f; font-size: 0.95rem; margin: 0 0 30px 0; line-height: 1.6; font-weight: 400; } .login-form[data-v-68542e3f] { width: 100%; } .form-group[data-v-68542e3f] { margin-bottom: 22px; text-align: left; } .form-group uni-label[data-v-68542e3f] { display: block; margin-bottom: 10px; font-weight: 500; color: #2c5282; font-size: 14px; } .form-group uni-input[data-v-68542e3f] { 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-68542e3f] { width: 100%; padding: 15px 18px; border: 1px solid #e1f5fe; border-radius: 12px; font-size: 15px; transition: all 0.3s ease; background: rgba(255, 255, 255, 0.9); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.8); color: #2c3e50 !important; } .form-group uni-input .uni-input-input[data-v-68542e3f]:focus { outline: none; border-color: #4fc3f7; background: white; box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.02); } .form-group uni-input .uni-input-input[data-v-68542e3f]::-webkit-input-placeholder { color: #90a4ae !important; } .form-group uni-input .uni-input-input[data-v-68542e3f]::placeholder { color: #90a4ae !important; } .form-group uni-input .uni-input-input.error[data-v-68542e3f] { border-color: #ff7043; background: rgba(255, 112, 67, 0.03); } .form-group uni-input[data-v-68542e3f]:focus { outline: none; border-color: #4fc3f7; background: white; box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.02); } .form-group uni-input[data-v-68542e3f]::-webkit-input-placeholder { color: #90a4ae !important; } .form-group uni-input[data-v-68542e3f]::placeholder { color: #90a4ae !important; } .form-group uni-input.error[data-v-68542e3f] { border-color: #ff7043; background: rgba(255, 112, 67, 0.03); } .error-message[data-v-68542e3f] { color: #ff7043; font-size: 13px; margin-top: 8px; font-weight: 500; } .password-input[data-v-68542e3f] { position: relative; } .password-input uni-button[data-v-68542e3f]::after, .password-input uni-button[data-v-68542e3f]::before { border: none } .toggle-password[data-v-68542e3f] { 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: #2196f3; border-color: #4fc3f7; background: white; box-shadow: 0 2px 5px rgba(33, 150, 243, 0.15); } */ .toggle-password span[data-v-68542e3f] { font-size: 16px; display: inline-block; vertical-align: middle; } .form-options[data-v-68542e3f] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; font-size: 14px; } .remember-me[data-v-68542e3f] { display: flex; align-items: center; gap: 10px; color: #5d7b9f; cursor: pointer; font-weight: 500; } .custom-checkbox[data-v-68542e3f] { 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-68542e3f] { /* background: #3b82f6; */ border-color: #3b82f6; } .custom-checkbox.checked i[data-v-68542e3f] { color: white; font-size: 12px; } /* uni-checkbox样式 */ .remember-me uni-checkbox[data-v-68542e3f] { 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[data-v-68542e3f]:checked { background: #3b82f6; border-color: #3b82f6; } .remember-me uni-checkbox[data-v-68542e3f]: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[data-v-68542e3f]:focus { outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); } .forgot-password[data-v-68542e3f] { color: #29b6f6; text-decoration: none; font-weight: 500; transition: all 0.2s ease; } .forgot-password[data-v-68542e3f]:hover { color: #0288d1; text-decoration: underline; } .login-btn[data-v-68542e3f] { background: linear-gradient(135deg, #29b6f6, #0288d1); 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 6px 20px rgba(41, 182, 246, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: 0.5px; position: relative; overflow: hidden; } .login-btn[data-v-68542e3f]::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .login-btn[data-v-68542e3f]:hover:not(:disabled)::before { left: 100%; } .login-btn[data-v-68542e3f]:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(41, 182, 246, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3); background: linear-gradient(135deg, #4fc3f7, #039be5); } .login-btn[data-v-68542e3f]:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 15px rgba(41, 182, 246, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2); } .login-btn[data-v-68542e3f]:disabled { opacity: 0.7; cursor: not-allowed; transform: none !important; } .login-error[data-v-68542e3f] { margin-top: 18px; padding: 14px; background: linear-gradient(135deg, rgba(255, 112, 67, 0.08), rgba(255, 112, 67, 0.05)); border: 1px solid #ffccbc; border-radius: 12px; color: #e64a19; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 500; box-shadow: 0 2px 8px rgba(255, 112, 67, 0.08); } .redirect-section[data-v-68542e3f] { margin-top: 30px; padding-top: 30px; border-top: 1px solid #e1f5fe; animation: fadeIn-68542e3f 0.5s ease; } @keyframes fadeIn-68542e3f { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .success-message[data-v-68542e3f] { color: #00c853; font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; } .url-display[data-v-68542e3f] { background: linear-gradient(135deg, #f8fdff, #e3f2fd); padding: 15px; border-radius: 12px; margin-bottom: 18px; border: 1px solid #bbdefb; display: flex; align-items: center; gap: 12px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); } .url-display uni-input[data-v-68542e3f] { flex: 1; border: none; background: transparent; font-size: 14px; color: #1565c0; outline: none; font-family: 'Monaco', 'Consolas', monospace; font-weight: 500; } .copy-btn[data-v-68542e3f] { background: white; border: 1px solid #bbdefb; border-radius: 8px; padding: 9px 14px; color: #29b6f6; cursor: pointer; transition: all 0.2s ease; font-size: 14px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } .copy-btn[data-v-68542e3f]:hover { background: #e3f2fd; color: #0288d1; border-color: #90caf9; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); } .access-btn[data-v-68542e3f] { background: linear-gradient(135deg, #26c6da, #0097a7); 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 6px 20px rgba(38, 198, 218, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: 0.5px; } .access-btn[data-v-68542e3f]:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(38, 198, 218, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.3); background: linear-gradient(135deg, #4dd0e1, #00acc1); } .access-btn[data-v-68542e3f]:active { transform: translateY(0); box-shadow: 0 4px 15px rgba(38, 198, 218, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.2); } @media (max-width: 600px) { .container[data-v-68542e3f] { padding: 35px 25px; } h1[data-v-68542e3f] { font-size: 1.9rem; } .form-options[data-v-68542e3f] { flex-direction: column; align-items: flex-start; gap: 15px; } .logo[data-v-68542e3f] { width: 95px; height: 95px; } }