本教程参考了94设计的效果，代码参考盾给网，并在原来的基础上进行了优化，网页端效果在移动端就会出现样式错乱，所以代码设定了在移动端不显示该登录效果
本教程仅修改子主题js文件和css文件，后期升级主题不受任何影响。
演示效果：
更新function
b2子主题，可在原来function文件的child.js文件引入下方添加如下代码
或者可以后台头部HTML标签设置的地方引入js
子主题js文件内增加以下代码：
第三步，子主题css文件增加以下代码：
/*登录弹窗样式*/
@media (min-width: 768px){
.login-box-content{background:#fff}
.login-box-content{
background: #4387fd;
background-image: url(https://img.lurending.com/2020/05/21879091822c829702c1be5dc4e6f52c.png);
background-position: 145px bottom;
background-repeat: no-repeat;}
.luren_com_login {width: 400px;
height:auto;
float: left;
}
.login-box-content .login-box-top{ width: 400px;
float: left;background: #fff;}
.modal-content{width:800px}
.luren_com_login {width: 400px;
height:auto;
float: left;
}
.login-box-content .login-box-top{ width: 400px;
float: left;background: #fff;}
.modal-content{width:800px}
.luren_com_login .wxlogin-sidebar{
padding: 50px 50px 0;}
.luren_com_login .wxlogin-sidebar h2 {
font-size: 22px;
margin-bottom: 30px;
color:#fff;
}
.luren_com_login .wxlogin-sidebar ul li{
display: block;
margin-bottom: 10px;
font-size: 15px;
color:#fff;
}
p.module-desc {
border-left: 0px solid #fb5f3c;
padding-left: 0px;
}
.luren_com_login .wxlogin-sidebar ul li i{
margin-right: 10px;
opacity: .52;
position: relative;
top:2px;
}
.login-title span{padding:10px 10px;font-size:16px;color:#252525;}
.login-title span b{color:#252525;}
.login-box-content .login-box-top{padding:36px 24px}
.header .ri-medal-line{ color: #ffd2ab;
font-size: 18px;
position: relative;
top: 3px;
margin-right: 3px;}
.login-social-button .login-qq {
color: #ff7a09;
}
}
@media (max-width: 768px) {
.luren_com_login {
display:none
}
}
/*登录弹窗样式结束*/
素材图片，请自行修改css中的图片地址为自己的：
