58 lines
2.0 KiB
Vue
58 lines
2.0 KiB
Vue
|
<template>
|
||
|
|
<article class="detail-hero panel">
|
||
|
|
<div class="hero-banner">
|
||
|
|
<div class="hero-banner-main">
|
||
|
|
<div class="applicant-card">
|
||
|
|
<div class="portrait">
|
||
|
|
<img src="/assets/person.png" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="applicant-copy">
|
||
|
|
<div class="applicant-name-row">
|
||
|
|
<h2>{{ profile.name }}</h2>
|
||
|
|
<span class="identity-badge">{{ profile.identity }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="applicant-profile-meta">
|
||
|
|
<div class="applicant-profile-meta__org">
|
||
|
|
<span class="applicant-meta-item">
|
||
|
|
<em>部门</em>
|
||
|
|
<strong>{{ profile.department }}</strong>
|
||
|
|
</span>
|
||
|
|
<span class="applicant-meta-item applicant-meta-item--sub">
|
||
|
|
<em>直属上司</em>
|
||
|
|
<strong>{{ profile.manager }}</strong>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="applicant-profile-meta__role">
|
||
|
|
<span class="applicant-meta-item">
|
||
|
|
<em>职级</em>
|
||
|
|
<strong>{{ profile.grade }}</strong>
|
||
|
|
</span>
|
||
|
|
<span class="applicant-meta-item">
|
||
|
|
<em>岗位</em>
|
||
|
|
<strong>{{ profile.position }}</strong>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="hero-fact-grid">
|
||
|
|
<div v-for="item in heroFactItems" :key="item.key" class="hero-fact">
|
||
|
|
<div class="hero-fact-label">
|
||
|
|
<i v-if="item.icon" :class="item.icon"></i>
|
||
|
|
<span>{{ item.label }}</span>
|
||
|
|
</div>
|
||
|
|
<strong :class="item.valueClass">{{ item.value }}</strong>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
defineProps({
|
||
|
|
profile: { type: Object, required: true },
|
||
|
|
heroFactItems: { type: Array, default: () => [] }
|
||
|
|
})
|
||
|
|
</script>
|