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
1 * {
2 margin: 0;
3 padding: 0;
4 }
5
6 .main {
7 padding-left: 100px;
8 padding-right: 100px;
9 }
10
11 .top {
12 text-align: center;
13 height: 90px;
14 font-size: 14px;
15 font-weight: bold;
16 color: #4A4A4A;
17 line-height: 14px;
18 border-bottom: 1px solid #DEDEDE;
19 display: flex;
20 justify-items: auto;
21 align-items: center;
22 flex-width: wrap;
23 }
24
25 .top > div {
26 margin: 0 auto;
27 display: inline-block;
28 }
29
30 .top input {
31 width: 360px;
32 height: 36px;
33 background: #FFFFFF;
34 border-radius: 2px;
35 border: 1px solid #CBCBCB;
36 }
37
38 .top button {
39 width: 120px;
40 height: 40px;
41 background: #0091FF;
42 border: none;
43 border-radius: 3px;
44 color: white;
45 }
46
47 /*.top-date input:before {
48 content: attr(placeholder)
49 }*/
50
51 .filter {
52 display: flex;
53 justify-content: left;
54 }
55
56 .filter div {
57 display: inline-block;
58 padding: 20px;
59 background: #FFFFFF;
60 width: 102px;
61 font-size: 16px;
62 font-weight: 500;
63 color: #6D7278;
64 line-height: 20px;
65 }
66
67 .filter div:first-child {
68 width: 102px;
69 height: 20px;
70 font-size: 18px;
71 font-weight: bold;
72 color: #4A4A4A;
73 line-height: 20px;
74 }
75
76 .body {
77 display: flex;
78 justify-items: left;
79 border-top: 1px solid #CBCBCB;
80 }
81
82 .body div {
83 display: inline-block;
84 }
85
86 .left {
87 border-right-style: inset;
88 border-right: 1px solid #DEDEDE;
89 }
90
91 .right {
92 width: 400px;
93 }
94
95 .left, .right {
96 float: left;
97 }
98
99 .gg-tag {
100 background-color: #FA6800;
101 width: 40px;
102 height: 15px;
103 font-size: 10px;
104 font-weight: 500;
105 color: #FFFFFF;
106 line-height: 15px;
107 padding-left: 8px;
108 }
109
110 .gg {
111 text-overflow: clip;
112 overflow: hidden;
113 border-bottom: 1px solid #DEDEDE;
114 height: 100px;
115 font-size: 20px;
116 font-weight: bold;
117 color: #4A4A4A;
118 line-height: 104px;
119 padding-left: 20px;
120 padding-right: 20px;
121 }
122
123 .right {
124 width: 200px;
125 margin-left: 15px;
126 }
127
128 .right-top {
129 width: 100px;
130 height: 18px;
131 font-size: 18px;
132 font-family: PingFangSC-Medium, PingFang SC;
133 font-weight: 500;
134 color: #4A4A4A;
135 line-height: 18px;
136 padding-top: 20px;
137 }
138
139 .right-body {
140 display: inline-block;
141 margin-bottom: 20px;
142 }
143
144 .tj {
145 /*margin-bottom: 10px;*/
146 }
147
148 .tj img {
149 width: 200px;
150 height: 125px;
151 margin-top: 20px;
152 }
153
154 .tj img, .tj span {
155 float: left;
156 }
157
158 .tj-title {
159 width: 203px;
160 font-size: 14px;
161 font-family: PingFangSC-Medium, PingFang SC;
162 font-weight: bold;
163 color: #4A4A4A;
164 line-height: 21px;
165 }
166
167 .tj-date {
168 width: 90px;
169 height: 12px;
170 font-size: 12px;
171 font-family: PingFangSC-Regular, PingFang SC;
172 font-weight: 400;
173 color: #9B9B9B;
174 line-height: 12px;
175 }
176
177 .right-bottom {
178 border-top-style: inset;
179 border-top: 1px solid #DEDEDE;
180 }
181
182 .right-bottom-top {
183 width: 108px;
184 height: 18px;
185 font-size: 18px;
186 margin-top: 20px;
187 font-family: PingFangSC-Medium, PingFang SC;
188 font-weight: bold;
189 color: #4A4A4A;
190 line-height: 18px;
191 }
192
193 .zcfg {
194 margin-top: 20px;
195 display: inline-block;
196 }
197
198 .zcfg div {
199 float: left;
200 }
201
202 .zcfg-top {
203 width: 200px;
204 height: 14px;
205 font-size: 14px;
206 font-family: PingFangSC-Medium, PingFang SC;
207 font-weight: bold;
208 color: #4A4A4A;
209 line-height: 14px;
210 }
211
212 .zcfg-body {
213 width: 200px;
214 font-size: 14px;
215 display: inline-block;
216 font-family: PingFangSC-Regular, PingFang SC;
217 font-weight: 400;
218 color: #6D7278;
219 line-height: 21px;
220 }
221
222 .zcfg-bottom {
223 width: 90px;
224 height: 12px;
225 font-size: 12px;
226 font-family: PingFangSC-Regular, PingFang SC;
227 font-weight: 400;
228 color: #9B9B9B;
229 line-height: 12px;
230 }
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>公示公告</title>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
7 <meta name="format-detection" content="telephone=no">
8 <meta name="renderer" content="webkit">
9 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
10 <meta http-equiv="Cache-Control" content="no-siteapp"/>
11 <link rel="stylesheet" type="text/css" href="../../lib/layui/css/layui.css"/>
12 <link rel="alternate icon" type="image/png" href="../../images/logo-realestate.png">
13 <link rel='icon' href='../../favicon.ico' type='image/x-ico'/>
14 <meta name="description" content=""/>
15 <meta name="keywords" content=""/>
16 <link rel="stylesheet" href="../../css/default.min.css?t=227"/>
17 <link rel="stylesheet" type="text/css" href="css/index.css">
18 </head>
19 <body>
20 <div class="main">
21 <div class="top">
22 <div class="top-title">
23 <span>标题内容:</span><input type="text" placeholder="请输入标题">
24 </div>
25 <div class="top-date ">
26 发布时间:<input type="date" placeholder="选择时间">
27 </div>
28 <div class="top-serach ">
29 <button>查询</button>
30 </div>
31 </div>
32 <div class="filter">
33 <div>
34 <span>全部</span>
35 </div>
36 <div>
37 <span>公示</span>
38 </div>
39 <div>
40 <span>公告</span>
41 </div>
42 </div>
43 <div class="body">
44 <div class="left">
45 <div class="gg">
46 <div class="gg-tag">
47 公告
48 </div>
49 <span>
50 党的十八大以来双拥工作综述：为实现中国梦强军梦凝聚强大力量 前三季度主要指标由负转正 中国经济持续稳定恢复 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利
51 </span>
52 </div>
53 <div class="gg">
54 <div class="gg-tag">
55 公告
56 </div>
57 <span>
58 党的十八大以来双拥工作综述：为实现中国梦强军梦凝聚强大力量 前三季度主要指标由负转正 中国经济持续稳定恢复 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利
59 </span>
60 </div>
61 <div class="gg">
62 <div class="gg-tag">
63 公告
64 </div>
65 <span>
66 党的十八大以来双拥工作综述：为实现中国梦强军梦凝聚强大力量 前三季度主要指标由负转正 中国经济持续稳定恢复 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 首次推介中央企业民营企业协同发展项目 央企混改再引入社会资本超1800亿元 外交部：中国对世界减贫贡献率超过70% 国新办发布会介绍能源行业决战决胜脱贫攻坚——能源扶贫释放多重红利
67 </span>
68 </div>
69 <div id="page"></div>
70 </div>
71 <div class="right">
72 <div class="right-top">
73 <h2>新闻推荐</h2>
74 </div>
75 <div class="right-body">
76 <div class="tj">
77 <img
78 src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1938529415,777611275&fm=26&gp=0.jpg">
79 <span class="tj-title">
80 爬山虎国土空间信息化解决方案
81 </span>
82 <span class="tj-date">
83 2020-12-12
84 </span>
85 </div>
86 <div class="tj">
87 <img
88 src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1938529415,777611275&fm=26&gp=0.jpg">
89 <span class="tj-title">
90 爬山虎国土空间信息化解决方案终极方案
91 </span>
92 <span class="tj-date">
93 2020-12-12
94 </span>
95 </div>
96 </div>
97 <div class="right-bottom">
98 <div class="right-bottom-top">
99 <span>政策法规推荐</span>
100 </div>
101 <div class="zcfg">
102 <div class="zcfg-top">
103 <span>爬山虎国土空间规划信息化解决</span>
104 </div>
105 <div class="zcfg-body">
106 <span>10月21日，农业农村部举行新闻发布会，介绍2020年前三季度农业农村经济形势。</span>
107 </div>
108 <div class="zcfg-bottom">
109 <span>2020-10-28</span>
110 </div>
111 </div>
112 <div class="zcfg">
113 <div class="zcfg-top">
114 <span>爬山虎国土空间规划信息化解决</span>
115 </div>
116 <div class="zcfg-body">
117 <span>10月21日，农业农村部举行新闻发布会，介绍2020年前三季度农业农村经济形势。</span>
118 </div>
119 <div class="zcfg-bottom">
120 <span>2020-10-28</span>
121 </div>
122 </div>
123 </div>
124 </div>
125 </div>
126 </div>
127 </body>
128 </html>
129 <!--[if (gte IE 9)|!(IE)]><!-->
130 <script type="text/javascript" src="../../lib/jquery/jquery.min.js"></script>
131 <!--<![endif]-->
132 <script type="text/javascript" src="../../lib/handlebars/handlebars.min.js"></script>
133 <script type="text/javascript" src="../../lib/iscroll/iscroll-probe.js"></script>
134 <script type="text/javascript" src="../../lib/amazeui/amazeui.min.js"></script>
135 <script type="text/javascript" src="../../lib/raty/jquery.raty.js"></script>
136 <script type="text/javascript" src="../../js/main.min.js?t=1"></script>
137 <script type="text/javascript" src="../../lib/layui/layui.js"></script>
138 <script type="text/javascript">
139 layui.use('laypage', function () {
140 var laypage = layui.laypage;
141 //执行一个laypage实例
142 laypage.render({
143 elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
144 , count: 50 //数据总数，从服务端得到
145 , prev: '<'
146 , next: '>'
147 ,theme: '#0091FF'
148 });
149 });
150 </script>
...\ No newline at end of file ...\ No newline at end of file
...@@ -166,14 +166,17 @@ ...@@ -166,14 +166,17 @@
166 float: left; 166 float: left;
167 } 167 }
168 168
169 .commentInput input { 169 .commentInput textarea {
170 width: 800px;
171 height: 130px; 170 height: 130px;
172 background: #FFFFFF; 171 background: #FFFFFF;
173 border: 1px solid #DEDEDE; 172 border: 1px solid #DEDEDE;
174 margin-left: 20px; 173 margin-left: 20px;
175 } 174 }
176 175
176 .layui-textarea {
177 width: 93%!important;
178 }
179
177 .commentInput button { 180 .commentInput button {
178 width: 120px; 181 width: 120px;
179 height: 42px; 182 height: 42px;
......
...@@ -73,7 +73,8 @@ ...@@ -73,7 +73,8 @@
73 <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1938529415,777611275&fm=26&gp=0.jpg"> 73 <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1938529415,777611275&fm=26&gp=0.jpg">
74 </div> 74 </div>
75 <div class="commentInputInput"> 75 <div class="commentInputInput">
76 <input type="text"> 76 <!-- <input type="text">-->
77 <textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
77 </div> 78 </div>
78 <div> 79 <div>
79 <button class="layui-btn layui-btn-lg layui-btn-norma">发表</button> 80 <button class="layui-btn layui-btn-lg layui-btn-norma">发表</button>
......