初始化提交
This commit is contained in:
229
电子展板/Assets/Views/Login.html
Normal file
229
电子展板/Assets/Views/Login.html
Normal file
@@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Quick Start - Layui</title>
|
||||
<link href="layui/css/layui.css" rel="stylesheet">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 15vh;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2>展板数据配置</h2>
|
||||
</div>
|
||||
<form class="layui-form" action="">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">时间</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" id="ID-laydate-type-time" placeholder="HH:mm:ss" lay-verify="required">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">字体大小</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" name="price_min" lay-verify="required" placeholder="字体大小" lay-verify="required" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">负责人</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" placeholder="负责人" lay-verify="required">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">字体大小</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" name="price_min" lay-verify="required" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">风险等级</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" class="layui-input" placeholder="风险等级" lay-verify="required">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">字体大小</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" name="price_min" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">工作内容</label>
|
||||
<div class="layui-input-inline">
|
||||
<textarea name="message" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">字体大小</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" name="price_min" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">危险点</label>
|
||||
<div class="layui-input-inline">
|
||||
<textarea name="message" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">字体大小</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" name="price_min" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">重点管控措施</label>
|
||||
<div class="layui-input-inline">
|
||||
<textarea name="message" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">字体大小</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" name="price_min" placeholder="字体大小" autocomplete="off" class="layui-input" min="15" max="60" step="1" lay-affix="number">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<div class="layui-upload">
|
||||
<button type="button" class="layui-btn" id="ID-upload-demo-btn-2" style="margin-left:30px">
|
||||
<i class="layui-icon layui-icon-upload"></i> 党员上传
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
|
||||
预览图：
|
||||
<div class="layui-upload-list" id="upload-demo-preview"></div>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
|
||||
<script src="layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['form', 'laydate', 'util'], function () {
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var laydate = layui.laydate;
|
||||
var upload = layui.upload;
|
||||
var util = layui.util;
|
||||
|
||||
|
||||
// 多图片上传
|
||||
upload.render({
|
||||
elem: '#ID-upload-demo-btn-2',
|
||||
url: '', // 实际使用时改成您自己的上传接口即可。
|
||||
multiple: true,
|
||||
before: function (obj) {
|
||||
// 预读本地文件示例，不支持ie8
|
||||
obj.preview(function (index, file, result) {
|
||||
$('#upload-demo-preview').append('<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">')
|
||||
});
|
||||
},
|
||||
done: function (res) {
|
||||
// 上传完毕
|
||||
// …
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 时间选择器
|
||||
laydate.render({
|
||||
elem: '#ID-laydate-type-time',
|
||||
type: 'time'
|
||||
});
|
||||
// 自定义验证规则
|
||||
form.verify({
|
||||
pass: function (value) {
|
||||
if (!/(.+){6,12}$/.test(value)) {
|
||||
return '密码必须 6 到 12 位';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 指定开关事件
|
||||
form.on('switch(switchTest)', function (data) {
|
||||
layer.msg('开关 checked：' + (this.checked ? 'true' : 'false'), {
|
||||
offset: '6px'
|
||||
});
|
||||
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
|
||||
});
|
||||
|
||||
// 提交事件
|
||||
form.on('submit(demo1)', function (data) {
|
||||
var field = data.field; // 获取表单字段值
|
||||
// 显示填写结果，仅作演示用
|
||||
layer.alert(JSON.stringify(field), {
|
||||
title: '当前填写的字段值'
|
||||
});
|
||||
// 此处可执行 Ajax 等操作
|
||||
// …
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
|
||||
// 日期
|
||||
laydate.render({
|
||||
elem: '#date'
|
||||
});
|
||||
|
||||
// 普通事件
|
||||
util.on('lay-on', {
|
||||
// 获取验证码
|
||||
"get-vercode": function (othis) {
|
||||
var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增
|
||||
// 验证通过
|
||||
if (isvalid) {
|
||||
layer.msg('手机号规则验证通过');
|
||||
// 此处可继续书写「发送验证码」等后续逻辑
|
||||
// …
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user