超实用的自定义模板干货,如何对追格小程序个人主页进行快速修改

11月/30日/小程序/浏览 316

追格小程序个人主页作为一个访问和分享较多的页面,很多用户会有个性化的展示需求。


调整个性化展示的方法很多,我们可以通过修改页面结构,在保证功能的前提下实现w全自定义的展示。


也可以仅修改css,实现下图展示效果。




接下来我们来讲解如何修改css,实现以上效果


1、打开文件/user/home/home.vue


2、找到以下各css,并按说明修改即可,无需修改任何结构


	.zhuige-home-bg {
		height: 400rpx;
		width: 100%;
		position: relative;
	}
改为:
	.zhuige-home-bg {
		height: 600rpx;
		width: 100%;
		position: relative;
	}


	.zhuige-user-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 10rpx;
	}

改为:
	.zhuige-user-title {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 10rpx;
		margin-top: -317rpx;
                color: #FFFFFF;
	}


	.zhuige-user-info-block view:nth-child(1) {
		position: relative;
	}
改为:
	.zhuige-user-info-block view:nth-child(1) {
		position: relative;
		text-align: center;
	}


	.zhuige-user-info-btn {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
改为:
	.zhuige-user-info-btn {
		position: absolute;
		right: -30rpx;
		bottom: -280rpx;
                transform:scale(0.8);
		margin-bottom: 20rpx;
	}


	.zhuige-user-count {
		border-top: 1rpx solid #EEEEEE;
		padding: 30rpx 10rpx;
		display: flex;
		align-items: center;
	}
改为:
	.zhuige-user-count {
		border-top: 1rpx solid #EEEEEE;
		padding: 30rpx 10rpx;
		display: flex;
		align-items: center;
		color: #FFFFFF;
	}


	.zhuige-user-count>view {
		width: 25%;
		display: flex;
		align-items: baseline;
	}
改为:
	.zhuige-user-count>view {
		width: 25%;
		text-align: center;
		align-items: baseline;
	}


	.zhuige-user-count>view view {
		font-size: 46rpx;
		font-weight: 600;
		margin-left: 4rpx;
	}

改为:
	.zhuige-user-count>view view {
		font-size: 46rpx;
		font-weight: 600;
		line-height: 1.1em;
	}


然后保存即可看到上图效果了!

发表评论

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

客服 工单