From c3d6091d6ba64101cfafe7f397c9f113425a849b Mon Sep 17 00:00:00 2001 From: hflllll Date: Tue, 24 Jun 2025 22:23:57 +0800 Subject: [PATCH] =?UTF-8?q?'zwd=E7=9A=84=E4=BF=AE=E6=94=B9'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 3 + src/components/CustomerReviews.vue | 970 ++++++++++++++----------------------- 2 files changed, 378 insertions(+), 595 deletions(-) diff --git a/src/App.vue b/src/App.vue index 4d5f2f5..f48c5fe 100644 --- a/src/App.vue +++ b/src/App.vue @@ -129,6 +129,9 @@ onMounted(() => { 服务条款 网站地图 +
+ {{ configParams.footer_record_number }} +
diff --git a/src/components/CustomerReviews.vue b/src/components/CustomerReviews.vue index 5b2be23..4e9f771 100644 --- a/src/components/CustomerReviews.vue +++ b/src/components/CustomerReviews.vue @@ -7,142 +7,247 @@
- -
-
-
-
-
-
- -
-
-

{{ review.customerName }}

-

{{ review.company }}

-
- - -
-
+
+ +
+
+
+
+ 张总 +
+
+

张总 添加了 3 张照片

+

57 分钟前

-
{{ formatDate(review.date) }}
-
-

{{ review.content }}

- - -
-
-
- -
- +{{ review.chatScreenshots.length - 3 }} -
-
+
+

星月楼

+

点心, 粤菜

+ +
+
+ 菜品照片
-
- - 点击查看完整聊天记录 +
+ 菜品照片
-
-
- {{ tag }} +
+ + +
+ +
+ 查看全部 3 张照片 +
-
-
- -
- -
- -
- -
-
+
+
+
+ 王总监 +
+
+

王总监 添加了一张照片

+

9 小时前

+
+
+ +
+

天星维港游

+
+ + + + + + 3 +
+

旅游

+ +
+ 维港夜景 +
- -
-
-
-
-
- +
+ +
-
-

{{ selectedReview.customerName }}

-

{{ selectedReview.company }}

+
+ +
+
+
+ 李经理 +
+
+

李经理 发表了评论

+

1 天前

+
+
+ +
+
+ 美食照片 +
+ +

Belon

- - + + + + + +
+ +

世界是一个美丽的地方，米其林星级餐厅Belon拥有杰出的厨师团队...

+ 阅读更多 + +
+
+ + 7 +
+
+ + 2 +
+
+ + 4 +
+
+ +
-
-
-
-

客户评价

-

{{ selectedReview.content }}

-
+ +
+
+
+
+ 王总监 +
+
+

王总监 添加了 4 张照片

+

1 天前

+
+
+ +
+

Belon

+
+ + + + + + 8 +
+

法国菜

- -
-

聊天记录

-
-
- -
- +
+
+ 法式甜点
-
- {{ screenshot.description }} +
+ 主菜
+ +
+ + +
+ +
+ 查看全部 4 张照片 +
-
-
- {{ tag }} +
+
+
+ 刘先生 +
+
+

刘先生 发表了评论

+

1 天前

+
+
+ +
+
+ 自助餐照片 +
+ +

The Place

+
+ + + + + +
+ +

对于748港币每位的自助餐，品质非常糟糕！不推荐来这个地方...

+ 阅读更多 +
+
+ +
+
+
+ 刘先生 +
+
+

刘先生 添加了一张照片

+

1 天前

+
+
+ +
+

The Place

+
+ + + + + + 8 +
+

$$ • 自助餐

+ +
+ 自助餐厅 +
+ +
+ +
-
评价时间：{{ formatDate(selectedReview.date) }}
@@ -151,7 +256,7 @@
- 聊天截图 + 照片大图 @@ -161,138 +266,13 @@ @@ -365,64 +333,53 @@ onUnmounted(() => { } .reviews-container { - max-width: 1400px; + max-width: 1200px; margin: 0 auto; padding: 0 20px; - position: relative; } -.reviews-carousel { - overflow: hidden; - margin-bottom: 40px; -} - -.reviews-track { +.activity-feed { display: flex; - transition: transform 0.5s ease; + flex-direction: column; gap: 30px; } -.review-card { - flex: 0 0 400px; - background: white; - border-radius: 20px; - padding: 30px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); - cursor: pointer; - transition: all 0.3s ease; - border: 1px solid #e9ecef; - - &:hover { - transform: translateY(-10px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); +.activity-row { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + + @media (max-width: 1024px) { + grid-template-columns: repeat(2, 1fr); } - + @media (max-width: 768px) { - flex: 0 0 300px; - padding: 20px; + grid-template-columns: 1fr; } } -.review-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 20px; +.activity-card { + background: white; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + border: 1px solid #e0e0e0; } -.customer-info { +.user-activity-header { display: flex; align-items: center; - gap: 15px; + padding: 15px; + border-bottom: 1px solid #f5f5f5; } -.avatar { - width: 60px; - height: 60px; +.user-avatar { + width: 50px; + height: 50px; border-radius: 50%; overflow: hidden; - border: 3px solid #3498db; - + margin-right: 15px; + img { width: 100%; height: 100%; @@ -430,360 +387,207 @@ onUnmounted(() => { } } -.customer-details { - h4, h3 { - margin: 0 0 5px 0; - color: #2c3e50; +.activity-info { + h4 { + margin: 0; + font-size: 16px; font-weight: 600; + color: #333; } - - .company { - color: #7f8c8d; - font-size: 0.9rem; - margin: 0 0 8px 0; - } - - .rating { - .fa-star { - color: #ddd; - font-size: 0.9rem; - margin-right: 2px; - - &.active { - color: #f39c12; - } - } + + .activity-time { + margin: 5px 0 0; + font-size: 14px; + color: #777; } } -.review-date { - color: #95a5a6; - font-size: 0.85rem; +.activity-content { + padding: 15px; } -.review-content { - margin-bottom: 20px; - - .review-text { - color: #34495e; - line-height: 1.6; - margin-bottom: 20px; - } +.place-name { + margin: 0 0 5px; + font-size: 20px; + font-weight: 600; + color: #333; } -.chat-preview { - .screenshot-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 10px; - margin-bottom: 15px; - } - - .screenshot-item { - position: relative; - aspect-ratio: 16/9; - border-radius: 8px; - overflow: hidden; - border: 2px solid #e9ecef; - - img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.3s ease; - } - - &:hover img { - transform: scale(1.05); - } +.place-category { + margin: 5px 0 15px; + font-size: 14px; + color: #666; +} - &.more-indicator .more-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.7); - display: flex; - align-items: center; - justify-content: center; - color: white; - font-weight: bold; - font-size: 1.2rem; +.rating { + margin-bottom: 10px; + display: flex; + align-items: center; + + .fa-star { + color: #ddd; + font-size: 18px; + margin-right: 2px; + + &.active { + color: #f39c12; } } + + .rating-count { + margin-left: 5px; + color: #666; + } +} - .view-more { - text-align: center; - color: #3498db; - font-size: 0.9rem; - font-weight: 500; +.photos-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + margin-bottom: 15px; +} - i { - margin-right: 5px; - } +.photos-single { + margin-bottom: 15px; + border-radius: 8px; + overflow: hidden; + + img { + width: 100%; + display: block; } } -.review-tags { - display: flex; - flex-wrap: wrap; - gap: 8px; - - .tag { - background: linear-gradient(135deg, #3498db, #2980b9); - color: white; - padding: 4px 12px; - border-radius: 15px; - font-size: 0.8rem; - font-weight: 500; +.photo-item { + aspect-ratio: 4/3; + border-radius: 8px; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; } } -.carousel-controls { +.action-buttons { display: flex; - align-items: center; - justify-content: center; - gap: 20px; - - .control-btn { - width: 50px; - height: 50px; + margin-bottom: 10px; + + .like-btn { + background: none; border: none; - background: #3498db; - color: white; - border-radius: 50%; + padding: 8px 12px; + margin-right: 10px; cursor: pointer; - transition: all 0.3s ease; display: flex; align-items: center; - justify-content: center; - - &:hover:not(:disabled) { - background: #2980b9; - transform: scale(1.1); - } - - &:disabled { - background: #bdc3c7; - cursor: not-allowed; + color: #777; + + i { + margin-right: 5px; } - } - - .indicators { - display: flex; - gap: 10px; - - .indicator { - width: 12px; - height: 12px; - border-radius: 50%; - background: #bdc3c7; - cursor: pointer; - transition: all 0.3s ease; - - &.active { - background: #3498db; - transform: scale(1.2); - } + + &:hover { + color: #3498db; } } } -// 弹窗样式 -.modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.8); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - padding: 20px; -} - -.modal-content { - background: white; - border-radius: 20px; - max-width: 800px; - width: 100%; - max-height: 90vh; - overflow-y: auto; - position: relative; -} - -.modal-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 30px 30px 20px; - border-bottom: 1px solid #e9ecef; - - .close-btn { - width: 40px; - height: 40px; - border: none; - background: #e74c3c; - color: white; - border-radius: 50%; - cursor: pointer; - transition: all 0.3s ease; - +.view-all { + a { + color: #3498db; + text-decoration: none; + font-size: 14px; + &:hover { - background: #c0392b; - transform: scale(1.1); + text-decoration: underline; } } } -.modal-body { - padding: 30px; - - h4 { - color: #2c3e50; - margin-bottom: 15px; - font-weight: 600; - } - - .review-content p { - color: #34495e; - line-height: 1.6; - margin-bottom: 30px; +.review-photo { + margin-bottom: 15px; + border-radius: 8px; + overflow: hidden; + + img { + width: 100%; + display: block; } } -.chat-screenshots { - margin-bottom: 30px; - - .screenshots-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 20px; - margin-top: 20px; - } - - .screenshot-full { - position: relative; - border-radius: 12px; - overflow: hidden; - cursor: pointer; - border: 2px solid #e9ecef; - transition: all 0.3s ease; - - &:hover { - transform: scale(1.02); - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); - } - - img { - width: 100%; - height: auto; - display: block; - } - - .screenshot-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s ease; - - i { - color: white; - font-size: 1.5rem; - } - } - - &:hover .screenshot-overlay { - opacity: 1; - } +.review-text { + margin: 10px 0; + font-size: 15px; + color: #333; + line-height: 1.5; +} - .screenshot-desc { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); - color: white; - padding: 15px 10px 10px; - font-size: 0.9rem; - text-align: center; - } +.read-more { + color: #3498db; + text-decoration: none; + font-size: 14px; + display: inline-block; + margin-bottom: 15px; + + &:hover { + text-decoration: underline; } } -.review-meta { +.interaction-stats { display: flex; - justify-content: space-between; - align-items: center; - padding-top: 20px; - border-top: 1px solid #e9ecef; - - .tags { + border-top: 1px solid #f5f5f5; + padding-top: 15px; + + .stat { display: flex; - flex-wrap: wrap; - gap: 8px; - } - - .review-date { - color: #7f8c8d; - font-size: 0.9rem; + align-items: center; + margin-right: 20px; + color: #777; + + i { + margin-right: 5px; + font-size: 16px; + } } } -// 图片查看器 +// 图片查看器样式 .image-viewer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.95); + background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; - z-index: 1100; - padding: 20px; + z-index: 1000; } .image-viewer-content { position: relative; max-width: 90vw; max-height: 90vh; - + img { max-width: 100%; - max-height: 100%; + max-height: 90vh; object-fit: contain; - border-radius: 8px; } - + .close-btn { position: absolute; - top: -50px; + top: -40px; right: 0; - width: 40px; - height: 40px; + background: none; border: none; - background: #e74c3c; color: white; - border-radius: 50%; + font-size: 24px; cursor: pointer; - transition: all 0.3s ease; - - &:hover { - background: #c0392b; - transform: scale(1.1); - } } } @@ -792,33 +596,9 @@ onUnmounted(() => { .customer-reviews { padding: 40px 0; } - + .reviews-header h2 { font-size: 2rem; } - - .reviews-track { - gap: 20px; - } - - .modal-content { - margin: 10px; - border-radius: 15px; - } - - .modal-header, - .modal-body { - padding: 20px; - } - - .chat-screenshots .screenshots-grid { - grid-template-columns: 1fr; - } - - .review-meta { - flex-direction: column; - align-items: flex-start; - gap: 15px; - } } \ No newline at end of file