wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor code structure and remove redundant changes

Browse Source
This commit is contained in:
wangqiao
2025-08-15 16:45:15 +08:00
commit 99df1d1f81
220 changed files with 33086 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
pages/community/components/detaiil.vue Normal file
View File

@ -0,0 +1,192 @@
<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>