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

<template>
  <div style="color: #4c4c4e; height: calc(100vh - 151px);">
    <div class="pt-5">
      <v-btn size="large" color="primary" variant="text" prepend-icon="mdi-chevron-triple-left" @click="router.go(-1)">返回上一页</v-btn>
    </div>
    <h1 class="my-5">{{ data.title }}</h1>
    <p class="font-weight-bold">{{ data.startDesc }}</p>
    <p v-if="data.startTitle" class="font-weight-bold mt-1">{{ data.startTitle }}</p>
    <ul v-if="data?.children && data?.children.length">
      <li v-for="(val, index) in data.children" :key="index">{{ val }}</li>
    </ul>
    <p v-if="data?.endDesc" :class="{'mt-5': type !== 'service'}">{{ data.endDesc }}</p>
  </div>
</template>

<script setup>
defineOptions({ name: 'headhunting-drill-service' })
import { ref } from 'vue'
import { serviceData } from '@/utils/headhuntingData'
import { useRouter } from 'vue-router'

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

const data = ref(serviceData.find(e => e.id === props.id))
</script>

<style scoped lang="scss">
ul {
  list-style: none;
  margin-left: 20px;
  margin-top: 10px;
  li {
    margin-bottom: 1.5rem;
  }
}
</style>