.personal-container { padding: 20rpx; } .form-title { font-size: 36rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx; } .form-container { background-color: #fff; border-radius: 10rpx; padding: 20rpx; } .section-title { font-size: 32rpx; font-weight: bold; margin: 30rpx 0 20rpx 10rpx; color: #333; border-left: 4rpx solid #007AFF; padding-left: 15rpx; } .form-row { display: flex; flex-direction: row; margin-bottom: 20rpx; flex-wrap: wrap; } .form-item { flex: 1; min-width: 300rpx; margin: 10rpx; border-bottom: 1px solid #eee; padding-bottom: 10rpx; } .label { font-size: 28rpx; color: #333; margin-right: 10rpx; display: block; margin-bottom: 10rpx; } input { font-size: 28rpx; height: 60rpx; } .picker-text { font-size: 28rpx; height: 60rpx; line-height: 60rpx; color: #666; } .submit-btn { margin-top: 40rpx; background-color: #007AFF; color: #fff; } .family-members-list { margin-top: 20rpx; } .family-member-item { background-color: #f8f8f8; border-radius: 8rpx; padding: 20rpx; margin-bottom: 20rpx; } .family-member-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15rpx; border-bottom: 1px solid #eee; padding-bottom: 10rpx; } .family-member-title { font-size: 30rpx; font-weight: bold; color: #333; } .family-member-actions { display: flex; gap: 20rpx; } .family-member-edit { font-size: 26rpx; color: #1890ff; } .family-member-delete { font-size: 26rpx; color: #ff4d4f; } .form-subtitle { font-size: 28rpx; font-weight: bold; margin-bottom: 20rpx; display: flex; justify-content: space-between; align-items: center; } .cancel-edit { font-size: 26rpx; color: #999; font-weight: normal; } .family-member-content { padding: 10rpx 0; } .family-member-row { display: flex; margin-bottom: 10rpx; } .family-member-label { font-size: 26rpx; color: #666; width: 200rpx; } .family-member-value { font-size: 26rpx; color: #333; flex: 1; } .family-member-form { background-color: #fff; border-radius: 8rpx; padding: 20rpx; margin-top: 20rpx; } .form-row button-row { display: flex; justify-content: center; margin-top: 20rpx; } .form-item button-container { display: flex; flex-direction: column; align-items: center; } .circle-btn { width: 40rpx; height: 40rpx; border-radius: 50%; background-color: #007AFF; display: flex; justify-content: center; align-items: center; margin-bottom: 10rpx; } .btn-icon { font-size: 32rpx; color: #fff; } .btn-text { font-size: 28rpx; color: #333; } /* 添加圆形按钮相关样式 */ .button-row { justify-content: center; margin-top: 30rpx; } .button-container { display: flex; flex-direction: column; align-items: center; border-bottom: none; min-width: auto; } .circle-btn { width: 100rpx; height: 100rpx; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; background-color: #52c41a; box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1); margin: 0; } .btn-icon { font-size: 50rpx; color: #fff; line-height: 1; } .btn-text { font-size: 24rpx; color: #666; margin-top: 10rpx; } /* 编辑状态下的按钮颜色 */ .circle-btn.editing { background-color: #1890ff; } /* 移除原来的添加按钮样式 */ .add-member-btn { display: none; } /* 应聘来源样式 */ .source-container { background-color: #fff; border-radius: 10rpx; padding: 20rpx; margin-bottom: 30rpx; } .source-row { display: flex; margin-bottom: 20rpx; align-items: flex-start; } .source-label { width: 120rpx; font-size: 28rpx; color: #333; padding-top: 6rpx; } .source-options { flex: 1; display: flex; flex-wrap: wrap; } .source-option { display: flex; align-items: center; margin-right: 30rpx; margin-bottom: 15rpx; } .source-option text { font-size: 28rpx; margin-left: 8rpx; } .other-option { flex-basis: 100%; margin-top: 10rpx; } .other-option input { border-bottom: 1px solid #eee; width: 300rpx; margin-left: 10rpx; font-size: 28rpx; } /* 教育经历样式 */ .education-list { margin-top: 20rpx; } .education-item { background-color: #f8f8f8; border-radius: 8rpx; padding: 20rpx; margin-bottom: 20rpx; } .education-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15rpx; border-bottom: 1px solid #eee; padding-bottom: 10rpx; } .education-title { font-size: 30rpx; font-weight: bold; color: #333; } .education-actions { display: flex; gap: 20rpx; } .education-edit { font-size: 26rpx; color: #1890ff; } .education-delete { font-size: 26rpx; color: #ff4d4f; } .education-content { padding: 10rpx 0; } .education-row { display: flex; margin-bottom: 10rpx; } .education-label { font-size: 26rpx; color: #666; width: 150rpx; } .education-value { font-size: 26rpx; color: #333; flex: 1; } .education-form { background-color: #fff; border-radius: 8rpx; padding: 20rpx; margin-top: 20rpx; } .date-range { display: flex; align-items: center; justify-content: space-around; } .date-separator { margin: 0 10rpx; color: #666; } /* 专业技能和培训样式 */ .skills-container, .training-container { background-color: #fff; border-radius: 10rpx; padding: 20rpx; margin-bottom: 20rpx; } .skills-textarea, .training-textarea { width: 100%; height: 200rpx; font-size: 28rpx; line-height: 1.5; padding: 10rpx; box-sizing: border-box; border: 1px solid #eee; border-radius: 6rpx; } /* 工作经历样式 */ .work-list { margin-top: 20rpx; } .work-item { background-color: #f8f8f8; border-radius: 8rpx; padding: 20rpx; margin-bottom: 20rpx; } .work-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15rpx; border-bottom: 1px solid #eee; padding-bottom: 10rpx; } .work-title { font-size: 30rpx; font-weight: bold; color: #333; } .work-actions { display: flex; gap: 20rpx; } .work-edit { font-size: 26rpx; color: #1890ff; } .work-delete { font-size: 26rpx; color: #ff4d4f; } .work-content { padding: 10rpx 0; } .work-row { display: flex; margin-bottom: 10rpx; } .work-label { font-size: 26rpx; color: #666; width: 150rpx; } .work-value { font-size: 26rpx; color: #333; flex: 1; } .work-form { background-color: #fff; border-radius: 8rpx; padding: 20rpx; margin-top: 20rpx; } /* 步骤指示器样式 */ .steps-indicator { display: flex; justify-content: space-between; margin-bottom: 30rpx; padding: 20rpx; background-color: #fff; border-radius: 10rpx; overflow-x: auto; } .step-item { display: flex; flex-direction: column; align-items: center; position: relative; min-width: 120rpx; } .step-item:not(:last-child)::after { content: ''; position: absolute; top: 20rpx; right: -50%; width: 100%; height: 2rpx; background-color: #ddd; z-index: 1; } .step-item.active:not(:last-child)::after { background-color: #007AFF; } .step-number { width: 40rpx; height: 40rpx; border-radius: 50%; background-color: #ddd; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 24rpx; margin-bottom: 10rpx; position: relative; z-index: 2; } .step-item.active .step-number { background-color: #007AFF; } .step-item.current .step-number { background-color: #007AFF; box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.2); } .step-name { font-size: 22rpx; color: #999; text-align: center; } .step-item.active .step-name { color: #333; } .step-item.current .step-name { color: #007AFF; font-weight: bold; } /* 导航按钮样式 */ .nav-buttons { display: flex; justify-content: space-between; margin-top: 40rpx; padding: 0 20rpx; } .nav-btn { flex: 1; margin: 0 10rpx; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 40rpx; font-size: 28rpx; } .prev-btn { background-color: #f0f0f0; color: #666; } .next-btn { background-color: #007AFF; color: #fff; } .submit-btn { flex: 1; margin: 0 10rpx; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 40rpx; font-size: 28rpx; background-color: #52c41a; color: #fff; } /* 确认提交页样式 */ .confirm-container { background-color: #fff; border-radius: 10rpx; padding: 20rpx; margin-bottom: 30rpx; } .confirm-message { padding: 20rpx; background-color: #f6f6f6; border-radius: 8rpx; margin-bottom: 20rpx; } .info-summary { padding: 20rpx; } .summary-item { display: flex; margin-bottom: 15rpx; } .summary-label { width: 150rpx; font-size: 28rpx; color: #666; } .summary-value { flex: 1; font-size: 28rpx; color: #333; } .input-error { border-bottom: 1px solid #ff4d4f !important; } .error-message { color: #ff4d4f; font-size: 24rpx; margin-top: 6rpx; display: block; } /* 添加承诺书弹框样式 */ .promise-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: flex; justify-content: center; align-items: center; } .promise-content { width: 80%; max-width: 600rpx; background-color: #fff; border-radius: 12rpx; padding: 30rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1); } .promise-title { font-size: 34rpx; font-weight: bold; text-align: center; margin-bottom: 20rpx; color: #333; } .promise-text { height: 600rpx; margin-bottom: 20rpx; /* padding: 20rpx; */ background-color: #f8f8f8; border-radius: 8rpx; font-size: 28rpx; line-height: 1.6; color: #333; } .promise-checkbox { display: flex; align-items: center; margin-bottom: 30rpx; padding: 0 10rpx; } .promise-checkbox text { font-size: 28rpx; margin-left: 10rpx; color: #333; } .promise-buttons { display: flex; justify-content: center; } .promise-btn { width: 200rpx; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 40rpx; font-size: 28rpx; } .confirm-btn { background-color: #007AFF; color: #fff; } .confirm-btn[disabled] { background-color: #cccccc; color: #ffffff; } /* Loading indicator styles */ .loading-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; } .loading-spinner { width: 60rpx; height: 60rpx; border: 6rpx solid #f3f3f3; border-top: 6rpx solid #007AFF; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20rpx; } .loading-text { font-size: 28rpx; color: #666; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }