Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
a0fbff10 by weimo934
Options

feat():绘制公示公告页面

1 parent 938e7040
Inline Side-by-side
Showing 4 changed files with 387 additions and 3 deletions
* {
margin: 0;
padding: 0;
}
.main {
padding-left: 100px;
padding-right: 100px;
}
.top {
text-align: center;
height: 90px;
font-size: 14px;
font-weight: bold;
color: #4A4A4A;
line-height: 14px;
border-bottom: 1px solid #DEDEDE;
display: flex;
justify-items: auto;
align-items: center;
flex-width: wrap;
}
.top > div {
margin: 0 auto;
display: inline-block;
}
.top input {
width: 360px;
height: 36px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #CBCBCB;
}
.top button {
width: 120px;
height: 40px;
background: #0091FF;
border: none;
border-radius: 3px;
color: white;
}
/*.top-date input:before {
content: attr(placeholder)
}*/
.filter {
display: flex;
justify-content: left;
}
.filter div {
display: inline-block;
padding: 20px;
background: #FFFFFF;
width: 102px;
font-size: 16px;
font-weight: 500;
color: #6D7278;
line-height: 20px;
}
.filter div:first-child {
width: 102px;
height: 20px;
font-size: 18px;
font-weight: bold;
color: #4A4A4A;
line-height: 20px;
}
.body {
display: flex;
justify-items: left;
border-top: 1px solid #CBCBCB;
}
.body div {
display: inline-block;
}
.left {
border-right-style: inset;
border-right: 1px solid #DEDEDE;
}
.right {
width: 400px;
}
.left, .right {
float: left;
}
.gg-tag {
background-color: #FA6800;
width: 40px;
height: 15px;
font-size: 10px;
font-weight: 500;
color: #FFFFFF;
line-height: 15px;
padding-left: 8px;
}
.gg {
text-overflow: clip;
overflow: hidden;
border-bottom: 1px solid #DEDEDE;
height: 100px;
font-size: 20px;
font-weight: bold;
color: #4A4A4A;
line-height: 104px;
padding-left: 20px;
padding-right: 20px;
}
.right {
width: 200px;
margin-left: 15px;
}
.right-top {
width: 100px;
height: 18px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #4A4A4A;
line-height: 18px;
padding-top: 20px;
}
.right-body {
display: inline-block;
margin-bottom: 20px;
}
.tj {
/*margin-bottom: 10px;*/
}
.tj img {
width: 200px;
height: 125px;
margin-top: 20px;
}
.tj img, .tj span {
float: left;
}
.tj-title {
width: 203px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #4A4A4A;
line-height: 21px;
}
.tj-date {
width: 90px;
height: 12px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9B9B9B;
line-height: 12px;
}
.right-bottom {
border-top-style: inset;
border-top: 1px solid #DEDEDE;
}
.right-bottom-top {
width: 108px;
height: 18px;
font-size: 18px;
margin-top: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #4A4A4A;
line-height: 18px;
}
.zcfg {
margin-top: 20px;
display: inline-block;
}
.zcfg div {
float: left;
}
.zcfg-top {
width: 200px;
height: 14px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #4A4A4A;
line-height: 14px;
}
.zcfg-body {
width: 200px;
font-size: 14px;
display: inline-block;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #6D7278;
line-height: 21px;
}
.zcfg-bottom {
width: 90px;
height: 12px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9B9B9B;
line-height: 12px;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<title>公示公告</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="stylesheet" type="text/css" href="../../lib/layui/css/layui.css"/>
<link rel="alternate icon" type="image/png" href="../../images/logo-realestate.png">
<link rel='icon' href='../../favicon.ico' type='image/x-ico'/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link rel="stylesheet" href="../../css/default.min.css?t=227"/>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="main">
<div class="top">
<div class="top-title">
<span>标题内容:</span><input type="text" placeholder="请输入标题">
</div>
<div class="top-date ">
发布时间:<input type="date" placeholder="选择时间">
</div>
<div class="top-serach ">
<button>查询</button>
</div>
</div>
<div class="filter">
<div>
<span>全部</span>
</div>
<div>
<span>公示</span>
</div>
<div>
<span>公告</span>
</div>
</div>
<div class="body">
<div class="left">
<div class="gg">
<div class="gg-tag">
公告
</div>
<span>
党的十八大以来双拥工作综述：为实现中国梦强军梦凝聚强大力量 前三季度主要指标由负转正 中国经济持续稳定恢复 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利
</span>
</div>
<div class="gg">
<div class="gg-tag">
公告
</div>
<span>
党的十八大以来双拥工作综述：为实现中国梦强军梦凝聚强大力量 前三季度主要指标由负转正 中国经济持续稳定恢复 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利
</span>
</div>
<div class="gg">
<div class="gg-tag">
公告
</div>
<span>
党的十八大以来双拥工作综述：为实现中国梦强军梦凝聚强大力量 前三季度主要指标由负转正 中国经济持续稳定恢复 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利
</span>
</div>
<div id="page"></div>
</div>
<div class="right">
<div class="right-top">
<h2>新闻推荐</h2>
</div>
<div class="right-body">
<div class="tj">
<img
src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1938529415,777611275&fm=26&gp=0.jpg">
<span class="tj-title">
爬山虎国土空间信息化解决方案
</span>
<span class="tj-date">
2020-12-12
</span>
</div>
<div class="tj">
<img
src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1938529415,777611275&fm=26&gp=0.jpg">
<span class="tj-title">
爬山虎国土空间信息化解决方案终极方案
</span>
<span class="tj-date">
2020-12-12
</span>
</div>
</div>
<div class="right-bottom">
<div class="right-bottom-top">
<span>政策法规推荐</span>
</div>
<div class="zcfg">
<div class="zcfg-top">
<span>爬山虎国土空间规划信息化解决</span>
</div>
<div class="zcfg-body">
<span>10月21日，农业农村部举行新闻发布会，介绍2020年前三季度农业农村经济形势。</span>
</div>
<div class="zcfg-bottom">
<span>2020-10-28</span>
</div>
</div>
<div class="zcfg">
<div class="zcfg-top">
<span>爬山虎国土空间规划信息化解决</span>
</div>
<div class="zcfg-body">
<span>10月21日，农业农村部举行新闻发布会，介绍2020年前三季度农业农村经济形势。</span>
</div>
<div class="zcfg-bottom">
<span>2020-10-28</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!--[if (gte IE 9)|!(IE)]><!-->
<script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="../../lib/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="../../lib/iscroll/iscroll-probe.js"></script>
<script type="text/javascript" src="../../lib/amazeui/amazeui.min.js"></script>
<script type="text/javascript" src="../../lib/raty/jquery.raty.js"></script>
<script type="text/javascript" src="../../js/main.min.js?t=1"></script>
<script type="text/javascript" src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
layui.use('laypage', function () {
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
, count: 50 //数据总数，从服务端得到
, prev: '<'
, next: '>'
,theme: '#0091FF'
});
});
</script>
\ No newline at end of file
......@@ -166,14 +166,17 @@
float: left;
}
.commentInput input {
width: 800px;
.commentInput textarea {
height: 130px;
background: #FFFFFF;
border: 1px solid #DEDEDE;
margin-left: 20px;
}
.layui-textarea {
width: 93%!important;
}
.commentInput button {
width: 120px;
height: 42px;
......
......@@ -73,7 +73,8 @@
<img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1938529415,777611275&fm=26&gp=0.jpg">
</div>
<div class="commentInputInput">
<input type="text">
<!-- <input type="text">-->
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
</div>
<div>
<button class="layui-btn layui-btn-lg layui-btn-norma">发表</button>
......