Refactor code structure and remove redundant changes
This commit is contained in:
wangqiao
50
pages/community/components/TeacherCard.vue
Normal file
50
pages/community/components/TeacherCard.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="teacher-card">
|
||||
<div class="avatar">
|
||||
<!-- 这里可以放置教师头像 -->
|
||||
</div>
|
||||
<h3>{{ teacher.name }}</h3>
|
||||
<p class="title">{{ teacher.title }}</p>
|
||||
<div class="tags">
|
||||
<span v-for="tag in teacher.tags" :key="tag" class="tag">
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
teacher: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.teacher-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: #e8f3ff;
|
||||
color: #4080ff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
</style>
|
||||
99
pages/community/components/TeacherDetailCard.vue
Normal file
99
pages/community/components/TeacherDetailCard.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="teacher-detail-card">
|
||||
<div class="header">
|
||||
<div class="avatar">
|
||||
<!-- 这里可以放置教师头像 -->
|
||||
</div>
|
||||
<div class="info">
|
||||
<h3>{{ teacher.name }}</h3>
|
||||
<p class="university">{{ teacher.university }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<span class="number">{{ teacher.works }}</span>
|
||||
<span class="label">作品</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="number">{{ teacher.students }}</span>
|
||||
<span class="label">粉丝</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span v-for="tag in teacher.tags" :key="tag" class="tag">
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="description">{{ teacher.description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
teacher: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.teacher-detail-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: #e8f3ff;
|
||||
color: #4080ff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
187
pages/community/components/Timeline.vue
Normal file
187
pages/community/components/Timeline.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div class="timeline-section">
|
||||
<h2 class="section-title">
|
||||
<i class="timeline-icon"></i>
|
||||
个人履历
|
||||
</h2>
|
||||
<div class="timeline">
|
||||
<!-- 时间节点 -->
|
||||
<div class="timeline-items">
|
||||
<div v-for="(item, index) in timelineData" :key="index" :class="['timeline-item', index % 2 === 0 ? 'top' : 'bottom']">
|
||||
<div class="content">
|
||||
<div class="year">{{ item.year }}</div>
|
||||
<div class="description">{{ item.description }}</div>
|
||||
</div>
|
||||
<div class="dot" :class="{ active: index === 0 }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const timelineData = ref([
|
||||
{
|
||||
year: '2020年',
|
||||
description: '新创设计21号项目设计~某月某空中机',
|
||||
},
|
||||
{
|
||||
year: '2021年',
|
||||
description: '南京工业大学机器人实验室项目',
|
||||
},
|
||||
{
|
||||
year: '2022年',
|
||||
description: '新创设计21号项目设计~某月某空中机',
|
||||
},
|
||||
{
|
||||
year: '2023年',
|
||||
description: '南京工业大学机器人实验室项目',
|
||||
},
|
||||
{
|
||||
year: '2023年',
|
||||
description: '南京工业大学机器人实验室项目',
|
||||
},
|
||||
{
|
||||
year: '2023年',
|
||||
description: '南京工业大学机器人实验室项目',
|
||||
},
|
||||
// 可以继续添加更多数据...
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.timeline-section {
|
||||
margin: 30px 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.timeline-items {
|
||||
position: relative;
|
||||
display: grid; /* 改用grid布局 */
|
||||
grid-template-columns: repeat(4, 1fr); /* 4列 */
|
||||
gap: 60px 20px; /* 行间距60px，列间距20px */
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
/* 时间轴横线 - 为每一行创建独立的线 */
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
right: -10px;
|
||||
top: 50%;
|
||||
height: 2px;
|
||||
background-color: #e8f3ff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 连接相邻项目的横线 */
|
||||
.timeline-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
right: -50%;
|
||||
top: 50%;
|
||||
height: 2px;
|
||||
background-color: #e8f3ff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 最后一个项目不需要连接线 */
|
||||
.timeline-item:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-item.top {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline-item.bottom {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
border: 2px solid #005be5;
|
||||
margin: 15px 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background-color: #005be5;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top .content {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.bottom .content {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.year {
|
||||
font-size: 16px;
|
||||
color: #005be5;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media screen and (max-width: 1200px) {
|
||||
.timeline-items {
|
||||
grid-template-columns: repeat(3, 1fr); /* 3列 */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.timeline-items {
|
||||
grid-template-columns: repeat(2, 1fr); /* 2列 */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.timeline-items {
|
||||
grid-template-columns: 1fr; /* 1列 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
83
pages/community/components/WorkCard.vue
Normal file
83
pages/community/components/WorkCard.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="work-card">
|
||||
<div class="work-image">
|
||||
<img :src="work.image" :alt="work.title" />
|
||||
</div>
|
||||
<div class="work-info">
|
||||
<h3>{{ work.title }}</h3>
|
||||
<div class="work-stats">
|
||||
<span>
|
||||
<i class="icon-view"></i>
|
||||
{{ work.views }}
|
||||
</span>
|
||||
<span>
|
||||
<i class="icon-like"></i>
|
||||
{{ work.likes }}
|
||||
</span>
|
||||
<span>
|
||||
<i class="icon-comment"></i>
|
||||
{{ work.comments }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="work-author">
|
||||
<img :src="work.authorAvatar" :alt="work.author" />
|
||||
<span>by {{ work.author }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps({
|
||||
work: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.work-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.work-image {
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.work-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.work-info {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.work-stats {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.work-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.work-author img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
192
pages/community/components/detaiil.vue
Normal file
192
pages/community/components/detaiil.vue
Normal 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>
|
||||
Reference in New Issue
Block a user