yizhizan-h5/components/companyListIndex/companyListIndex.vue

<template>
	<view class="list flex align-center justify-center">
		<view class="list-box" @click="goInfo(item)">
			<view class="list-box-info flex justify-between">
				<image :src="item.companyLogo?item.companyLogo:'/static/logo.png'" mode="aspectFill"></image>
				<view class="list-box-info-r">
					<view class="list-box-info-r-name">
						{{item.companyName?item.companyName:'匿名公司'}}
					</view>
					<view class="list-box-info-r-tips flex flex-wrap"
						v-if="item.city || item.companyScope || item.companyPeople">
						<view class="list-box-info-r-tipss" v-if="item.city">
							{{item.city}}
						</view>
						<view class="list-box-info-r-tipss" v-if="item.companyScope">
							{{item.companyScope}}
						</view>
						<view class="list-box-info-r-tipss" v-if="item.companyPeople">
							{{item.companyPeople}}
						</view>
					</view>
					<view class="list-box-info-r-address">
						{{item.companyAddress}}
					</view>
				</view>
			</view>
			<view class="list-box-line" :style="item.postPushList.length>0?'':'border:none'"></view>
			<view class="list-box-item" :style="{border:ind==item.postPushList.length-1?'none':''}"
				v-for="(ite,ind) in item.postPushList" :key="ind">
				<view class="list-box-item-top flex align-center justify-between">
					<view class="list-box-item-top-l">
						<block v-if="isSameName(ite.ruleClassifyName,ite.stationName)">
							{{ite.ruleClassifyName}}-
						</block>
						<block>
							{{ite.stationName}}
						</block>
					</view>
					<view class="list-box-item-top-r">
						{{ite.salaryRange}}
					</view>
				</view>
				<view class="list-box-item-tips flex">
					<view class="list-box-item-tipss" v-if="ite.education">
						{{ite.education}}
					</view>
					<view class="list-box-item-tipss" v-if="ite.experience">
						{{ite.experience}}
					</view>
					<view class="list-box-item-tipss" v-if="ite.industry">
						{{ite.industry}}
					</view>
				</view>
			</view>
			<view class="list-box-btn flex align-center justify-center">
				查看更多职位
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "companyListIndex",
		props: {
			item: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {};
		},
		methods: {
			goInfo(item) {
				this.$emit('goInfo', item)
			},
			isSameName(className, name) {
				let str1 = className.trim();
				let str2 = name.trim();
				if (str1.length !== str2.length) {
					return true;
				}
				return str1.toLowerCase() !== str2.toLowerCase();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
		margin-bottom: 20rpx;

		.list-box {
			width: 686rpx;
			height: 100%;
			background-color: #ffffff;
			border-radius: 24rpx;
			padding: 30rpx;
		}

		.list-box-info {
			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 24rpx;
			}

			.list-box-info-r {
				width: calc(100% - 180rpx);
				height: 100%;
			}

			.list-box-info-r-name {
				color: #1F1F1F;
				font-size: 36rpx;
				font-weight: bold;
			}

			.list-box-info-r-tips {}

			.list-box-info-r-tipss {
				background-color: #F6F6F6;
				border-radius: 8rpx;
				margin-right: 20rpx;
				color: #666666;
				font-size: 24rpx;
				padding: 8rpx 16rpx;
				margin-top: 16rpx;
			}

			.list-box-info-r-address {
				margin-top: 16rpx;
				color: #999999;
				font-size: 26rpx;
			}
		}

		.list-box-line {
			border-bottom: 1px solid #E6E6E6;
			margin-top: 30rpx;
		}

		.list-box-item {
			margin-top: 30rpx;
			border-bottom: 1px solid #E6E6E6;
			padding-bottom: 30rpx;
		}

		.list-box-item-top-l {
			font-size: 34rpx;
			color: #1F1F1F;
			font-weight: 500;
		}

		.list-box-item-top-r {
			color: #00B88F;
			font-size: 32rpx;
			font-weight: bold;
		}

		.list-box-item-tipss {
			background-color: #F6F6F6;
			border-radius: 8rpx;
			margin-right: 20rpx;
			color: #666666;
			font-size: 24rpx;
			padding: 8rpx 16rpx;
			margin-top: 16rpx;
		}

		.list-box-btn {
			width: 100%;
			height: 74rpx;
			border: 1px solid #E6E6E6;
			border-radius: 10rpx;
		}
	}
</style>