menduner-uniapp/pagesB/personnelDetails/components/eduExp.vue

<template>
	<view class="content">
    <view
      v-for="val in data"
      :key="val.id"
      class="content-item"
    >
      <view class="content-title">
        <view class="name">{{ val.schoolName }}</view>
        <view class="time">
          {{ timesTampChange(val.startTime ,'Y-M') }} - {{ timesTampChange(val.endTime ,'Y-M') }}
        </view>
      </view>
      <view class="content-subTitle">{{ val.major }} {{ dictObj.edu.find(e => e.value === val.educationType)?.label}}</view>
    </view>
  </view>
</template>

<script setup>
defineProps({ data: Array })
import { timesTampChange } from '@/utils/date'
import { dictObj } from '@/utils/position'
</script>

<style scoped lang="scss">
.content {
  &-item {
    padding: 20rpx 0;
  }
  &-title {
    display: flex;
    justify-content: space-between;
    .name {
      font-size: 30rpx;
      color: #333;
    }
    .time {
      color: #999;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      .icon {
        margin-left: 20rpx;
      }
    }
  }
  &-subTitle {
    font-size: 24rpx;
    margin-top: 6rpx;
    color: #999;
  }
  &-main {
    margin-top: 20rpx;
    font-size: 24rpx;
    color: #999;
  }
}
</style>