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

<template>
	<view>
		<view v-for="val in data" :key="val.id" class="ss-m-b-40">
			<view class="item">
        <view style="display: flex;justify-content: space-between;align-items: center;">
          <text class="mr-20 item-title">{{ val.position}}</text>
          <text class="color-error font-weight-bold">{{ val.payFrom }} {{ val.payFrom  && val.payTo ? '-' : ''}} {{ val.payTo}}</text>
        </view>
        <view>
          {{ 
            val.interestedArea && val.interestedArea.length 
            ? 
            (val.workArea ? val.workArea + '，' : '') + val.interestedArea.map(e => e.name).join('，') 
            : 
            (val.workArea || '')
          }}
        </view>
        <view class="item-tags">
          <view v-for="industry in val.industry" :key="industry.id" class="tag">{{ industry.nameCn }}</view>
        </view>
      </view>
		</view>
	</view>
</template>

<script setup>
defineProps({ data: Array })
</script>

<style scoped lang="scss">
.item {
  font-size: 28rpx;
  color: #666;
  &-title {
    color: #000;
    font-weight: 600;
  }
  &-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .tag {
      border: 2rpx solid #00B760;
      color: #00B760;
      padding: 4rpx 16rpx;
      font-size: 24rpx;
      margin: 10rpx 10rpx 0 0;
      border-radius: 10rpx;
    }
  }
}
</style>