43 lines
1.0 KiB
Vue
43 lines
1.0 KiB
Vue
<template>
|
||
<div class="education-card animate-item">
|
||
<div class="education-header">
|
||
<div class="education-info">
|
||
<span class="period">{{ item.period }}</span>
|
||
<h3 class="degree">{{ item.degree }}</h3>
|
||
<h4 class="school">{{ item.school }}</h4>
|
||
</div>
|
||
<div class="education-icon">
|
||
<i class="fa fa-graduation-cap"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="description">{{ item.description }}</p>
|
||
|
||
<div class="education-details">
|
||
<h4 class="details-title">{{ item.detailsTitle }}：</h4>
|
||
<div class="details-tags">
|
||
<el-tag
|
||
v-for="(detail, i) in item.details"
|
||
:key="i"
|
||
type="warning"
|
||
effect="light"
|
||
>
|
||
{{ detail }}
|
||
</el-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { defineProps, PropType } from 'vue'
|
||
import { IEducation } from '@/types'
|
||
|
||
const props = defineProps({
|
||
item: {
|
||
required: true,
|
||
type: Object as PropType<IEducation>
|
||
}
|
||
})
|
||
</script>
|