追格资讯小程序开源版(酱茄free)登录页美化教程

追格官方小助手/ 2022年12月12日/ 小程序/ 浏览 1012

近期发现有些用户会对追格资讯小程序开源版(又称酱茄free)登录页有自定义的要求。


这里,我们就给大家简单讲一下,如何通过自定义登录页面模板的css,就可以修登录页展示,实现效果如下。




打开文件pages/login/login.vue


按照以下css进行修改,(搜索类名,按代码修改)即可以实现


//是注释掉的原css,


//补充 后面的是新补充的css


	.jiangqie-app-info image {
		// height: 200rpx;
		// width: 200rpx;
		// border-radius: 200rpx;
		
		//补充
		height: 160rpx;
		width: 160rpx;
		border-radius: 20rpx;
		
	}

	.jiangqie-login-btn {
		// margin-top: 160rpx;
		// padding: 0rpx 160rpx;
		
		//补充
		position: fixed;
		bottom: 200rpx;
		display: flex;
		text-align: center;
		width: 100%;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}


	.jiangqie-login-btnl,
	.jiangqie-login-btnr {
		height: 80rpx;
		font-size: 30rpx;
		color: #555;
		font-weight: 400;
		border-radius: 16rpx;
		border: 2rpx solid #DDD;
		// margin-top: 30rpx;
		
		//补充
		width: 240rpx;
	}
	
	
	// 补充
	.jiangqie-login-btn button {
		margin: 0 10rpx;
		padding: 0;
	}

发表评论

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

客服 工单