/* 订单详情页样式 */ .page-container { min-height: 100vh; background: #faf8fc; } /* 自定义导航栏 */ .custom-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #faf8fc; } .status-bar { width: 100%; } .nav-bar { display: flex; align-items: center; justify-content: space-between; height: 88rpx; padding: 0 32rpx; } .nav-left { width: 80rpx; display: flex; align-items: center; } .nav-back-icon { width: 48rpx; height: 48rpx; } .nav-title { flex: 1; text-align: center; font-size: 34rpx; font-weight: 600; color: #101828; } .nav-right { width: 80rpx; } /* 内容区域 */ .content { height: 100vh; padding: 32rpx; box-sizing: border-box; } /* 订单状态卡片 */ .status-card { background: #fff; border-radius: 32rpx; padding: 48rpx 32rpx; margin-bottom: 24rpx; display: flex; flex-direction: column; align-items: center; box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.08); } .status-icon-wrap { width: 120rpx; height: 120rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 24rpx; } .status-icon-wrap.pink { background: #fdf2f8; } .status-icon-wrap.purple { background: #faf5ff; } .status-icon-wrap.orange { background: #fff7ed; } .status-icon-wrap.green { background: #ecfdf5; } .status-icon { width: 56rpx; height: 56rpx; } .status-title { font-size: 40rpx; font-weight: 700; color: #101828; margin-bottom: 12rpx; } .status-desc { font-size: 28rpx; color: #6a7282; } /* 信息卡片 */ .info-card { background: #fff; border-radius: 32rpx; padding: 32rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.08); } .card-title { font-size: 32rpx; font-weight: 700; color: #101828; margin-bottom: 24rpx; padding-bottom: 20rpx; border-bottom: 2rpx solid #f3f4f6; } .info-row { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 0; } .info-label { font-size: 28rpx; color: #6a7282; } .info-value { font-size: 28rpx; color: #101828; font-weight: 500; } .info-price { display: flex; align-items: baseline; gap: 4rpx; } .info-price .price-symbol { font-size: 28rpx; font-weight: 700; color: #ff4d6d; } .info-price .price-value { font-size: 36rpx; font-weight: 900; color: #ff4d6d; } .info-copy { display: flex; align-items: center; gap: 16rpx; } .copy-btn { font-size: 24rpx; color: #ff4d6d; padding: 8rpx 16rpx; background: #fff0f3; border-radius: 12rpx; } /* 底部按钮 */ .bottom-actions { display: flex; gap: 24rpx; padding: 32rpx 0 120rpx; } .action-btn { flex: 1; height: 88rpx; border-radius: 44rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 600; } .action-btn.outline { background: #fff; border: 2rpx solid #e5e7eb; color: #364153; } .action-btn.primary { background: #ff4d6d; color: #fff; } /* ========== 评价弹窗样式 ========== */ .review-modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; } .review-modal { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 32rpx 32rpx 0 0; z-index: 1001; max-height: 85vh; display: flex; flex-direction: column; animation: slideUp 0.3s ease; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .review-modal.show { transform: translateY(0); } .review-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 32rpx; border-bottom: 2rpx solid #f3f4f6; } .review-modal-title { font-size: 36rpx; font-weight: 700; color: #101828; } .review-modal-close { width: 48rpx; height: 48rpx; display: flex; align-items: center; justify-content: center; } .close-icon { font-size: 48rpx; color: #6a7282; line-height: 1; } .review-modal-content { flex: 1; padding: 32rpx; overflow-y: auto; max-height: 60vh; } /* 评价区块 */ .review-section { margin-bottom: 32rpx; } .section-title { font-size: 28rpx; font-weight: 600; color: #101828; margin-bottom: 16rpx; display: block; } /* 评分星星 */ .rating-stars { display: flex; gap: 16rpx; margin-bottom: 12rpx; } .star-item { font-size: 48rpx; opacity: 0.3; transition: all 0.2s; } .star-item.active { opacity: 1; } .rating-text { font-size: 24rpx; color: #6a7282; } /* 标签列表 */ .tag-list { display: flex; flex-wrap: wrap; gap: 16rpx; } .tag-item { padding: 12rpx 24rpx; background: #f3f4f6; border-radius: 100rpx; font-size: 26rpx; color: #4a5565; border: 2rpx solid transparent; transition: all 0.2s; } .tag-item.active { background: #fff0f3; color: #ff4d6d; border-color: #ff4d6d; } /* 评价输入框 */ .review-textarea { width: 100%; height: 200rpx; padding: 24rpx; background: #f9fafb; border-radius: 16rpx; font-size: 28rpx; color: #101828; box-sizing: border-box; } .char-count { display: block; text-align: right; font-size: 24rpx; color: #99a1af; margin-top: 8rpx; } /* 匿名选项 */ .anonymous-section { display: flex; align-items: center; gap: 16rpx; padding: 16rpx 0; } .checkbox { width: 40rpx; height: 40rpx; border: 2rpx solid #d1d5db; border-radius: 8rpx; display: flex; align-items: center; justify-content: center; font-size: 24rpx; color: #fff; transition: all 0.2s; } .checkbox.checked { background: #ff4d6d; border-color: #ff4d6d; } .anonymous-text { font-size: 28rpx; color: #4a5565; } /* 提交按钮 */ .review-modal-footer { padding: 24rpx 32rpx; padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); border-top: 2rpx solid #f3f4f6; } .submit-btn { width: 100%; height: 96rpx; background: linear-gradient(to right, #ff4d6d, #e91e63); color: #fff; font-size: 32rpx; font-weight: 600; border-radius: 48rpx; border: none; display: flex; align-items: center; justify-content: center; } .submit-btn.disabled { opacity: 0.6; } .submit-btn::after { border: none; }