menduner/src/views/recruit/enterprise/newTalentMap/search/components/careerPath.vue

<template>
  <div>
    <div class="title">职业轨迹</div>
    <v-container class="descriptions pa-0">
      <v-row no-gutters class="descriptions-row">
        <v-col :cols="12">
          <div class="d-flex text-center">
            <div class="label">酒店名称</div>
            <div class="label">职位名称</div>
            <div class="label">日期</div>
          </div>
        </v-col>
      </v-row>
      <template v-if="careerData?.length">
        <v-row no-gutters class="descriptions-row" v-for="(val, index) in careerData" :key="index+'career'">
          <v-col :cols="12">
            <div class="d-flex text-center">
              <div class="value">{{ val.company_name }}</div>
              <div class="value">{{ val.position }}</div>
              <div class="value">{{ val.current_date }}</div>
            </div>
          </v-col>
        </v-row>
      </template>
      <template v-else>
        <v-row no-gutters class="descriptions-row">
          <v-col :cols="12">
            <div class="d-flex text-center">
              <div class="value">-</div>
              <div class="value">-</div>
              <div class="value">-</div>
            </div>
          </v-col>
        </v-row>
      </template>
    </v-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
defineOptions({ name: 'NewTalentMapSearch-careerPath' })

const props = defineProps({data: Object})
const careerData = ref(props?.data?.career_path || [])

</script>
<style lang="scss" scoped>
.title {
  margin: 18px 0 12px;
  font-size: 18px;
  color: var(--v-primary-base);
  // color: #008bb7;
  font-weight: bold;
}
.descriptions {
  border-left: 1px solid #ebeef5;
  border-top: 1px solid #ebeef5;
  &-row{
    .label {
      width: 33.3%;
      padding: 8px 12px;
      color: #666;
      background-color: #f7f8fa;
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }
    .value {
      flex: 1;
      padding: 8px 12px;
      color: #333;
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }
  }
}
</style>