dl_uniapp/pages/components/notice-item.vue

<template>
	<view class="dl-components">
		<view v-for="(item,index) in dataList" class="dl-notice-box">
			<view class="dl-notice-title">
				<image class="dl-image" src="@/static/index/xiaohongshu.png" mode="aspectFit"></image>
				<view class="dl-text">某品牌鞋子上海、宁波博主探店招募某品牌鞋子上海、宁波博主探店招募</view>
			</view>
			<view class="dl-notice-content">
				<view class="left-text">
					<view class="text-item">
						<image class="dl-icon" src="@/static/index/money.png" mode="aspectFit"></image>
						<view class="dl-content">奖励：¥30-400</view>
					</view>
					<view class="text-item">
						<image class="dl-icon" src="@/static/index/my.png" mode="aspectFit"></image>
						<view class="dl-content">粉丝：1K-10w</view>
					</view>
					<view class="text-item" style="border-bottom: 1rpx solid #F4F4F4;padding-bottom: 17rpx;">
						<image class="dl-icon" src="@/static/index/xing.png" mode="aspectFit"></image>
						<view class="dl-content">类型：时尚 探店 运动 颜值</view>
					</view>
					<view class="text-item" style="padding-top: 20rpx;">
						<view class="item-box" style="width: 40%;">
							<image class="dl-icon2" src="@/static/images/profile.jpg" mode="aspectFit"></image>
							<view class="dl-item-right">资深Pr资深</view>
						</view>
						<view class="item-box">
							<image class="dl-icon3" src="@/static/index/person.png" mode="aspectFit"></image>
							<view class="dl-item-right dl-number">659</view>
						</view>
						<view class="item-box">
							<image class="dl-icon3" src="@/static/index/eye.png" mode="aspectFit"></image>
							<view class="dl-item-right dl-number">659</view>
						</view>
					</view>
				</view>
				<image class="right-image" src="@/static/images/profile.jpg" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.dl-components {
		width: 100%;
		height: 100%;

		.dl-notice-box {
			font-size: 29rpx;
			width: 100%;
			padding: 20rpx;
			background-color: white;
			border-radius: 30rpx;
			margin-bottom: 20rpx;

			.dl-notice-title {
				display: flex;
				width: 100%;
				padding-bottom: 20rpx;
				align-items: center;
				justify-content: center;

				.dl-image {
					flex: none;
					width: 50rpx;
					height: 50rpx;
				}

				.dl-text {
					margin-left: 10rpx;
					flex: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%;
					font-weight: bold;
					
				}
			}
			.dl-notice-content{
				font-size: 27rpx;
				display: flex;
				color: #363636;
				width: 100%;
				align-items: center;
				justify-content: center;
				
				.left-text{
					flex: 1;
					min-width: 0;
					margin-right: 10rpx;
					
					.text-item{
						display: flex;
						padding: 5rpx;
						width: 100%;
						align-items: center;
						justify-content: center;
						
						.dl-icon{
							flex: none;
							width: 40rpx;
							height: 44rpx;
						}
						.dl-content{
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 100%;
							padding-left: 15rpx;
						}
						.item-box{
							display: flex;
							width: 100%;
							align-items: center;
							justify-content: center;
							
							.dl-icon2{
								flex: none;
								width: 40rpx;
								height: 44rpx;
								border-radius: 50%;
							}
							.dl-icon3{
								flex: none;
								width: 30rpx;
								height: 29rpx;
							}
							.dl-item-right{
								flex: 1;
								padding-left: 10rpx;
								min-width: 0;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								width: 100%;
							}
							.dl-number{
								font-size: 26rpx;
								margin-right: 5rpx;
							}
						}
					}
				}
				.right-image{
					flex: none;
					width: 230rpx;
					height: 230rpx;
					border-radius: 20rpx;
				}
			}
		}
	}
</style>