menduner-uniapp/pagesB/personnelDetails/components/trainingExperience.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.orgName }}</view>
        <view class="time">
          {{ timesTampChange(val.startTime ,'Y-M') }} - {{ val.endTime ? timesTampChange(val.endTime ,'Y-M') : '至今' }}
        </view>
      </view>
      <view class="content-subTitle">课程：{{ val.course }}</view>
      <view class="content-main ellipsis-2">
				内容：
				<rich-text v-if="val.content" :nodes="cleanedHtml(val.content)"></rich-text>
			</view>
    </view>
  </view>
</template>

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

const cleanedHtml = (text) => {
  const cleaned = text.replace(/\n/g, '<br>')
  .replace(/\s+/g, ' ')
  .replace(/(^|\s+)<\/p>(\s*<p>|$)/g, '</p><p>')
  .replace(/<p>\s*(<br>)\s*<\/p>/g, '')
  .replace(/<pre([^>]*)>/g, '<div$1>')
  .replace(/<\/pre>/g, '</div>')
  .replace(/<p>\s*(<\/br>)\s*<\/p>/g, '').trim()
  return cleaned
}
</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>