追格小程序登录页美化教程

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

当大家下载的追格小程序时,有些用户会对登录页有自定义的要求,其实自定义登录页面仅需要修改登录页模板的css就可以实现,仅修改css就可以实现以下效果。



这了就给大家说说怎么修改


打开文件user/login/login.vue


背景色/背景图


这里可以增加 background,来自定义背景色,但由于后台控制背景图,可以后台添加一个透明png即可

	.zhuige-login {
		position: fixed;
		height: 100%;
		width: 100%;
		text-align: center;
		background-size: cover;
		background-position: center;
	}


logo大小


这里可以控制logo大小和圆角


	.zhuige-logo image {
		height: 160rpx;
		width: 160rpx;
		border-radius: 50%;
	}


按钮相关


可以修改按钮边框,颜色,背景色,圆角


	.zhuige-button {
		margin: 0 100rpx;
		line-height: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 1.2rem;
		border: 1rpx solid #EEEEEE;
		background: none;
		color: #FFFFFF;
	}

发表评论

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

客服 工单