layuiCMS

css/images.css

@@ -0,0 +1,21 @@
+.layui-flow-more{ clear: both; margin-top: 20px; }
+#Images li{ width:19%; margin:0.5% 0.5%; float: left; overflow:hidden;}
+#Images li img{ width:100%; }
+#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; }
+#Images li .operate .img_del{ float:right; margin:7px 11px 0 0; font-size: 22px; 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%;}
+}

css/main.css

@@ -0,0 +1,127 @@
+/*公共样式*/
+.main_body{ min-width:320px; }
+.layui-elem-quote.title{ padding:10px 15px; margin-bottom:0; }
+.layui-tab-more{ position: relative; z-index: 99; background:#fff; }
+.layui-layer-tab .layui-layer-title span.layui-layer-tabnow{ height:42px !important; }
+.layui-layer-tab .layui-layer-title span{ min-width:45px !important; }
+/*模拟加载层图标样式*/
+.layui-layer-dialog .layui-layer-content .layui-layer-ico16{ background-size:100% 100% !important; }
+
+/*样式改变的过渡*/
+.logo,.top_menu .layui-nav-item[pc],.component,.top_menu .layui-nav-item[mobile],.layui-nav,.layui-layout-admin .layui-main,.site-mobile .layui-side,.layui-layout-admin .layui-side,.site-mobile .site-tree-mobile,.layui-body,.layui-layout-admin .layui-footer,.layui-layout-admin .layui-side,.panel,.panel .panel_icon i{ transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; }
+
+
+.logo{ color: #fff; float: left; line-height:60px; font-size:20px; padding:0 25px; text-align: center; margin-right: 15px; }
+.weather{ color:#fff; float:left; margin:15px 0 0 50px;}
+.component{ float: left; width:200px; height:30px; margin-top: 15px; position: relative;}
+.component .layui-input{ height:30px; line-height: 30px; font-size:12px; border:none; transition: all 0.3s; }
+.component .layui-input:focus{ background:#fff; color:#000; }
+.component .layui-form-select dl{ top:33px; background:#fff; }
+.component .layui-form-select .layui-edge,.top_menu .layui-nav-item[mobile]{ display:none; }
+.component .layui-icon{ position: absolute; right:8px; top:8px; color:#000; }
+
+/*顶部右侧导航*/
+.top_menu{ position:absolute; right:0; background:none }
+.top_menu.layui-nav .layui-this:after{ width:0px; }
+.top_menu.layui-nav .layui-this{ background-color:transparent; }
+.top_menu.layui-nav .layui-this a{ color:#c2c2c2; }
+.top_menu.layui-nav dd.layui-this a{ color:#333; }
+.top_menu.layui-nav .layui-nav-item a:hover{ color:#fff; }
+.top_menu.layui-nav .layui-nav-child a:hover{ color:#fff; background-color:#5FB878; }
+.top_menu .iconfont{ font-size: 14px !important; }
+.top_menu .layui-nav-bar{ top:60px !important; background-color:rgba(0,0,0,0.7) }
+
+/*左侧用户头像*/
+.layui-layout-admin .layui-side{ left:0; }
+.user-photo{width: 200px; height: 120px; padding-top: 15px; padding-bottom: 5px;}
+.user-photo a.img{ display: block; width: 76px; height: 76px; margin: 0 auto; margin-bottom: 15px;}
+.user-photo a.img img{ display: block; border: none; width: 100%; height: 100%; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 4px solid #44576b;}
+.user-photo p{ display: block; width: 100%; height: 25px; color: #ffffff; text-align: center; font-size: 12px; white-space: nowrap;line-height: 25px; overflow: hidden;}
+/*左侧导航重定义*/
+.layui-nav-item a cite{ padding:0 5px; }
+.layui-side-scroll{ height:auto; }
+.layui-nav-tree .layui-nav-child a{ padding-left: 40px; }
+.layui-nav-tree .layui-nav-child a:hover{ background-color:#4E5465; }
+.layui-nav-tree .layui-nav-child dd.layui-this a:hover{ background-color:#009688; }
+
+/*右侧body*/
+.layui-body{overflow:hidden;}
+.layui-tab-content{ height:100%; padding:0; }
+.layui-tab-item{ position: absolute; top: 42px; bottom:0; left: 0; right: 0; padding: 0; margin: 0;-webkit-overflow-scrolling: touch;}
+.layui-body{ border-top: 5px solid #1AA094;border-left: 2px solid #1AA094;}
+.marg0{ margin:0; }
+.layui-tab-title .layui-this{ background-color:#1AA094; color:#fff; }
+.layui-tab-title .layui-this:after{ border:none; }
+.layui-tab-title li cite{ font-style: normal; padding-left:5px; }
+.clildFrame.layui-tab-content{ padding-right: 0; }
+.clildFrame.layui-tab-content iframe{ width: 100%; height: 100%; border:none; min-width: 320px; }
+/*main.html*/
+.row,.col,.panel_word,.panel_icon{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}
+.row{ margin-left:-10px; overflow:hidden;}
+.col{ padding-left:10px;}
+.panel{float: left; text-align: center; width:16.666%; min-width:210px; margin-bottom: 10px;}
+.panel_box a{display:block; background-color:#f2f2f2; border-radius:5px; overflow:hidden; }
+.panel_icon{ width:40%; display: inline-block; padding:22px 0; background-color:#54ade8;float:left;}
+.panel_icon i{ font-size:3em; color:#fff;}
+.panel a:hover .panel_icon i{ display:inline-block; transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg);}
+.panel_word{ width:60%; display: inline-block; float:right; margin-top: 22px; }
+.panel_word span{ font-size:25px; display:block; height:30px; line-height:30px; }
+.allNews em{ font-style:normal; font-size:16px;display: block; }
+.panel_box a .allNews cite{ display:none; }
+.panel_box a cite{ font-size:16px; display: block; font-style:normal; }
+.sysNotice{ width:50%; float: left; }
+.sysNotice .layui-elem-quote{ line-height:26px; position: relative;}
+.sysNotice .layui-table{ margin-top:0; border-left:5px solid #e2e2e2; }
+.sysNotice .title .icon-new1{ position: absolute; top:8px; margin-left: 10px; color:#f00; font-size:25px; }
+
+/*锁屏*/
+.admin-header-lock{width: 320px; height: 170px; padding: 20px; position: relative; text-align: center;}
+.admin-header-lock-img{width: 60px; height: 60px; margin: 0 auto;}
+.admin-header-lock-img img{width: 60px; height: 60px; border-radius: 100%;}
+.admin-header-lock-name{color: #009688;margin: 8px 0 15px 0;}
+.input_btn{ overflow: hidden; margin-bottom: 10px; }
+.admin-header-lock-input{width: 170px; color: #fff;background-color: #009688; float: left; margin:0 10px 0 40px; border:none;}
+.admin-header-lock-input::-webkit-input-placeholder {color:#fff;}
+.admin-header-lock-input::-moz-placeholder {color:#fff;}
+.admin-header-lock-input::-ms-input-placeholder {color:#fff;}
+.admin-header-lock-input:-moz-placeholder {color:#fff;}
+#unlock{ float: left; }
+#lock-box p{ color:#e60000; }
+
+/*底部*/
+.footer{ text-align: center; line-height:44px;border-left: 2px solid #1AA094;}
+
+
+/*响应式*/
+@media screen and (max-width:1282px){
+	.panel{ width:33.3333%; }
+}
+@media screen and (max-width:1050px){
+	.layui-nav.top_menu .layui-nav-item a{ padding:0 10px; }
+	/*天气信息*/
+	.weather[pc]{ display: none !important; }
+	.sysNotice{ width:100%; }
+}
+@media screen and (max-width: 750px){
+	.logo{ padding:0;}
+	.top_menu .layui-nav-item[pc],.component,.site-mobile .site-tree-mobile{ display: none !important; }
+	.top_menu .layui-nav-item.showNotice[pc]{ display:inline-block !important; }
+	.top_menu .layui-nav-item[mobile]{ display:inline-block; }
+	.layui-nav.top_menu,.layui-nav.top_menu .layui-nav-item a{ padding:0 10px; }
+	.layui-layout-admin .layui-main{ margin-right: 0; }
+
+	/*左侧导航*/
+	.layui-layout-admin .layui-side{ left:-260px; }
+	.site-mobile .layui-side{ left: 0; z-index:9999; }
+	.site-tree-mobile {display: block!important; position: fixed; z-index: 100000; bottom: 15px; left: 15px; width: 50px; height: 50px; line-height: 50px; border-radius: 2px; text-align: center; background-color: rgba(0,0,0,.7); color: #fff;}
+	.site-mobile .site-mobile-shade { content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.8); z-index: 999;}
+
+	/*layui-body*/
+	.panel{ width:50%; }
+
+	.layui-body,.layui-layout-admin .layui-footer{ left:0; }
+}
+@media screen and (max-width:432px){
+	.top_menu .layui-nav-item.showNotice[pc]{ display:none !important; }
+	.panel{ width:100%; }
+}

css/message.css

@@ -0,0 +1,15 @@
+.selectMsg{ width:110px; margin-right: 15px; }
+
+.msg_info,.msg_time,.msg_reply,.msg_opr{min-height:50px; text-align:center;}
+.msg_info{text-align:left; position: relative; }
+.msg_info>img{ position: absolute; left:10px; top:10px; cursor:pointer; }
+.msg_info .user_info{ padding-left:55px; line-height:25px; }
+.msg_info .user_info h2{ color:#222; cursor:pointer; }
+.msg_info .user_info h2:hover{ color:#1AA094;}
+.msg_info .user_info p{ color:#8d8d8d; }
+.msg_reply{ color:#e15f63; }
+.msg_opr .layui-btn{ margin:2px 5px; }
+
+/*回复*/
+.replay_edit{ overflow: hidden; margin-bottom:20px; }
+.replay_edit a{margin-top: 10px; width:100px; float:right;}

css/news.css

@@ -0,0 +1,8 @@
+.news_search{ padding:10px 10px; }
+.news_search .layui-inline{ margin:5px 5px 5px 0; }
+.layui-table,.layui-table th{ text-align:center; }
+.news_list .layui-btn,.news_list .layui-btn+.layui-btn{ margin:2px 5px; }
+.news_list .layui-form-switch{ margin-top:0; }
+
+/*分页*/
+#page{ text-align:right; }

css/user.css

@@ -0,0 +1,31 @@
+form input.layui-input[disabled]{ background:#f2f2f2; color:#595963!important; }
+.user_left{ width:45%; float: left; margin:20px 0 0 5%; }
+.user_right{ width:25%; float: left; margin:20px 0 0 5%; 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; }
+.layui-table,.layui-table th{ text-align:center; }
+
+/*用户列表*/
+.news_list .layui-btn,.news_list .layui-btn+.layui-btn{ margin:2px 5px; }
+#page{ text-align:right; }
+
+/*修改密码*/
+.changePwd{ width:30%; margin:3% 0 0 5%; }
+
+
+/*适配*/
+@media screen and (max-width:1050px){
+	/*用户信息*/
+	.user_left,.user_right,.changePwd{ width:100%; float:none; margin-left: 0; }
+	.user_right{ margin-bottom: 20px; }
+}
+@media screen and (max-width: 750px){
+	/*用户信息*/
+	.user_left,.user_right,.changePwd{ width:100%; float:none; margin-left: 0; }
+	.user_right{ margin-bottom: 20px; }
+}
+@media screen and (max-width:432px){
+	/*用户信息*/
+	.user_left,.user_right,.changePwd{ width:100%; float:none; margin-left: 0; }
+	.user_right{ margin-bottom: 20px; }
+}

index.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>layui后台管理模板</title>
+	<meta name="renderer" content="webkit">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+	<meta http-equiv="Access-Control-Allow-Origin" content="*">
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black">
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="format-detection" content="telephone=no">
+	<link rel="icon" href="favicon.ico">
+	<link rel="stylesheet" href="layui/css/layui.css" media="all" />
+	<link rel="stylesheet" href="//at.alicdn.com/t/font_eolqem241z66flxr.css" media="all" />
+	<link rel="stylesheet" href="css/main.css" media="all" />
+</head>
+<body class="main_body">
+	<div class="layui-layout layui-layout-admin">
+		<!-- 顶部 -->
+		<div class="layui-header header">
+			<div class="layui-main">
+				<a href="#" class="logo">layui后台管理</a>
+				<!-- 搜索 -->
+				<div class="layui-form component">
+			        <select name="modules" lay-verify="required" lay-search="">
+						<option value="">直接选择或搜索选择</option>
+						<option value="1">layer</option>
+						<option value="2">form</option>
+						<option value="3">layim</option>
+						<option value="4">element</option>
+						<option value="5">laytpl</option>
+						<option value="6">upload</option>
+						<option value="7">laydate</option>
+						<option value="8">laypage</option>
+						<option value="9">flow</option>
+						<option value="10">util</option>
+						<option value="11">code</option>
+						<option value="12">tree</option>
+						<option value="13">layedit</option>
+						<option value="14">nav</option>
+						<option value="15">tab</option>
+						<option value="16">table</option>
+						<option value="17">select</option>
+						<option value="18">checkbox</option>
+						<option value="19">switch</option>
+						<option value="20">radio</option>
+			        </select>
+			        <i class="layui-icon">&#xe615;</i>
+			    </div>
+			    <!-- 天气信息 -->
+			    <div class="weather" pc>
+			    	<div id="tp-weather-widget"></div>
+					<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
+					<script>tpwidget("init", {
+					    "flavor": "slim",
+					    "location": "WX4FBXXFKE4F",
+					    "geolocation": "disabled",
+					    "language": "zh-chs",
+					    "unit": "c",
+					    "theme": "chameleon",
+					    "container": "tp-weather-widget",
+					    "bubble": "disabled",
+					    "alarmType": "badge",
+					    "color": "#FFFFFF",
+					    "uid": "U9EC08A15F",
+					    "hash": "14dff75e7253d3a8b9727522759f3455"
+					});
+					tpwidget("show");</script>
+			    </div>
+			    <!-- 顶部右侧菜单 -->
+			    <ul class="layui-nav top_menu">
+			    	<li class="layui-nav-item showNotice" id="showNotice" pc>
+						<a href="javascript:;"><i class="iconfont icon-gonggao"></i><cite>系统公告</cite></a>
+					</li>
+			    	<li class="layui-nav-item" mobile>
+			    		<a href="javascript:;" data-url="page/user/changePwd.html"><i class="iconfont icon-shezhi1" data-icon="icon-shezhi1"></i><cite>设置</cite></a>
+			    	</li>
+			    	<li class="layui-nav-item" mobile>
+			    		<a href="javascript:;"><i class="iconfont icon-loginout"></i> 退出</a>
+			    	</li>
+					<li class="layui-nav-item lockcms" pc>
+						<a href="javascript:;"><i class="iconfont icon-lock1"></i><cite>锁屏</cite></a>
+					</li>
+					<li class="layui-nav-item" pc>
+						<a href="javascript:;">
+							<img src="images/face.jpg" class="layui-circle" width="35" height="35">
+							<cite>请叫我马哥</cite>
+						</a>
+						<dl class="layui-nav-child">
+							<dd><a href="javascript:;" data-url="page/user/userInfo.html"><i class="iconfont icon-zhanghu" data-icon="icon-zhanghu"></i><cite>个人资料</cite></a></dd>
+							<dd><a href="javascript:;" data-url="page/user/changePwd.html"><i class="iconfont icon-shezhi1" data-icon="icon-shezhi1"></i><cite>修改密码</cite></a></dd>
+							<dd><a href="javascript:;"><i class="iconfont icon-loginout"></i><cite>退出</cite></a></dd>
+						</dl>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<!-- 左侧导航 -->
+		<div class="layui-side layui-bg-black">
+			<div class="user-photo">
+				<a class="img" title="我的头像" ><img src="images/face.jpg"></a>
+				<p>你好！<span class="userName">请叫我马哥</span>, 欢迎登录</p>
+			</div>
+			<div class="navBar layui-side-scroll"></div>
+		</div>
+		<!-- 右侧内容 -->
+		<div class="layui-body layui-form">
+			<div class="layui-tab marg0" lay-filter="bodyTab">
+				<ul class="layui-tab-title top_tab">
+					<li class="layui-this" lay-id=""><i class="iconfont icon-computer"></i> <cite>后台首页</cite></li>
+				</ul>
+				<div class="layui-tab-content clildFrame">
+					<div class="layui-tab-item layui-show">
+						<iframe src="page/main.html"></iframe>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 底部 -->
+		<div class="layui-footer footer">
+			<p>copyright @2017 请叫我马哥　　<a onclick="donation()" class="layui-btn layui-btn-danger l·ayui-btn-small">捐赠作者</a></p>
+		</div>
+	</div>
+
+	<!-- 锁屏 -->
+	<div class="admin-header-lock" id="lock-box" style="display: none;">
+		<div class="admin-header-lock-img"><img src="images/face.jpg"/></div>
+		<div class="admin-header-lock-name" id="lockUserName">请叫我马哥</div>
+		<div class="input_btn">
+			<input type="password" class="admin-header-lock-input layui-input" placeholder="请输入密码解锁.." name="lockPwd" id="lockPwd" />
+			<button class="layui-btn" id="unlock">解锁</button>
+		</div>
+		<p>请输入“123456”，否则不会解锁成功哦！！！</p>
+	</div>
+	<!-- 移动导航 -->
+	<div class="site-tree-mobile layui-hide"><i class="layui-icon">&#xe602;</i></div>
+	<div class="site-mobile-shade"></div>
+
+	<script type="text/javascript" src="layui/layui.js"></script>
+	<script type="text/javascript" src="js/nav.js"></script>
+	<script type="text/javascript" src="js/leftNav.js"></script>
+	<script type="text/javascript" src="js/index.js"></script>
+</body>
+</html>