*[data-v-1cf27b2a] { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; } body[data-v-1cf27b2a] { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(135deg, #0f1419 0, #1a1f2e 100%); } .main-view[data-v-1cf27b2a] { z-index: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; position: relative; overflow: hidden; background: radial-gradient(ellipse at center, #0f1419 0%, #0a0e1a 70%); color: #e8f4f8; } .container[data-v-1cf27b2a] { display: flex; flex-direction: column; width: auto; height: 90vh; max-width: 500px; background: rgba(26, 31, 46, .8); border: 1px solid rgba(139, 195, 232, 0.2); border-radius: 16px; overflow: hidden; /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); */ box-shadow: 0 0 30px rgba(139, 195, 232, 0.5); text-align: center; /* align-items: center; */ justify-content: center; padding: 40px 30px; margin: 10px; box-sizing: border-box; } .logo[data-v-1cf27b2a] { z-index: 1; width: 100px; height: 100px; margin: 0 auto 25px; background: rgba(139, 195, 232, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 40px; box-shadow: 0 0 20px rgba(139, 195, 232, 0.3); overflow: hidden; /* 确保图片不会超出圆形容器 */ padding: 10px; /* 增加内边距,让图片与边缘有间距 */ } .logo uni-image[data-v-1cf27b2a] { z-index: 2; max-width: 100%; /* 图片最大宽度不超过容器 */ max-height: 100%; /* 图片最大高度不超过容器 */ object-fit: contain; /* 保持图片比例,完整显示在容器内 */ display: block; /* 去除图片底部可能出现的空白 */ /* border-radius: 50%; box-shadow: 0 0 20px rgba(139, 195, 232, 0.1); */ } /* h1 { color: #2c3e50; margin-bottom: 15px; font-size: 24px; background: linear-gradient(135deg, #8bc3e8, #6ba3d6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 5px rgba(74, 139, 194, 0.2)); } */ h1[data-v-1cf27b2a] { font-size: 2rem; font-weight: 700; letter-spacing: 2px; background: linear-gradient(135deg, #8bc3e8, #6ba3d6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; /* margin-bottom: 10px; */ filter: drop-shadow(0 0 5px rgba(74, 139, 194, 0.2)); text-shadow: 0 0 10px rgba(139, 195, 232, 0.3); } .description[data-v-1cf27b2a] { color: #9db4c0; font-size: 0.9rem; margin: 20px; } .url-display[data-v-1cf27b2a] { background: #f8f9fa; padding: 15px; border-radius: 12px; margin-bottom: 25px; border: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #5a6570; } .access-btn[data-v-1cf27b2a] { background: linear-gradient(135deg, #8bc3e8, #6ba3d6); color: white; border: none; width: 100%; padding: 16px 40px; border-radius: 20px; font-size: 18px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); */ box-shadow: 0 0 20px rgba(139, 195, 232, 0.3); display: inline-block; margin-bottom: 25px; } .access-btn[data-v-1cf27b2a]:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .access-btn[data-v-1cf27b2a]:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); } .access-btn[data-v-1cf27b2a]:disabled { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } .loading-container[data-v-1cf27b2a] { margin: 20px 0; display: none; } .spinner[data-v-1cf27b2a] { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; animation: spin-1cf27b2a 1s linear infinite; margin: 0 auto 15px; } @keyframes spin-1cf27b2a { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-text[data-v-1cf27b2a] { font-size: 16px; color: #7f8c8d; } .alternative[data-v-1cf27b2a] { margin-top: 25px; padding-top: 20px; border-top: 1px solid #eaeaea; font-size: 14px; color: #7f8c8d; } .alternative a[data-v-1cf27b2a] { color: #3498db; text-decoration: none; } .alternative a[data-v-1cf27b2a]:hover { text-decoration: underline; } @media (max-width: 600px) { .container[data-v-1cf27b2a] { padding: 30px 20px; } h1[data-v-1cf27b2a] { font-size: 22px; } .access-btn[data-v-1cf27b2a] { padding: 14px 30px; font-size: 16px; } }