<template>
  <div
    class="cert-item"
    v-for="(cert, index) in talentInfo.certificates"
    :key="index"
  >
    <div
      v-if="index !== talentInfo.certificates.length - 1"
      class="border-left"
    ></div>
    <div class="cert-dot"></div>
    <div class="cert-info">
      <span class="cert-year">{{ cert.year }}</span>
      <span class="cert-desc">{{ cert.description }}</span>
    </div>
  </div>
  
</template>

<script setup lang="ts">
defineOptions({ name: 'Certificates' })
interface Certificate { year: string; description: string }
interface TalentInfo { certificates: Certificate[] }
defineProps<{ talentInfo: TalentInfo }>()
</script>

<style lang="scss" scoped>
.border-left {
  width: 1px;
  height: calc(100%);
  border-left: 2px dotted #e6f0ff;
  position: absolute;
  left: 7rpx;
  top: 0;
}
// 证书列表
.cert-item {
  display: flex;
  align-items: flex-start;
  position: relative;
}

.cert-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #1a65ff;
  //   margin-top: 12rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
  z-index: 1;
}

.cert-info {
  flex: 1;
  margin-bottom: 11rpx;
  margin-top: -10rpx;
  padding-bottom: 32rpx;
}

.cert-year {
  font-size: 25rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.cert-desc {
  font-size: 21rpx;
  color: #666;
}
</style>
