Files
mp-10550/src/user/order/evaluate/index.scss
赵忠林 0a6f21d182 feat(user/order): 新增订单评价功能
- 添加订单评价页面组件
- 实现订单信息和商品列表展示
- 添加评价功能相关的样式和布局
- 优化订单列表页面,增加申请退款和查看物流等功能
2025-08-23 16:22:01 +08:00

192 lines
3.3 KiB
SCSS

.evaluate-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 80px;
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50vh;
.loading-text {
margin-top: 16px;
color: #666;
}
}
.order-info {
background: white;
padding: 16px 20px;
margin-bottom: 12px;
.order-no {
display: block;
color: #666;
margin-bottom: 4px;
}
.order-tip {
display: block;
font-weight: 500;
color: #333;
}
}
.goods-list {
.goods-item {
background: white;
margin-bottom: 12px;
padding: 20px;
.goods-info {
display: flex;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid #f0f0f0;
.goods-image {
width: 80px;
height: 80px;
border-radius: 8px;
margin-right: 12px;
flex-shrink: 0;
}
.goods-detail {
flex: 1;
.goods-name {
display: block;
font-weight: 500;
color: #333;
line-height: 1.4;
margin-bottom: 8px;
}
.goods-sku {
display: block;
color: #999;
margin-bottom: 8px;
}
.goods-price {
display: block;
font-weight: 600;
color: #ff6b35;
}
}
}
.rating-section {
margin-bottom: 20px;
.rating-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
.rating-label {
font-weight: 500;
color: #333;
}
.rating-text {
color: #ff6b35;
font-weight: 500;
}
}
}
.content-section {
margin-bottom: 20px;
.content-label {
display: block;
font-weight: 500;
color: #333;
margin-bottom: 12px;
}
}
.image-section {
.image-label {
display: block;
font-weight: 500;
color: #333;
margin-bottom: 12px;
}
}
}
}
.submit-section {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
padding: 12px 16px;
border-top: 1px solid #f0f0f0;
z-index: 100;
}
}
/* NutUI 组件样式覆盖 */
.evaluate-page {
.nut-rate {
.nut-rate-item {
margin-right: 8px;
}
}
.nut-textarea {
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 12px;
background: #fafafa;
&:focus {
border-color: #1890ff;
background: white;
}
}
.nut-uploader {
.nut-uploader-slot {
border: 2px dashed #e8e8e8;
border-radius: 8px;
background: #fafafa;
&:hover {
border-color: #1890ff;
}
}
.nut-uploader-preview {
border-radius: 8px;
overflow: hidden;
}
}
}
/* 适配不同屏幕尺寸 */
@media (max-width: 375px) {
.evaluate-page {
.goods-list {
.goods-item {
padding: 16px;
.goods-info {
.goods-image {
width: 70px;
height: 70px;
}
}
}
}
}
}