menduner-uniapp/pagesB/headhunting/pages/details.vue

<template>
  <view>
    <template v-if="type === 'service' || type === 'industry'">
      <uni-title type="h1" :title="data.title" align="center"></uni-title>
      <view class="subTitle break">{{ data.startDesc }}</view>
      <view v-if="data.children" class="pa-3">
        <view v-for="item in data.children" :key="item" class="pa-2 subTitle">{{ item }}</view>
      </view>
      <view class="subTitle">{{ data.endDesc }}</view>
    </template>
    <template v-else-if="type === 'consultant'">
      <view class="pa-3">
        <view class="center mb-3">
          <image
            :src="data.avatar"
            mode="heightFix"
          />
          <view class="title-job">{{ data.job }}</view>
        </view>

        <view class="name mb-3">{{ data.title }}</view>
        <view class="tips mb-3">Consultant</view>
        <view v-if="data?.edu" class="mb-3">
          <view v-for="(edu, index) in data.edu" :key="index" class="mb-1 sub">{{ edu }}</view>
        </view>
        <view v-for="(k, i) in data.desc" :key="i" class="desc mb-3">{{ k }}</view>
      </view>
    </template>
    <template v-else></template>
    <Footer></Footer>
  </view>
</template>

<script setup>
import Footer from '../components/contact.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { serviceData, consultantData } from '@/utils/headhuntingData'

const data = ref({})
const type = ref('service')

onLoad((options) => {
  type.value = options.type
  const _data = {
    service: serviceData,
    consultant: consultantData,
    industry: serviceData
  }
  data.value = _data[options.type].find(e => e.id === options.key)
})
</script>

<style lang="scss" scoped>
.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;
  font-size: 36rpx;
  color: #00695C;
}
.tips {
  font-family: FFScalaWebItalic, Georgia, Utopia, Charter, serif;
  font-style: italic;
  font-weight: 400;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.pa-3 {
  padding: 30rpx;
}
.pa-2 {
  padding: 20rpx;
}
.mb-3 {
  margin-bottom: 30rpx;
}
.mb-1 {
  margin-bottom: 10rpx;
}
.break {
  color: #333 !important;
}
.sub {
  font-size: 28rpx;
  color: #666;
}
.subTitle {
  padding: 0 20rpx;
  font-size: 24rpx;
  margin-bottom: 20rpx;
  line-height: 40rpx;
  color: #666;
}

</style>