09 首页热销爆品开发修改商品值

1. 完成后的效果图

2. 代码

1. component/index下创建Hot.vue组件
2. pages/index/index.vue引入Hot.vue组件
3. Hot组件内容为单个商品模块，所有引入了Commodity.vue组件。传递参数调整图片宽度和高度

Hot组件代码如下：

<template>
	<view class='hot'>
		
		<Commodity :dataList='hotList' itemW='250rpx' bigH='220rpx'></Commodity>
		
	</view>
</template>

<script>
import Commodity from '../common/Commodity.vue'
export default{
	data () {
		return {
			hotList:[
				{
					id:1,
					imgUrl:"../../static/img/hot1.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:2,
					imgUrl:"../../static/img/hot2.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:3,
					imgUrl:"../../static/img/hot3.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				}
			]
		}
	},
	components:{
		Commodity
	}
}
</script>

<style>
</style>