1 Star 0 Fork 31

Hankin-han/Simple

forked from 英杰/vSimple 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
adminlr.html 15.84 KB
一键复制 编辑 原始数据 按行查看 历史
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Simple - 简! </title>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<meta name="keywords" content="layui,ui,ui框架,前端框架,JS组件,Simple">
<meta name="description" content="Simple 是一个基于layui框架,一个轻量,简约,包含丰富模块化前端框架,帮您快速构建网站。">
<link rel="stylesheet" href="./css/s.css">
<link rel="stylesheet" href="./css/extend.css">
<script src="./layui.js"></script>
</head>
<body>
<div class="admin-header">
<div class="header-logo ">
<img src="./img/logo/logoadmin.png" alt="">
</div>
<ul class="header-left">
<li><a href=""><i class="layui-icon layui-icon-website" ></i></a></li>
<li><a href=""><i class="layui-icon layui-icon-flag"></i></a></li>
<li><a href=""><i class="layui-icon layui-icon-search"></i></a></li>
</ul>
<ul class="layui-nav header-right">
<li class="layui-nav-item header-right-item">
<a href="" ><img src="./img/faces/tx.png" class="layui-nav-img">芥末萌萌哒</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">修改信息</a></dd>
<dd><a href="javascript:;">安全管理</a></dd>
<dd><a href="javascript:;">退了</a></dd>
</dl>
</li>
<li class="layui-nav-item header-right-item">
<a href="">我的消息<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item header-right-item">
<a href=""><i class="layui-icon layui-icon-close"></i></a>
</li>
</ul>
<div class="layui-clear"></div>
</div>
<div class="admin-menu fold">
<p class="admin-menu-f" id="admin-menu-f"><i class="layui-icon layui-icon-more"></i></p>
<ul>
<li class="menu-item ">
<a href="#"><i class="layui-icon layui-icon-console " ></i><span class="wb-nav-title"> 仪表盘</span> </a>
<span class="menu-item-tip">仪表盘</span>
</li>
<li class="menu-item ">
<a href="#"><i class="layui-icon layui-icon-component" ></i><span class="wb-nav-title"> 组件库</span> </a>
<span class="menu-item-tip">组件库</span>
</li>
<li class="menu-item ">
<a href="#"><i class="layui-icon layui-icon-table" ></i> <span class="wb-nav-title"> 表格库</span> </a>
<span class="menu-item-tip">表格库</span>
</li>
<li class="menu-item active">
<a href="#"><i class="layui-icon layui-icon-radio" ></i> <span class="wb-nav-title"> 表单库</span> </a>
<span class="menu-item-tip">表单库</span>
</li>
<li class="menu-item">
<a href="#"><i class="layui-icon layui-icon-chart" ></i><span class="wb-nav-title"> 图表库</span> </a>
<span class="menu-item-tip">图表库</span>
</li>
<li class="menu-item">
<a href="#"><i class="layui-icon layui-icon-template-1 " ></i><span class="wb-nav-title"> 页面库</span> </a>
<span class="menu-item-tip">页面库</span>
</li>
<li class="menu-item">
<a href="#"><i class="layui-icon layui-icon-diamond text-yellow" ></i><span class="wb-nav-title"> 模板库</span> </a>
<span class="menu-item-tip">模板库</span>
</li>
<li class="menu-item item-bottom " >
<a href="#"><i class="layui-icon layui-icon-set" ></i><span class="wb-nav-title"> 系统设置</span></a>
<span class="menu-item-tip">系统设置</span>
</li>
</ul>
</div>
<div class="admin-submenu">
<div style="width: 100%; height: 100%">
<div class="submenu-scene">
系统设置
</div>
<div class="submenu-item">配置</div>
<ul>
<li ><a href="#"> Index 首页</a></li>
<li class="active"><a href="#">Setting 设置</a></a></li>
<li><a href="#">Ue 编辑器</a></a></li>
<li><a href="#">Shop 商家<span class="layui-badge-dot"></span></a></a></li>
<li ><a href="#">List 列表<span class="layui-badge-dot"></span></a></a></li>
</ul>
<div id="admin-submenu-c">
<i class="layui-icon layui-icon-prev"></i>
</div>
</div>
</div>
<div class="admin-content">
<div class="layui-row layui-col-space30">
<div class="layui-col-md12">
<div class="adminpageheader">
<h2 class="adminpagetitle">当前位置:<a href="">店铺设置</a></h2>
</div>
<div class="admin-block">
<div class="block">
<div class="block-action">
<div class="layui-btn-group">
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe608;</i> 添加</button>
</div>
</div>
<div class="block-tab">
<div class="layui-tab layui-tab-brief" lay-filter="fors">
<ul class="layui-tab-title">
<li class="layui-this">店铺设置</li>
<li>秘钥配置</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="block-body">
<form class="layui-form" action="" lay-filter="component-form-element">
<div class="layui-row">
<div class="layui-col-md12">
<div class="admin-lr">
<div class="layui-row layui-form-item">
<div class="layui-col-md5">
<label class="layui-form-label">
<span class="text-red">*</span>会员卡商家名称<span class="lr-info"> (这是个秘密)</span></label>
<div class="layui-input-block"> <input type="text" name="name" id="name" lay-verify="required" placeholder="请输入会员卡商家家名称" autocomplete="off" class="layui-input" value="芥末家便利店"></div>
<label class="layui-form-label">
<span class="text-red">*</span>客服服务电话<span class="lr-info">(客服服务电话)</span></label>
<div class="layui-input-block"> <input type="text" name="phone" id="phone" lay-verify="phone" placeholder="座机或联系电话" autocomplete="off" class="layui-input"></div>
<label class="layui-form-label">是否上传</label>
<div class="layui-input-block">
<input type="checkbox" name="marriage" lay-skin="switch" lay-text="是|否">
</div>
</div>
<div class="layui-col-md5 layui-col-md-offset2">
<label class="layui-form-label"><span class="text-red">*</span>会员卡封面<span class="lr-info">(会员卡印刷图)</span></label><div class="layui-input-block"><div class="layui-upload"><button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="btnlogo"><i class="layui-icon"></i> 上传图片</button><input class="layui-upload-file" type="file" accept="undefined" name="file"> <div class="layui-upload-list"><img class="layui-upload-img" src="./img/card/1231.png" id="logo" style="width: 315px;height: 177px; "> <p class="input-tip">建议尺寸 315px * 177px </p></div></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block lr-btn">
<button class="layui-btn" lay-submit lay-filter="forlr">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-tab-item">
<div class="block-body">
<p>毛都没有...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#btnlogo' //绑定元素
,url: '/upload/' //上传接口
,done: function(res){
//上传完毕回调
}
,error: function(){
//请求异常回调
}
});
});
</script>
<div class="admin-panel">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title panel-item"><i class="layui-icon layui-icon-face-smile-fine"></i> <span class="sfqt">后台播报</span> </h2>
<div class="layui-colla-content layui-show item-color">
<ul>
<li>更新了后台整体布局代码,剔除行内样式 </li>
<li>冲突样式放低优先级,不影响样式覆盖 </li>
<li>修复菜单搜索文字弹跳的Bug </li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title panel-item"><i class="layui-icon layui-icon-speaker" ></i> <span class="sfqt">内部公告</span></h2>
<div class="layui-colla-content item-color">暂无</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title panel-item"><i class="layui-icon layui-icon-log" ></i> <span class="sfqt">工作日志</span></h2>
<div class="layui-colla-content item-color">暂无</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title panel-item"><i class="layui-icon layui-icon-survey" ></i> <span class="sfqt">我的工单</span></h2>
<div class="layui-colla-content item-color">暂无</div>
</div>
<div class="layui-colla-item ">
<h2 class="layui-colla-title panel-item"><i class="layui-icon layui-icon-notice"></i> <span class="sfqt">系统更新</span></h2>
<div class="layui-colla-content item-color">
<ul>
<li>暂无</span> </li>
</ul>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title panel-item"><i class="layui-icon layui-icon-about" ></i> <span class="sfqt">联系我们</span></h2>
<div class="layui-colla-content item-color">暂无</div>
</div>
</div>
<div class="admin-panel-a">
<div id="admin-panel-c"><i class="layui-icon layui-icon-spread-left"></i> 收起面板</div>
</div>
</div>
<script>
layui.use(['element','form', 'layer', 'jquery'], function () {
var element = layui.element;
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
/* 左侧收缩hover效果 */
$('.menu-item').mouseover(function () {
if($('.admin-menu.fold').length>0){
$(this).find('.menu-item-tip').show();
}
});
$('.menu-item').mouseout(function () {
if($('.admin-menu.fold').length>0){
$(this).find('.menu-item-tip').hide();
}
});
/* 左菜单控制 */
$('#admin-menu-f').click(function () {
if ($('.admin-menu').hasClass('open')) {
$('.header-logo').toggleClass('open');
$('.admin-menu').toggleClass('open');
$('.admin-menu').addClass('fold');
if ($('.admin-submenu').hasClass('out')) {
$('.admin-content').css({"margin-left": "60px"});
} else {
$('.admin-content').css({"margin-left": "170px"});
}
} else {
$('.header-logo').toggleClass('open');
$('.admin-menu').toggleClass('open');
$('.admin-menu').removeClass('fold');
if ($('.admin-submenu').hasClass('out')) {
$('.admin-content').css({"margin-left": "130px"});
} else {
$('.admin-content').css({"margin-left": "240px"});
}
}
});
/* 子菜单控制 */
$('#admin-submenu-c').click(function () {
if (!$(this).hasClass('out')) {
$(this).toggleClass('out');
$('.admin-submenu').addClass('out');
if ($('.admin-menu').hasClass('fold')) {
$('.admin-content').css({"margin-left": "60px"});
} else {
$('.admin-content').css({"margin-left": "130px"});
}
} else {
$('.admin-submenu').removeClass('out');
$(this).toggleClass('out');
if ($('.admin-menu').hasClass('fold')) {
$('.admin-content').css({"margin-left": "170px"});
} else {
$('.admin-content').css({"margin-left": "240px"});
}
}
});
/* 侧边栏控制面板 */
$('#admin-panel-c').click(function () {
if (!$(this).hasClass('out')) {
$(this).html('<i class="layui-icon layui-icon-tips"></i> 消息看板');
$('.admin-panel').addClass('out');
$(this).toggleClass('out');
$('.admin-content').css({"margin-right": "0"});
} else {
$(this).html('<i class="layui-icon layui-icon-spread-left"></i> 收起面板');
$('.admin-panel').removeClass('out');
$(this).toggleClass('out');
$('.admin-content').css({"margin-right": "170px"});
}
});
});
</script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/hanhanjun_admin/Simple.git
git@gitee.com:hanhanjun_admin/Simple.git
hanhanjun_admin
Simple
Simple
master

搜索帮助