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 @@
font-size: 30px;
padding-top: 45px;
padding-bottom: 70px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #4A4A4A;
line-height: 30px;
......@@ -54,7 +53,6 @@
.readNum div:nth-child(1) {
height: 12px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #6D7278;
line-height: 12px;
......@@ -63,7 +61,6 @@
.readNum div:nth-child(2) {
height: 16px;
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #4A4A4A;
line-height: 16px;
......@@ -77,7 +74,6 @@
width: 39px;
height: 16px;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4A4A4A;
line-height: 16px;
......@@ -88,7 +84,6 @@
width: 61px;
height: 24px;
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #4A4A4A;
line-height: 24px;
......@@ -111,7 +106,6 @@
width: 40px;
height: 20px;
font-size: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #4A4A4A;
line-height: 20px;
......@@ -132,7 +126,6 @@
width: 240px;
height: 12px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
margin-top: 20px;
font-weight: 400;
color: #9B9B9B;
......@@ -143,7 +136,6 @@
margin-top: 20px;
height: 14px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #006CFF;
line-height: 14px;
......@@ -165,9 +157,11 @@
border-radius: 50%;
overflow: hidden
}
.commentInputImg{
.commentInputImg {
height: 100px;
}
.commentInputImg, commentInputInput {
float: left;
}
......@@ -190,7 +184,161 @@
}
.CommentdetailsTitle {
height: 80px;
height: auto;
margin-top: 20px;
}
.CommentdetailsTitle span:nth-child(1) {
width: 80px;
height: 20px;
font-size: 20px;
font-weight: 500;
color: #4A4A4A;
line-height: 20px;
}
.CommentdetailsTitle span:nth-child(3) {
width: 56px;
height: 14px;
font-size: 14px;
font-weight: 500;
color: #006CFF;
line-height: 14px;
}
.pl {
border-top: 1px solid #DEDEDE;
margin-top: 20px;
padding-top: 20px;
display: inline-block;
}
.pl-left, .pl-right {
float: left;
}
.pl-left img {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
}
.pl-right {
width: 80%;
}
.pl-right-top div {
float: left;
}
.pl-right-top div:nth-child(1) {
margin-left: 15px;
width: 42px;
height: 14px;
font-size: 14px;
font-weight: 500;
color: #9B9B9B;
line-height: 14px;
}
.pl-right-top div:nth-child(2) {
margin-left: 15px;
width: auto;
height: 14px;
font-size: 14px;
font-weight: 400;
color: #9B9B9B;
line-height: 14px;
}
.pl-right-body {
float: left;
margin-left: 15px;
width: 800px;
height: auto;
font-size: 14px;
font-weight: 400;
color: #4A4A4A;
line-height: 14px;
}
.pl-right-bottom div {
float: left;
}
.pl-right-bottom {
height: 12px;
font-size: 12px;
font-weight: 400;
color: #9B9B9B;
line-height: 12px;
display: inline-block;
margin-top: 10px;
}
.plhf:not(:last-child) {
border-bottom: 1px solid #DEDEDE;
}
.plhf-main {
background-color: #F7F7F7;
margin-top: 20px;
width: 800px;
margin-left: 15px;
}
.plhf {
padding: 20px;
display: inline-block;
width: 775px;
margin-left: 15px;
}
.plhf-top div {
float: left;
}
.plhf-top div:nth-child(1) {
height: 14px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #4A4A4A;
line-height: 14px;
}
.plhf-top div:nth-child(2) {
height: 14px;
width: 700px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4A4A4A;
line-height: 14px;
}
.plhf-bottom div {
float: left;
height: 14px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9B9B9B;
line-height: 14px;
}
.plhf-bottom div:nth-child(2) {
margin-left: 45px;
}
.pl-right-bottom div {
float: left;
margin-left: 15px;
}
.pl-right-bottom div:nth-child(2) {
margin-left: 50px;
}
.right {
......@@ -210,7 +358,6 @@
width: 100px;
height: 18px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #4A4A4A;
line-height: 18px;
......@@ -238,7 +385,6 @@
.tj-title {
width: 203px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #4A4A4A;
line-height: 21px;
......@@ -248,7 +394,6 @@
width: 90px;
height: 12px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9B9B9B;
line-height: 12px;
......@@ -264,7 +409,6 @@
height: 18px;
font-size: 18px;
margin-top: 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #4A4A4A;
line-height: 18px;
......@@ -283,7 +427,6 @@
width: 200px;
height: 14px;
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #4A4A4A;
line-height: 14px;
......@@ -293,7 +436,6 @@
width: 200px;
font-size: 14px;
display: inline-block;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #6D7278;
line-height: 21px;
......@@ -303,7 +445,6 @@
width: 90px;
height: 12px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #9B9B9B;
line-height: 12px;
......
......@@ -88,6 +88,95 @@
<span>
我的评论
</span></div>
<div class="pl">
<div class="pl-left">
<img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1938529415,777611275&fm=26&gp=0.jpg">
</div>
<div class="pl-right">
<div class="pl-right-top layui-row">
<div class="layui-col-md1"><span>李玉龙</span></div>
<div class="layui-col-md1"><span>2020/09/27</span></div>
</div>
<div class="pl-right-body">
<span>美国人不聪明，美国的富豪这么多，这些穷人为什么不凭本事借钱呢，凭本事借的钱，你不还他也拿你没办法</span>
</div>
<div class="plhf-main">
<div class="plhf">
<div class="plhf-body">
<div class="plhf-top">
<div>
<span>博文:</span>
</div>
<div>
<span>他们又不是中国人，几代人生活在美国，早就是美国人了，，管我们屁事啊</span>
</div>
</div>
<div class="plhf-bottom">
<div>
👍2人赞
</div>
<div>
回复
</div>
</div>
</div>
</div>
<div class="plhf">
<div class="plhf-body">
<div class="plhf-top">
<div>
<span>博文:</span>
</div>
<div>
<span>他们又不是中国人，几代人生活在美国，早就是美国人了，，管我们屁事啊</span>
</div>
</div>
<div class="plhf-bottom">
<div>
👍2人赞
</div>
<div>
回复
</div>
</div>
</div>
</div>
</div>
<div class="pl-right-bottom">
<div>
👍2人赞
</div>
<div>
回复
</div>
</div>
</div>
</div>
<div class="pl">
<div class="pl-left">
<img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1938529415,777611275&fm=26&gp=0.jpg">
</div>
<div class="pl-right">
<div class="pl-right-top">
<div><span>李玉龙</span></div>
<div><span>2020/09/27</span></div>
</div>
<div class="pl-right-body">
<span>美国人不聪明，美国的富豪这么多，这些穷人为什么不凭本事借钱呢，凭本事借的钱，你不还他也拿你没办法</span>
</div>
<div class="pl-right-bottom">
<div>
👍2人赞
</div>
<div>
回复
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......