627 lines
14 KiB
CSS
627 lines
14 KiB
CSS
/* 评价功能样式 */
|
|
|
|
/* 评价表单样式 */
|
|
.product-info {
|
|
background-color: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.product-info img {
|
|
/* 图片重置样式 - 解决Bootstrap冲突 */
|
|
all: unset !important;
|
|
display: block !important;
|
|
max-width: 100% !important;
|
|
max-height: 80px !important;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
object-fit: cover !important;
|
|
border-radius: 4px !important;
|
|
border: 1px solid #dee2e6 !important;
|
|
}
|
|
|
|
/* 星级评分样式 - 简化版本 */
|
|
.rating-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.star-rating {
|
|
display: flex;
|
|
gap: 3px;
|
|
}
|
|
|
|
.star {
|
|
font-size: 2.5rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
user-select: none;
|
|
line-height: 1;
|
|
|
|
/* 默认样式：灰色 */
|
|
color: #ddd !important;
|
|
}
|
|
|
|
.star:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* 填充状态：橙色 */
|
|
.star.filled {
|
|
color: #ff6b35 !important;
|
|
}
|
|
|
|
/* 评分文字样式 */
|
|
.rating-text {
|
|
font-weight: 600;
|
|
color: #666;
|
|
font-size: 1.1rem;
|
|
padding: 10px 15px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 8px;
|
|
border: 2px solid #e9ecef;
|
|
min-width: 120px;
|
|
text-align: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rating-text.selected {
|
|
background-color: #ff6b35;
|
|
color: white;
|
|
border-color: #ff6b35;
|
|
}
|
|
|
|
/* 图片上传样式 */
|
|
.image-upload-container {
|
|
border: 2px dashed #ddd;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.image-upload-container:hover {
|
|
border-color: #007bff;
|
|
}
|
|
|
|
.upload-area {
|
|
cursor: pointer;
|
|
padding: 20px;
|
|
}
|
|
|
|
.upload-area i {
|
|
font-size: 3rem;
|
|
color: #666;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* 上传图片预览容器 - 强制控制布局 */
|
|
.uploaded-images {
|
|
display: flex !important;
|
|
flex-wrap: wrap !important;
|
|
gap: 8px !important;
|
|
margin-top: 15px !important;
|
|
justify-content: flex-start !important;
|
|
align-items: flex-start !important;
|
|
}
|
|
|
|
/* 上传图片预览尺寸 - 使用最强的样式规则 */
|
|
.image-preview {
|
|
position: relative !important;
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
max-width: 80px !important;
|
|
max-height: 80px !important;
|
|
min-width: 80px !important;
|
|
min-height: 80px !important;
|
|
border-radius: 8px !important;
|
|
overflow: hidden !important;
|
|
border: 2px solid #e9ecef !important;
|
|
flex-shrink: 0 !important;
|
|
flex-grow: 0 !important;
|
|
display: inline-block !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* 强制重置上传预览图片的所有样式 */
|
|
.image-preview img {
|
|
all: unset !important;
|
|
display: block !important;
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
max-width: 80px !important;
|
|
max-height: 80px !important;
|
|
min-width: 80px !important;
|
|
min-height: 80px !important;
|
|
object-fit: cover !important;
|
|
border-radius: 6px !important;
|
|
box-sizing: border-box !important;
|
|
position: relative !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
bottom: 0 !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
border: none !important;
|
|
outline: none !important;
|
|
background: none !important;
|
|
}
|
|
|
|
/* 针对上传图片容器内的所有img标签 */
|
|
.uploaded-images img {
|
|
all: unset !important;
|
|
display: block !important;
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
max-width: 80px !important;
|
|
max-height: 80px !important;
|
|
min-width: 80px !important;
|
|
min-height: 80px !important;
|
|
object-fit: cover !important;
|
|
border-radius: 6px !important;
|
|
box-sizing: border-box !important;
|
|
position: relative !important;
|
|
flex-shrink: 0 !important;
|
|
flex-grow: 0 !important;
|
|
}
|
|
|
|
/* 上传图片容器的直接img子元素 */
|
|
.uploaded-images > .image-preview > img {
|
|
all: unset !important;
|
|
display: block !important;
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
max-width: 80px !important;
|
|
max-height: 80px !important;
|
|
min-width: 80px !important;
|
|
min-height: 80px !important;
|
|
object-fit: cover !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
.image-preview .remove-btn {
|
|
position: absolute !important;
|
|
top: 2px !important;
|
|
right: 2px !important;
|
|
background: rgba(255, 255, 255, 0.9) !important;
|
|
border: none !important;
|
|
border-radius: 50% !important;
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
cursor: pointer !important;
|
|
font-size: 12px !important;
|
|
color: #dc3545 !important;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
|
|
z-index: 10 !important;
|
|
}
|
|
|
|
.image-preview .remove-btn:hover {
|
|
background: rgba(255, 255, 255, 1) !important;
|
|
transform: scale(1.1) !important;
|
|
}
|
|
|
|
/* 评价列表样式 */
|
|
.review-item {
|
|
border-bottom: 1px solid #e9ecef;
|
|
padding: 20px 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.review-item:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.rating-display .stars {
|
|
color: #ff6b35 !important;
|
|
font-size: 1.2rem;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.review-content {
|
|
line-height: 1.6;
|
|
margin: 10px 0;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.review-images {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.review-image-thumb {
|
|
/* 图片重置样式 - 解决Bootstrap冲突 */
|
|
all: unset !important;
|
|
display: block !important;
|
|
width: 60px !important;
|
|
height: 60px !important;
|
|
object-fit: cover !important;
|
|
border-radius: 4px !important;
|
|
border: 1px solid #e9ecef !important;
|
|
cursor: pointer !important;
|
|
transition: transform 0.2s ease !important;
|
|
}
|
|
|
|
.review-image-thumb:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.review-meta {
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid #f8f9fa;
|
|
}
|
|
|
|
/* 商品详情页评价标签页样式 */
|
|
.reviews-section {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.reviews-stats {
|
|
background: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.rating-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.overall-rating {
|
|
text-align: center;
|
|
}
|
|
|
|
.overall-rating .score {
|
|
font-size: 3rem;
|
|
font-weight: bold;
|
|
color: #ff6b35;
|
|
line-height: 1;
|
|
}
|
|
|
|
.overall-rating .stars {
|
|
color: #ff6b35 !important;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.overall-rating .total {
|
|
color: #666;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.rating-breakdown {
|
|
flex: 1;
|
|
}
|
|
|
|
.rating-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.rating-bar .label {
|
|
width: 40px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.rating-bar .progress {
|
|
flex: 1;
|
|
height: 8px;
|
|
}
|
|
|
|
.rating-bar .count {
|
|
width: 40px;
|
|
text-align: right;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.reviews-filter {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.reviews-filter .btn {
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.review-list-item {
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 15px;
|
|
background: #fff;
|
|
}
|
|
|
|
.reviewer-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* 用户头像样式 - 重点修复区域 */
|
|
.reviewer-avatar {
|
|
/* 头像图片重置样式 - 强制重置所有样式 */
|
|
all: unset !important;
|
|
display: block !important;
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
max-width: 40px !important;
|
|
max-height: 40px !important;
|
|
min-width: 40px !important;
|
|
min-height: 40px !important;
|
|
border-radius: 50% !important;
|
|
object-fit: cover !important;
|
|
border: 2px solid #e9ecef !important;
|
|
box-sizing: border-box !important;
|
|
flex-shrink: 0 !important;
|
|
vertical-align: top !important;
|
|
}
|
|
|
|
/* 针对商品详情页评价容器中的头像 */
|
|
#reviewsContainer .reviewer-avatar {
|
|
/* 强制重置商品详情页评价容器中的头像 */
|
|
all: unset !important;
|
|
display: block !important;
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
max-width: 40px !important;
|
|
max-height: 40px !important;
|
|
min-width: 40px !important;
|
|
min-height: 40px !important;
|
|
border-radius: 50% !important;
|
|
object-fit: cover !important;
|
|
border: 2px solid #e9ecef !important;
|
|
box-sizing: border-box !important;
|
|
flex-shrink: 0 !important;
|
|
vertical-align: top !important;
|
|
}
|
|
|
|
/* 针对评价标签页中的头像 */
|
|
#reviews .reviewer-avatar {
|
|
/* 评价标签页中的头像 */
|
|
all: unset !important;
|
|
display: block !important;
|
|
width: 40px !important;
|
|
height: 40px !important;
|
|
max-width: 40px !important;
|
|
max-height: 40px !important;
|
|
min-width: 40px !important;
|
|
min-height: 40px !important;
|
|
border-radius: 50% !important;
|
|
object-fit: cover !important;
|
|
border: 2px solid #e9ecef !important;
|
|
box-sizing: border-box !important;
|
|
flex-shrink: 0 !important;
|
|
vertical-align: top !important;
|
|
}
|
|
|
|
.reviewer-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.review-time {
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 60px 20px;
|
|
}
|
|
|
|
.empty-state i {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* 商品详情页评价图片展示 - 重点修复区域 */
|
|
.product-review-images {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.product-review-image {
|
|
/* 商品评价图片重置样式 - 强制重置所有样式 */
|
|
all: unset !important;
|
|
display: inline-block !important;
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
max-width: 80px !important;
|
|
max-height: 80px !important;
|
|
min-width: 80px !important;
|
|
min-height: 80px !important;
|
|
object-fit: cover !important;
|
|
border-radius: 6px !important;
|
|
border: 1px solid #dee2e6 !important;
|
|
cursor: pointer !important;
|
|
transition: all 0.2s ease !important;
|
|
box-sizing: border-box !important;
|
|
vertical-align: top !important;
|
|
}
|
|
|
|
.product-review-image:hover {
|
|
transform: scale(1.05) !important;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
|
|
border-color: #007bff !important;
|
|
}
|
|
|
|
/* 特殊针对商品详情页面的评价容器 */
|
|
#reviewsContainer img:not(.reviewer-avatar) {
|
|
/* 强制重置商品详情页评价容器中的所有图片（除了头像） */
|
|
all: unset !important;
|
|
display: inline-block !important;
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
max-width: 80px !important;
|
|
max-height: 80px !important;
|
|
object-fit: cover !important;
|
|
border-radius: 6px !important;
|
|
border: 1px solid #dee2e6 !important;
|
|
cursor: pointer !important;
|
|
transition: all 0.2s ease !important;
|
|
margin-right: 8px !important;
|
|
margin-bottom: 8px !important;
|
|
box-sizing: border-box !important;
|
|
vertical-align: top !important;
|
|
}
|
|
|
|
#reviewsContainer img:not(.reviewer-avatar):hover {
|
|
transform: scale(1.05) !important;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
|
|
border-color: #007bff !important;
|
|
}
|
|
|
|
/* 评价标签页特殊处理 */
|
|
#reviews img:not(.reviewer-avatar) {
|
|
/* 评价标签页中的图片（除了头像） */
|
|
all: unset !important;
|
|
display: inline-block !important;
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
max-width: 80px !important;
|
|
max-height: 80px !important;
|
|
object-fit: cover !important;
|
|
border-radius: 6px !important;
|
|
border: 1px solid #dee2e6 !important;
|
|
cursor: pointer !important;
|
|
transition: all 0.2s ease !important;
|
|
margin-right: 8px !important;
|
|
margin-bottom: 8px !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
#reviews img:not(.reviewer-avatar):hover {
|
|
transform: scale(1.05) !important;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
|
|
border-color: #007bff !important;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.star {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.rating-summary {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 15px;
|
|
}
|
|
|
|
.uploaded-images {
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
/* 移动端上传图片预览更小 */
|
|
.image-preview {
|
|
width: 60px !important;
|
|
height: 60px !important;
|
|
max-width: 60px !important;
|
|
max-height: 60px !important;
|
|
min-width: 60px !important;
|
|
min-height: 60px !important;
|
|
}
|
|
|
|
.image-preview img,
|
|
.uploaded-images img,
|
|
.uploaded-images > .image-preview > img {
|
|
width: 60px !important;
|
|
height: 60px !important;
|
|
max-width: 60px !important;
|
|
max-height: 60px !important;
|
|
min-width: 60px !important;
|
|
min-height: 60px !important;
|
|
}
|
|
|
|
.image-preview .remove-btn {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
font-size: 10px !important;
|
|
top: 1px !important;
|
|
right: 1px !important;
|
|
}
|
|
|
|
.review-image-thumb {
|
|
width: 50px !important;
|
|
height: 50px !important;
|
|
}
|
|
|
|
.product-review-image,
|
|
#reviewsContainer img:not(.reviewer-avatar),
|
|
#reviews img:not(.reviewer-avatar) {
|
|
width: 60px !important;
|
|
height: 60px !important;
|
|
max-width: 60px !important;
|
|
max-height: 60px !important;
|
|
min-width: 60px !important;
|
|
min-height: 60px !important;
|
|
}
|
|
|
|
.reviewer-avatar,
|
|
#reviewsContainer .reviewer-avatar,
|
|
#reviews .reviewer-avatar {
|
|
width: 35px !important;
|
|
height: 35px !important;
|
|
max-width: 35px !important;
|
|
max-height: 35px !important;
|
|
min-width: 35px !important;
|
|
min-height: 35px !important;
|
|
}
|
|
}
|
|
|
|
/* 加载状态 */
|
|
.loading {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #f3f3f3;
|
|
border-top: 2px solid #007bff;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
|
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
|
}
|
|
|
|
/* 动画效果 */
|
|
.review-item {
|
|
animation: fadeInUp 0.3s ease;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|