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

当您安装了追格小程序排行榜模块时，想要结合自己的小程序风格调整追格小程序排行榜的模板展示，排行榜可以通过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;
}