yizhizan-h5/components/resume/position-card.vue

<template>
	<view class="gwList-box-item flex justify-center">
		<view class="gwList-box-item-box">
			<!-- 标题-薪资 -->
			<view class="gwList-box-item-box-title flex justify-between align-center">
				<view class="title-left flex align-center">
					<view class="job-title-text"
						style="max-width: 450rpx;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;">
						<template>
							{{ data.ruleClassifyName }}
						</template>
					</view>
					<view v-if="data.isDue == 1" class="salary-text-box">
						<image src="../../static/images/index/jipinIcom.svg"
							class="jipin-icon" />
						<text class="jipin-text">急聘</text>
					</view>
				</view>
				<view>
					<text class="clip-color">{{ data.salaryRange }}</text>
					<text class="clip-color"> · </text>
					<text class="clip-color">{{ data.salaryTimes }}</text>
				</view>
			</view>
			<!-- 公司名称-公司人数 -->
			<view class="flex align-center justify-between">
				<view class="gwList-box-item-box-name flex align-center">
					<text class="company-name company-name-overflow">{{ data.company ?
						data.company.companyName : '' }}</text>
					<text class="company-people" v-if="data.company">{{ data.company ?
						data.company.companyPeople : '0人' }}</text>
				</view>
				<view class="experience">
					<text>{{ data.experience }}</text>
					<text>{{ data.education }}</text>
				</view>
			</view>
			<!-- 福利标签 -->
			<view class="benefits" v-if="data.welfareTag">{{ parseWelfare(data.welfareTag) }}</view>
			<!-- 职位标签 -->
			<view class="gwList-box-item-box-label flex align-center flex-wrap">
				<text class="job-tag" v-for="(ite, ind) in parseSkills(data.positionTag)"
					:key="ind">{{ ite }}</text>
			</view>
			<!-- 公司简介-位置 -->
			<view class="gwList-box-item-box-info flex justify-between align-center">
				<view class="gwList-box-item-box-info-l flex align-center">
					<view class="user-image">
						<image
							:src="data.hr && data.hr.hrImg ? data.hr.hrImg : '../../static/images/logo.jpg'" class="hr-avatar">
						</image>
						<view class="online-status"
							:style="{ 'background-color': data.user && data.user.onlineStatus == 'ONLINE' ? '#00DD9A' : '#999' }">
						</view>
					</view>
					<view class="company-info-text">
						{{ data.user && data.user.userName || '未知' }}·{{ data.hr &&
							data.hr.hrPosition || '未知' }}
					</view>
					<view v-if="data.respondTime" class="reply-time">{{ data.respondTime }}
					</view>
				</view>
				<view class="location-text">
					{{ data.distance }} {{ data.county }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			parseWelfare(str) {
				if (!str) return ''
				return str?.replace(/;/g, ' | ')
			},
			parseSkills(str) {
				if (!str) return []
				return str?.split(',') || []
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title-left {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}
	
	.job-title-text {
		color: rgba(23, 23, 37, 1);
		font-family: DM Sans;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 48rpx;
		letter-spacing: 0.5%;
		text-align: left;
	}
	
	.salary-text-box {
		border-radius: 24rpx;
		background: #FEE2E3;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 16rpx;
	
		.jipin-icon {
			width: 20rpx;
			height: 20rpx;
			margin-right: 8rpx;
		}
	
		.jipin-text {
			color: rgba(237, 66, 69, 1);
			font-family: DM Sans;
			font-size: 16rpx;
			font-weight: 400;
			line-height: 40rpx;
			letter-spacing: 0.5%;
			text-align: left;
		}
	}
	
	.clip-color {
		font-size: 24rpx;
		font-weight: bold;
		line-height: 40rpx;
		background-image: linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1));
		-webkit-background-clip: text;
		color: transparent;
		background-clip: text;
	}
	
	.company-name,
	.company-people {
		color: rgba(156, 164, 171, 1);
		font-family: DM Sans;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0.5%;
		text-align: left;
	}
	
	.job-tag {
		padding: 8rpx;
		border-radius: 8rpx;
		background: rgba(198, 198, 198, 0.1);
		margin-right: 8rpx;
		margin-bottom: 8rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 20rpx;
		line-height: 1;
	}
	
	.company-info-text,
	.location-text {
		color: rgba(156, 164, 171, 1);
		font-family: DM Sans;
		font-size: 20rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0.5%;
		text-align: left;
	}
	
	.reply-time {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 4rpx 8rpx;
		font-family: DM Sans;
		font-size: 16rpx;
		font-weight: 400;
		line-height: 20rpx;
		letter-spacing: 0.5%;
		text-align: left;
		border-radius: 12rpx;
		background: #ECE1FD;
		color: #8858C5;
	}
	
	.user-image {
		position: relative;
	
		.online-status {
			width: 12rpx;
			height: 12rpx;
			position: absolute;
			bottom: 0rpx;
			right: 0rpx;
			border-radius: 50%;
			box-sizing: border-box;
			border: 0.5px solid rgba(255, 255, 255, 1);
		}
		.hr-avatar {
			display: block;
			width: 40rpx;
			height: 40rpx;
			border: 0.5px solid rgba(240, 240, 240, 1);
			border-radius: 20rpx;
		}
	}
	
	.gwList-box-item {
		width: 712rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0px 2rpx 4rpx 0px rgba(0, 0, 0, 0.1);
		background: rgba(253, 253, 253, 1);
		margin-bottom: 12rpx;
		padding: 16rpx 36rpx;
	}
		
	.gwList-box-item-box {
		width: 100%;
		.gwList-box-item-box-title {
			margin-bottom: 12rpx;
		}
		
		.gwList-box-item-box-label {
			margin-top: 14rpx;
		}
		
		.gwList-box-item-box-name {
			color: rgba(156, 164, 171, 1);
			font-size: 24rpx;
			font-weight: 400;
			line-height: 40rpx;
			
			.company-name-overflow {
				max-width: 360rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-right: 8rpx;
			}
		}
		.experience {
			font-size: 24rpx;
			line-height: 32rpx;
			color: rgba(1, 107, 246, 1);
			text {
				margin-left: 12rpx;
			}
		}
		
		.benefits {
			width: 640rpx;
			font-size: 20rpx;
			line-height: 28rpx;
			color: rgba(153, 153, 153, 1);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-top: 12rpx;
		}
		
		.gwList-box-item-box-line {
			width: 100%;
			border: 1rpx solid #E6E6E6;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
		}
		
		.gwList-box-item-box-info {
			font-size: 26rpx;
			margin-top: 10rpx;
		
			.gwList-box-item-box-info-l {
				color: #1A1A1A;
				display: flex;
				align-items: center;
				gap: 12rpx;
		
				.people {
					max-width: 110rpx;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; // 默认不换行；
				}
			}
		
			.gwList-box-item-box-info-r {
				color: #999999;
				max-width: 50%;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; // 默认不换行；
			}
		}
	}
</style>