front-pc/pages/community/components/detaiil.vue

<template>
  <KlNavTab active="牛人社区" />
  <div class="expert-detail">
    <!-- 头部信息区域 -->
    <div class="header-section">
      <div class="expert-basic-info">
        <div class="avatar">
          <img :src="expert.avatar" alt="专家头像" />
        </div>
        <div class="info">
          <h1>{{ expert.name }}</h1>
          <p class="university">毕业院校：{{ expert.university }}</p>
          <div class="stats">
            <div class="stat-item">
              <i class="icon-works"></i>
              <span>作品：{{ expert.works }}</span>
            </div>
            <div class="stat-item">
              <i class="icon-followers"></i>
              <span>粉丝：{{ expert.followers }}</span>
            </div>
          </div>
          <div class="tags">
            <span v-for="tag in expert.tags" :key="tag" class="tag">{{ tag }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 技术证书区域 -->
    <div class="certificate-section">
      <h2>技术证书</h2>
      <div class="certificate-list">
        <div v-for="(cert, index) in certificates" :key="index" class="certificate-item">
          <img :src="cert.image" :alt="'证书 ' + (index + 1)" />
        </div>
      </div>
    </div>

    <!-- 个人履历 -->
    <Timeline />

    <!-- 工程师简介 -->
    <div class="introduction-section">
      <h2>工程师简介</h2>
      <p>{{ expert.introduction }}</p>
    </div>

    <!-- 作品展示 -->
    <div class="works-section">
      <h2>作品展示</h2>
      <div class="works-grid">
        <WorkCard v-for="work in works" :key="work.id" :work="work" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import WorkCard from './WorkCard.vue'
  import Timeline from './Timeline.vue'

  const expert = ref({
    name: '王刚',
    avatar: '/path/to/avatar.jpg',
    university: '重庆工商大学',
    works: 568,
    followers: 378,
    tags: ['五金工具', '电子产品'],
    introduction: '你好！我是专注于工业设计和机械设计领域的专业设计师，擅长进行方案设计、结构设计、钣金设计等各类工程设计工作。具有丰富经验...',
  })

  const certificates = ref([
    { image: '/path/to/cert1.jpg' },
    { image: '/path/to/cert2.jpg' },
    { image: '/path/to/cert3.jpg' },
    { image: '/path/to/cert4.jpg' },
    { image: '/path/to/cert5.jpg' },
    { image: '/path/to/cert6.jpg' },
  ])

  const works = ref([
    {
      id: 1,
      title: '高压细水资灭火推车组建',
      image: '/path/to/work1.jpg',
      views: 28,
      likes: 15,
      comments: 5,
      author: '王刚',
    },
    // ... 更多作品
  ])
</script>

<style scoped>
  .expert-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  .header-section {
    background: linear-gradient(to right, #002b6f, #005be5);
    color: white;
    padding: 40px;
    border-radius: 8px;
  }

  .expert-basic-info {
    display: flex;
    gap: 30px;
  }

  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, 0.2);
  }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .stats {
    display: flex;
    gap: 20px;
    margin: 15px 0;
  }

  .tag {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 15px;
    margin-right: 10px;
    font-size: 14px;
  }

  .certificate-list {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
  }

  .certificate-item {
    width: 180px;
    height: 120px;
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
  }

  .timeline {
    position: relative;
    margin: 40px 0;
    padding-left: 30px;
  }

  .timeline-item {
    position: relative;
    padding-bottom: 30px;
  }

  .time-point {
    position: absolute;
    left: -30px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #005be5;
    border: 2px solid #fff;
  }

  .works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }

  h2 {
    margin: 40px 0 20px;
    font-size: 24px;
    color: #333;
  }
</style>