当您安装了追格小程序排行榜模块时,想要结合自己的小程序风格调整追格小程序排行榜的模板展示,排行榜可以通过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;
}
-
微信评价组件:提示此插件已设置不可添加追格小程序全模块用户反馈,说微信评价组件:提示此插件已设置不可添加
-
追格小程序:积分商城发布产品报错,WordPress database error Table 'wp_zhuige_xcx_promotion_log' doesn't exist近期有追格小程序用户反馈,积分商城发布产品报错,大致提示如下:WordPress database error Table 'wp_zhuige_xcx_promotion_log' doesn't exist
-
追格小程序建圈、发帖、商城发布商品报错 Warning: Undefined variable $result in追格小程序建圈、发帖、商城发布商品报错Warning: Undefined variable $result in /www/wwwroot/xly/wp-content/plugins/zhuige-xcx/public/class-zhuige-xcx-public.php on line 159
-
【重要通知】追格小程序更新提示因uni组件更新,追格小程序部分模块样式出现异常。我们已定位问题并正优化中,给您带来不便敬请谅解。感谢支持与理解!追格团队将持续努力,优化产品体验,期待更快与您相见。
-
追格小程序V2.5.0更新发布追格小程序V2.5.0版本的更新,我们没给大家添太多新花样,主要是把“内功”练好了。我们认真检查了上一版里那些组件之间的小摩擦,一点点地调整、优化,搞定了超过40多个小地方。这样一来,小程序跑起来就更顺畅了,大家用起来也会感觉更舒服、更顺手。这次虽然没大张旗鼓,但确实是让产品站得更稳、更可靠了。
-
追格小程序V2.5.8更新发布追格小程序是一款采用积木式理念的微信小程序构建框架,它巧妙融合了Uniapp与WordPress技术,打造出一个开源且无加密限制的开发环境。
暂无评论,抢个沙发...