追格小程序的资讯模块分类略缩图怎么改?

追格官方小助手/ 2022年12月23日/ 小程序/ 浏览 1433

近期看有人反馈追格小程序的资讯分类略缩图该怎么改?如果是要改成下图效果,其实大家只需要对模板中的css调整便可以了。



结合页面原始的上下结构展示,我们基本上可以不修改页面结构,仅通过调整css,对列表进行任何形式的调整。


这里把如何修改为上图的方法告诉大家,详情参考以下代码(注释的是原有代码,新增的有提示)

打开文件/pages/cms/classify/classify.vue 

对照代码修改即可


/** 外框 **/
	.zhuige-classify-cms-block {
		margin-bottom: 20rpx;
		
		/* 新增 */
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
	}

/** 图片 **/

	.zhuige-classify-cms-block image {
		/* height: 200rpx;
		width: 100%;
		border-radius: 12rpx 12rpx 0 0;
		display: inherit; */
		
		/* 新增 */
		height: 120rpx;
		width: 120rpx;
		border-radius: 12rpx;
		flex: 0 0 120rpx;
		
	}

/** 文字块 **/

	.zhuige-classify-cms-text {
		/* padding: 20rpx;
		background: #FFFFFF;
		border-radius: 0 0 12rpx 12rpx; */
		
		/* 新增 */
		width: 300rpx;
		margin-left: 20rpx;

	}

	.zhuige-classify-cms-text view:nth-child(1) text:nth-child(2) {
		font-size: 24rpx;
		font-weight: 300;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 24rpx;
		padding: 0 24rpx;
		margin-left: 12rpx;
		color: #FF6348;
		background: #FFEAE3;
		
		
		/* 新增 */
		white-space: nowrap;
	}

发表评论

暂无评论,抢个沙发...

客服 工单