.edit-container.data-v-47b8e7b0 { min-height: 100vh; background: #f5f5f5; } .loading-state.data-v-47b8e7b0 { display: flex; justify-content: center; align-items: center; height: 100vh; font-size: 36rpx; color: #999999; } .form-wrapper.data-v-47b8e7b0 { padding: 20rpx; padding-bottom: 280rpx; /* 为固定按钮留出空间 */ } .form-section.data-v-47b8e7b0 { background: #ffffff; border-radius: 12rpx; padding: 24rpx; margin-bottom: 20rpx; } .section-title.data-v-47b8e7b0 { font-size: 34rpx; font-weight: 600; color: #333333; margin-bottom: 20rpx; display: block; padding-bottom: 12rpx; border-bottom: 1rpx solid #e8e8e8; } /* 行布局 */ .form-row.data-v-47b8e7b0 { display: flex; align-items: center; margin-bottom: 20rpx; gap: 20rpx; } .form-row-single.data-v-47b8e7b0 { display: flex; align-items: center; margin-bottom: 20rpx; flex-wrap: wrap; } .form-col-left.data-v-47b8e7b0 { flex: 1; display: flex; align-items: center; } .form-col-right.data-v-47b8e7b0 { flex: 1; display: flex; align-items: center; } .form-col-large.data-v-47b8e7b0 { flex: 2; display: flex; align-items: center; } .form-col-small.data-v-47b8e7b0 { flex: 1; display: flex; align-items: center; } /* 标签样式 */ .form-label.data-v-47b8e7b0 { font-size: 28rpx; color: #666666; white-space: nowrap; margin-right: 8rpx; } .form-labels.data-v-47b8e7b0 { font-size: 32rpx; color: #222222; white-space: nowrap; margin-right: 8rpx; font-weight: 700; } .form-label-number.data-v-47b8e7b0 { font-size: 32rpx; color: #333333; font-weight: 600; margin-right: 4rpx; } .required.data-v-47b8e7b0 { color: #ff4d4f; margin-right: 4rpx; font-size: 32rpx; } .form-value.data-v-47b8e7b0 { font-size: 28rpx; color: #333333; } /* 行内输入框 */ .form-input-inline.data-v-47b8e7b0 { flex: 1; padding: 12rpx 16rpx; border: none; border-bottom: 1rpx solid #e8e8e8; font-size: 28rpx; color: #333333; background: transparent; } .form-input-inline.data-v-47b8e7b0:disabled { color: #999999; background: #f5f5f5; } .form-input-inline.data-v-47b8e7b0::-webkit-input-placeholder { color: #cccccc; font-size: 30rpx; } .form-input-inline.data-v-47b8e7b0::placeholder { color: #cccccc; font-size: 30rpx; } .form-unit.data-v-47b8e7b0 { font-size: 30rpx; color: #999999; margin-left: 8rpx; white-space: nowrap; } /* 性别选择 - 行内样式 */ .gender-inline.data-v-47b8e7b0 { display: flex; gap: 30rpx; margin-left: 10rpx; } .gender-radio.data-v-47b8e7b0 { display: flex; align-items: center; gap: 8rpx; font-size: 32rpx; color: #666666; } .gender-radio.active.data-v-47b8e7b0 { color: #386641; } .radio-icon.data-v-47b8e7b0 { width: 40rpx; height: 40rpx; border: 2rpx solid #d9d9d9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #ffffff; background: #ffffff; } .gender-radio.active .radio-icon.data-v-47b8e7b0 { background: #386641; border-color: #386641; } .form-tip.data-v-47b8e7b0 { font-size: 28rpx; color: #ff4d4f; margin-top: 8rpx; } /* 块级表单项 */ .form-item-block.data-v-47b8e7b0 { margin-bottom: 30rpx; } .form-label-block.data-v-47b8e7b0 { display: flex; align-items: center; margin-bottom: 16rpx; } /* 按钮网格布局 */ .button-grid.data-v-47b8e7b0 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 16rpx; } .button-grid-single.data-v-47b8e7b0 { display: grid; grid-template-columns: 1fr; } .button-grid-three.data-v-47b8e7b0 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .grid-button.data-v-47b8e7b0 { padding: 4rpx 20rpx; border: 2rpx solid #e8e8e8; border-radius: 0; text-align: center; font-size: 32rpx; color: #555555; background: #ffffff; transition: all 0.2s; min-height: 80rpx; display: flex; align-items: center; justify-content: center; margin-left: -2rpx; margin-bottom: 10rpx; position: relative; } .grid-button.data-v-47b8e7b0:first-child { margin-left: 0; border-top-left-radius: 8rpx; border-bottom-left-radius: 8rpx; } .grid-button.data-v-47b8e7b0:last-child { border-top-right-radius: 8rpx; border-bottom-right-radius: 8rpx; } .button-grid-three .grid-button.data-v-47b8e7b0:nth-child(3n+1) { border-top-left-radius: 8rpx; border-bottom-left-radius: 8rpx; margin-left: 0; } .button-grid-three .grid-button.data-v-47b8e7b0:nth-child(3n) { border-top-right-radius: 8rpx; border-bottom-right-radius: 8rpx; } .button-grid-three .grid-button.data-v-47b8e7b0:nth-child(3n+2) { border-radius: 0; } .grid-button.active.data-v-47b8e7b0 { border-color: #386641; background: #386641; color: #ffffff; font-weight: 500; z-index: 1; } /* 选中按钮右侧的白色分隔线 */ .grid-button.active.data-v-47b8e7b0::after { content: ''; position: absolute; right: -2rpx; top: 0; bottom: 0; width: 2rpx; background: #ffffff; z-index: 2; } /* 选中按钮左侧的白色分隔线 */ .grid-button.active.data-v-47b8e7b0::before { content: ''; position: absolute; left: -2rpx; top: 0; bottom: 0; width: 2rpx; background: #ffffff; z-index: 2; } /* 如果是第一个按钮被选中,不显示左侧白线 */ .grid-button.active.data-v-47b8e7b0:first-child::before, .button-grid-three .grid-button.active.data-v-47b8e7b0:nth-child(3n+1)::before { display: none; } /* 如果是最后一个按钮被选中,不显示右侧白线 */ .grid-button.active.data-v-47b8e7b0:last-child::after, .button-grid-three .grid-button.active.data-v-47b8e7b0:nth-child(3n)::after { display: none; } /* 全宽输入框 */ .form-input-full.data-v-47b8e7b0 { width: 100%; padding: 20rpx; border: none; border-bottom: 1rpx solid #e8e8e8; font-size: 32rpx; color: #333333; background: transparent; box-sizing: border-box; min-height: 80rpx; display: block; } .form-input-full.data-v-47b8e7b0::-webkit-input-placeholder { color: #cccccc; font-size: 30rpx; } .form-input-full.data-v-47b8e7b0::placeholder { color: #cccccc; font-size: 30rpx; } /* 全宽日期选择器 */ .date-input-full.data-v-47b8e7b0 { display: flex; align-items: center; padding: 20rpx; border: none; border-bottom: 1rpx solid #e8e8e8; background: transparent; min-height: 80rpx; box-sizing: border-box; } .date-icon-left.data-v-47b8e7b0 { font-size: 36rpx; color: #999999; margin-right: 12rpx; flex-shrink: 0; } .date-text.data-v-47b8e7b0 { flex: 1; font-size: 32rpx; color: #333333; word-break: break-word; } .date-arrow.data-v-47b8e7b0 { font-size: 40rpx; color: #cccccc; margin-left: 12rpx; flex-shrink: 0; } /* 原有表单组样式 - 保留用于其他部分 */ .form-group.data-v-47b8e7b0 { margin-bottom: 24rpx; } .form-group.data-v-47b8e7b0:last-child { margin-bottom: 0; } .form-input.data-v-47b8e7b0 { width: 100%; padding: 24rpx; border: 2rpx solid #386641; border-radius: 12rpx; font-size: 34rpx; line-height: 1.5; color: #333333; background: #fffaf5; box-sizing: border-box; display: block; height: auto; min-height: 80rpx; } .form-input.data-v-47b8e7b0::-webkit-input-placeholder { color: #cccccc; font-size: 32rpx; } .form-input.data-v-47b8e7b0::placeholder { color: #cccccc; font-size: 32rpx; } .form-textarea.data-v-47b8e7b0 { width: 100%; padding: 24rpx; border: 2rpx solid #386641; border-radius: 12rpx; font-size: 34rpx; line-height: 1.6; color: #333333; background: #fffaf5; box-sizing: border-box; min-height: 180rpx; display: block; font-family: inherit; } .form-textarea.data-v-47b8e7b0::-webkit-input-placeholder { color: #cccccc; font-size: 32rpx; } .form-textarea.data-v-47b8e7b0::placeholder { color: #cccccc; font-size: 32rpx; } .gender-group.data-v-47b8e7b0 { display: flex; gap: 16rpx; } .gender-btn.data-v-47b8e7b0 { flex: 1; padding: 22rpx 24rpx; border: 2rpx solid #386641; border-radius: 12rpx; text-align: center; font-size: 34rpx; line-height: 1.5; color: #666666; background: #fffaf5; transition: all 0.2s; display: flex; align-items: center; justify-content: center; min-height: 80rpx; } .gender-btn.active.data-v-47b8e7b0 { border-color: #386641; background: #fff4e6; color: #386641; font-weight: 600; } .radio-group.data-v-47b8e7b0 { display: flex; gap: 16rpx; } .radio-item.data-v-47b8e7b0 { flex: 1; padding: 20rpx 24rpx; border: 2rpx solid #386641; border-radius: 12rpx; text-align: center; font-size: 32rpx; color: #666666; background: #fffaf5; transition: all 0.2s; min-height: 70rpx; display: flex; align-items: center; justify-content: center; } .radio-item.active.data-v-47b8e7b0 { border-color: #386641; background: #fff4e6; color: #386641; font-weight: 600; } .checkbox-group.data-v-47b8e7b0 { display: flex; flex-wrap: wrap; gap: 12rpx; } .checkbox-item.data-v-47b8e7b0 { padding: 18rpx 28rpx; border: 2rpx solid #386641; border-radius: 24rpx; font-size: 32rpx; color: #666666; background: #fffaf5; transition: all 0.2s; } .checkbox-item.active.data-v-47b8e7b0 { border-color: #386641; background: #fff4e6; color: #386641; font-weight: 600; } .multi-checkbox-group.data-v-47b8e7b0 { display: flex; flex-wrap: wrap; gap: 12rpx; } .multi-checkbox-item.data-v-47b8e7b0 { padding: 18rpx 28rpx; border: 2rpx solid #386641; border-radius: 24rpx; font-size: 32rpx; color: #666666; background: #fffaf5; transition: all 0.2s; } .multi-checkbox-item.active.data-v-47b8e7b0 { border-color: #386641; background: #fff4e6; color: #386641; font-weight: 600; } .date-input.data-v-47b8e7b0 { display: flex; justify-content: space-between; align-items: center; padding: 24rpx; border: 2rpx solid #386641; border-radius: 12rpx; background: #fffaf5; font-size: 34rpx; line-height: 1.5; color: #333333; min-height: 80rpx; } .date-icon.data-v-47b8e7b0 { font-size: 40rpx; margin-left: 12rpx; color: #386641; } .picker-item.data-v-47b8e7b0 { display: flex; justify-content: center; align-items: center; height: 50px; font-size: 34rpx; color: #333333; } /* 上传组件样式 */ .upload-container.data-v-47b8e7b0 { margin-top: 16rpx; } .upload-layout.data-v-47b8e7b0 { display: flex; gap: 20rpx; margin-top: 20rpx; align-items: flex-start; } .upload-left.data-v-47b8e7b0 { flex-shrink: 0; width: 600rpx; } .upload-right.data-v-47b8e7b0 { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12rpx; } .upload-label.data-v-47b8e7b0 { font-size: 32rpx; color: #333333; font-weight: 600; } .upload-desc.data-v-47b8e7b0 { font-size: 28rpx; color: #999999; line-height: 1.5; } .more-images.data-v-47b8e7b0 { display: flex; gap: 12rpx; margin-top: 12rpx; flex-wrap: wrap; } .more-item.data-v-47b8e7b0 { width: 80rpx; height: 80rpx; border-radius: 8rpx; overflow: hidden; border: 2rpx solid #386641; } .more-item image.data-v-47b8e7b0 { width: 100%; height: 100%; } .upload-btn-single.data-v-47b8e7b0 { width: 200rpx; height: 200rpx; display: flex; align-items: center; justify-content: center; border: 2rpx dashed #386641; border-radius: 12rpx; background: #fffaf5; transition: all 0.2s; } .upload-btn-single.data-v-47b8e7b0:active { background: #fff4e6; border-color: #386641; } .upload-btn.data-v-47b8e7b0 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60rpx 40rpx; border: 2rpx dashed #386641; border-radius: 12rpx; background: #fffaf5; transition: all 0.2s; } .upload-btn.data-v-47b8e7b0:active { background: #fff4e6; border-color: #386641; } .upload-icon.data-v-47b8e7b0 { font-size: 80rpx; margin-bottom: 16rpx; } .upload-text.data-v-47b8e7b0 { font-size: 28rpx; color: #999999; } .upload-tip.data-v-47b8e7b0 { font-size: 24rpx; color: #cccccc; margin-top: 8rpx; } .form-label-tip.data-v-47b8e7b0 { font-size: 24rpx; color: #999999; margin-bottom: 16rpx; display: block; line-height: 1.5; } .image-preview.data-v-47b8e7b0 { position: relative; border-radius: 12rpx; overflow: hidden; border: 2rpx solid #386641; width: 100%; height: 100%; } .preview-image.data-v-47b8e7b0 { width: 200rpx; height: 200rpx; display: block; } .image-actions.data-v-47b8e7b0 { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; padding: 12rpx; background: rgba(0, 0, 0, 0.6); gap: 8rpx; } .action-btn.data-v-47b8e7b0 { padding: 8rpx 16rpx; border-radius: 6rpx; font-size: 24rpx; color: #ffffff; background: rgba(255, 140, 0, 0.8); border: none; transition: all 0.2s; flex: 1; text-align: center; } .action-btn.data-v-47b8e7b0:active { background: rgba(255, 140, 0, 1); } .action-btn.delete.data-v-47b8e7b0 { color: #ffffff; background: rgba(255, 77, 79, 0.8); } .action-btn.delete.data-v-47b8e7b0:active { background: rgba(255, 77, 79, 1); } /* 多图片列表样式 */ .image-list.data-v-47b8e7b0 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rpx; margin-bottom: 20rpx; } .image-item.data-v-47b8e7b0 { position: relative; width: 100%; padding-bottom: 100%; border-radius: 12rpx; overflow: hidden; border: 2rpx solid #386641; } .item-image.data-v-47b8e7b0 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .delete-icon.data-v-47b8e7b0 { position: absolute; top: 8rpx; right: 8rpx; width: 48rpx; height: 48rpx; background: rgba(255, 77, 79, 0.9); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40rpx; line-height: 1; font-weight: bold; z-index: 10; } .upload-btn-small.data-v-47b8e7b0 { width: 100%; padding-bottom: 100%; position: relative; border: 2rpx dashed #386641; border-radius: 12rpx; background: #fffaf5; display: flex; align-items: center; justify-content: center; } .upload-icon-small.data-v-47b8e7b0 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 60rpx; color: #386641; } .picker-input.data-v-47b8e7b0 { display: flex; justify-content: space-between; align-items: center; padding: 24rpx; border: 2rpx solid #386641; border-radius: 12rpx; background: #fffaf5; font-size: 34rpx; line-height: 1.5; color: #333333; min-height: 80rpx; } .picker-icon.data-v-47b8e7b0 { font-size: 28rpx; color: #386641; margin-left: 12rpx; } .button-group.data-v-47b8e7b0 { display: flex; gap: 20rpx; margin-top: 40rpx; margin-bottom: 40rpx; padding: 0 20rpx; } .button-fixed.data-v-47b8e7b0 { position: fixed; bottom: 0; left: 0; right: 0; padding: 12rpx 20rpx 16rpx 20rpx; background: #ffffff; box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1); z-index: 100; box-sizing: border-box; } .agreement-section.data-v-47b8e7b0 { margin-bottom: 16rpx; } .agreement-radio-group.data-v-47b8e7b0 { display: flex; align-items: center; gap: 12rpx; flex-wrap: wrap; } .radio-option.data-v-47b8e7b0 { display: flex; align-items: center; gap: 8rpx; cursor: pointer; } .radio-icon.data-v-47b8e7b0 { width: 36rpx; height: 36rpx; border: 2rpx solid #d9d9d9; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; background: #ffffff; } .radio-icon.checked.data-v-47b8e7b0 { border-color: #52c41a; } .radio-dot.data-v-47b8e7b0 { width: 20rpx; height: 20rpx; border-radius: 50%; background: #52c41a; } .radio-label.data-v-47b8e7b0 { font-size: 28rpx; color: #333333; font-weight: 500; } .agreement-text.data-v-47b8e7b0 { font-size: 26rpx; color: #333333; line-height: 1.6; } .agreement-link.data-v-47b8e7b0 { color: #1890ff; text-decoration: underline; } .agreement-link.data-v-47b8e7b0:active { opacity: 0.7; } .btn.data-v-47b8e7b0 { width: 100%; padding: 10rpx; border-radius: 12rpx; font-size: 32rpx; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; min-height: 72rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 30rpx; } .btn.data-v-47b8e7b0:active { transform: scale(0.98); } .btn.data-v-47b8e7b0:disabled { opacity: 0.6; cursor: not-allowed; } .btn-cancel.data-v-47b8e7b0 { background: #f5f5f5; color: #666666; border: 2rpx solid #e8e8e8; } .btn-submit.data-v-47b8e7b0 { background: #389e0d; color: #ffffff; } .btn-submit.data-v-47b8e7b0:active:not(:disabled) { background: linear-gradient(135deg, #389e0d 0%, #237804 100%); } .date-picker-overlay.data-v-47b8e7b0 { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: flex-end; z-index: 999; } .date-picker-container.data-v-47b8e7b0 { background: #ffffff; border-radius: 20rpx 20rpx 0 0; overflow: hidden; } .date-picker-header.data-v-47b8e7b0 { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 30rpx; border-bottom: 2rpx solid #ffe4cc; } .date-btn-cancel.data-v-47b8e7b0, .date-btn-confirm.data-v-47b8e7b0 { font-size: 34rpx; color: #386641; font-weight: 600; } .date-picker-view.data-v-47b8e7b0 { height: 320rpx; } .picker-item.data-v-47b8e7b0 { display: flex; justify-content: center; align-items: center; height: 50px; font-size: 34rpx; color: #333333; }