355 lines
11 KiB
HTML
355 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title></title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/layui.css"/>
|
||
|
|
<script src="layui.js" type="text/javascript" charset="utf-8"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="all">
|
||
|
|
<div class="flex">
|
||
|
|
<div class="li">
|
||
|
|
<div class="layui-tab">
|
||
|
|
<div class="title">代办事项</div>
|
||
|
|
<!-- <ul class="layui-tab-title">
|
||
|
|
<li class="layui-this" style="border-right: 1px #EAEAEA solid;">代办流程</li>
|
||
|
|
<li>已办流程</li>
|
||
|
|
</ul> -->
|
||
|
|
<div class="more">
|
||
|
|
<img src="img/gengduo.png" >
|
||
|
|
</div>
|
||
|
|
<!-- <div class="layui-tab-content">
|
||
|
|
<div class="layui-tab-item layui-show">
|
||
|
|
1. 高度默认自适应，也可以随意固宽。
|
||
|
|
</div>
|
||
|
|
<div class="layui-tab-item">内容2</div>
|
||
|
|
</div> -->
|
||
|
|
<div class="layui-tab-content">
|
||
|
|
啊啊啊啊啊啊啊啊啊啊啊啊啊啊
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="li">
|
||
|
|
<div class="layui-tab">
|
||
|
|
<div class="title">通知公告</div>
|
||
|
|
<div class="more">
|
||
|
|
<img src="img/gengduo.png" >
|
||
|
|
</div>
|
||
|
|
<div class="layui-tab-content">
|
||
|
|
<div class="tongzhiul">
|
||
|
|
<div class="tongzhili">
|
||
|
|
<div class="tongzhititle">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
|
||
|
|
<div class="tongzhitime">[某某人]2020-3-18</div>
|
||
|
|
</div>
|
||
|
|
<div class="tongzhili">
|
||
|
|
<div class="tongzhititle">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
|
||
|
|
<div class="tongzhitime">2020-3-18</div>
|
||
|
|
</div>
|
||
|
|
<div class="tongzhili">
|
||
|
|
<div class="tongzhititle">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
|
||
|
|
<div class="tongzhitime">2020-3-18</div>
|
||
|
|
</div>
|
||
|
|
<div class="tongzhili">
|
||
|
|
<div class="tongzhititle">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
|
||
|
|
<div class="tongzhitime">2020-3-18</div>
|
||
|
|
</div>
|
||
|
|
<div class="tongzhili">
|
||
|
|
<div class="tongzhititle">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
|
||
|
|
<div class="tongzhitime">2020-3-18</div>
|
||
|
|
</div>
|
||
|
|
<div class="tongzhili">
|
||
|
|
<div class="tongzhititle">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
|
||
|
|
<div class="tongzhitime">2020-3-18</div>
|
||
|
|
</div>
|
||
|
|
<div class="tongzhili">
|
||
|
|
<div class="tongzhititle">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
|
||
|
|
<div class="tongzhitime">2020-3-18</div>
|
||
|
|
</div>
|
||
|
|
<div class="tongzhili">
|
||
|
|
<div class="tongzhititle">啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
|
||
|
|
<div class="tongzhitime">2020-3-18</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="li">
|
||
|
|
<div class="layui-tab">
|
||
|
|
<div class="title">天气预报</div>
|
||
|
|
|
||
|
|
<div class="more">
|
||
|
|
<img src="img/gengduo.png" >
|
||
|
|
</div>
|
||
|
|
<div class="layui-tab-content" style="display: flex; justify-content: center; align-items: center;">
|
||
|
|
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=83" width="515" height="178" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="li">
|
||
|
|
<div class="layui-tab">
|
||
|
|
<div class="title">疾控动态</div>
|
||
|
|
<div class="more">
|
||
|
|
<img src="img/gengduo.png" >
|
||
|
|
</div>
|
||
|
|
<div class="layui-tab-content">
|
||
|
|
啊啊啊啊啊啊啊啊啊啊啊啊啊啊
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="li">
|
||
|
|
<div class="layui-tab">
|
||
|
|
<div class="title">监督信息</div>
|
||
|
|
<div class="more">
|
||
|
|
<img src="img/gengduo.png" >
|
||
|
|
</div>
|
||
|
|
<div class="layui-tab-content">
|
||
|
|
啊啊啊啊啊啊啊啊啊啊啊啊啊啊
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="li">
|
||
|
|
<div class="layui-tab">
|
||
|
|
<div class="title">代办申请</div>
|
||
|
|
<div class="more">
|
||
|
|
<img src="img/gengduo.png" >
|
||
|
|
</div>
|
||
|
|
<div class="layui-tab-content">
|
||
|
|
<table class="layui-hide" id="demo"></table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="li">
|
||
|
|
<div class="layui-tab">
|
||
|
|
<div class="title">代办报销</div>
|
||
|
|
<div class="more">
|
||
|
|
<img src="img/gengduo.png" >
|
||
|
|
</div>
|
||
|
|
<div class="layui-tab-content">
|
||
|
|
<table class="layui-hide" id="demo2"></table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="li">
|
||
|
|
<div class="layui-tab">
|
||
|
|
<div class="title">常用工作</div>
|
||
|
|
<div class="more">
|
||
|
|
<img src="img/gengduo.png" >
|
||
|
|
</div>
|
||
|
|
<div class="layui-tab-content">
|
||
|
|
<div class="usua">
|
||
|
|
<div class="usuali">
|
||
|
|
<div class="usuaimg"><img src="img/g1.png" ></div>
|
||
|
|
<div class="usuatitle">我的申请</div>
|
||
|
|
</div>
|
||
|
|
<div class="usuali">
|
||
|
|
<div class="usuaimg"><img src="img/g2.png" ></div>
|
||
|
|
<div class="usuatitle">我的报销</div>
|
||
|
|
</div>
|
||
|
|
<div class="usuali">
|
||
|
|
<div class="usuaimg"><img src="img/g3.png" ></div>
|
||
|
|
<div class="usuatitle">待审核申请</div>
|
||
|
|
</div>
|
||
|
|
<div class="usuali">
|
||
|
|
<div class="usuaimg"><img src="img/g4.png" ></div>
|
||
|
|
<div class="usuatitle">待审核报销</div>
|
||
|
|
</div>
|
||
|
|
<div class="usuali">
|
||
|
|
<div class="usuaimg"><img src="img/g5.png" ></div>
|
||
|
|
<div class="usuatitle">我的公文</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="li" style="text-align: center;">
|
||
|
|
<div id="test1"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<style type="text/css">
|
||
|
|
html,body{ width: 100%; height: 100%;}
|
||
|
|
.all{ background: #eaf3fa; padding: 15px; width: 100%; height: 100%; box-sizing: border-box;}
|
||
|
|
.flex{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; height: 100%;}
|
||
|
|
.li{ width: 33%; height: 32.5%; overflow: hidden; background: #FFFFFF; border-radius: 5px; box-sizing: border-box; padding: 10px;}
|
||
|
|
.layui-tab-title li{line-height: 20px; margin-top: 10px;}
|
||
|
|
.layui-tab{ position: relative; margin: 0; height: 100%;}
|
||
|
|
.title{ position: absolute; left: 0; top: 0; line-height: 31px; background: url(img/titlebj2.png) no-repeat; color: #FFFFFF;
|
||
|
|
font-weight: bold; font-size: 13px; width: 155px; padding-left: 40px;}
|
||
|
|
.layui-tab-title{ position: absolute; left: 160px; top: 0; border: none;}
|
||
|
|
.layui-tab-title .layui-this:after{ border: none;}
|
||
|
|
.layui-this{ color: #0d93f6 !important;}
|
||
|
|
.more{ position: absolute; right: 10px; top: 0px;}
|
||
|
|
.more img{ width: 20px;}
|
||
|
|
.layui-tab-content{ width: 95%; position: absolute; left: 0; top: 31px; overflow: auto; height: calc(100% - 60px); }
|
||
|
|
.tongzhiul{ height: 155px; line-height: 30px; overflow: hidden;}
|
||
|
|
.tongzhili{ display: flex; justify-content: space-between; border-bottom: 1px #EAEAEA solid; }
|
||
|
|
.tongzhititle{ font-size: 14px; max-width: 400px; height: 30px; white-space:nowrap;
|
||
|
|
overflow:hidden;
|
||
|
|
text-overflow:ellipsis;}
|
||
|
|
.tongzhitime{ color: #999; font-size: 12px;}
|
||
|
|
.layui-laydate, .layui-laydate-hint{ border: none;}
|
||
|
|
#test1{ border: 1px #EAEAEA solid; overflow: auto; max-height: 220px;}
|
||
|
|
.layui-laydate-footer{ display: none;}
|
||
|
|
.layui-laydate{ width: 100%;}
|
||
|
|
.layui-laydate-main { width: 100%;}
|
||
|
|
.layui-laydate-content td, .layui-laydate-content th{ width: 100px; height: 20px;}
|
||
|
|
.usua{ display: flex; flex-wrap: wrap; justify-content: space-between;}
|
||
|
|
.usuali{ width: 19%; box-sizing: border-box; text-align: center; padding: 10px 0; background: #EAEAEA; margin-bottom: 5px; color: #666; cursor: pointer;}
|
||
|
|
.usuali img{ width: 50%; margin-bottom: 10px;}
|
||
|
|
.layui-table td, .layui-table th{ font-size: 12px;}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
layui.use('element', function(){
|
||
|
|
var $ = layui.jquery,
|
||
|
|
element = layui.element;
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
layui.use('laydate', function(){
|
||
|
|
var laydate = layui.laydate;
|
||
|
|
|
||
|
|
laydate.render({
|
||
|
|
elem: '#test1',
|
||
|
|
position: 'static'
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
layui.use('table', function(){
|
||
|
|
var table = layui.table;
|
||
|
|
|
||
|
|
//展示已知数据
|
||
|
|
table.render({
|
||
|
|
elem: '#demo',
|
||
|
|
autoSort: true
|
||
|
|
,cols: [[ //标题栏
|
||
|
|
{field: 'id', title: 'ID',width:"20%"}
|
||
|
|
,{field: 'username', title: '用户名',width:"20%"}
|
||
|
|
,{field: 'email', title: '邮箱',width:"20%"}
|
||
|
|
,{field: 'sign', title: '签名',width:"20%"}
|
||
|
|
,{field: 'sign2', title: '签名2',width:"20%"}
|
||
|
|
]]
|
||
|
|
,data: [{
|
||
|
|
"id": "10001"
|
||
|
|
,"username": "杜甫"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sign": "男"
|
||
|
|
,"sign2": "aaaaaaaaaaaaaaaaa"
|
||
|
|
}, {
|
||
|
|
"id": "10002"
|
||
|
|
,"username": "李白"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
,"sign2": "a"
|
||
|
|
}, {
|
||
|
|
"id": "10003"
|
||
|
|
,"username": "王勃"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
,"sign2": "a"
|
||
|
|
}, {
|
||
|
|
"id": "10004"
|
||
|
|
,"username": "贤心"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
,"sign2": "a"
|
||
|
|
}, {
|
||
|
|
"id": "10005"
|
||
|
|
,"username": "贤心"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
,"sign2": "a"
|
||
|
|
}, {
|
||
|
|
"id": "10006"
|
||
|
|
,"username": "贤心"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
,"sign2": "a"
|
||
|
|
}, {
|
||
|
|
"id": "10007"
|
||
|
|
,"username": "贤心"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
}, {
|
||
|
|
"id": "10008"
|
||
|
|
,"username": "贤心"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
,"sign2": "a"
|
||
|
|
}]
|
||
|
|
//,skin: 'line' //表格风格
|
||
|
|
,even: true
|
||
|
|
//,page: true //是否显示分页
|
||
|
|
//,limits: [5, 7, 10]
|
||
|
|
//,limit: 5 //每页默认显示的数量
|
||
|
|
});
|
||
|
|
table.render({
|
||
|
|
elem: '#demo2',
|
||
|
|
cols: [[
|
||
|
|
{field: 'id', title: 'ID',width:"20%"}
|
||
|
|
,{field: 'username', title: '用户名',width:"20%"}
|
||
|
|
,{field: 'email', title: '邮箱',width:"20%"}
|
||
|
|
,{field: 'sign', title: '签名',width:"20%"}
|
||
|
|
,{field: 'sign2', title: '签名2',width:"20%"}
|
||
|
|
]]
|
||
|
|
,data: [{
|
||
|
|
"id": "10001"
|
||
|
|
,"username": "杜甫"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sign": "男"
|
||
|
|
,"sign2": "aaaaaaaaaaaaaaaaa"
|
||
|
|
}, {
|
||
|
|
"id": "10002"
|
||
|
|
,"username": "李白"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
,"sign2": "a"
|
||
|
|
}, {
|
||
|
|
"id": "10003"
|
||
|
|
,"username": "王勃"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
,"sign2": "a"
|
||
|
|
}, {
|
||
|
|
"id": "10004"
|
||
|
|
,"username": "贤心"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
,"sign2": "a"
|
||
|
|
}, {
|
||
|
|
"id": "10005"
|
||
|
|
,"username": "贤心"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
,"sign2": "a"
|
||
|
|
}, {
|
||
|
|
"id": "10006"
|
||
|
|
,"username": "贤心"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
,"sign2": "a"
|
||
|
|
}, {
|
||
|
|
"id": "10007"
|
||
|
|
,"username": "贤心"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
}, {
|
||
|
|
"id": "10008"
|
||
|
|
,"username": "贤心"
|
||
|
|
,"email": "xianxin@layui.com"
|
||
|
|
,"sex": "男"
|
||
|
|
,"sign2": "a"
|
||
|
|
}]
|
||
|
|
//,skin: 'line' //表格风格
|
||
|
|
,even: true
|
||
|
|
//,page: true //是否显示分页
|
||
|
|
//,limits: [5, 7, 10]
|
||
|
|
//,limit: 5 //每页默认显示的数量
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|