Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
53ef44f5 by weimo934
Options

feat():绘制新闻详情页

1 parent 77056522
Inline Side-by-side
Showing 2 changed files with 247 additions and 17 deletions
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
12 font-size: 30px; 12 font-size: 30px;
13 padding-top: 45px; 13 padding-top: 45px;
14 padding-bottom: 70px; 14 padding-bottom: 70px;
15 font-family: PingFangSC-Medium, PingFang SC;
16 font-weight: 500; 15 font-weight: 500;
17 color: #4A4A4A; 16 color: #4A4A4A;
18 line-height: 30px; 17 line-height: 30px;
...@@ -54,7 +53,6 @@ ...@@ -54,7 +53,6 @@
54 .readNum div:nth-child(1) { 53 .readNum div:nth-child(1) {
55 height: 12px; 54 height: 12px;
56 font-size: 12px; 55 font-size: 12px;
57 font-family: PingFangSC-Regular, PingFang SC;
58 font-weight: 400; 56 font-weight: 400;
59 color: #6D7278; 57 color: #6D7278;
60 line-height: 12px; 58 line-height: 12px;
...@@ -63,7 +61,6 @@ ...@@ -63,7 +61,6 @@
63 .readNum div:nth-child(2) { 61 .readNum div:nth-child(2) {
64 height: 16px; 62 height: 16px;
65 font-size: 16px; 63 font-size: 16px;
66 font-family: PingFangSC-Medium, PingFang SC;
67 font-weight: 500; 64 font-weight: 500;
68 color: #4A4A4A; 65 color: #4A4A4A;
69 line-height: 16px; 66 line-height: 16px;
...@@ -77,7 +74,6 @@ ...@@ -77,7 +74,6 @@
77 width: 39px; 74 width: 39px;
78 height: 16px; 75 height: 16px;
79 font-size: 16px; 76 font-size: 16px;
80 font-family: PingFangSC-Regular, PingFang SC;
81 font-weight: 400; 77 font-weight: 400;
82 color: #4A4A4A; 78 color: #4A4A4A;
83 line-height: 16px; 79 line-height: 16px;
...@@ -88,7 +84,6 @@ ...@@ -88,7 +84,6 @@
88 width: 61px; 84 width: 61px;
89 height: 24px; 85 height: 24px;
90 font-size: 24px; 86 font-size: 24px;
91 font-family: PingFangSC-Medium, PingFang SC;
92 font-weight: 500; 87 font-weight: 500;
93 color: #4A4A4A; 88 color: #4A4A4A;
94 line-height: 24px; 89 line-height: 24px;
...@@ -111,7 +106,6 @@ ...@@ -111,7 +106,6 @@
111 width: 40px; 106 width: 40px;
112 height: 20px; 107 height: 20px;
113 font-size: 20px; 108 font-size: 20px;
114 font-family: PingFangSC-Medium, PingFang SC;
115 font-weight: bold; 109 font-weight: bold;
116 color: #4A4A4A; 110 color: #4A4A4A;
117 line-height: 20px; 111 line-height: 20px;
...@@ -132,7 +126,6 @@ ...@@ -132,7 +126,6 @@
132 width: 240px; 126 width: 240px;
133 height: 12px; 127 height: 12px;
134 font-size: 12px; 128 font-size: 12px;
135 font-family: PingFangSC-Regular, PingFang SC;
136 margin-top: 20px; 129 margin-top: 20px;
137 font-weight: 400; 130 font-weight: 400;
138 color: #9B9B9B; 131 color: #9B9B9B;
...@@ -143,7 +136,6 @@ ...@@ -143,7 +136,6 @@
143 margin-top: 20px; 136 margin-top: 20px;
144 height: 14px; 137 height: 14px;
145 font-size: 14px; 138 font-size: 14px;
146 font-family: PingFangSC-Regular, PingFang SC;
147 font-weight: 400; 139 font-weight: 400;
148 color: #006CFF; 140 color: #006CFF;
149 line-height: 14px; 141 line-height: 14px;
...@@ -165,9 +157,11 @@ ...@@ -165,9 +157,11 @@
165 border-radius: 50%; 157 border-radius: 50%;
166 overflow: hidden 158 overflow: hidden
167 } 159 }
168 .commentInputImg{ 160
161 .commentInputImg {
169 height: 100px; 162 height: 100px;
170 } 163 }
164
171 .commentInputImg, commentInputInput { 165 .commentInputImg, commentInputInput {
172 float: left; 166 float: left;
173 } 167 }
...@@ -190,7 +184,161 @@ ...@@ -190,7 +184,161 @@
190 } 184 }
191 185
192 .CommentdetailsTitle { 186 .CommentdetailsTitle {
193 height: 80px; 187 height: auto;
188 margin-top: 20px;
189 }
190
191 .CommentdetailsTitle span:nth-child(1) {
192 width: 80px;
193 height: 20px;
194 font-size: 20px;
195 font-weight: 500;
196 color: #4A4A4A;
197 line-height: 20px;
198 }
199
200 .CommentdetailsTitle span:nth-child(3) {
201 width: 56px;
202 height: 14px;
203 font-size: 14px;
204 font-weight: 500;
205 color: #006CFF;
206 line-height: 14px;
207 }
208
209 .pl {
210 border-top: 1px solid #DEDEDE;
211 margin-top: 20px;
212 padding-top: 20px;
213 display: inline-block;
214 }
215
216 .pl-left, .pl-right {
217 float: left;
218 }
219
220 .pl-left img {
221 width: 50px;
222 height: 50px;
223 border-radius: 50%;
224 overflow: hidden;
225 }
226
227 .pl-right {
228 width: 80%;
229 }
230
231 .pl-right-top div {
232 float: left;
233 }
234
235 .pl-right-top div:nth-child(1) {
236 margin-left: 15px;
237 width: 42px;
238 height: 14px;
239 font-size: 14px;
240 font-weight: 500;
241 color: #9B9B9B;
242 line-height: 14px;
243 }
244
245 .pl-right-top div:nth-child(2) {
246 margin-left: 15px;
247 width: auto;
248 height: 14px;
249 font-size: 14px;
250 font-weight: 400;
251 color: #9B9B9B;
252 line-height: 14px;
253 }
254
255 .pl-right-body {
256 float: left;
257 margin-left: 15px;
258 width: 800px;
259 height: auto;
260 font-size: 14px;
261 font-weight: 400;
262 color: #4A4A4A;
263 line-height: 14px;
264 }
265
266 .pl-right-bottom div {
267 float: left;
268 }
269
270 .pl-right-bottom {
271 height: 12px;
272 font-size: 12px;
273 font-weight: 400;
274 color: #9B9B9B;
275 line-height: 12px;
276 display: inline-block;
277 margin-top: 10px;
278 }
279
280 .plhf:not(:last-child) {
281 border-bottom: 1px solid #DEDEDE;
282 }
283
284 .plhf-main {
285 background-color: #F7F7F7;
286 margin-top: 20px;
287 width: 800px;
288 margin-left: 15px;
289 }
290
291 .plhf {
292 padding: 20px;
293 display: inline-block;
294 width: 775px;
295 margin-left: 15px;
296 }
297
298 .plhf-top div {
299 float: left;
300 }
301
302 .plhf-top div:nth-child(1) {
303 height: 14px;
304 font-size: 14px;
305 font-family: PingFangSC-Medium, PingFang SC;
306 font-weight: 500;
307 color: #4A4A4A;
308 line-height: 14px;
309 }
310
311 .plhf-top div:nth-child(2) {
312 height: 14px;
313 width: 700px;
314 font-size: 14px;
315 font-family: PingFangSC-Regular, PingFang SC;
316 font-weight: 400;
317 color: #4A4A4A;
318 line-height: 14px;
319 }
320
321 .plhf-bottom div {
322 float: left;
323 height: 14px;
324 font-size: 14px;
325 font-family: PingFangSC-Regular, PingFang SC;
326 font-weight: 400;
327 color: #9B9B9B;
328 line-height: 14px;
329 }
330
331 .plhf-bottom div:nth-child(2) {
332 margin-left: 45px;
333 }
334
335 .pl-right-bottom div {
336 float: left;
337 margin-left: 15px;
338 }
339
340 .pl-right-bottom div:nth-child(2) {
341 margin-left: 50px;
194 } 342 }
195 343
196 .right { 344 .right {
...@@ -210,7 +358,6 @@ ...@@ -210,7 +358,6 @@
210 width: 100px; 358 width: 100px;
211 height: 18px; 359 height: 18px;
212 font-size: 18px; 360 font-size: 18px;
213 font-family: PingFangSC-Medium, PingFang SC;
214 font-weight: 500; 361 font-weight: 500;
215 color: #4A4A4A; 362 color: #4A4A4A;
216 line-height: 18px; 363 line-height: 18px;
...@@ -238,7 +385,6 @@ ...@@ -238,7 +385,6 @@
238 .tj-title { 385 .tj-title {
239 width: 203px; 386 width: 203px;
240 font-size: 14px; 387 font-size: 14px;
241 font-family: PingFangSC-Medium, PingFang SC;
242 font-weight: bold; 388 font-weight: bold;
243 color: #4A4A4A; 389 color: #4A4A4A;
244 line-height: 21px; 390 line-height: 21px;
...@@ -248,7 +394,6 @@ ...@@ -248,7 +394,6 @@
248 width: 90px; 394 width: 90px;
249 height: 12px; 395 height: 12px;
250 font-size: 12px; 396 font-size: 12px;
251 font-family: PingFangSC-Regular, PingFang SC;
252 font-weight: 400; 397 font-weight: 400;
253 color: #9B9B9B; 398 color: #9B9B9B;
254 line-height: 12px; 399 line-height: 12px;
...@@ -264,7 +409,6 @@ ...@@ -264,7 +409,6 @@
264 height: 18px; 409 height: 18px;
265 font-size: 18px; 410 font-size: 18px;
266 margin-top: 20px; 411 margin-top: 20px;
267 font-family: PingFangSC-Medium, PingFang SC;
268 font-weight: bold; 412 font-weight: bold;
269 color: #4A4A4A; 413 color: #4A4A4A;
270 line-height: 18px; 414 line-height: 18px;
...@@ -283,7 +427,6 @@ ...@@ -283,7 +427,6 @@
283 width: 200px; 427 width: 200px;
284 height: 14px; 428 height: 14px;
285 font-size: 14px; 429 font-size: 14px;
286 font-family: PingFangSC-Medium, PingFang SC;
287 font-weight: bold; 430 font-weight: bold;
288 color: #4A4A4A; 431 color: #4A4A4A;
289 line-height: 14px; 432 line-height: 14px;
...@@ -293,7 +436,6 @@ ...@@ -293,7 +436,6 @@
293 width: 200px; 436 width: 200px;
294 font-size: 14px; 437 font-size: 14px;
295 display: inline-block; 438 display: inline-block;
296 font-family: PingFangSC-Regular, PingFang SC;
297 font-weight: 400; 439 font-weight: 400;
298 color: #6D7278; 440 color: #6D7278;
299 line-height: 21px; 441 line-height: 21px;
...@@ -303,7 +445,6 @@ ...@@ -303,7 +445,6 @@
303 width: 90px; 445 width: 90px;
304 height: 12px; 446 height: 12px;
305 font-size: 12px; 447 font-size: 12px;
306 font-family: PingFangSC-Regular, PingFang SC;
307 font-weight: 400; 448 font-weight: 400;
308 color: #9B9B9B; 449 color: #9B9B9B;
309 line-height: 12px; 450 line-height: 12px;
......
...@@ -88,6 +88,95 @@ ...@@ -88,6 +88,95 @@
88 <span> 88 <span>
89 我的评论 89 我的评论
90 </span></div> 90 </span></div>
91 <div class="pl">
92 <div class="pl-left">
93 <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1938529415,777611275&fm=26&gp=0.jpg">
94 </div>
95 <div class="pl-right">
96 <div class="pl-right-top layui-row">
97
98 <div class="layui-col-md1"><span>李玉龙</span></div>
99 <div class="layui-col-md1"><span>2020/09/27</span></div>
100 </div>
101 <div class="pl-right-body">
102 <span>美国人不聪明，美国的富豪这么多，这些穷人为什么不凭本事借钱呢，凭本事借的钱，你不还他也拿你没办法</span>
103 </div>
104 <div class="plhf-main">
105 <div class="plhf">
106 <div class="plhf-body">
107 <div class="plhf-top">
108 <div>
109 <span>博文:</span>
110 </div>
111 <div>
112 <span>他们又不是中国人，几代人生活在美国，早就是美国人了，，管我们屁事啊</span>
113 </div>
114 </div>
115 <div class="plhf-bottom">
116 <div>
117 👍2人赞
118 </div>
119 <div>
120 回复
121 </div>
122 </div>
123 </div>
124 </div>
125 <div class="plhf">
126 <div class="plhf-body">
127 <div class="plhf-top">
128 <div>
129 <span>博文:</span>
130 </div>
131 <div>
132 <span>他们又不是中国人，几代人生活在美国，早就是美国人了，，管我们屁事啊</span>
133 </div>
134 </div>
135 <div class="plhf-bottom">
136 <div>
137 👍2人赞
138 </div>
139 <div>
140 回复
141 </div>
142 </div>
143 </div>
144 </div>
145 </div>
146
147 <div class="pl-right-bottom">
148 <div>
149 👍2人赞
150 </div>
151 <div>
152 回复
153 </div>
154 </div>
155 </div>
156 </div>
157
158 <div class="pl">
159 <div class="pl-left">
160 <img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1938529415,777611275&fm=26&gp=0.jpg">
161 </div>
162 <div class="pl-right">
163 <div class="pl-right-top">
164 <div><span>李玉龙</span></div>
165 <div><span>2020/09/27</span></div>
166 </div>
167 <div class="pl-right-body">
168 <span>美国人不聪明，美国的富豪这么多，这些穷人为什么不凭本事借钱呢，凭本事借的钱，你不还他也拿你没办法</span>
169 </div>
170 <div class="pl-right-bottom">
171 <div>
172 👍2人赞
173 </div>
174 <div>
175 回复
176 </div>
177 </div>
178 </div>
179 </div>
91 </div> 180 </div>
92 </div> 181 </div>
93 </div> 182 </div>
......