website_www/src/pages/about/Index.vue

<template>
  <DefaultLayout>
    <!-- banner -->
    <section class="banner-section">
      <img src="@assets/about-banner-s1.png" alt="" srcset="">
    </section>
    <section class="banner-section about-us">
      <img src="@assets/about-banner-s2.png" alt="" srcset="">

      <!-- 数据模块 -->
      <div class="data-stats" ref="dataStatsRef">
        <div class="stats-item">
          <div class="stats-number">{{ animatedStats.avgAge }}</div>
          <div class="stats-label">员工平均年龄</div>
        </div>
        <div class="stats-divider"></div>
        <div class="stats-item">
          <div class="stats-number">{{ animatedStats.education }}%</div>
          <div class="stats-label">本科学历以上占比</div>
        </div>
        <div class="stats-divider"></div>
        <div class="stats-item">
          <div class="stats-number">{{ animatedStats.technical }}%</div>
          <div class="stats-label">专业技术人员占比</div>
        </div>
        <div class="stats-divider"></div>
        <div class="stats-item">
          <div class="stats-number">{{ animatedStats.professional }}%</div>
          <div class="stats-label">行业专业技术人才占比</div>
        </div>
        <div class="stats-divider"></div>
        <div class="stats-item">
          <div class="stats-number">{{ animatedStats.senior }}%</div>
          <div class="stats-label">中高级职称人员占比</div>
        </div>
      </div>
    </section>
    <section class="banner-section">
      <img src="@assets/about-banner-s3.png" alt="" srcset="">
    </section>

    <!-- 企业资质 -->
    <section class="qualification-section">
      <div class="container">
        <!-- 标题 -->
        <div class="section-title">
          <h2>企业资质</h2>
          <p class="title-en">ENTERPRISE QUALIFICATION</p>
        </div>

        <!-- 证书切换按钮 -->
        <div class="certificate-tabs">
          <button v-for="(category, index) in certificateCategories" :key="index"
            :class="['tab-btn', { active: activeTab === index }]" @click="switchTab(index)">
            {{ category.name }}
          </button>
        </div>

        <!-- 证书列表 -->
        <div class="certificate-container">
          <!-- 加载状态 -->
          <div v-if="loading" class="loading-state">
            <div class="loading-spinner"></div>
            <p>正在加载证书数据...</p>
          </div>
          
          <!-- 无数据状态 -->
          <div v-else-if="currentCertificates.length === 0" class="empty-state">
            <p>暂无{{ certificateCategories[activeTab]?.name }}数据</p>
          </div>
          
          <!-- 证书内容 -->
          <div v-else>
            <div class="certificate-slider"
              :style="{ transform: `translateX(-${currentSlide * itemWidth * itemsPerPage}px)` }">
              <div v-for="(certificate, index) in currentCertificates" :key="certificate.id || index" class="certificate-item">
                <img :src="imgHost+certificate.image" :alt="certificate.title" @error="handleImageError" />
                <!-- <p class="certificate-title">{{ certificate.title }}</p> -->
              </div>
            </div>

            <!-- 左右切换按钮 -->
            <button v-if="showNavButtons && currentSlide > 0" class="nav-btn nav-btn-left" @click="prevSlide">
              <img src="@assets/slide-arrow-left.png" alt="上一页" />
            </button>
            <button v-if="showNavButtons && currentSlide < maxSlide" class="nav-btn nav-btn-right" @click="nextSlide">
              <img src="@assets/slide-arrow-right.png" alt="下一页" />
            </button>
          </div>
        </div>
      </div>
    </section>
  </DefaultLayout>
</template>

<script>
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { getCompanyCertList } from '@/api/modules/home'
import DefaultLayout from '@/layouts/DefaultLayout.vue'
import { animateNumber, createNumberAnimationObserver } from '@/utils/numberAnimation'

