yanzong_qianduan/pages/activity/charts.vue

<template>
	<view class="newGoods">
		<view>
			<u-navbar title="排行榜" back-icon-color="#fff" :border-bottom="false" title-color="#fff" :background="background"></u-navbar>
		</view>
		<view class="main">
			<view class="head">
				<view class="ranking">
					-好物排行榜-
				</view>
				<view class="headTitle">
					手机热销榜
				</view>
				<view class="ques">
					根据商品销量等级排序|每日更新
				</view>
			</view>
			<view class="hb">
				<view class="goodsList" v-for="(item,index) in 3" :key="index">
					<view class="goodsDetail">
						<image src="../../static/rank/topOne.png" mode="" class="topOne"></image>
						<view class="goodsInfo">
							<image src="/static/newGoods/goods.png" mode="" class="goodsImg"></image>
							<view class="goodsName">
								<view class="name">
									Apple iphone 15(A3092)
									支持移动联通电信5G双卡双待手机
								</view>
								<view class="hot">
									<text class="hotTitle">HOT</text>
									<text class="zs">综合热卖指数9.8</text>
								</view>
							</view>
						</view>
					</view>
					<view class="opera">
						<view class="price">
							￥<text>2399</text>
						</view>
						<view class="look">
							去看看
							<image src="/static/rank/right.png" mode="" class="right"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import img from "@/static/rank/top.png"
	export default {
		data() {
			return {
				background: {
					background: 'url(' + img + ') center top no-repeat',
					backgroundSize: '100% auto',
				},
				chosed: 0,
				menuList: [{
						name: '精选',
						value: 0
					}, {
						name: '手机通讯',
						value: 1
					}, {
						name: '电脑',
						value: 2
					}, {
						name: '家用电器',
						value: 3
					}, {
						name: '美妆',
						value: 4
					},

				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.newGoods {
		width: 100%;
		position: relative;
		min-height: 100vh;
	}

	.main {
		width: 100%;
		position: relative;

		.bgImg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -10;
		}

		.head {
			width: 100%;
			height: 360rpx;
			background-image: url('../../static/rank/head.png');
			background-size: 100% 100%;
		}
	}

	.title {
		margin-top: 58rpx;
		width: 128rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #fff;
		line-height: 44rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.headTitle {
		width: 100%;
		text-align: center;
		height: 98rpx;
		font-size: 60rpx;
		font-family: YouSheBiaoTiYuan, YouSheBiaoTiYuan;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 98rpx;
		text-shadow: 8px 2px 15px #FF5F4C;
	}

	.ranking {
		margin-top: 22rpx;
		width: 430rpx;
		height: 112rpx;
		padding-top: 18rpx;
		background-image: url('../../static/rank/timeRank.png');
		background-size: 100% 100%;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		left: 0;
		right: 0;
		margin: auto;
	}

	.ques {
		width: 100%;
		text-align: center;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
		margin-top: 6rpx;
	}

	.hb {
		background-image: url('../../static/rank/mainbg.png');
		width: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		padding-top: 30rpx;

		.goodsList {
			width: 700rpx;
			height: 440rpx;
			background: #FCE5C6;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			margin-bottom: 42rpx;
			.goodsDetail {
				width: 700rpx;
				height: 336rpx;
				padding: 54rpx 0 0 52rpx;
				background: #FFFFFF;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				opacity: 1;
				position: relative;
				.topOne{
					width:73rpx;
					height: 100rpx;
					position: absolute;
					left: 36rpx;
					top: -8rpx;
				}
				.goodsInfo {
					display: flex;
					.goodsImg{
						width: 224rpx;
						height: 224rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						opacity: 1;
						margin-right: 16rpx;
					}
					.goodsName{
						.name{
							width: 396rpx;
							height: 132rpx;
							font-size: 32rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #0E0E0E;
							line-height: 38rpx;
						}
						.hot{
							width: 336rpx;
							height: 60rpx;
							background: linear-gradient(90deg, #FCE5C6 0%, #FFFFFF 100%);
							border-radius: 70rpx 70rpx 70rpx 70rpx;
							opacity: 1;
							margin-top: 16rpx;
							.hotTitle{
								margin-right: 8rpx;
								width: 68rpx;
								height: 42rpx;
								font-size: 32rpx;
								font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
								font-weight: 600;
								line-height: 60rpx;
								margin-left: 8rpx;
								background: -webkit-linear-gradient(180deg, #FFA621 0%, #F34A40 100%);
								-webkit-text-fill-color:transparent;
								-webkit-background-clip:text; 
							}
							.zs{
								height: 44rpx;
								font-size: 32rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								color: #9F6516;
								line-height: 60rpx;
							}
						}
					}
				}
			}
			.opera{
				display: flex;
				justify-content: space-between;
				width: 100%;
				align-items: center;
				height: 104rpx;
				.price{
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #301F14;
					line-height: 44rpx;
					text{
						font-size: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #301F14;
						line-height: 68rpx;
					}
				}
				.look{
					width: 202rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #FF7E6A 0%, #FB322A 100%);
					border-radius: 70rpx 70rpx 70rpx 70rpx;
					opacity: 1;
					margin-right: 22rpx;
					text-align: center;
					line-height: 60rpx;
					.right{
						width: 20rpx;
						height: 18rpx;
						margin-left:26rpx;
					}
				}
			}
			
		}
	}
</style>