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="widthFix" 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?id='+ item.id)">
							<view class="goods-img">
								<image class="img"></image>
								<view class="ranking">
									<view class="top">{{ item+1 }}</view>
									<view class="down"></view>
								</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: 56rpx;
							overflow: hidden;
							.top{
								width: 36rpx;
								height: 36rpx;
								background-color: #15716E;
								position: relative;
								z-index: 3;
								text-align: center;
								color: #FFFFFF;
								font-size: 28rpx;
							}
							.down{
								width: 36rpx;
								height: 36rpx;
								background-color: #15716E;
								transform: rotate(45deg);
								margin-top: -26rpx;
								position: relative;
								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>