如何对追格小程序排行榜进行UI界面调整

追格官方小助手/ 2022年11月11日/ 小程序/ 浏览 1802


当您安装了追格小程序排行榜模块时,想要结合自己的小程序风格调整追格小程序排行榜的模板展示,排行榜可以通过css进行调整,可以自己定义排名序号的颜色,大小,字体展示,还可以通过后台控制追格小程序排行榜的背景图。


这里给大家列一些调整的关键点


1. 背景图空间的控制(顶部大图)


.zhuige-ranking {
	padding: 400rpx 20rpx 80rpx;
}
/** 这里顶部的padding是控制顶部大图显示的区域,可以结合自己需求改变大小 **/


2. 排序序号的控制(默认序号,前3名,或者自定义前n名)


/**  zhuige-ranking-num 控制排名序号宽度和间距 **/
.zhuige-ranking-num {
	width: 60rpx;
	text-align: center;
	padding-right: 20rpx;
}

/**  zhuige-ranking-num text 控制排名序号的默认字体,字号,粗细,颜色
如果要控制字体,需要增加 font-family: 来设置字体
 **/

.zhuige-ranking-num text {
	font-size: 36rpx;
	font-weight: 600;
	color: #999999;
}

/**  以下的 nth-child(1) ~ nth-child(3)分别设置排行榜的 1,2,3的颜色
如果有必要,可以单独设置字体,字号,颜色,粗细
如果有对其他名次设置字体,字号,颜色,粗细的需求,可以参考1,2,3的写法
增加nth-child(4) ~ nth-child(n),n就是你需要的第几名的具体设置

 **/

.zhuige-ranking-list .zhugie-info-block:nth-child(1) .zhuige-ranking-num text,
.zhuige-ranking-list .zhuige-friends-block:nth-child(1) .zhuige-ranking-num text {
	color: #FF6146;
}
.zhuige-ranking-list .zhugie-info-block:nth-child(2) .zhuige-ranking-num text,
.zhuige-ranking-list .zhuige-friends-block:nth-child(2) .zhuige-ranking-num text {
	color: #1D9FFC;
}
.zhuige-ranking-list .zhugie-info-block:nth-child(3) .zhuige-ranking-num text,
.zhuige-ranking-list .zhuige-friends-block:nth-child(3) .zhuige-ranking-num text {
	color: #F5AD1A;
}

发表评论

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

客服 工单