新安装追格小程序和付费专栏模块后,如果您要对自己的付费模块界面进行调整,可以考虑优先调整以下几部分:
1.专栏详情顶图
找到文件/column/detail/detail.vue,其中的代码,调整宽,高,圆角即可
.zhuige-sp-cover {
height: 480rpx;
width: 100%;
}
2.专栏详情评分
找到文件/column/detail/detail.vue,其中的代码,可以调整字号,字体颜色,粗细,背景色/背景图,以及浮动方式
.zhuige-sp-grade {
display: flex;
align-items: center;
background: #f5f5f5;
border-radius: 12rpx;
}
.zhuige-sp-grade-opt {
width: 70%;
display: flex;
align-items: center;
}
.zhuige-sp-grade-opt>view:nth-child(1) {
font-size: 80rpx;
font-weight: 600;
color: #FF6146;
padding-left: 30rpx;
}
.zhuige-sp-grade-opt>view:nth-child(2) {
margin-left: 20rpx;
}
.zhuige-sp-grade-start .comment-count {
font-size: 24rpx;
font-weight: 300;
color: #666666;
margin-top: -4rpx;
}
.zhuige-sp-grade-score {
width: 30%;
border-left: 1rpx solid #DDDDDD;
text-align: center;
color: #666666;
}
.zhuige-sp-grade-score view {
font-size: 40rpx;
font-weight: 600;
}
.zhuige-sp-grade-score text {
display: block;
font-size: 22rpx;
font-weight: 300;
margin-top: -16rpx;
}
仅调整以下代码即可实现评分块左右互换的效果,如下图
.zhuige-sp-grade {
display: flex;
align-items: center;
background: #f5f5f5;
border-radius: 12rpx;
/** 增加浮动方向控制 **/
flex-direction: row-reverse;
}
.zhuige-sp-grade-score {
width: 30%;
/** 增加改变,同时边框也要换到右侧 **/
border-right: 1rpx solid #DDDDDD;
text-align: center;
color: #666666;
}
-
2024年国庆放假通知追格2024年国庆节放假有关事宜通知如下
-
追格小程序V2.5.8更新发布追格小程序是一款采用积木式理念的微信小程序构建框架,它巧妙融合了Uniapp与WordPress技术,打造出一个开源且无加密限制的开发环境。
-
WordPress导航主题小站点评 V2.0.0更新发布自定义广告、色彩导航等功能追格小站点评主题是一个互联网创新产品分享与点评导航主题。用户在这发掘和发布有趣的产品(网址、小程序、APP),为喜欢的点赞与点评。响应式布局,专业版自带前端会员中心(用户认证、发布、个人主页、消息等),并支持微信扫码登录。
-
关于代码更新与售后服务调整的重要公告我们对代码更新和售后服务内容进行了部分调整与优化。
-
如何禁用WordPress自动生成的768、1536、2048像素及-scaled缩略图追格小编分享过两篇关于禁止自动裁剪微缩的内容,有兴趣的同学可以看看
-
追格网站升级维护公告为了给您提供更加优质、效率的服务,我们计划对追格(www.zhuige.com)网站进行更新与升级。
暂无评论,抢个沙发...