yanzong_qianduan/pages/activity/newGoods.vue

<template>
	<view class="newGoods">
		<!-- <image src="/static/newGoods/newBack.png" mode="" class="bgImg"></image> -->
		<view >
			<u-navbar title="新品首发" back-icon-color="#fff" :border-bottom="false" title-color="#333" :background="background"></u-navbar>
		</view>
		<view class="firGoods">
			<view class="topLine">
				<view class="left">
					<view class="goodsName">
						nava 5z
					</view>
					<view class="goodsDesc">
						影棚级人像
					</view>
					<view class="newTip">
						新品驿站
					</view>
				</view>
				<view class="right">
					<!-- <image src="/static/newGoods/bg.png" mode="" class="bg"></image> -->
						<image src="/static/newGoods/goods.png" mode="" class="goodsImg"></image>		
				</view>
			</view>
		</view>
		<view class="goodsList">
			<view class="goodsItem" v-for="(item,index) in 5" :key="index">
				<view class="hotSell">
					现货热卖
				</view>
				<view class="item">
					<view class="goodsInfo">
						<view class="goodsDetail">
							<view class="infoLeft">
								<view class="gName">
									Neo9 Pro
								</view>
								<view class="gd">
									天机9300续航芯，自研电竞芯19Q1
								</view>
								<view class="gp">
									低价官网100
								</view>
							</view>
							<view class="infoRight">
								<image src="/static/newGoods/goods.png" mode="" class="infoImg"></image>
							</view>
						</view>
						<view class="price">
							<view class="lowPrice">
								￥2399起
							</view>
							<view class="buyNow">
								立即购买
							</view>
						</view>
					</view>
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	import img from "@/static/member/head.png"
	export default{
		data(){
			return{
				background: {
					background: 'url('+	img+') center top no-repeat',
					backgroundSize: '100% auto',
				},
			}
		}
	}
</script>

<style lang="scss" scoped>
	.newGoods{
		width: 100%;
		position:relative;
		.bgImg{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -10;
		}
	}
	.firGoods{
		width: 100%;
		height: 548rpx;
		background-image: url('/static/newGoods/top.png');
		background-size: 100% 100%;
		padding-left: 30rpx;
		padding-top: 44rpx;
		.topLine{
			display: flex;
			justify-content: center;
			.left{
				margin-top: 132rpx;
				.goodsName{
					height: 58rpx;
					font-size: 42rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #242424;
					line-height: 58rpx;
				}
				.goodsDesc{
					width: 280rpx;
					height: 78rpx;
					font-size: 56rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #242424;
					line-height: 78rpx;
				}
				.newTip{
					width: 156rpx;
					height: 56rpx;
					background: #DA1646;
					opacity: 1;
					border-radius: 25rpx 0 25rpx 25rpx;
					text-align: center;
					font-size: 36rpx;
					font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 56rpx;
				}
			}
			.right{
				background-image: url('../../static/newGoods/bg.png');
				background-repeat: no-repeat;
				background-size:422rpx 102rpx ;
				position: relative;
				background-position: left bottom;
				height: 500rpx;
				.goodsImg{
					width: 414rpx;
					height: 414rpx;
					box-shadow: 0rpx 12rpx 29rpx 0rpx rgba(0,0,0,0.25);
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					z-index: 99;
				}
				.bg{
					width: 422rpx;
					height: 102rpx;
					position: absolute;
					top: 374rpx;
					z-index: 0;
				}
			}
		}
	}
	.goodsList{
		width: 100%;
		padding: 26rpx 0 30rpx 26rpx;
		background-image: url('/static/newGoods/bot.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		.goodsItem{
			margin-bottom: 32rpx;
		}


		.item{
			width: 700rpx;
			height: 334rpx;
			background: #FDE7D5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
			padding: 8rpx 10rpx 10rpx;
		}
		.hotSell{
			width: 226rpx;
			height: 82rpx;
			background: linear-gradient(180deg, #FDE7D5 0%, #FFDCC3 100%);
			opacity: 1;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #C82821;
			line-height: 82rpx;
			position: relative;
			top: 8rpx;
			border-radius: 20rpx 20rpx 0 0;
		}
		.goodsInfo{
			width: 680rpx;
			height: 316rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			padding-left: 28rpx;
			.goodsDetail{
				display: flex;
				justify-content: space-between;
				width: 100%;
				position: relative;
				.infoLeft{
					.gName{
						// width: 180rpx;
						height: 56rpx;
						font-size: 40rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						color: #3F3F3F;
						line-height: 56rpx;
						margin-top: 32rpx;
					}
					.gd{
						width: 362rpx;
						height: 88rpx;
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #9F9F9F;
						line-height: 38rpx;
					}
					.gp{
						height: 44rpx;
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #DE041C;
						line-height: 38rpx;
					}
				}
				.infoRight{
					width: 290rpx;
					height: 290rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					margin-left: 14rpx;
					.infoImg{
						width: 290rpx;
						height: 290rpx;
					}
					position: absolute;
					top: -68rpx;
					right: 0;
				}
			}
			.price{
				display: flex;
				justify-content: flex-end;
				margin-top: 14rpx;
				.lowPrice{
					height: 50rpx;
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #DE041C;
					line-height: 50rpx;
					margin-right: 30rpx;
				}
				.buyNow{
					width: 174rpx;
					height: 58rpx;
					background: linear-gradient(180deg, #FC522C 0%, #FA2929 100%);
					border-radius: 58rpx 58rpx 58rpx 58rpx;
					opacity: 1;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 58rpx;

				}
			}
		}
	}
</style>