You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
604 lines
15 KiB
604 lines
15 KiB
<template>
|
|
<div class="customer-reviews">
|
|
<div class="reviews-header">
|
|
<h2><i class="fas fa-comments"></i> 客户评价</h2>
|
|
<div class="separator"></div>
|
|
<p class="subtitle">真实的客户反馈，见证我们的专业服务</p>
|
|
</div>
|
|
|
|
<div class="reviews-container">
|
|
<div class="activity-feed">
|
|
<!-- 第一行活动 -->
|
|
<div class="activity-row">
|
|
<div class="activity-card" data-aos="fade-down-right">
|
|
<div class="user-activity-header">
|
|
<div class="user-avatar">
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="张总" />
|
|
</div>
|
|
<div class="activity-info">
|
|
<h4>张总 添加了 3 张照片</h4>
|
|
<p class="activity-time">57 分钟前</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="activity-content">
|
|
<h3 class="place-name">星月楼</h3>
|
|
<p class="place-category">点心, 粤菜</p>
|
|
|
|
<div class="photos-grid">
|
|
<div class="photo-item">
|
|
<img src="https://via.placeholder.com/400x300/3498db/ffffff?text=菜品1" alt="菜品照片" />
|
|
</div>
|
|
<div class="photo-item">
|
|
<img src="https://via.placeholder.com/400x300/2ecc71/ffffff?text=菜品2" alt="菜品照片" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="like-btn">
|
|
<i class="far fa-thumbs-up"></i>
|
|
</button>
|
|
<button class="like-btn">
|
|
<i class="far fa-thumbs-up"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="view-all">
|
|
<a href="#">查看全部 3 张照片</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="activity-card" data-aos="fade-down">
|
|
<div class="user-activity-header">
|
|
<div class="user-avatar">
|
|
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="王总监" />
|
|
</div>
|
|
<div class="activity-info">
|
|
<h4>王总监 添加了一张照片</h4>
|
|
<p class="activity-time">9 小时前</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="activity-content">
|
|
<h3 class="place-name">天星维港游</h3>
|
|
<div class="rating">
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<span class="rating-count">3</span>
|
|
</div>
|
|
<p class="place-category">旅游</p>
|
|
|
|
<div class="photos-single">
|
|
<img src="https://via.placeholder.com/800x400/34495e/ffffff?text=维港夜景" alt="维港夜景" />
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="like-btn">
|
|
<i class="far fa-thumbs-up"></i>
|
|
<span>5 赞</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="activity-card" data-aos="fade-down-left">
|
|
<div class="user-activity-header">
|
|
<div class="user-avatar">
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="李经理" />
|
|
</div>
|
|
<div class="activity-info">
|
|
<h4>李经理 发表了评论</h4>
|
|
<p class="activity-time">1 天前</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="activity-content">
|
|
<div class="review-photo">
|
|
<img src="https://via.placeholder.com/800x400/e74c3c/ffffff?text=美食照片" alt="美食照片" />
|
|
</div>
|
|
|
|
<h3 class="place-name">Belon</h3>
|
|
<div class="rating">
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
</div>
|
|
|
|
<p class="review-text">世界是一个美丽的地方，米其林星级餐厅Belon拥有杰出的厨师团队...</p>
|
|
<a href="#" class="read-more">阅读更多</a>
|
|
|
|
<div class="interaction-stats">
|
|
<div class="stat">
|
|
<i class="far fa-lightbulb"></i>
|
|
<span>7</span>
|
|
</div>
|
|
<div class="stat">
|
|
<i class="far fa-hand-point-up"></i>
|
|
<span>2</span>
|
|
</div>
|
|
<div class="stat">
|
|
<i class="far fa-heart"></i>
|
|
<span>4</span>
|
|
</div>
|
|
<div class="stat">
|
|
<i class="far fa-smile"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第二行活动 -->
|
|
<div class="activity-row">
|
|
<div class="activity-card" data-aos="fade-up-right">
|
|
<div class="user-activity-header">
|
|
<div class="user-avatar">
|
|
<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="王总监" />
|
|
</div>
|
|
<div class="activity-info">
|
|
<h4>王总监 添加了 4 张照片</h4>
|
|
<p class="activity-time">1 天前</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="activity-content">
|
|
<h3 class="place-name">Belon</h3>
|
|
<div class="rating">
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star"></i>
|
|
<span class="rating-count">8</span>
|
|
</div>
|
|
<p class="place-category">法国菜</p>
|
|
|
|
<div class="photos-grid">
|
|
<div class="photo-item">
|
|
<img src="https://via.placeholder.com/400x300/e74c3c/ffffff?text=法式甜点" alt="法式甜点" />
|
|
</div>
|
|
<div class="photo-item">
|
|
<img src="https://via.placeholder.com/400x300/3498db/ffffff?text=主菜" alt="主菜" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="like-btn">
|
|
<i class="far fa-thumbs-up"></i>
|
|
<span>9 赞</span>
|
|
</button>
|
|
<button class="like-btn">
|
|
<i class="far fa-thumbs-up"></i>
|
|
<span>9 赞</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="view-all">
|
|
<a href="#">查看全部 4 张照片</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="activity-card" data-aos="fade-up">
|
|
<div class="user-activity-header">
|
|
<div class="user-avatar">
|
|
<img src="https://randomuser.me/api/portraits/men/44.jpg" alt="刘先生" />
|
|
</div>
|
|
<div class="activity-info">
|
|
<h4>刘先生 发表了评论</h4>
|
|
<p class="activity-time">1 天前</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="activity-content">
|
|
<div class="review-photo">
|
|
<img src="https://via.placeholder.com/800x400/1abc9c/ffffff?text=自助餐照片" alt="自助餐照片" />
|
|
</div>
|
|
|
|
<h3 class="place-name">The Place</h3>
|
|
<div class="rating">
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
<i class="fas fa-star"></i>
|
|
</div>
|
|
|
|
<p class="review-text">对于748港币每位的自助餐，品质非常糟糕！不推荐来这个地方...</p>
|
|
<a href="#" class="read-more">阅读更多</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="activity-card" data-aos="fade-up-left">
|
|
<div class="user-activity-header">
|
|
<div class="user-avatar">
|
|
<img src="https://randomuser.me/api/portraits/men/44.jpg" alt="刘先生" />
|
|
</div>
|
|
<div class="activity-info">
|
|
<h4>刘先生 添加了一张照片</h4>
|
|
<p class="activity-time">1 天前</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="activity-content">
|
|
<h3 class="place-name">The Place</h3>
|
|
<div class="rating">
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star active"></i>
|
|
<i class="fas fa-star"></i>
|
|
<span class="rating-count">8</span>
|
|
</div>
|
|
<p class="place-category">$$ • 自助餐</p>
|
|
|
|
<div class="photos-single">
|
|
<img src="https://via.placeholder.com/800x400/f39c12/ffffff?text=自助餐厅" alt="自助餐厅" />
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button class="like-btn">
|
|
<i class="far fa-thumbs-up"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图片查看器 -->
|
|
<div v-if="showImageViewer" class="image-viewer-overlay" @click="closeImageViewer">
|
|
<div class="image-viewer-content">
|
|
<img :src="currentImage" alt="照片大图" />
|
|
<button class="close-btn" @click="closeImageViewer">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
// 响应式数据
|
|
const showImageViewer = ref(false)
|
|
const currentImage = ref('')
|
|
|
|
// 方法
|
|
const openImageViewer = (imageUrl) => {
|
|
currentImage.value = imageUrl
|
|
showImageViewer.value = true
|
|
}
|
|
|
|
const closeImageViewer = () => {
|
|
showImageViewer.value = false
|
|
currentImage.value = ''
|
|
}
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
// 初始化
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
// 清理
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.customer-reviews {
|
|
padding: 80px 0;
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
}
|
|
|
|
.reviews-header {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
|
|
h2 {
|
|
font-size: 2.5rem;
|
|
color: #2c3e50;
|
|
margin-bottom: 20px;
|
|
font-weight: 700;
|
|
|
|
i {
|
|
color: #3498db;
|
|
margin-right: 15px;
|
|
}
|
|
}
|
|
|
|
.separator {
|
|
width: 80px;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #3498db, #2980b9);
|
|
margin: 0 auto 20px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.1rem;
|
|
color: #7f8c8d;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
.reviews-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.activity-feed {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
|
|
.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) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.activity-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
border: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.user-activity-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-right: 15px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.activity-info {
|
|
h4 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.activity-time {
|
|
margin: 5px 0 0;
|
|
font-size: 14px;
|
|
color: #777;
|
|
}
|
|
}
|
|
|
|
.activity-content {
|
|
padding: 15px;
|
|
}
|
|
|
|
.place-name {
|
|
margin: 0 0 5px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.place-category {
|
|
margin: 5px 0 15px;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.photos-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.photos-single {
|
|
margin-bottom: 15px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.photo-item {
|
|
aspect-ratio: 4/3;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
|
|
.like-btn {
|
|
background: none;
|
|
border: none;
|
|
padding: 8px 12px;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #777;
|
|
|
|
i {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
&:hover {
|
|
color: #3498db;
|
|
}
|
|
}
|
|
}
|
|
|
|
.view-all {
|
|
a {
|
|
color: #3498db;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.review-photo {
|
|
margin-bottom: 15px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
|
|
img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.review-text {
|
|
margin: 10px 0;
|
|
font-size: 15px;
|
|
color: #333;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.read-more {
|
|
color: #3498db;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
margin-bottom: 15px;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.interaction-stats {
|
|
display: flex;
|
|
border-top: 1px solid #f5f5f5;
|
|
padding-top: 15px;
|
|
|
|
.stat {
|
|
display: flex;
|
|
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.9);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.image-viewer-content {
|
|
position: relative;
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 90vh;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.close-btn {
|
|
position: absolute;
|
|
top: -40px;
|
|
right: 0;
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
// 响应式设计
|
|
@media (max-width: 768px) {
|
|
.customer-reviews {
|
|
padding: 40px 0;
|
|
}
|
|
|
|
.reviews-header h2 {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
</style>
|