export default {
  name: 'AboutPage',
  components: {
    DefaultLayout
  },
  setup() {
    // 环境变量
    const imgHost = import.meta.env.VITE_APP_IMG_HOST
    // 当前激活的标签页
    const activeTab = ref(0)
    // 当前滑动位置
    const currentSlide = ref(0)
    // 每页显示的证书数量
    const itemsPerPage = ref(5)
    // 每个证书项的宽度（包括间距）
    const itemWidth = ref(220)
    // 加载状态
    const loading = ref(false)

    // 数据统计相关
    const dataStatsRef = ref(null)
    const animationObserver = ref(null)
    
    // 动画数字状态
    const animatedStats = ref({
      avgAge: 0,
      education: 0,
      technical: 0,
      professional: 0,
      senior: 0
    })

    // 目标数字
    const targetStats = {
      avgAge: 31,
      education: 83,
      technical: 57,
      professional: 38,
      senior: 53
    }

    // 证书分类数据
    const certificateCategories = ref([
      {
        name: '授权证书',
        certType: 0,
        certificates: []
      },
      {
        name: '著作证书',
        certType: 1,
        certificates: []
      },
      {
        name: '荣誉证书',
        certType: 2,
        certificates: []
      }
    ])

    // 当前分类的证书列表
    const currentCertificates = computed(() => {
      return certificateCategories.value[activeTab.value]?.certificates || []
    })

    // 是否显示导航按钮
    const showNavButtons = computed(() => {
      return currentCertificates.value.length > itemsPerPage.value
    })

    // 最大滑动页数
    const maxSlide = computed(() => {
      return Math.max(0, Math.ceil(currentCertificates.value.length / itemsPerPage.value) - 1)
    })

    // 切换标签页
    const switchTab = (index) => {
      activeTab.value = index
      currentSlide.value = 0 // 重置滑动位置
    }

    // 上一页
    const prevSlide = () => {
      if (currentSlide.value > 0) {
        currentSlide.value--
      }
    }

    // 下一页
    const nextSlide = () => {
      if (currentSlide.value < maxSlide.value) {
        currentSlide.value++
      }
    }

    // 图片加载错误处理
    const handleImageError = (event) => {
      // 设置默认图片或隐藏
      event.target.src = 'https://via.placeholder.com/256x354?text=证书图片'
    }

    // 加载证书数据
    const loadCertificates = async () => {
      try {
        loading.value = true
        const response = await getCompanyCertList({companyId:1})
        // console.log('证书数据',response)
        
        if (response && response.rows) {
          // 清空现有证书数据
          certificateCategories.value.forEach(category => {
            category.certificates = []
          })
          
          // 根据certType分类证书
          response.rows.forEach(cert => {
            const category = certificateCategories.value.find(cat => cat.certType === cert.certType)
            if (category) {
              category.certificates.push({
                id: cert.id,
                title: cert.certName || cert.title,
                image: cert.certFront || cert.certBack,
                certType: cert.certType
              })
            }
            // console.log('证书数据category',category)
          })
        }
      } catch (error) {
        console.error('加载证书数据失败:', error)
      } finally {
        loading.value = false
      }
    }

    // 启动数字动画
    const startStatsAnimation = () => {
      // 为每个统计数字创建动画，添加延迟以创建连续效果
      const delays = [0, 200, 400, 600, 800]
      
      Object.keys(targetStats).forEach((key, index) => {
        setTimeout(() => {
          animateNumber(
            (value) => {
              animatedStats.value[key] = value
            },
            targetStats[key],
            2000 // 2秒动画时长
          )
        }, delays[index])
      })
    }

    // 设置数字动画观察器
    const setupStatsAnimation = () => {
      if (dataStatsRef.value) {
        animationObserver.value = createNumberAnimationObserver(
          '.data-stats',
          startStatsAnimation,
          {
            threshold: 0.3,
            rootMargin: '0px 0px -50px 0px'
          }
        )
      }
    }

    onMounted(() => {
      loadCertificates()
      // 延迟设置动画观察器，确保DOM已渲染
      setTimeout(setupStatsAnimation, 100)
    })

    onUnmounted(() => {
      // 清理观察器
      if (animationObserver.value) {
        animationObserver.value.disconnect()
      }
    })

    return {
      imgHost,
      activeTab,
      currentSlide,
      itemWidth,
      itemsPerPage,
      loading,
      certificateCategories,
      currentCertificates,
      showNavButtons,
      maxSlide,
      switchTab,
      prevSlide,
      nextSlide,
      handleImageError,
      // 数字动画相关
      dataStatsRef,
      animatedStats
    }
  }
}
</script>

