追格课程付费专栏如何调整专栏详情界面

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

新安装追格小程序和付费专栏模块后,如果您要对自己的付费模块界面进行调整,可以考虑优先调整以下几部分:

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;
	}




发表评论

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

客服 工单