55 lines
1.5 KiB
Vue
55 lines
1.5 KiB
Vue
<template>
|
|
<div class="timeline-item animate-item">
|
|
<!-- 时间点标记 -->
|
|
<div class="timeline-dot">
|
|
<i class="fa fa-project-diagram"></i>
|
|
</div>
|
|
|
|
<!-- 内容容器 -->
|
|
<div class="timeline-content">
|
|
<div class="project-header">
|
|
<span class="period">{{ props.item.period }}</span>
|
|
<h3 class="name">{{ props.item.name }}</h3>
|
|
<h4 class="role">{{ props.item.role }}</h4>
|
|
</div>
|
|
|
|
<p class="description">{{ props.item.description }}</p>
|
|
|
|
<div class="content" v-if="props.item.content && props.item.content.length > 0">
|
|
<h4>主要职责</h4>
|
|
<ul>
|
|
<li v-for="(resp, i) in props.item.content" :key="i">{{ resp }}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="project-tags">
|
|
<el-tag v-for="(tag, index) in props.item.tags" :key="index" effect="light">
|
|
{{ tag }}
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图片 -->
|
|
<div class="timeline-image" v-if="props.item.images.length > 0">
|
|
<el-carousel height="450px">
|
|
<el-carousel-item v-for="(item, index) in props.item.images" :key="index">
|
|
<el-image :src="getAssetsImageFile(item)" fit="contain" class="project-image" />
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineProps, PropType } from 'vue'
|
|
import { IProject } from '@/types'
|
|
import { getAssetsImageFile } from '@/utils'
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
required: true,
|
|
type: Object as PropType<IProject>
|
|
}
|
|
})
|
|
</script>
|