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

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

调整个性化展示的方法很多，我们可以通过修改页面结构，在保证功能的前提下实现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;
	}

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