<style lang="scss" scoped>
// banner区域
.banner-section {
  position: relative;

  img {
    width: 100%;
  }

  // 数据统计模块
  &.about-us {
    .data-stats {
      position: absolute;
      bottom: 98px;
      left: 10%;
      right: 10%;
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      padding: 30px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      gap: 60px;

      .stats-item {
        text-align: center;
        color: #0054FF;

        .stats-number {
          font-size: 48px;
          font-weight: 700;
          line-height: 1;
          margin-bottom: 8px;
        }

        .stats-label {
          font-size: 14px;
          font-weight: 400;
          color: #333;
          white-space: nowrap;
        }
      }

      .stats-divider {
        width: 1px;
        height: 60px;
        background: linear-gradient(to bottom, transparent, #ddd 20%, #ddd 80%, transparent);
      }
    }
  }
}

// 企业资质区域
.qualification-section {
  padding: 80px 0;
  position: relative;

  &::before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: -3px;
    bottom: -138px;
    background: url('@assets/about-bg1.png') no-repeat center center;
    ;
    background-size: cover;
  }

  .container {
    margin: 0 auto;
    padding: 0 20px;
  }

  // 标题样式
  .section-title {
    text-align: center;
    margin-bottom: 125px;

    h2 {
      font-size: 36px;
      font-weight: 600;
      color: #333;
      margin-bottom: 10px;
      position: relative;
    }

    .title-en {
      font-size: 14px;
      color: #999;
      letter-spacing: 2px;
      margin-top: 15px;
    }
  }

  // 证书切换标签
  .certificate-tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    // gap: 20px;

    .tab-btn {
      padding: 12px 30px;
      border: 2px solid #F5F9FD;
      background: #F5F9FD;
      color: #666;
      font-size: 16px;
      font-weight: 500;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-sizing: border-box;
      width: 440px;

      &:hover {
        border-color: #2E64AF;
        color: #0862C8;
      }

      &.active {
        background: #EAF2FA;
        border-color: #2E64AF;
        color: #0862C8;
        box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
      }
    }
  }

  // 证书容器
  .certificate-container {
    position: relative;
    overflow: hidden;
    padding: 60px; // 为导航按钮留出空间
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    min-height: 400px;

    // 加载状态
    .loading-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 300px;
      color: #666;

      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #0862C8;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20px;
      }

      p {
        font-size: 16px;
        margin: 0;
      }
    }

    // 空状态
    .empty-state {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 300px;
      color: #999;
      font-size: 16px;

      p {
        margin: 0;
      }
    }

    .certificate-slider {
      display: flex;
      transition: transform 0.5s ease;
      gap: 44px;
    }

    .certificate-item {
      flex: 0 0 256px;
      text-align: center;
      // background: #fff;
      border-radius: 12px;
      // padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
      }

      img {
        width: 100%;
        height: 354px;
        object-fit: cover;
        // border-radius: 8px;
        // margin-bottom: 15px;
        border: 1px solid #f0f0f0;
      }

      .certificate-title {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        line-height: 1.4;
        margin: 0;
      }
    }

    // 导航按钮
    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #e0e0e0;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      z-index: 10;

      &:hover {
        background: #fff;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-50%) scale(1.1);
      }

      img {
        width: 16px;
        height: 16px;
      }

      &.nav-btn-left {
        left: 10px;
      }

      &.nav-btn-right {
        right: 10px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .banner-section.about-us {
    .data-stats {
      padding: 20px 15px;
      gap: 30px;
      flex-wrap: wrap;

      .stats-item {
        .stats-number {
          font-size: 36px;
        }

        .stats-label {
          font-size: 12px;
        }
      }

      .stats-divider {
        height: 40px;
      }
    }
  }

  .qualification-section {
    padding: 60px 0;

    .section-title {
      margin-bottom: 40px;

      h2 {
        font-size: 28px;
      }
    }

    .certificate-tabs {
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 30px;

      .tab-btn {
        padding: 10px 20px;
        font-size: 14px;
      }
    }

    .certificate-container {
      padding: 0 50px;

      .certificate-item {
        flex: 0 0 160px;
        padding: 15px;

        img {
          height: 200px;
        }

        .certificate-title {
          font-size: 12px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .banner-section.about-us {
    .data-stats {
      padding: 15px 10px;
      gap: 20px;

      .stats-item {
        .stats-number {
          font-size: 28px;
        }

        .stats-label {
          font-size: 11px;
        }
      }

      .stats-divider {
        height: 30px;
      }
    }
  }

  .qualification-section {
    .certificate-container {
      padding: 0 40px;

      .certificate-item {
        flex: 0 0 140px;
        padding: 12px;

        img {
          height: 180px;
        }
      }
    }
  }
}

// 动画
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>