Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
2d1e6de7 by 任超
Options

style:样式

1 parent 75cfedd4
Inline Side-by-side
Showing 7 changed files with 222 additions and 65 deletions
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网上“一窗办事”登记系统</title>
<link type="text/css" rel="stylesheet" href="./staticCss/global.css" />
<script type="text/javascript" src="./staticJs/head.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网上“一窗办事”登记系统</title>
<link type="text/css" rel="stylesheet" href="./staticCss/global.css" />
<script type="text/javascript" src="./staticJs/head.js"></script>
</head>
<body>
<div>
<div class="banner">
......@@ -61,12 +63,60 @@
<a class="news-img" href="" title="图片新闻地信中心开展外业安全生产监控系统培训工作"><img src="staticImages/news_demo.jpg"
alt="图片新闻地信中心开展外业安全生产监控系统培训工作" /></a>
<ul id='ulNews'>
<li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展"><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="创新技术体系 引领事业发展">创新技术体系 引领事业发展<span>2020-06-19</span></a></li>
<li><a href="" title="地信中心开展外业安全生产监控系统培训工作">地信中心开展外业安全生产监控系统… …<span>2020-08-19</span></a></li>
<li>
<a href="" title="创新技术体系 引领事业发展">
创新技术体系 引领事业发展
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzuixin"></use>
</svg>
<span>2020-06-19</span>
</a>
</li>
<li>
<a href="" title="创新技术体系 引领事业发展">
创新技术体系 引领事业发展
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzuixin"></use>
</svg>
<span>2020-06-19</span>
</a>
</li>
<li>
<a href="" title="创新技术体系 引领事业发展">
创新技术体系 引领事业发展
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzuixin"></use>
</svg>
<span>2020-06-19</span>
</a>
</li>
<li>
<a href="" title="创新技术体系 引领事业发展">
创新技术体系 引领事业发展
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzuixin"></use>
</svg>
<span>2020-06-19</span>
</a>
</li>
<li>
<a href="" title="创新技术体系 引领事业发展">
创新技术体系 引领事业发展
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzuixin"></use>
</svg>
<span>2020-06-19</span>
</a>
</li>
<li>
<a href="" title="创新技术体系 引领事业发展">
创新技术体系 引领事业发展
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconzuixin"></use>
</svg>
<span>2020-06-19</span>
</a>
</li>
</ul>
</div>
<div class="notice">
......@@ -487,4 +537,5 @@
<script type="text/javascript" src="./staticJs/down.js"></script>
<script type="text/javascript" src="./staticJs/common.js"></script>
<script type="text/javascript" src="./staticJs/staticIndex.js"></script>
</html>
\ No newline at end of file
......
......@@ -163,7 +163,7 @@ div.banner ul li a {
/* -------------常见问题start--------------------- */
.common_question {
padding: 40px;
background-color: #fcf8f8;
background: #F6F9FB;
}
.common_question .subject_con {
width: 1200px;
......@@ -173,7 +173,7 @@ div.banner ul li a {
.common_question .subject, .interact{
border-radius: 2px;
width: 49%;
border: 1px solid #DEDEDE;
border: 1px solid #E7ECEF;
background-color: #ffffff;
}
.common_question .list_content , .list_content_right{
......@@ -310,7 +310,7 @@ div.banner ul li a {
div.c_one div:first-child .news, div.c_one div:first-child .notice {
margin-top: 40px;
height: 340px;
height: 328px;
border: #DEDEDE 1px solid;
padding: 0 15px 0 15px;
}
......@@ -360,12 +360,18 @@ div.c_one h2 a:hover i {
div.c_one .news .news-img {
margin-top: 20px;
float: left;
width: 350px;
height: 231px;
}
div.c_one .news .news-img img {
height: 100%;
width: 100%;
}
div.c_one ul {
width: 100%;
float: left;
margin-top: 20px;
margin-top: 10px;
list-style: none;
font-size: 14px;
letter-spacing: 1px;
......@@ -373,7 +379,7 @@ div.c_one ul {
/*<li><a href=""><i>最新</i>创新技术体系 引领事业发展<span>2020-06-19</span></a></li>*/
div.c_one ul li {
line-height: 276%;
line-height: 42px;
}
div.c_one ul li:not(:last-child) {
border-bottom: 1px dashed #DEDEDE;
......@@ -382,7 +388,6 @@ div.c_one ul li:not(:last-child) {
div.c_one ul li a {
width: 100%;
display: block;
color: #000000;
text-align: left;
}
div.c_one ul li a:hover {
......@@ -441,7 +446,7 @@ div.c_one .news ul {
div.c_two {
background: #fcf8f8;
background: #F6F9FB;
}
......@@ -479,7 +484,7 @@ div.c_two ul li a {
background: #ffffff;
padding: 50px 36px;
box-sizing: border-box;
border: 1px solid #E6E6E6;
border: 1px solid #E7ECEF;
margin: 0 10px;
}
div.c_two ul li img {
......
.central_area {
min-height:calc(100vh - 190px);
margin-top: 20px;
color: #4A4A4A;
}
.navigation_crumbs {
height: 45px;
}
.perinfo {
height: 100px;
padding: 20px;
height: 140px;
padding: 30px;
box-sizing: border-box;
margin-top: 10px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #DEDEDE;
}
.perinfo_left{
float: left;
}
.perinfo_left ul li {
font-size: 16px;
color: #6D7278;
}
.perinfo_left ul li:first-child{
margin-top: 7px;
color: #4A4A4A;
}
.perinfo_left ul li:first-child span{
font-size: 18px;
}
.perinfo_left ul li:first-child p {
font-size: 18px;
}
.perinfo_left img {
width: 60px;
height: 60px;
width: 80px;
height: 80px;
float: left;
}
.perinfo_left ul {
......@@ -30,6 +48,28 @@
.perinfo_left ul li p{
display: inline-block;
}
.perinfo button {
float: right;
margin-right: 70px;
margin-top: 10px;
width: 140px;
height: 42px;
position: relative;
}
.perinfo button a {
color: #FFFFFF;
display: block;
width: 140px;
height: 42px;
text-align: center;
line-height: 42px;
position: absolute;
left: 0;
top: 0;
}
.perinfo button a:hover {
color: #FFFFFF;
}
.my_appointment {
color: #5FB878;
border: 2px solid#5FB878;
......@@ -51,4 +91,43 @@
/* ----------------预约列表-------------------- */
.appointment_list {
margin-top: 10px;
font-size: 0;
margin-left: -10px;
margin-right: -10px;
}
.appointment_list li {
width: 33.333%;
display: inline-block;
padding: 0 10px;
box-sizing: border-box;
}
.appointment_list li .item_content {
border: 1px solid #CBCBCB;
border-radius: 4px;
border: 1px solid #CBCBCB;
font-size: 16px;
}
.item_title {
height: 48px;
line-height: 48px;
color: #FFFFFF;
padding: 0 20px;
box-sizing: border-box;
}
.item_title h3 {
display: inline-block;
float: left;
}
.item_title p {
display: inline-block;
float: right;
}
.success {
background-color: #44D7B6;
}
.overdue {
background-color: #F26363;
}
.cancel {
background-color: #F26363;
}
\ No newline at end of file
......
......@@ -12,7 +12,6 @@ layui.use('carousel', function () {
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function () {
var element = layui.element;
//…
});
layui.use('util', function () {
......
......@@ -6,36 +6,3 @@ layui.use('element', function () {
layer.msg(elem.text());
});
});
\ No newline at end of file
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#test'
, url: '../staticLib/wdyy/index.json'
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, cols: [[
{ field: 'zizeng', title: '序号', templet: '#zizeng', align: 'center' }
, { field: 'username', title: '预约号', align: 'center' } //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
, { field: 'sex', title: ' 预约人', align: 'center' }
, { field: 'city', title: '办事大厅', align: 'center' }
, { field: 'sign', title: ' 预约业务', align: 'center' }
, { field: 'classify', title: '预约时间', align: 'center' }
, { field: 'state', title: '状态', align: 'center', templet: '#state' }
, { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center' }
]]
, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
return {
"code": res.code, //解析接口状态
"data": res.data //解析数据列表
};
}
});
//监听行工具事件
table.on('tool(test)', function (obj) {
var data = obj.data;
console.log(data)
if (obj.event === 'del') {
} else if (obj.event === 'edit') {
}
});
});
\ No newline at end of file
......
......@@ -22,9 +22,9 @@
</div>
<!-- -----------------个人信息------------------------ -->
<div class="central_area">
<div class="perinfo contentBox layui-bg-gray">
<div class="perinfo contentBox">
<div class="perinfo_left">
<img src="../../staticImages/logo-realestate.png" alt="">
<img src="../staticImages/person.png" alt="">
<ul>
<li>
<span>上午好：</span>
......@@ -36,14 +36,70 @@
</li>
</ul>
</div>
<a class="my_appointment" title="在线预约" href="./yyxz.html">在线预约</a>
<div class="time">
登录时间：2088-20-88
</div>
<button type="button" class="layui-btn layui-btn-normal">
<a href="./yyxz.html">在线预约</a>
</button>
</div>
<!-- -------------预约列表--------------- -->
<div class="appointment_list contentBox">
<table class="layui-hide" id="test" lay-filter="test"></table>
<div class="contentBox">
<ul class="appointment_list">
<li>
<div class="item_content">
<div class="item_title success">
<h3>正常</h3>
<p>
查看
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
<ul>
<li>
<span>预约人：</span>
<p>任超</p>
</li>
<li>
<span>办事大厅：</span>
<p>米香园办事大厅</p>
</li>
<li>
<span>办理业务类型：</span>
<p>二手房交易</p>
<a href="">办事指南</a>
</li>
<li>
<span>预约日期：</span>
<p>2020-12-56 上午 16：13</p>
</li>
<li>
<span>预约流水号</span>
<p>897987987987</p>
</li>
</ul>
</div>
</li>
<li>
<div class="item_content">
<div class="item_title overdue">
<h3>正常</h3>
<p>
查看
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
</div>
</li>
<li>
<div class="item_content cancel">
<div class="item_title">
<h3>正常</h3>
<p>
查看
<i class="layui-icon layui-icon-right"></i>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
......