.container4 { padding: 20rpx; background-color: #f5f5f5; min-height: 100vh; padding-top: calc(90rpx + 44px + 20rpx); /* 增加了额外的顶部间距 */ } .custom-nav { display: flex; align-items: center; height: 90rpx; margin-bottom: 20rpx; background-color: #2E82FF; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0 20rpx; padding-top: 44px; /* 适配iPhone状态栏 */ } .back-icon { position: fixed; top: 115rpx; left: 30rpx; z-index: 999; width: 40rpx; height: 40rpx; } .nav-title { flex: 1; text-align: center; font-size: 34rpx; color: #fff; } .nav-placeholder { width: 60rpx; } .bill-card { background-color: #fff; border-radius: 16rpx; padding: 15rpx 24rpx 15rpx 24rpx ; margin-bottom: 20rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); position: relative; } .bill-rownew { display: flex; font-size: 32rpx; justify-content: space-between; align-items: center; padding: 10rpx 0; } /* 第一个卡片额外的顶部间距 */ .first-card { margin-top: 20rpx; } .bill-row { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 0; } .bill-row-address { text-align: right; color: rgba(104, 108, 128, 1); } .divider { height: 1rpx; background-color: #eee; margin: 10rpx 0; /* 增加了分隔线上下间距 */ } .solid-divider { height: 1rpx; background-color: #ddd; margin: 15rpx 0 20rpx 0; } .card-title { font-size: 32rpx; color: #333; font-weight: 400; margin-bottom: 10rpx; } .reply-timenew { font-size: 32rpx; color: rgba(170, 177, 192, 1); padding: 10rpx; } .input-right { text-align: right; width: 60%; } .input-text { color: rgba(104, 108, 128, 1); } .placeholder-style { color: #999; text-align: right; } .selector-value { display: flex; align-items: center; } .arrow { margin-left: 10rpx; color: #999; } .fault-description textarea { width: 100%; height: 150rpx; padding: 10rpx; box-sizing: border-box; font-size: 28rpx; } .upload-section { display: flex; flex-wrap: wrap; } .upload-btn-container { width: 150rpx; height: 150rpx; margin-right: 20rpx; margin-bottom: 20rpx; border-radius: 8rpx; display: flex; justify-content: center; align-items: center; } .solid-border { border: 2rpx solid #ccc; } .upload-btn { width: 120rpx; height: 120rpx; display: flex; justify-content: center; align-items: center; } .plus-icon { font-size: 60rpx; color: #999; } .upload-tip { font-size: 24rpx; color: #999; margin-top: 10rpx; } .image-preview { display: flex; flex-wrap: wrap; } .image-item { width: 150rpx; height: 150rpx; margin-right: 20rpx; margin-bottom: 20rpx; position: relative; } .image-item image { width: 100%; height: 100%; border-radius: 8rpx; } .delete-icon { position: absolute; top: -15rpx; right: -15rpx; width: 40rpx; height: 40rpx; background-color: rgba(0, 0, 0, 0.5); color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24rpx; } .submit-btn { width: 90%; height: 45px; background-color: #0080ff; color: white; border-radius: 22.5px; font-size: 16px; display: flex; align-items: center; justify-content: center; margin: 30px auto; } .submit-btn.disabled { opacity: 0.7; } /* 报修须知弹窗样式 */ .notification-modal { position: fixed; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: flex; justify-content: center; align-items: flex-end; height: 100%; } .notification-content { background-color: #fff; width: 100%; border-radius: 20rpx 20rpx 0 0; padding: 40rpx 30rpx; } .notification-title { text-align: center; font-size: 36rpx; font-weight: bold; margin-bottom: 20rpx; } .notification-divider { height: 1rpx; background-color: #ddd; margin-bottom: 30rpx; } .notification-list { margin-bottom: 40rpx; } .notification-item { margin-bottom: 20rpx; font-size: 28rpx; line-height: 1.5; } .notification-btn { background-color: #007aff; color: #fff; text-align: center; padding: 25rpx 0; border-radius: 50rpx; font-size: 32rpx; } .disabled-btn { background-color: #999; pointer-events: none; } /* 必填项标记 */ .required { color: #ff4d4f; margin-left: 4rpx; } .submit-button.submitting { background-color: #cccccc; color: #666666; }