uniapp外包开发时，经常会遇到类似的样式或者效果，列表item样式记录一下，类似的样式或者结构，如果可以复用，可以直接复用，节约时间。

模板代码

<template>
	<div>
		<div class="listItem">
			<div class="listItemTop">
				<div class="listItemTopL">
					{{item.title}}
				</div>
				<div class="listItemTopR">{{item.address}}</div>
			</div>
			<div class="salary">
				{{item.salary}} · <text>{{item.type}}</text>
			</div>
			<div class="tags">
				<div style="margin-right: 10rpx;" v-for="(items,index) in item.tags" :key="index">
					<u-tag :text="items" plain size="mini" type="warning">
					</u-tag>
				</div>
			</div>
			<div class="userInfo">
				<div class="userInfoL">
					<image :src="item.userHead" mode=""></image>
					<div class="userInfoLInfo">
						<div class="userInfoLInfoName">{{item.userName}}</div>
						<div class="nameCompany">{{item.Company}}</div>
					</div>
				</div>
				<div class="userInfor">
					<u-button size="mini" color="#f76031" type="primary" text="查看"></u-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				item: {
					title: '潘店客房服务员',
					address: '海淀-五棵松',
					salary: '4600-7000元',
					type: '餐饮',
					tags: ['包住', '餐补'],
					userName: '李林林 · 负贡人',
					Company: "公司名称",
					userHead: 'https://images.wanjunshijie.com/mini/yujian/static/community/touxiang.png',
				}
			}
		},
		props: {
			name: {
				type: String,
				default () {
					return '';
				}
			}
		},
		mounted() {

		},
		methods: {

		}
	}
</script>
<style scoped lang="scss">
	.listItem {
		width: calc(690rpx - 60rpx);
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		padding: 30rpx 30rpx 30rpx 30rpx;

		.listItemTop {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			.listItemTopL {
				font-size: 28rpx;
				font-weight: bold;
			}

			.listItemTopR {
				font-size: 24rpx;
			}
		}

		.tags {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
		}

		.salary {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			font-size: 26rpx;
			color: red;
			margin-top: 20rpx;

			text {
				color: #999;
			}
		}

		.tags {
			margin-top: 20rpx;
		}
	}

	.userInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		margin-top: 20rpx;

		.userInfoL {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;

			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 10rpx;
			}

			.userInfoLInfo {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-wrap: nowrap;
				flex-direction: column;
				align-content: flex-start;
				margin-left: 10rpx;

				.userInfoLInfoName {
					font-size: 24rpx;
					color: #666;
				}
				.nameCompany{
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.userInfor {}
	}
</style>