|
@@ -1,5 +1,5 @@
|
|
.comment_container {
|
|
.comment_container {
|
|
- position: fixed;
|
|
|
|
|
|
+ position: absolute;
|
|
z-index: 9999;
|
|
z-index: 9999;
|
|
bottom: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -8,6 +8,7 @@
|
|
padding-bottom: 200rpx;
|
|
padding-bottom: 200rpx;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_number {
|
|
.comment_container .comment_number {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 68rpx;
|
|
height: 68rpx;
|
|
@@ -17,6 +18,7 @@
|
|
color: #4a4a4a;
|
|
color: #4a4a4a;
|
|
font-size: 30rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item {
|
|
.comment_container .comment_item {
|
|
width: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
@@ -26,6 +28,7 @@
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
margin-bottom: 14rpx;
|
|
margin-bottom: 14rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box {
|
|
.comment_container .comment_item .comment_box {
|
|
width: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
@@ -35,33 +38,39 @@
|
|
padding-left: 48rpx;
|
|
padding-left: 48rpx;
|
|
border-bottom: 1rpx solid rgba(151, 151, 151, 0.34);
|
|
border-bottom: 1rpx solid rgba(151, 151, 151, 0.34);
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .avatar_box {
|
|
.comment_container .comment_item .comment_box .avatar_box {
|
|
width: 111rpx;
|
|
width: 111rpx;
|
|
height: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
display: block;
|
|
margin-right: 15rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .avatar_box image {
|
|
.comment_container .comment_item .comment_box .avatar_box image {
|
|
width: 96rpx;
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
height: 96rpx;
|
|
background: chocolate;
|
|
background: chocolate;
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info {
|
|
.comment_container .comment_item .comment_box .comment_info {
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .nickname {
|
|
.comment_container .comment_item .comment_box .comment_info .nickname {
|
|
font-size: 30rpx;
|
|
font-size: 30rpx;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .comment_text {
|
|
.comment_container .comment_item .comment_box .comment_info .comment_text {
|
|
font-size: 30rpx;
|
|
font-size: 30rpx;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
color: rgba(0, 0, 0, 0.8);
|
|
margin-bottom: 23rpx;
|
|
margin-bottom: 23rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper {
|
|
.comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper {
|
|
background: rgba(0, 0, 0, 0.03);
|
|
background: rgba(0, 0, 0, 0.03);
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -69,13 +78,16 @@
|
|
padding-top: 10rpx;
|
|
padding-top: 10rpx;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper .comment_reply_item {
|
|
.comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper .comment_reply_item {
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper .comment_reply_item .reply_nickname {
|
|
.comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper .comment_reply_item .reply_nickname {
|
|
color: rgba(1, 67, 124, 0.8);
|
|
color: rgba(1, 67, 124, 0.8);
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper .more_btn {
|
|
.comment_container .comment_item .comment_box .comment_info .comment_reply_wrapper .more_btn {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
@@ -87,6 +99,7 @@
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
padding-bottom: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .time_info {
|
|
.comment_container .comment_item .comment_box .comment_info .time_info {
|
|
width: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
@@ -95,16 +108,19 @@
|
|
align-items: center;
|
|
align-items: center;
|
|
margin-top: 30rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .time {
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .time {
|
|
color: rgba(0, 0, 0, 0.8);
|
|
color: rgba(0, 0, 0, 0.8);
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info {
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info {
|
|
width: 200rpx;
|
|
width: 200rpx;
|
|
height: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
position: relative;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info .like {
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info .like {
|
|
width: 80rpx;
|
|
width: 80rpx;
|
|
height: 35rpx;
|
|
height: 35rpx;
|
|
@@ -114,15 +130,18 @@
|
|
top: -14rpx;
|
|
top: -14rpx;
|
|
left: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info .like image {
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info .like image {
|
|
width: 30rpx;
|
|
width: 30rpx;
|
|
height: 27rpx;
|
|
height: 27rpx;
|
|
margin-right: 12rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info .like text {
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info .like text {
|
|
font-size: 22.4rpx;
|
|
font-size: 22.4rpx;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info .comment {
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info .comment {
|
|
width: 80rpx;
|
|
width: 80rpx;
|
|
height: 35rpx;
|
|
height: 35rpx;
|
|
@@ -132,16 +151,19 @@
|
|
top: -14rpx;
|
|
top: -14rpx;
|
|
left: 120rpx;
|
|
left: 120rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info .comment image {
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info .comment image {
|
|
width: 28.8rpx;
|
|
width: 28.8rpx;
|
|
height: 25rpx;
|
|
height: 25rpx;
|
|
margin-right: 16rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info .comment text {
|
|
.comment_container .comment_item .comment_box .comment_info .time_info .info .comment text {
|
|
font-size: 22.4rpx;
|
|
font-size: 22.4rpx;
|
|
color: rgba(0, 0, 0, 0.8);
|
|
color: rgba(0, 0, 0, 0.8);
|
|
}
|
|
}
|
|
-.comment_container .comment_input {
|
|
|
|
|
|
+
|
|
|
|
+.comment_input {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 205rpx;
|
|
height: 205rpx;
|
|
background: #eee;
|
|
background: #eee;
|
|
@@ -153,22 +175,25 @@
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
-.comment_container .comment_input .send_input {
|
|
|
|
|
|
+
|
|
|
|
+.comment_input .send_input {
|
|
width: 575rpx;
|
|
width: 575rpx;
|
|
height: 94rpx;
|
|
height: 94rpx;
|
|
background: #fff;
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
border-radius: 10rpx;
|
|
padding-left: 50rpx;
|
|
padding-left: 50rpx;
|
|
}
|
|
}
|
|
-.comment_container .comment_input .send_input ::placeholder {
|
|
|
|
|
|
+
|
|
|
|
+.comment_input .send_input ::placeholder {
|
|
text-indent: 10rpx;
|
|
text-indent: 10rpx;
|
|
color: #000;
|
|
color: #000;
|
|
}
|
|
}
|
|
-.comment_container .comment_input .send_btn {
|
|
|
|
|
|
+
|
|
|
|
+.comment_input .send_btn {
|
|
width: 120rpx;
|
|
width: 120rpx;
|
|
height: 48rpx;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
text-align: center;
|
|
color: #42a8ff;
|
|
color: #42a8ff;
|
|
font-size: 34rpx;
|
|
font-size: 34rpx;
|
|
-}
|
|
|
|
|
|
+}
|