10月20日,北京【人工智能】源创会火热报名中,点击报名收获 AI 训练指南
Watch Star Fork

S / SimpleJavaScript

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
一个轻量,简约,包含丰富模块化前端框架 ,帮您快速构建网站 http://www.we63.com
一键复制 编辑 Web IDE 原始数据 按行查看 历史
setting.html 19.31 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">
<!-- 提示信息样式,不需要的插件样式可以不引用 -->
<link rel="stylesheet" href="./css/toastr.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">
<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 columns">
<div class="layui-btn-group column col-3 ">
<button class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe608;</i> 添加</button>
</div>
<div class="column col-3 col-ml-auto">
<form class="layui-form" action="" >
<div class="input-action">
<input class="layui-input" type="text" value="" placeholder="请输入搜索内容" >
<button class="layui-btn layui-btn-sm layui-bg-gray action-button"><i class="layui-icon layui-icon-search"></i></button>
</div>
</form>
</div>
</div>
<div class="block-tab">
<div class="layui-tab layui-tab-brief" lay-filter="settingtab">
<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">
<div class="block-table">
<div class="layui-row">
<div class="layui-col-md2">
<div class="layui-form-group">基础设置</div>
</div>
<div class="layui-col-md10">
<form class="layui-form" action="" lay-filter="setting">
<div class="layui-row layui-form-item">
<div class="layui-col-md12">
<label class="layui-form-label"><span
class="text-red">*</span>站点名称:</label>
<div class="layui-input-block">
<input type="text" name="sitename"
lay-verify="required" placeholder=""
autocomplete="off" class="layui-input"
value="Simple 简!">
<div class="input-tip">全站显示Title位置</div>
</div>
</div>
</div>
<div class="layui-row layui-form-item">
<div class="layui-col-md12">
<label class="layui-form-label"><span
class="text-red">*</span>SEO关键字:</label>
<div class="layui-input-block">
<input type="text" name="keyword"
lay-verify="required" placeholder="请输入关键字"
autocomplete="off" class="layui-input">
<div class="input-tip">请使用英文逗号分开</div>
</div>
</div>
</div>
<div class="layui-row layui-form-item">
<div class="layui-col-md12">
<label class="layui-form-label"><span
class="text-red">*</span>站点描述:</label>
<div class="layui-input-block">
<textarea name="description" placeholder=""
class="layui-textarea"></textarea>
</div>
</div>
</div>
<div class="layui-row layui-form-item">
<div class="layui-col-md12">
<label class="layui-form-label">站点状态:</label>
<div class="layui-input-block">
<input type="checkbox" name="status"
lay-skin="switch" lay-text="已运行|已关闭"
value="1" checked>
<div class="input-tip">启用起来就很完美</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit
lay-filter="forsetting">立即提交
</button>
<button type="reset"
class="layui-btn layui-btn-primary">重置
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="layui-tab-item">
<div class="block-body">
<p>毛都没有...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="admin-footer">
<img src="./img/logo/footlogo.png" alt="">
</div>
</div>
</div>
</div>
<script>
layui.config({
base: 'js/' //此处路径请自行处理, 可以使用绝对路径
}).extend({
toastr:'toastr/toastr'
});
layui.use(['form','jquery','toastr'], function(){
var $ = layui.jquery;
var form = layui.form;
var toastr = layui.toastr;
toastr.options = {
closeButton:false,//显示关闭按钮
debug:false,//启用debug
positionClass:"toast-top-full-width",//弹出的位置 "toast-top-full-width toast-top-right",
showDuration:"300",//显示的时间
hideDuration:"1000",//消失的时间
timeOut:"2000",//停留的时间
extendedTimeOut:"1000",//控制时间
showEasing:"swing",//显示时的动画缓冲方式
hideEasing:"linear",//消失时的动画缓冲方式
onclick: null,
};
toastr.success("打开页面成功!");
//监听提交
form.on('submit(forsetting)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</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','toastr'], 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>

评论 ( 0 )

你可以在登录后,发表评论

搜索帮助