/* pages/index/index.wxss - 个人版首页,样式与企业版一致 */ .container { min-height: 100vh; width: 100vw; overflow-x: hidden; overflow-y: auto; background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 50%, #ffffff 100%); position: relative; display: flex; flex-direction: column; box-sizing: border-box; /* 底栏留白由 .tabbar-pad + 全局 --tabbar-pad 统一控制 */ } /* 首页:中间拍摄图整体上移,减轻与「测试流程」挤压;底栏略加垫避免中间拍摄钮挡主按钮 */ .container.tabbar-pad { padding-bottom: calc(var(--tabbar-pad) + 32rpx) !important; } /* 背景装饰圆形(与企业版一致) */ .bg-decoration { position: absolute; width: 600rpx; height: 600rpx; border-radius: 50%; pointer-events: none; z-index: 0; } .bg-top-right { top: -200rpx; right: -200rpx; background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%); } .bg-bottom-left { bottom: 0; left: 0; background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%); } /* 自定义导航栏 */ .custom-navbar { position: fixed; top: 0; left: 0; right: 0; background: #ffffff; z-index: 10000; width: 100%; } .navbar-content { height: 88rpx; display: flex; align-items: center; justify-content: space-between; padding: 0 40rpx; position: relative; background: #ffffff; min-height: 88rpx; } .navbar-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 36rpx; font-weight: 700; color: #e63946; text-align: center; flex: 1; } .navbar-placeholder { width: 140rpx; flex-shrink: 0; } /* 与企业版切换按钮同款样式(红主色) */ .switch-enterprise-btn { display: flex; align-items: center; gap: 8rpx; padding: 12rpx 20rpx; background: rgba(230, 57, 70, 0.1); border-radius: 30rpx; border: 1rpx solid rgba(230, 57, 70, 0.2); flex-shrink: 0; z-index: 10; } .enterprise-icon { font-size: 28rpx; } .enterprise-text { font-size: 24rpx; color: #e63946; font-weight: 600; } .top-image-section { width: 100%; padding: 8rpx 40rpx 10rpx; flex-shrink: 0; box-sizing: border-box; position: relative; z-index: 1; margin-top: -20rpx; } .image-container { position: relative; width: 100%; transform: translateY(-26rpx); margin-bottom: -26rpx; } .image-wrapper { position: relative; width: 100%; padding-top: 100%; border-radius: 50%; overflow: hidden; background: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12); } .main-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85%; height: 85%; display: block; } .float-tag { position: absolute; padding: 12rpx 24rpx; border-radius: 30rpx; font-size: 24rpx; font-weight: 600; color: #e63946; background: rgba(255, 255, 255, 0.95); box-shadow: 0 4rpx 16rpx rgba(230, 57, 70, 0.2); white-space: nowrap; z-index: 10; } .tag-1 { top: 15%; right: 10rpx; } .tag-2 { bottom: 25%; left: 0; } .tag-3 { bottom: 25%; right: 0; } .process-section { padding: 8rpx 40rpx 20rpx; flex-shrink: 0; position: relative; z-index: 1; } .section-title { font-size: 32rpx; font-weight: 700; color: #e63946; text-align: center; margin-bottom: 25rpx; } .process-steps { display: flex; align-items: center; justify-content: space-between; padding: 0 10rpx; } .step-item { display: flex; flex-direction: column; align-items: center; flex: 1; } .step-circle { width: 70rpx; height: 70rpx; border-radius: 50%; background: #b8b9bc; display: flex; align-items: center; justify-content: center; font-size: 36rpx; font-weight: 700; color: #fff; margin-bottom: 12rpx; } .step-circle.active { background: #e63946; } .step-label { font-size: 20rpx; color: #666; margin-bottom: 4rpx; } .step-text { font-size: 24rpx; color: #333; font-weight: 600; } .step-line { width: 50rpx; height: 4rpx; background: #e0e0e0; margin: 0 6rpx 50rpx; } .start-button { margin: 16rpx 40rpx 0; background: linear-gradient(135deg, #e63946 0%, #ff6b9d 100%); border-radius: 50rpx; padding: 24rpx; text-align: center; box-shadow: 0 8rpx 30rpx rgba(230, 57, 70, 0.3); position: relative; z-index: 1; } .button-text { font-size: 30rpx; color: #fff; font-weight: 700; } .version-picker-mask { position: fixed; inset: 0; background: rgba(10, 15, 30, 0.44); z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 40rpx; box-sizing: border-box; } .version-picker-dialog { width: 100%; max-width: 620rpx; background: #ffffff; border-radius: 36rpx; padding: 30rpx 30rpx 30rpx; border: 1rpx solid rgba(99, 102, 241, 0.12); box-shadow: 0 30rpx 80rpx rgba(15, 23, 42, 0.22); } .version-picker-head { display: flex; align-items: center; justify-content: space-between; } .version-picker-badge { padding: 8rpx 20rpx; border-radius: 999rpx; background: linear-gradient(135deg, rgba(79, 70, 229, 0.12) 0%, rgba(124, 58, 237, 0.16) 100%); color: #4f46e5; font-size: 22rpx; font-weight: 700; } .version-picker-close { width: 52rpx; height: 52rpx; border-radius: 50%; background: #f1f5f9; color: #6b7280; display: flex; align-items: center; justify-content: center; font-size: 32rpx; line-height: 1; } .version-picker-title { text-align: center; font-size: 40rpx; font-weight: 700; color: #111827; margin-top: 18rpx; line-height: 1.25; } .version-picker-current { margin-top: 16rpx; text-align: center; font-size: 24rpx; color: #475569; background: #f8fafc; border-radius: 999rpx; padding: 10rpx 18rpx; } .version-picker-current-em { color: #4f46e5; font-weight: 700; } .version-picker-desc { margin-top: 14rpx; text-align: center; font-size: 23rpx; color: #6b7280; line-height: 1.55; } .version-picker-actions { margin-top: 24rpx; display: flex; flex-direction: column; gap: 14rpx; } .version-btn::after, .version-cancel-btn::after { border: none; } .version-btn, .version-cancel-btn { display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; line-height: 1.25; box-sizing: border-box; } .version-btn { height: 82rpx; width: 100%; border-radius: 999rpx; color: #fff; font-size: 30rpx; font-weight: 600; border: none; box-shadow: 0 10rpx 20rpx rgba(79, 70, 229, 0.2); } .version-btn-is-current { transform: translateY(-1rpx); box-shadow: 0 0 0 4rpx #ffffff, 0 0 0 6rpx rgba(79, 70, 229, 0.45), 0 12rpx 24rpx rgba(79, 70, 229, 0.24); } .version-btn-personal { background: linear-gradient(135deg, #ef4444 0%, #f97316 100%); } .version-btn-enterprise { background: linear-gradient(135deg, #2563eb 0%, #6366f1 100%); } .version-btn-gaokao { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); } .version-picker-foot { margin-top: 14rpx; } .version-cancel-btn { height: 76rpx; border-radius: 999rpx; background: #f3f4f6; color: #6b7280; font-size: 27rpx; font-weight: 600; border: 1rpx solid #e5e7eb; } .upload-button { margin: 0 40rpx 16rpx; border: 2rpx solid #8b5cf6; border-radius: 50rpx; padding: 18rpx; text-align: center; background: #fff; flex-shrink: 0; } .upload-text { font-size: 26rpx; color: #8b5cf6; font-weight: 600; } /* AI 生成内容标识横幅(监管合规,始终显示) */ .ai-disclosure-banner { display: flex; align-items: center; justify-content: center; gap: 12rpx; margin: 24rpx 40rpx 16rpx; padding: 16rpx 24rpx; background: linear-gradient(135deg, #f0f4ff 0%, #e8ecf8 100%); border: 1rpx solid #c7d2fe; border-radius: 12rpx; position: relative; z-index: 1; } .ai-disclosure-icon { width: 44rpx; height: 44rpx; border-radius: 8rpx; background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%); color: #fff; font-size: 20rpx; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ai-disclosure-text { font-size: 22rpx; color: #4338ca; line-height: 1.4; } /* 自定义 tab 由内层 .tab-bar fixed,避免与组件双重 fixed 导致错位 */ custom-tab-bar { display: block; height: 0; overflow: visible; }