menduner/src/views/headhunting/drill/consultant.vue

<template>
  <div style="color: #4c4c4e;">
    <div class="mt-5">
      <v-breadcrumbs :items="paths" class="pa-0 ma-0"></v-breadcrumbs>
    </div>
    <div class="d-flex mt-10 justify-space-between">
      <div>
        <v-img :src="data.avatar" width="250" height="350"></v-img>
        <p class="title-job">{{ data.job }}</p>
      </div>
      <div class="mt-10">
        <h1 class="name">{{ data.title }}</h1>
        <p class="tips mt-3">Consultant</p>
        <p class="country">{{ data.country }}</p>
        <ul v-if="data?.edu" class="mt-5">
          <li v-for="(edu, index) in data.edu" :key="index">{{ edu }}</li>
        </ul>
      </div>
    </div>
    <div class="mt-10" style="flex: 1;">
      <p v-for="(k, i) in data.desc" :key="i" class="desc">{{ k }}</p>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'headhunting-drill-consultant'})
import { ref } from 'vue'
import { consultantData } from '@/utils/headhuntingData'

const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})

const data = ref(consultantData.find(e => e.id === props.id))

const paths = [
  { title: '主页', disabled: false, href: '/headhunting' },
  { title: '我们的顾问', disabled: true, href: '' },
  { title: data.value.title, disabled: true, href: '' }
]
</script>

<style scoped lang="scss">
.info {
  width: 400px;
}
.desc {
  margin-bottom: 20px;
}
li {
  list-style-type: none;
}
.title-name {
  font-family: FFScalaWebBold, Georgia, Utopia, Charter, serif;
  font-weight: 700;
}
.title-job {
  font-family: FFScalaWebItalic, Georgia, Utopia, Charter, sans-serif;
  font-style: italic;
  font-weight: 400;
}
.name {
  font-family: FFScalaWebBold, Georgia, Utopia, Charter, sans-serif;
  font-style: normal;
  font-weight: 700;
  color: #00695C;
}
.tips {
  font-family: FFScalaWebItalic, Georgia, Utopia, Charter, serif;
  font-style: italic;
  font-weight: 400;
}
.country {
  font-family: FFScalaWebItalic, Georgia, Utopia, Charter, sans-serif;
  font-style: italic;
  font-weight: 400;
  color: #00695C;
}
</style>