hanhai-official-website/src/components/CustomerReviews.vue

<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>