hqshop/pages/product/new.vue

<template>
	<view class="center">
		<view class="top">
			<image class="top-bg" src="../../static/img/top-bg.png" mode=""></image>
			<view class="title">
				新品
			</view>
		</view>
		<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
			<swiper-item class="carousel-item" @click="bannerNavToUrl(item)"><image src="../../static/img/new.png" /></swiper-item>
		</swiper>
		<view class="hotgoods" v-if="firstList.length != 0">
			<view class="hotgoods-item" v-for="item in firstList" :key="item.id" @click="navToDetailPage(item)">
				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
				<view class="title clamp margin-c-20">{{ item.store_name }}</view>
				<view class="hot-price">
					<view class="price">
						<text class="font-size-sm">￥</text>
						{{ item.price }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { tabbar1 } from '@/utils/tabbar.js';
export default {
	data() {
		return {
			current: 3,
			tabbar: tabbar1,
			firstList:[],
		}
	}
}
</script>

<style lang="less">
page,
.center {
	min-height: 100%;
	height: auto;
	background: #FFFFFF;
}
.top {
	position: relative;
	width: 100%;
	height: 400rpx;
	.top-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	.title {
		position: relative;
		z-index: 2;
		padding: 30rpx 0;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
	}
}
.carousel {
	width: 700rpx;
	height: 300rpx;
	margin: -280rpx auto 0;
	image {
		width: 700rpx;
		height: 300rpx;
	}
}
</style>