jpcj-xcx/pages/index/components/applist/index.vue

<template>
	<view class="content">
		<swiper class="swiper-box" :current="current" autoplay circular>
			<swiper-item v-for="(item, index) in info" :key="index">
				<view :class="item.colorClass" class="swiper-item">
					<image class="image" :src="item.url" mode="aspectFill" :draggable="false" @click="onBanner(index)" />
				</view>
			</swiper-item>
		</swiper>
		
		<view class="sticky-top">
			<van-search class='top-search' shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
			<van-icon name="scan" size="30px" @click="scanCode" />
		</view>
		
		<view class="sticky">
			<view class="grid">
				<view class="grid-item" @click="comname=`xueche`">
					<van-icon name="/static/img/home/学车@3x.png" size="20px" />
					<text class="text">精选</text>
				</view>
				<view class="grid-item" @click="comname=`applist`">
					<van-icon name="/static/img/home/买车@3x.png" size="20px" />
					<text class="text">买车</text>
				</view>
				<view class="grid-item" @click="comname=`applist`">
					<van-icon name="/static/img/home/美食@3x.png" size="20px" />
					<text class="text">美食</text>
				</view>
				<view class="grid-item" @click="comname=`applist`">
					<van-icon name="/static/img/home/房产@3x.png" size="20px" />
					<text class="text">房产</text>
				</view>
				<view class="grid-item" @click="comname=`applist`">
					<van-icon name="/static/img/home/宠物@3x.png" size="20px" />
					<text class="text">宠物</text>
				</view>
				<view class="grid-item" @click="comname=`applist`">
					<van-icon name="/static/img/home/影院@3x.png" size="20px" />
					<text class="text">院线</text>
				</view>
			</view>
		</view>

		<view class='list-item' v-for="(item, index) in 15" :key="index">
			<image class="avatar" mode="aspectFit" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png">
				<view class="item-right">
					<view class="top">
						<van-icon class="icon" name="/static/img/列表/收藏@2x.png" size='15' />
						<van-icon class="icon" name="/static/img/列表/转发@2x.png" size='14' />
						<van-icon class="icon" name="/static/img/列表/不喜欢@2x.png" size='12' />
					</view>
					<view class="center">
						<text class="details">牛肉论斤吃！XXXXX资助火锅，单刃仅需998元起！牛肉论斤吃！XXXXX资助火锅，单刃仅需998元起！</text>
					</view>
					<view class="bottom">
						<text class="title">ABC丑食</text>
						<view class="right" v-if="false">
							<view class="flex">
								<van-icon class="icon" name="/static/img/列表/评论@2x.png" size='15' />
								<text>54</text>
							</view>
							<view class="flex">
								<van-icon class="icon" name="/static/img/列表/好评率@2x.png" size='15' />
								<text>99%</text>
							</view>
						</view>
					</view>
				</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				comname: 'xueche',
				active: 0,
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 C'
					}
				],
				current: 0,
				mode: 'round',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 1rpx;
	}
	.swiper-box{
		position: sticky;
		top: 0px;
		left: 0;
		height: 422rpx;
		z-index: 9;
	}
	.sticky-top {
		position: sticky;
		top: 192rpx;
		left: 0;
		margin: 30rpx 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #4fc08d;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		// border-top-left-radius: 14px;
		// border-top-right-radius: 14px;
		padding-right: 3%;
	
		.top-search {
			flex: 1;
		}
	}
	
	.sticky {
		position: sticky;
		top: 295rpx;
		left: 0;
		background-color: #fff;
		z-index: 9;
		margin: 30rpx 30rpx;
		border-radius: 20rpx;
		
		.grid {
			display: flex;
			justify-content: space-between;
			padding: 1% 2%;
			margin-bottom: 2%;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;

			.grid-item {
				width: 50px;
				height: 60px;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				font-size: 12px;
			}
		}
	}

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		height: 170rpx;
		padding: 34rpx;
		margin: 24rpx 30rpx;
		border-radius: 20rpx;
		
		.avatar {
			flex-shrink: 0;
			width: 161rpx;
			height: 161rpx;
			margin-right: 16rpx;
		}

		.item-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 200rpx;

			.top {
				.icon {
					margin-left: 35rpx;
				}

				display: flex;
				justify-content: flex-end;
			}

			.center {
				align-self: flex-start;

				.details {
					width: 436rpx;
					height: 70rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #0F0404;
					display: -webkit-box;
					margin-bottom: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}


			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					padding: 3rpx 12rpx;
					height: 30rpx;
					background: #FFE6E6;
					border: 1rpx solid #E31818;
					border-radius: 2rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #E31818;
					line-height: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.right {
					width: 170rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 35rpx;

					.flex {
						display: flex;
						justify-content: center;

						.icon {
							margin-right: 5rpx;
						}
					}
				}
			}
		}
	}
</style>