hookehuyr

feat(订单管理): 添加订单详情弹窗组件及样式

实现订单详情弹窗功能,包含订单信息、商品详情、交易信息和评价展示
重构评价弹窗布局,优化样式和交互体验
......@@ -382,6 +382,189 @@
}
}
/* 订单详情弹窗样式 */
.order-detail-popup {
padding: 40rpx;
height: 100%;
display: flex;
flex-direction: column;
.detail-header {
text-align: center;
margin-bottom: 40rpx;
.detail-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
}
.detail-content {
flex: 1;
overflow-y: auto;
.detail-section {
margin-bottom: 40rpx;
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 24rpx;
display: block;
border-bottom: 1rpx solid #f0f0f0;
padding-bottom: 16rpx;
}
.info-row {
display: flex;
justify-content: space-between;
margin-bottom: 16rpx;
.info-label {
font-size: 28rpx;
color: #666;
}
.info-value {
font-size: 28rpx;
color: #333;
font-weight: 500;
&.status-pending {
color: #f97316;
}
&.status-completed {
color: #10b981;
}
&.status-cancelled {
color: #6b7280;
}
&.price {
color: #f97316;
font-weight: 600;
}
}
}
.product-detail-info {
display: flex;
background: #f8f9fa;
border-radius: 12rpx;
padding: 20rpx;
.product-detail-image {
width: 180rpx;
height: 180rpx;
border-radius: 12rpx;
margin-right: 24rpx;
}
.product-detail-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.product-detail-name {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 8rpx;
}
.product-detail-specs {
font-size: 26rpx;
color: #666;
margin-bottom: 8rpx;
}
.product-detail-battery {
font-size: 26rpx;
color: #666;
margin-bottom: 16rpx;
}
.product-detail-price {
font-size: 32rpx;
font-weight: 600;
color: #ff6b35;
}
}
}
.review-info {
background: #f8f9fa;
border-radius: 12rpx;
padding: 20rpx;
.review-rating {
display: flex;
align-items: center;
margin-bottom: 16rpx;
.rating-label {
font-size: 28rpx;
color: #666;
margin-right: 16rpx;
}
.rating-text {
font-size: 26rpx;
color: #666;
margin-left: 16rpx;
}
}
.review-content {
margin-bottom: 16rpx;
.content-label {
font-size: 28rpx;
color: #666;
margin-bottom: 8rpx;
display: block;
}
.content-text {
font-size: 28rpx;
color: #333;
line-height: 1.5;
}
}
.review-time {
text-align: right;
.time-text {
font-size: 24rpx;
color: #999;
}
}
}
}
}
.detail-footer {
padding-top: 40rpx;
.nut-button {
height: 88rpx;
border-radius: 44rpx;
font-size: 32rpx;
font-weight: 600;
}
}
}
/* 响应式适配 */
@media (max-width: 750px) {
.header {
......
This diff is collapsed. Click to expand it.