book-hi/pages/mall/components/goodsModel2.vue

<template>
	<view class="slot">
		<view class="integral">
			<view class="inte_img">
				<!-- <image src="../../../static/goods/points-header.png" mode=""></image> -->
				<p class="title">热门好物</p>
				<view class="inte_right" @click="goZonePage('hot')">
					<span>更多>></span>
				</view>
			</view>
			<view class="commodity">
				<Goods v-for="(item, index) in list" :key="index" :data="item"></Goods>
			</view>
		</view>
	</view>
</template>

<script>
import Goods from '@/pages/mall/components/goods.vue';
export default {
	name: 'pionts',
	components: {
		Goods
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	methods: {
		goZonePage(type){
			uni.navigateTo({
				url:'/pages-mall/pages/zone/zone?type='+type
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.slot {
	position: relative;
}
.money {
	display: flex;
	align-items: flex-end;
	.now {
		text:nth-child(1) {
			font-size: 20rpx;
			color: $app-theme-text-money-color;
		}
		text:nth-child(2) {
			font-size: 28rpx;
			color: $app-theme-text-money-color;
		}
	}
	.old {
		text {
			font-size: 20rpx;
			color: $app-theme-card-gray-color;
			text-decoration-line: line-through;
		}
	}
}
.integral {
	margin: 28rpx 30rpx 0 30rpx;
	position: relative;

	.inte_img {
		position: relative;
		width: 100%;
		height: 170rpx;
		background-color: $app-theme-color;
		border-radius: 10rpx 10rpx 0 0;
		.title{
			color: #ffffff;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			padding-top: 30rpx;
		}
		image {
			width: 100%;
			height: 174rpx;
		}

		.inte_right {
			display: flex;
			align-items: center;
			position: absolute;
			top: 35rpx;
			right: 20rpx;

			span {
				font-size: 28rpx;
				font-family: PingFang-SC-Regular, PingFang-SC;
				font-weight: 400;
				color: #fff;
				line-height: 40rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.commodity {
		background-color: #ffffff;
		position: relative;
		min-height: 100rpx;
		margin-top: -60rpx;
		border-radius: 8rpx;
		z-index: $app-zIndex-absolute;
		// .list_item{
		// 	padding: 0 25rpx;
		// }
		.borders {
			width: 100%;
			height: 2rpx;
			background: #efefef;
		}
	}
}
</style>