ec.uniapp-master/pages/index/list/selected.vue

<template>
	<view>
		<lf-nav :showIcon="true" bgColor="transparent" :spreadOut="false"></lf-nav>
		<view class="head">
			<image class="img" mode="aspectFill" src="https://picsum.photos/200/300?grayscale"></image>
			<view class="title">精选榜单</view>
		</view>
		<view class="content">
			<view class="card" v-for="(c_item, c_index) in 3" :key="c_index">
				<view class="title" @click="$url('/pages/index/list/monthlyList')">
					<text class="lf-m-r-10">灯具榜</text>
					<text class="lf-iconfont icon-xiangyou lf-font-20"></text>
				</view>
				<scroll-view class="scroll-view" :scroll-x="true">
					<view class="scroll-content">
						<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail?type=mail')">
							<view class="goods-img">
								<image class="img"></image>
								<view class="ranking">{{ item+1 }}</view>
							</view>
							<view class="goods-info">
								<view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view>
								<view>￥0.5</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		},
		onLoad(){
			
		},
		methods: {
			
		}
	}
</script>

<style>
	page{
		background-color: #497C64;
	}
</style>
<style lang="scss" scoped="scoped">
	.head{
		width: 750rpx;
		height: 430rpx;
		position: relative;
		.img{
			width: 100%;
			height: 100%;
		}
		.title{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 100rpx;
			color: #FFFFFF;
			font-weight: bold;
			font-family: '楷体';
		}
	}
	
	.content{
		padding: 30rpx 32rpx;
		.card{
			width: 686rpx;
			height: max-content;
			padding-bottom: 40rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			.title{
				width: 181rpx;
				height: 60rpx;
				background: #15716E;
				border-radius: 0rpx 0rpx 15rpx 15rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 auto;
			}
			.scroll-view{
				height: 280rpx;
				width: 100%;
				margin-top: 30rpx;
				padding: 0 25rpx;
				.scroll-content{
					display: flex;
					width: 100%;
					.goods-item{
						margin-right: 15rpx;
						width: 180rpx;
					}
					.goods-img{
						width: 180rpx;
						height: 180rpx;
						position: relative;
						.img{
							width: 100%;
							height: 100%;
							background-color: #EEEEEE;
							border-radius: 10rpx;
						}
						.ranking{
							position: absolute;
							top: 0;
							left: 0;
							width: 36rpx;
							height: 38rpx;
							background-color: #15716E;
							color: #FFFFFF;
							line-height: 38rpx;
							text-align: center;
							z-index: 9;
							&::after{
								content: '';
								position: absolute;
								bottom: -16rpx;
								left: 2rpx;
								width: 0rpx;
								height: 0rpx;
								border-left: 17rpx solid transparent;
								border-right: 17rpx solid transparent;
								border-top: 17rpx solid #15716E;
								z-index: -1;
							}
						}
					}
					.goods-info{
						text-align: center;
						color: #222222;
						&>view:nth-child(1n){
							font-size: 24rpx;
						}
						&>view:nth-child(2n){
							font-size: 28rpx;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>