.container.data-v-a24b82f2 { width: 100%; height: 100vh; background-color: #FFFFFF; display: flex; flex-direction: column; padding-top: 30px; box-sizing: border-box; } .header.data-v-a24b82f2 { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 30rpx; background-color: #FFFFFF; border-bottom: 1rpx solid #F0F0F0; position: relative; } .back-btn.data-v-a24b82f2 { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; z-index: 10; } .back-icon.data-v-a24b82f2 { font-size: 40rpx; color: #333333; font-weight: bold; } .header-title.data-v-a24b82f2 { position: absolute; left: 50%; transform: translateX(-50%); font-size: 36rpx; font-weight: bold; color: #333333; } .header-right.data-v-a24b82f2 { width: 60rpx; } .scroll-content.data-v-a24b82f2 { flex: 1; width: 100%; padding-bottom: env(safe-area-inset-bottom); } .section.data-v-a24b82f2 { padding: 40rpx 30rpx; background-color: #FFFFFF; } .section-title.data-v-a24b82f2 { display: flex; align-items: center; margin-bottom: 30rpx; } .title-indicator.data-v-a24b82f2 { width: 6rpx; height: 32rpx; background-color: #81C784; border-radius: 3rpx; margin-right: 15rpx; } .title-text.data-v-a24b82f2 { font-size: 32rpx; font-weight: bold; color: #333333; } .type-buttons.data-v-a24b82f2 { display: flex; gap: 20rpx; } .type-btn.data-v-a24b82f2 { flex: 1; height: 80rpx; background-color: #F5F5F5; border-radius: 40rpx; display: flex; align-items: center; justify-content: center; border: 2rpx solid transparent; transition: all 0.3s; } .type-btn.active.data-v-a24b82f2 { background-color: #E8F5E9; border-color: #81C784; } .type-btn-text.data-v-a24b82f2 { font-size: 28rpx; color: #999999; } .type-btn.active .type-btn-text.data-v-a24b82f2 { color: #4CAF50; font-weight: bold; } .description-input.data-v-a24b82f2 { width: 100%; min-height: 300rpx; background-color: #F5F5F5; border-radius: 16rpx; padding: 30rpx; font-size: 28rpx; color: #333333; line-height: 1.6; box-sizing: border-box; } .description-input.data-v-a24b82f2::-webkit-input-placeholder { color: #CCCCCC; } .description-input.data-v-a24b82f2::placeholder { color: #CCCCCC; } .upload-area.data-v-a24b82f2 { width: 100%; } .image-list.data-v-a24b82f2 { display: flex; flex-wrap: wrap; gap: 20rpx; } .image-item.data-v-a24b82f2 { position: relative; width: 200rpx; height: 200rpx; border-radius: 12rpx; overflow: hidden; } .uploaded-image.data-v-a24b82f2 { width: 100%; height: 100%; } .delete-btn.data-v-a24b82f2 { position: absolute; top: 0; right: 0; width: 50rpx; height: 50rpx; background-color: rgba(0, 0, 0, 0.5); border-radius: 0 0 0 50rpx; display: flex; align-items: center; justify-content: center; } .delete-icon.data-v-a24b82f2 { font-size: 40rpx; color: #FFFFFF; line-height: 1; } .upload-btn.data-v-a24b82f2 { width: 200rpx; height: 200rpx; border: 2rpx dashed #CCCCCC; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; background-color: #FAFAFA; } .upload-icon.data-v-a24b82f2 { font-size: 80rpx; color: #CCCCCC; line-height: 1; } .submit-section.data-v-a24b82f2 { padding: 30rpx; background-color: #FFFFFF; border-top: 1rpx solid #F0F0F0; padding-bottom: calc(30rpx + env(safe-area-inset-bottom)); } .submit-btn.data-v-a24b82f2 { width: 100%; height: 88rpx; background-color: #4FC3F7; color: #FFFFFF; font-size: 32rpx; font-weight: bold; border: none; border-radius: 44rpx; display: flex; align-items: center; justify-content: center; } .submit-btn.data-v-a24b82f2::after { border: none; }