feat: 添加移动端页面组件和图片资源

components/m/detail-components/certificates.vue

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