.login-container[data-v-461d1d79] { padding: 3.75rem 1.5625rem 2.5rem 1.5625rem; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background: linear-gradient(160deg, #f0f2ff 0%, #f5f3f8 30%, #faf9fe 60%, #f5f4ff 100%); } .login-card[data-v-461d1d79] { position: relative; flex: 1; width: 100%; max-width: 20rem; padding: 1.5625rem 1.25rem; box-sizing: border-box; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 1.25rem; box-shadow: 0 0.5rem 1.5rem rgba(100, 100, 180, 0.1); border: 0.03125rem solid rgba(170, 170, 255, 0.15); } .conner[data-v-461d1d79] { position: absolute; width: 1.25rem; height: 1.25rem; } .conner-tl[data-v-461d1d79] { top: 0; left: 0; border-top: 2px solid #aaaaff; border-left: 2px solid #aaaaff; } .conner-tr[data-v-461d1d79] { top: 0; right: 0; border-top: 2px solid #aaaaff; border-right: 2px solid #aaaaff; } .conner-bl[data-v-461d1d79] { bottom: 0; left: 0; border-bottom: 2px solid #aaaaff; border-left: 2px solid #aaaaff; } .conner-br[data-v-461d1d79] { bottom: 0; right: 0; border-bottom: 2px solid #aaaaff; border-right: 2px solid #aaaaff; } .login-header[data-v-461d1d79] { display: flex; justify-content: center; align-items: center; flex-direction: column; } .login-header-logo[data-v-461d1d79] { display: flex; justify-content: center; align-items: center; } .login-header-logo uni-text[data-v-461d1d79] { margin-left: 0.375rem; font-size: 1.75rem; font-weight: 800; color: #6c63ff; letter-spacing: 0.0625rem; } .icon-wrapper[data-v-461d1d79] { width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 238, 255, 0.8)); display: flex; align-items: center; justify-content: center; animation: glow-461d1d79 2.5s ease-in-out infinite; box-shadow: 0 0.125rem 0.5rem rgba(108, 99, 255, 0.12); } @keyframes glow-461d1d79 { 0%, 100% { box-shadow: 0 0.125rem 0.5rem rgba(108, 99, 255, 0.12); } 50% { box-shadow: 0 0.125rem 0.75rem rgba(108, 99, 255, 0.25), 0 0 1.5625rem rgba(108, 99, 255, 0.12); } } .icon-wrapper .danao-style[data-v-461d1d79] { font-size: 2rem; color: #6c63ff; } .sub-title[data-v-461d1d79] { margin-top: 0.5rem; font-size: 1rem; font-weight: 500; color: #888; letter-spacing: 0.03125rem; } .form-wrapper[data-v-461d1d79] { margin-top: 1.5625rem; width: 100%; max-width: 15.625rem; padding: 1.875rem 1.125rem 1.125rem; background: rgba(170, 170, 255, 0.04); border-radius: 0.875rem; border: 0.03125rem solid rgba(170, 170, 255, 0.1); display: flex; flex-direction: column; } .form-item[data-v-461d1d79] { margin-top: 0.625rem; } .form-label[data-v-461d1d79] { font-size: 0.8125rem; font-weight: 500; color: #555; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.25rem; } .form-item .form-input[data-v-461d1d79] { width: 100%; height: 2.75rem; padding: 0 0.75rem; box-sizing: border-box; border-radius: 0.75rem; border: 0.0625rem solid #e8e8f0; background: rgba(255, 255, 255, 0.8); font-size: 0.875rem; color: #333; transition: all 0.25s ease; } .form-item .form-input[data-v-461d1d79]::-webkit-input-placeholder { color: #c0c0d0; } .form-item .form-input[data-v-461d1d79]::placeholder { color: #c0c0d0; } .form-item .focused[data-v-461d1d79] { border-color: #6c63ff; background: #ffffff; box-shadow: 0 0 0 0.1875rem rgba(108, 99, 255, 0.06); } .form-item .error[data-v-461d1d79] { border-color: #ff4d4f; box-shadow: 0 0 0 0.1875rem rgba(255, 77, 79, 0.06); } .error-info[data-v-461d1d79] { font-size: 0.6875rem; color: #ff4d4f; margin-top: 0.25rem; padding-left: 0.25rem; } .form-option[data-v-461d1d79] { margin-top: 0.625rem; display: flex; justify-content: space-between; align-items: center; } .form-option .checkbox-wrapper[data-v-461d1d79] { display: flex; justify-content: start; align-items: center; } .form-option .checkbox-wrapper .checkbox[data-v-461d1d79] { width: 1.125rem; height: 1.125rem; border: 0.0625rem solid #d4d4e0; border-radius: 0.25rem; display: flex; justify-content: center; align-items: center; transition: all 0.2s ease; background: #fff; } .form-option .checkbox-wrapper .checkbox uni-text[data-v-461d1d79] { color: #ffffff; font-size: 0.6875rem; } .form-option .checkbox-wrapper .checked[data-v-461d1d79] { background: linear-gradient(135deg, #6c63ff, #4a45d1); border-color: #6c63ff; } .form-option .checkbox-wrapper .checkbox-text[data-v-461d1d79] { margin-left: 0.3125rem; font-size: 0.8125rem; color: #666; } .form-option .forget-pwd[data-v-461d1d79] { font-size: 0.8125rem; color: #6c63ff; font-weight: 500; } [data-v-461d1d79] .login-btn { margin-top: 1.125rem; width: 100%; max-width: 15.625rem; height: 3rem; border-radius: 1.5rem; background: linear-gradient(135deg, #6c63ff, #4a45d1); color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: 0.0625rem; box-shadow: 0 0.25rem 0.75rem rgba(108, 99, 255, 0.3); transition: all 0.2s ease; border: none; } [data-v-461d1d79] .login-btn:active { transform: scale(0.97); box-shadow: 0 0.125rem 0.375rem rgba(108, 99, 255, 0.2); } [data-v-461d1d79] .login-btn[disabled] { opacity: 0.7; background: linear-gradient(135deg, #a8a4f0, #8a86d8); }