uniapp系列-05推荐页面样式开发

1.创建recommend.vue页面

在该页面中写view组件,简单写内容,进行引入

在index.vue中引入,三处地方

2.放图片,在static的img文件夹下

在recommend.vue中开始写组件

大图的背景颜色,在common.css全局配置中有设置

拿过来

添加图的样式

代码如下:

<style scoped>
.recommend{
	padding:20rpx;
}
.recommend-item{
	display: flex;
	flex-direction: column;
	border-radius: 20rpx;
	border: 2rpx solid #CCCCCC;
	overflow: hidden;
	margin:20rpx 0;
}	
.item-big{
	width: 100%;
	height: 300rpx;
}
.item-small{
	width: 100%;
	height: 240rpx;
}
.item-img{
	width: 33.3333%;
	height: 240rpx;
}
</style>

最终成果: