LayUi做登录注册

您所在的位置：网站首页 › layuiall › LayUi做登录注册

LayUi做登录注册

2023-04-02 16:33| 来源: 网络整理| 查看: 265

LayUi登录注册页面附代码登录页面注册页面附加CSS，JS代码JS代码 CSS代码

登录页面

下面展示登录页面代码如下。

登录系统用户名密码登录还未账户？点击注册回首页

页面效果如图： LayUi登录页面效果图

注册页面

下面展示注册页面代码如下。

用户注册中心用户账号用户密码确认密码性别真实姓名上传图片回首页注册重置

页面效果如下： LayUI注册页面效果图

附加CSS，JS代码 JS代码

cache.js 实例代码如下

'+ '驊驊龔頾'+ ''+ ''+ '解锁'+ ''+ '

请输入“123456”，否则不会解锁成功哦！！！

'+ '', closeBtn : 0, shade : 0.9, success : function(){ //判断是否设置过头像，如果设置过则修改顶部、左侧和个人资料中的头像，否则使用默认头像 if(window.sessionStorage.getItem('userFace') && $(".userAvatar").length > 0){ $(".userAvatar").attr("src",$(".userAvatar").attr("src").split("images/")[0] + "images/" + window.sessionStorage.getItem('userFace').split("images/")[1]); } } }) $(".admin-header-lock-input").focus(); } $(".lockcms").on("click",function(){ window.sessionStorage.setItem("lockcms",true); lockPage(); }) // 判断是否显示锁屏 if(window.sessionStorage.getItem("lockcms") == "true"){ lockPage(); } // 解锁 $("body").on("click","#unlock",function(){ if($(this).siblings(".admin-header-lock-input").val() == ''){ layer.msg("请输入解锁密码！"); $(this).siblings(".admin-header-lock-input").focus(); }else{ if($(this).siblings(".admin-header-lock-input").val() == "123456"){ window.sessionStorage.setItem("lockcms",false); $(this).siblings(".admin-header-lock-input").val(''); layer.closeAll("page"); }else{ layer.msg("密码错误，请重新输入！"); $(this).siblings(".admin-header-lock-input").val('').focus(); } } }); $(document).on('keydown', function(event) { var event = event || window.event; if(event.keyCode == 13) { $("#unlock").click(); } }); //退出 $(".signOut").click(function(){ window.sessionStorage.removeItem("menu"); menu = []; window.sessionStorage.removeItem("curmenu"); }) //功能设定 $(".functionSetting").click(function(){ layer.open({ title: "功能设定", area: ["380px", "280px"], type: "1", content : ''+ ''+ ''+ '开启Tab缓存'+ ''+ ''+ '开启后刷新页面不关闭打开的Tab页'+ ''+ ''+ ''+ 'Tab切换刷新'+ ''+ ''+ '开启后切换窗口刷新当前页面'+ ''+ ''+ ''+ '单一登陆'+ ''+ ''+ '开启后不可同时多个地方登录'+ ''+ ''+ ''+ '设定完成'+ '朕再想想'+ ''+ ''+ '', success : function(index, layero){ //如果之前设置过，则设置它的值 $(".functionSrtting_box input[name=cache]").prop("checked",cacheStr=="true" ? true : false); $(".functionSrtting_box input[name=changeRefresh]").prop("checked",changeRefreshStr=="true" ? true : false); $(".functionSrtting_box input[name=oneLogin]").prop("checked",oneLoginStr=="true" ? true : false); //设定 form.on("submit(settingSuccess)",function(data){ window.sessionStorage.setItem("cache",data.field.cache=="on" ? "true" : "false"); window.sessionStorage.setItem("changeRefresh",data.field.changeRefresh=="on" ? "true" : "false"); window.sessionStorage.setItem("oneLogin",data.field.oneLogin=="on" ? "true" : "false"); window.sessionStorage.removeItem("menu"); window.sessionStorage.removeItem("curmenu"); location.reload(); return false; }); //取消设定 form.on("submit(noSetting)",function(){ layer.closeAll("page"); }); //单一登陆提示 form.on('switch(multipleLogin)', function(data){ layer.tips('温馨提示：此功能需要开发配合，所以没有功能演示，敬请谅解', data.othis,{tips: 1}) }); form.render(); //表单渲染 } }) }) //判断是否修改过系统基本设置，去显示底部版权信息 if(window.sessionStorage.getItem("systemParameter")){ systemParameter = JSON.parse(window.sessionStorage.getItem("systemParameter")); $(".footer p span").text(systemParameter.powerby); } //更换皮肤 function skins(){ var skin = window.sessionStorage.getItem("skin"); if(skin){ //如果更换过皮肤 if(window.sessionStorage.getItem("skinValue") != "自定义"){ $("body").addClass(window.sessionStorage.getItem("skin")); }else{ $(".layui-layout-admin .layui-header").css("background-color",skin.split(',')[0]); $(".layui-bg-black").css("background-color",skin.split(',')[1]); $(".hideMenu").css("background-color",skin.split(',')[2]); } } } skins(); $(".changeSkin").click(function(){ layer.open({ title : "更换皮肤", area : ["310px","280px"], type : "1", content : ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ '确定更换'+ '朕再想想'+ ''+ ''+ '', success : function(index, layero){ var skin = window.sessionStorage.getItem("skin"); if(window.sessionStorage.getItem("skinValue")){ $(".skins_box input[value="+window.sessionStorage.getItem("skinValue")+"]").attr("checked","checked"); }; if($(".skins_box input[value=自定义]").attr("checked")){ $(".skinCustom").css("visibility","inherit"); $(".topColor").val(skin.split(',')[0]); $(".leftColor").val(skin.split(',')[1]); $(".menuColor").val(skin.split(',')[2]); }; form.render(); $(".skins_box").removeClass("layui-hide"); $(".skins_box .layui-form-radio").on("click",function(){ var skinColor; if($(this).find("div").text() == "橙色"){ skinColor = "orange"; }else if($(this).find("div").text() == "蓝色"){ skinColor = "blue"; }else if($(this).find("div").text() == "默认"){ skinColor = ""; } if($(this).find("div").text() != "自定义"){ $(".topColor,.leftColor,.menuColor").val(''); $("body").removeAttr("class").addClass("main_body "+skinColor+""); $(".skinCustom").removeAttr("style"); $(".layui-bg-black,.hideMenu,.layui-layout-admin .layui-header").removeAttr("style"); }else{ $(".skinCustom").css("visibility","inherit"); } }) var skinStr,skinColor; $(".topColor").blur(function(){ $(".layui-layout-admin .layui-header").css("background-color",$(this).val()+" !important"); }) $(".leftColor").blur(function(){ $(".layui-bg-black").css("background-color",$(this).val()+" !important"); }) $(".menuColor").blur(function(){ $(".hideMenu").css("background-color",$(this).val()+" !important"); }) form.on("submit(changeSkin)",function(data){ if(data.field.skin != "自定义"){ if(data.field.skin == "橙色"){ skinColor = "orange"; }else if(data.field.skin == "蓝色"){ skinColor = "blue"; }else if(data.field.skin == "默认"){ skinColor = ""; } window.sessionStorage.setItem("skin",skinColor); }else{ skinStr = $(".topColor").val()+','+$(".leftColor").val()+','+$(".menuColor").val(); window.sessionStorage.setItem("skin",skinStr); $("body").removeAttr("class").addClass("main_body"); } window.sessionStorage.setItem("skinValue",data.field.skin); layer.closeAll("page"); }); form.on("submit(noChangeSkin)",function(){ $("body").removeAttr("class").addClass("main_body "+window.sessionStorage.getItem("skin")+""); $(".layui-bg-black,.hideMenu,.layui-layout-admin .layui-header").removeAttr("style"); skins(); layer.closeAll("page"); }); }, cancel : function(){ $("body").removeAttr("class").addClass("main_body "+window.sessionStorage.getItem("skin")+""); $(".layui-bg-black,.hideMenu,.layui-layout-admin .layui-header").removeAttr("style"); skins(); } }) }) })

/*$().ready(function() { $("#login_form").validate({ rules: { username: "required", password: { required: true, minlength: 5 }, }, messages: { username: "请输入姓名", password: { required: "请输入密码", minlength: jQuery.format("密码不能小于{0}个字符") }, } }); $("#register_form").validate({ rules: { username: "required", password: { required: true, minlength: 5 }, rpassword: { equalTo: "#register_password" }, email: { required: true, email: true } }, messages: { username: "请输入姓名", password: { required: "请输入密码", minlength: jQuery.format("密码不能小于{0}个字符") }, rpassword: { equalTo: "两次密码不一样" }, email: { required: "请输入邮箱", email: "请输入有效邮箱" } } }); }); $(function() { $("#register_btn").click(function() { $("#register_form").css("display", "block"); $("#login_form").css("display", "none"); }); $("#back_btn").click(function() { $("#register_form").css("display", "none"); $("#login_form").css("display", "block"); }); });*/ layui.use(['form', 'layer', 'jquery'], function () { var form = layui.form, layer = parent.layer === undefined ? layui.layer : top.layer $ = layui.jquery; //登录按钮 form.on('submit(login)', function (result) { var btn = $(this); //设置登录按钮为不可点击 btn.text("登录中...").attr("disabled", "disabled").addClass("layui-disabled"); $.ajax({ url: '/login/login', contentType: "application/json", dataType: 'json', type:"post", data: JSON.stringify(result.field), success: function (res) { //失败，返回错误信息 if (res.code!=200) { layer.msg(res.msg); //设置登录按钮为不可点击 btn.text("登录").attr("disabled", false).removeClass("layui-disabled"); $(function () { changeImg(); }) } else { //成功，跳转到首页 layer.msg(res.msg); location.href = "/"; } } }) }); //表单输入效果 $(".loginBody .input-item").click(function (e) { e.stopPropagation(); $(this).addClass("layui-input-focus").find(".layui-input").focus(); }) $(".loginBody .layui-form-item .layui-input").focus(function () { $(this).parent().addClass("layui-input-focus"); }) $(".loginBody .layui-form-item .layui-input").blur(function () { $(this).parent().removeClass("layui-input-focus"); if ($(this).val() != '') { $(this).parent().addClass("layui-input-active"); } else { $(this).parent().removeClass("layui-input-active"); } }) }) /* 触发JS刷新切换图片*/ function changeImg() { var img = document.getElementById("verify_code_img"); img.src = "/verifyCode/getImg?date=" + new Date(); }

layui.use(['layer', 'upload', 'element', 'form', 'layedit'], function () { var layer = layui.layer; var form = layui.form; var element = layui.element; var layedit = layui.layedit; var $ = layui.jquery , upload = layui.upload; $(function () { $("#butt").click(function () { layer.open({ type: 1, title: "注册页面", area: ['600px', '700px'], offset: '20px', content: $("#gb"), cancel: function () { // 你点击右上角 X 取消后要做什么 setTimeout('window.location.reload()', 1); }, success: function () { form.on('submit(formDemo)', function (data) { }); } }) form.render(); }) //验证输入的密码是否相同； $("#pass2").blur(function () { var pass1 = $("#pass1").val(); var pass2 = $("#pass2").val(); if (pass1 != pass2) { layer.msg("两次输入的密码不一致", { "icon": 2, "time": 2000 }); $("#pass2").val(""); return false; } return true; }); }); //创建一个编辑器 var editIndex = layedit.build('LAY_demo_editor'); //自定义验证规则 form.verify({ title: function (value) { if (value.length layedit.sync(editIndex); } }); //判断是登录还是注册 var img = document.getElementById("imgs"); if (img!=null){ $("#demo1").attr("src","/register/showImage?path="+img.defaultValue); }else{ $("#demo1").attr("src",'/images/mr.png'); } //注册 form.on('submit(formDemo)', function (result) { debugger var btn = $(this); //设置注册按钮不可点击，防止多次点击 btn.text("提交中...").attr("disabled", "disabled").addClass("layui-disabled"); $.ajax({ url: "/register/addUser", data: JSON.stringify(result.field), type: "post", dataType: "json", contentType: "application/json;charsetset=UTF-8",//必须 success: function (res) { btn.text("提交").attr("disabled", false).removeClass("layui-disabled"); if (res.code != 200) { layer.msg(res.message); } else { //跳转到登录页面 if (session!=null){ location.href = "/"; }else{ location.href = "/login/toLogin"; } } } }); }) //普通图片上传 var uploadInst = upload.render({ elem: '#test1' , url: '/register/uploadFile' //改成您自己的上传接口 , acceptMime: 'image/*' , field: 'mf' , method: "post" //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交 , before: function (obj) { //预读本地文件示例，不支持ie8 obj.preview(function (index, file, result) { $('#demo1').attr('src', result); //图片链接（base64） }); } , done: function (res, index, upload) { $("#uploadImg").val(res.path); //如果上传失败 if (res.code > 0) { return layer.msg('上传失败'); } //上传成功 } , error: function () { //演示失败状态，并实现重传 var demoText = $('#demoText'); demoText.html('上传失败重试'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); }); CSS代码

public.css 实例代码如下

/*公共样式*/ .childrenBody { padding: 10px; } .layui-table-view { margin: 0 !important; } .magb0 { margin-bottom: 0 !important; } .magt0 { margin-top: 0 !important; } .magt3 { margin-top: 3px !important; } .magt10 { margin-top: 10px !important; } .magb15 { margin-bottom: 15px !important; } .magt30 { margin-top: 30px !important; } .layui-left { text-align: left; } .layui-block { width: 100% !important; } .layui-center { text-align: center; } .layui-right { text-align: right; } .layui-elem-quote.title { padding: 10px 15px; margin-bottom: 0; } .layui-bg-white { background-color: #fff !important; } .border { border: 1px solid #e6e6e6 !important; padding: 10px; border-top: none; } .main_btn .layui-btn { margin: 2px 5px 2px 0; } .layui-timeline-axis { left: -4px; } .layui-elem-quote { word-break: break-all; } .icons li, .icons li:hover, .loginBody .seraph, .loginBody .seraph:hover, .loginBody .layui-form-item.layui-input-focus label, .loginBody .layui-form-item label, .loginBody .layui-form-item.layui-input-focus input, .loginBody .layui-form-item input { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .icons li:hover i, .icons li i { transition: font-size 0.3s ease-in-out; -webkit-transition: font-size 0.3s ease-in-out; } .loginBody .layui-input-focus .layui-input::-webkit-input-placeholder { transition: color 0.2s linear 0.2s; -webkit-transition: color 0.2s linear 0.2s; } .loginBody .layui-input-focus .layui-input::-moz-placeholder { transition: color 0.2s linear 0.2s; } .loginBody .layui-input-focus .layui-input:-ms-input-placeholder { transition: color 0.2s linear 0.2s; } .loginBody .layui-input-focus .layui-input::placeholder { transition: color 0.2s linear 0.2s; -webkit-transition: color 0.2s linear 0.2s; } /*后台首页*/ .panel_box { margin-bottom: 5px; } .panel { text-align: center; height: 90px; } .panel_box a { display: block; border-radius: 5px; overflow: hidden; height: 80px; background-color: #f2f2f2 !important; } .panel_icon { width: 40%; display: inline-block; line-height: 80px; float: left; position: relative; height: 100%; } .panel_icon i { font-size: 40px !important; color: #fff; display: inline-block; } .panel_word { width: 60%; display: inline-block; float: right; margin: 13px 0 14px; } .panel_word span { font-size: 25px; display: block; height: 34px; } .panel .loginTime { font-size: 15px; color: #1E9FFF; line-height: 17px; } .panel em { font-style: normal; } .history_box { min-height: 500px; height: 500px; overflow-y: scroll; padding: 10px !important; } .history_box .layui-timeline .layui-timeline-item:last-child { padding-bottom: 0; } @media screen and (max-width: 1200px) { .history_box { height: auto !important; overflow-y: inherit; } } /*修改密码*/ .pwdTips { min-height: auto; margin: 40px 0 15px 110px; } /*个人资料*/ form input.layui-input[disabled] { background: #f2f2f2; color: #595963 !important; } .user_right { text-align: center; } .user_right p { margin: 10px 0 25px; font-size: 12px; text-align: center; color: #FF5722; } .user_right img#userFace { width: 200px; height: 200px; margin-top: 20px; cursor: pointer; box-shadow: 0 0 50px #44576b; } .userAddress.layui-form-item .layui-input-inline { width: 23%; } .userAddress.layui-form-item .layui-input-inline:last-child { margin-right: 0; } /*下拉多选*/ .layui-form-item select[multiple] + .layui-form-select dd { padding: 0; } .layui-form-item select[multiple] + .layui-form-select .layui-form-checkbox[lay-skin=primary] { margin: 0 !important; display: block; line-height: 36px !important; position: relative; padding-left: 26px; } .layui-form-item select[multiple] + .layui-form-select .layui-form-checkbox[lay-skin=primary] span { line-height: 36px !important; float: none; } .layui-form-item select[multiple] + .layui-form-select .layui-form-checkbox[lay-skin=primary] i { position: absolute; left: 10px; top: 0; margin-top: 9px; } .multiSelect { line-height: normal; height: auto; padding: 4px 10px; overflow: hidden; min-height: 38px; margin-top: -38px; left: 0; z-index: 99; position: relative; background: none; } .multiSelect a { padding: 2px 5px; background: #908e8e; border-radius: 2px; color: #fff; display: block; line-height: 20px; height: 20px; margin: 2px 5px 2px 0; float: left; } .multiSelect a span { float: left; } .multiSelect a i { float: left; display: block; margin: 2px 0 0 2px; border-radius: 2px; width: 8px; height: 8px; background: url(../images/close.png) no-repeat center; background-size: 65%; padding: 4px; } .multiSelect a i:hover { background-color: #545556; } /*404页面*/ .noFind { text-align: center; padding-top: 2%; } .noFind i { line-height: 1em; font-size: 12em !important; color: #393D50; display: block; } .ufo { text-align: center; height: 100%; position: relative; } .noFind .page_icon, .noFind .ufo_icon { opacity: 1; position: absolute; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); } .noFind .page_icon { top: 300px; animation: pageGo 0.3s ease-in 0.3s forwards; -webkit-animation: pageGo 0.3s ease-in 0.3s forwards; -o-animation: pageGo 0.3s ease-in 0.3s forwards; -moz-animation: pageGo 0.3s ease-in 0.3s forwards; } .noFind .ufo_icon { top: 100px; animation: ufo 1s ease-in 0.6s forwards; -webkit-animation: ufo 1s ease-in 0.6s forwards; -o-animation: ufo 1s ease-in 0.6s forwards; -moz-animation: ufo 1s ease-in 0.6s forwards; } .page404 { margin-top: 10%; opacity: 0; font-size: 0; animation: page404 0.5s ease-in 1.7s forwards; -webkit-animation: page404 0.5s ease-in 1.7s forwards; -o-animation: page404 0.5s ease-in 1.7s forwards; -moz-animation: page404 0.5s ease-in 1.7s forwards; } .page404 p { font-size: 20px; font-weight: 300; color: #999; } /*页面被吸走*/ @keyframes pageGo { from { font-size: 12em; top: 300px; } to { font-size: 0; opacity: 0; top: 100px; } } @-moz-keyframes pageGo { from { font-size: 12em; top: 300px; } to { font-size: 0; opacity: 0; top: 100px } } @-webkit-keyframes pageGo { from { font-size: 12em; top: 300px; } to { font-size: 0; opacity: 0; top: 100px } } @-o-keyframes pageGo { from { font-size: 12em; top: 300px; } to { font-size: 0; opacity: 0; top: 100px } } /*ufo飞走*/ @keyframes ufo { 0% { font-size: 14em; top: 100px; } 20% { font-size: 12em; top: 50px; } 100% { font-size: 0; opacity: 0; top: -100px; left: 80%; } } @-moz-keyframes ufo { 0% { font-size: 14em; top: 100px; } 20% { font-size: 12em; top: 50px; } 100% { font-size: 0; opacity: 0; top: -100px; left: 80%; } } @-webkit-keyframes ufo { 0% { font-size: 14em; top: 100px; } 20% { font-size: 12em; top: 50px; } 100% { font-size: 0; opacity: 0; top: -100px; left: 80%; } } @-o-keyframes ufo { 0% { font-size: 14em; top: 100px; } 20% { font-size: 12em; top: 50px; } 100% { font-size: 0; opacity: 0; top: -100px; left: 80%; } } /*404显示*/ @keyframes page404 { from { opacity: 0; font-size: 2em; } to { opacity: 1; font-size: 2em; } } @-moz-keyframes page404 { from { opacity: 0; font-size: 2em; } to { opacity: 1; font-size: 2em; } } @-webkit-keyframes page404 { from { opacity: 0; font-size: 2em; } to { opacity: 1; font-size: 2em; } } @-o-keyframes page404 { from { opacity: 0; font-size: 2em; } to { opacity: 1; font-size: 2em; } } /*图标管理*/ .iconsLength { margin: 0 5px; } .icons li { margin: 5px 0; text-align: center; height: 120px; cursor: pointer; } .icons li i { display: block; font-size: 35px; margin: 10px 0; line-height: 60px; height: 60px; } .icons li:hover { background: rgba(13, 10, 49, .9); border-radius: 5px; color: #fff; } .icons li:hover i { font-size: 50px; } #copyText { width: 0; height: 0; opacity: 0; position: absolute; left: -9999px; top: -9999px; } /*开发文档*/ h2.method { font-size: 18px; line-height: 45px; padding-left: 5px; } /*登录*/ .loginHtml, .loginBody { height: 100%; } .loginBody { background: url("../images/bg1.jpg") no-repeat center center; } .loginBody form.layui-form { padding: 0 20px; width: 300px; height: 379px; position: absolute; left: 50%; top: 45%; margin: -150px 0 0 -150px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 0 0 50px #009688; } #gb { position: absolute; left: 40%; top: 20%; /*background: #fff;*/ /*box-shadow: 0 0 50px #009688;*/ } .login_face { margin: -55px auto 20px; height: auto !important; white-space: normal; width: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid #fff; overflow: hidden; box-shadow: 0 0 30px #009688; } .login_face img { width: 100%; } .loginBody .layui-form-item { position: relative; } .loginBody .layui-form-item label { position: absolute; color: #757575; left: 10px; top: 9px; line-height: 20px; background: #fff; padding: 0 5px; font-size: 14px; cursor: text; } .layui-form-label { color: #757575; right: 10px; top: 9px; line-height: 20px; background: #fff; padding: 0 5px; font-size: 14px; cursor: text; } .loginBody .layui-form-item.layui-input-focus label { top: -10px; font-size: 12px; color: #ff6700; } .loginBody .layui-form-item.layui-input-active label { top: -10px; font-size: 12px; } .loginBody .layui-input::-webkit-input-placeholder { color: #fff; } .loginBody .layui-input::-moz-placeholder { color: #fff; } .loginBody .layui-input:-ms-input-placeholder { color: #fff; } .loginBody .layui-input::placeholder { color: #fff; } .loginBody .layui-form-item.layui-input-focus input { border-color: #ff6700 !important; } .loginBody .layui-input-focus .layui-input::-webkit-input-placeholder { color: #757575; } .loginBody .layui-input-focus .layui-input::-moz-placeholder { color: #757575; } .loginBody .layui-input-focus .layui-input:-ms-input-placeholder { color: #757575; } .loginBody .layui-input-focus .layui-input::placeholder { color: #757575; } .loginBody .seraph { font-size: 30px; text-align: center; } .loginBody .seraph.icon-qq:hover { color: #0288d1; } .loginBody .seraph.icon-wechat:hover { color: #00d20d; } .loginBody .seraph.icon-sina:hover { color: #d32f2f; } .imgCode { position: relative; } #imgCode img { position: absolute; top: 1px; right: 1px; cursor: pointer; } /*用户等级*/ .layui-table-view .layui-table span.seraph { font-size: 25px !important; } .vip1 { color: #994a2b; } .vip2 { color: #899396; } .vip3 { color: #bd6a08; } .vip4 { color: #a3b8c4; } .vip5 { color: #63c3ea; } .vip6 { color: #b563ed; } .vip7 { color: #ff9831; } .vip8 { color: #A757A8; } .vip9 { color: #0ff; } .vip10 { color: #f00; } /*新闻添加*/ .layui-elem-quote .layui-inline { margin: 3px 0; } .category .layui-form-checkbox { margin: 5px 0; } .border .layui-form-item { margin-bottom: 10px; } .border .layui-form-label { width: 50px; } .border .layui-form-label i { position: absolute; top: 10px; left: 3px; } .border .layui-input-block { margin-left: 80px; } .thumbBox { height: 151px; overflow: hidden; border: 1px solid #e6e6e6; border-radius: 2px; cursor: pointer; position: relative; text-align: center; line-height: 153px; } .thumbImg { max-width: 100%; max-height: 100%; border: none; } .thumbBox:after { position: absolute; width: 100%; height: 100%; line-height: 153px; z-index: -1; text-align: center; font-size: 20px; content: "缩略图"; left: 0; top: 0; color: #9F9F9F; } /*图片管理*/ #Images li { width: 19%; margin: 0.5% 0.5%; float: left; overflow: hidden; } #Images li img { width: 100%; cursor: pointer; } #Images li .operate { display: block; height: 40px; width: 100%; background: #f4f5f9; } #Images li .operate .check { float: left; margin-left: 11px; height: 18px; padding: 11px 0; width: 74%; position: relative; } #Images li .operate .check .layui-form-checkbox[lay-skin=primary] { width: 100%; } #Images li .operate .check .layui-form-checkbox[lay-skin=primary] span { padding: 0 5px 0 25px; width: 100%; box-sizing: border-box; } #Images li .operate .check .layui-form-checkbox[lay-skin=primary] i { position: absolute; left: 0; top: 0; } #Images li .operate .img_del { float: right; margin: 9px 11px 0 0; font-size: 22px !important; cursor: pointer; } #Images li .operate .img_del:hover { color: #f00; } @media screen and (max-width: 1050px) { #Images li { width: 24%; } } @media screen and (max-width: 750px) { #Images li { width: 49%; } } @media screen and (max-width: 432px) { #Images li { width: 99%; } } /*系统日志*/ .layui-btn-green { background-color: #5FB878 !important; } /*友情链接*/ .linkLogo { width: 80px; height: 40px; overflow: hidden; border: 1px solid #e6e6e6; border-radius: 2px; cursor: pointer; margin: 0 auto; position: relative; text-align: center; line-height: 42px; } .linkLogoImg { max-width: 90%; max-height: 90%; } .linkLogo:after { position: absolute; width: 100%; height: 100%; line-height: 42px; z-index: -1; text-align: center; font-size: 12px; content: "上传LOGO"; left: 0; top: 0; color: #9F9F9F; } .linksAdd .layui-form-label { width: 60px; padding-left: 0; } .linksAdd .layui-input-block { margin-left: 75px; } .linksAdd .layui-input-block input { padding: 0 5px; } /*响应式*/ @media screen and (max-width: 450px) { #userFaceBtn { height: 30px; line-height: 30px; padding: 0 10px; font-size: 12px; } .user_right img#userFace { width: 100px; height: 100px; margin-top: 0; } .layui-col-xs12 .layui-form-label { width: 60px; padding-left: 0; } .layui-col-xs12 .layui-input-block, .layui-col-xs12 .layui-input-inline { margin-left: 75px; } .layui-col-xs12 .layui-input-inline { left: 0 !important; width: auto !important; } .noFind { padding-top: 0; } *[pc] { display: none; } } .loginbox-title { position: relative; text-align: center; width: 100%; height: 35px; padding-top: 10px; font-family: 'Lucida Sans', 'trebuchet MS', Arial, Helvetica; font-size: 20px; font-weight: normal; color: #444 } .registerbox-title { text-align: center; width: 100%; height: 35px; padding-bottom: 20px; font-family: 'Lucida Sans', 'trebuchet MS', Arial, Helvetica; font-size: 30px; font-weight: normal; color: #444 } .loginbox-social { padding: 0 10px 10px; text-align: center } .social-title { font-size: 14px; font-weight: 500; color: #a9a9a9; margin-top: 10px }

【本文地址】

LayUi做登录注册

LayUi做登录注册

今日新闻

推荐新闻