.create-warehouse-container { padding: 30rpx; background-color: #f8f8f8; min-height: 100vh; } .header { display: flex; align-items: center; margin-bottom: 40rpx; } .back-btn { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; } .back-icon { font-size: 40rpx; color: #333; } .title { font-size: 36rpx; font-weight: bold; color: #333; flex: 1; text-align: center; margin-right: 60rpx; /* 为了平衡返回按钮的宽度 */ } /* 步骤指示器样式 */ .steps { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40rpx; padding: 0 20rpx; } .step { display: flex; flex-direction: column; align-items: center; position: relative; } .step-number { width: 50rpx; height: 50rpx; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28rpx; margin-bottom: 10rpx; } .step.active .step-number { background-color: #007AFF; } .step.completed .step-number { background-color: #4cd964; } .step-text { font-size: 24rpx; color: #666; } .step.active .step-text { color: #007AFF; font-weight: bold; } .step.completed .step-text { color: #4cd964; } .step-line { height: 2rpx; background-color: #ddd; flex: 1; margin: 0 10rpx; margin-bottom: 30rpx; } .step-line.active { background-color: #4cd964; } /* 表单样式 */ .form-container { background-color: #fff; border-radius: 12rpx; padding: 30rpx; margin-bottom: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .form-title { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; text-align: center; padding-bottom: 20rpx; border-bottom: 1rpx solid #f0f0f0; } .form-item { margin-bottom: 25rpx; } .label { font-size: 28rpx; color: #333; margin-bottom: 10rpx; display: block; } .required::before { content: '* '; color: #e74c3c; } .input { width: 100%; height: 80rpx; border: 1rpx solid #ddd; border-radius: 8rpx; padding: 0 20rpx; font-size: 28rpx; box-sizing: border-box; } .selected-value { background-color: #f5f5f5; display: flex; align-items: center; } .btn { width: 100%; height: 90rpx; line-height: 90rpx; text-align: center; font-size: 30rpx; border-radius: 8rpx; margin-top: 20rpx; } .next-btn { background-color: #007AFF; color: #fff; } .btn-group { display: flex; justify-content: space-between; } .back-step-btn { background-color: #f5f5f5; color: #666; flex: 1; margin-right: 20rpx; } .complete-btn { background-color: #4cd964; color: #fff; flex: 1; } /* 完成页面样式 */ .completion-container { background-color: #fff; border-radius: 12rpx; padding: 50rpx 30rpx; display: flex; flex-direction: column; align-items: center; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .completion-icon { width: 120rpx; height: 120rpx; background-color: #4cd964; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 60rpx; margin-bottom: 30rpx; } .completion-title { font-size: 36rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; } .completion-message { font-size: 28rpx; color: #666; margin-bottom: 40rpx; } .completion-details { width: 100%; background-color: #f8f8f8; border-radius: 8rpx; padding: 20rpx; margin-bottom: 40rpx; } .completion-item { display: flex; margin-bottom: 15rpx; } .completion-item:last-child { margin-bottom: 0; } .completion-label { font-size: 28rpx; color: #666; width: 150rpx; } .completion-value { font-size: 28rpx; color: #333; font-weight: bold; flex: 1; } .home-btn { background-color: #007AFF; color: #fff; } /* 名称和单位容器样式 */ .name-unit-container { display: flex; position: relative; } /* 让picker占满容器宽度,使内部input与备注输入框同宽 */ .picker-block { display: block; width: 100%; } /* 带单位选择器的输入框样式 */ .input.with-unit { flex: 1; padding-right: 70rpx; /* 为单位选择器留出空间 */ } /* 单位选择器样式 */ .unit-selector { position: absolute; right: 0; top: 0; height: 80rpx; padding: 0 20rpx; background-color: #f8f8f8; border-left: 1rpx solid #ddd; display: flex; align-items: center; min-width: 60rpx; cursor: pointer; } .selected-unit { font-size: 28rpx; color: #333; margin-right: 6rpx; } .dropdown-icon { font-size: 24rpx; color: #666; } /* 下拉选项样式 */ .unit-dropdown { position: absolute; right: 0; top: 80rpx; width: 100rpx; background-color: #fff; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); z-index: 10; border: 1rpx solid #eee; border-radius: 4rpx; } .unit-option { height: 70rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #333; border-bottom: 1rpx solid #f5f5f5; cursor: pointer; } .unit-option:active, .unit-option-active { background-color: #f0f0f0; color: #007AFF; } .unit-option:last-child { border-bottom: none; }