/* 陪聊师申请页面样式 - 根据 Figma 设计重构 */ .page-container { min-height: 100vh; background: #FCE7F3; } /* 顶部导航栏 */ .nav-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #FCE7F3; box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1); } .nav-content { height: 96rpx; display: flex; align-items: center; justify-content: space-between; padding: 0 32rpx; } .nav-back { display: flex; align-items: center; gap: 4rpx; padding: 16rpx; margin-left: -16rpx; } .back-icon { width: 56rpx; height: 56rpx; } .back-text { font-size: 34rpx; font-weight: 700; color: #101828; } .nav-title { font-size: 40rpx; font-weight: 700; color: #101828; } .nav-right { width: 160rpx; display: flex; justify-content: flex-end; align-items: center; gap: 24rpx; } .more-icon { width: 48rpx; height: 48rpx; } /* 内容滚动区域 */ .content-scroll { min-height: 100vh; padding-bottom: 200rpx; } /* 状态卡片 */ .status-card { margin: 32rpx; background: #fff; border-radius: 60rpx; padding: 80rpx 48rpx; text-align: center; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); } .status-icon { width: 200rpx; height: 200rpx; margin: 0 auto 40rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .status-icon.pending, .status-icon.reviewing { background: #FFF3E0; } .status-icon.approved { background: #E8F5E9; } .status-icon.rejected { background: #FFEBEE; } .status-icon image { width: 100rpx; height: 100rpx; } .status-title { display: block; font-size: 44rpx; font-weight: 700; color: #1F2937; margin-bottom: 20rpx; } .status-desc { display: block; font-size: 30rpx; color: #9CA3AF; margin-bottom: 48rpx; line-height: 1.5; } .btn-primary { background: linear-gradient(135deg, #b06ab3 0%, #d4a5d6 100%); color: #fff; font-size: 34rpx; font-weight: 700; padding: 28rpx 80rpx; border-radius: 60rpx; border: none; } .btn-secondary { background: #F3F4F6; color: #4B5563; font-size: 34rpx; font-weight: 700; padding: 28rpx 80rpx; border-radius: 60rpx; border: none; } /* 申请表单 */ .apply-form { margin: 16rpx 0 0; background: #fff; border-radius: 60rpx 60rpx 0 0; padding: 64rpx 48rpx; min-height: calc(100vh - 200rpx); } /* 表单头部 */ .form-header { text-align: center; margin-bottom: 64rpx; } .form-title { display: block; font-size: 44rpx; font-weight: 700; color: #1F2937; margin-bottom: 16rpx; } .form-subtitle { display: block; font-size: 28rpx; color: #9CA3AF; } /* 表单区块 */ .form-section { margin-bottom: 64rpx; } .section-header { display: flex; align-items: center; margin-bottom: 32rpx; } .section-title { font-size: 34rpx; font-weight: 700; color: #1F2937; } .required { color: #F87171; margin-left: 4rpx; font-size: 34rpx; } /* 头像上传 */ .avatar-upload-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 24rpx; } .avatar-circle { width: 224rpx; height: 224rpx; border-radius: 50%; background: #F3F4F6; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .avatar-image { width: 100%; height: 100%; } .upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8rpx; } .camera-icon { width: 64rpx; height: 64rpx; opacity: 0.6; } .upload-text { font-size: 24rpx; color: #9CA3AF; } .form-tip { display: block; text-align: center; font-size: 24rpx; color: #9CA3AF; } /* 表单项 */ .form-item { margin-bottom: 40rpx; } .item-label-row { display: flex; align-items: center; margin-bottom: 16rpx; } .item-label { font-size: 30rpx; color: #374151; } .input-wrapper { background: #F9FAFB; border-radius: 28rpx; padding: 0 32rpx; height: 100rpx; display: flex; align-items: center; } .item-input { width: 100%; height: 100%; font-size: 30rpx; color: #1F2937; } .placeholder { color: #9CA3AF; } /* 性别选择 */ .gender-options { display: flex; gap: 32rpx; } .gender-btn { flex: 1; height: 100rpx; background: #F9FAFB; border-radius: 28rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; color: #4B5563; transition: all 0.3s; } .gender-btn.active { background: linear-gradient(135deg, #b06ab3 0%, #d4a5d6 100%); color: #fff; } /* 服务类型 */ .service-types { display: flex; gap: 24rpx; } .service-btn { flex: 1; height: 88rpx; background: #F9FAFB; border-radius: 28rpx; display: flex; align-items: center; justify-content: center; font-size: 26rpx; color: #4B5563; transition: all 0.3s; } .service-btn.active { background: #FCE7F3; color: #b06ab3; border: 2rpx solid #b06ab3; } /* 个人介绍 */ .textarea-wrapper { background: #F9FAFB; border-radius: 28rpx; padding: 32rpx; } .intro-textarea { width: 100%; height: 320rpx; font-size: 30rpx; color: #1F2937; line-height: 1.5; } .textarea-footer { display: flex; justify-content: flex-end; margin-top: 16rpx; } .char-count { font-size: 24rpx; color: #9CA3AF; } /* 协议 */ .agreement-row { display: flex; align-items: center; gap: 16rpx; margin: 48rpx 0; } .checkbox { width: 40rpx; height: 40rpx; border: 2rpx solid #D1D5DC; border-radius: 8rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .checkbox.checked { background: #b06ab3; border-color: #b06ab3; } .check-icon { width: 24rpx; height: 24rpx; } .agreement-text { display: flex; flex-wrap: wrap; align-items: center; } .normal-text { font-size: 26rpx; color: #4B5563; } .link-text { font-size: 26rpx; color: #BE185D; } /* 提交按钮 */ .submit-btn { width: 100%; height: 108rpx; background: linear-gradient(135deg, #b06ab3 0%, #d4a5d6 100%); color: #fff; font-size: 36rpx; font-weight: 700; border-radius: 60rpx; border: none; display: flex; align-items: center; justify-content: center; } .submit-btn.disabled { background: #F3F4F6; color: #D1D5DB; } /* 底部占位 */ .bottom-placeholder { height: 120rpx; } /* 浮动按钮 */ .float-btn { position: fixed; bottom: 140rpx; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.9); border: 2rpx solid rgba(255, 107, 107, 0.2); border-radius: 100rpx; padding: 24rpx 50rpx; display: flex; align-items: center; gap: 16rpx; box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1), 0 20rpx 30rpx rgba(0, 0, 0, 0.1); z-index: 100; } .float-btn-text { font-size: 28rpx; font-weight: 700; color: #FF6B6B; } .float-btn-arrow { width: 32rpx; height: 32rpx; }