修复border显示不全

Author: rawchen

blog-view/src/components/comment/Comment.vue

@@ -30,14 +30,18 @@
 						<div class="metadata">
 							<strong class="date">{{ reply.createTime | dateFormat('YYYY-MM-DD HH:mm') }}</strong>
 						</div>
-						<div class="text"><a :href="`#comment-${reply.parentCommentId}`">@{{ reply.parentCommentNickname }}</a><div v-html="reply.content"></div></div>
+						<div class="text">
+							<a :href="`#comment-${reply.parentCommentId}`">@{{ reply.parentCommentNickname }}</a>
+							<div v-html="reply.content"></div>
+						</div>
 						<div class="actions">
 							<el-button size="mini" type="primary" @click="setReply(reply.id)">回复</el-button>
 						</div>
 					</div>
 					<CommentForm v-if="parentCommentId===reply.id"/>
 				</div>
 			</div>
+			<div class="border"></div>
 			<CommentForm v-if="parentCommentId===comment.id"/>
 		</div>
 	</div>
@@ -63,6 +67,20 @@
 </script>
 
 <style scoped>
+	.comments + .border {
+		position: absolute;
+		left: 34px;
+		top: 47px;
+		bottom: 0;
+		border-style: solid;
+		border-width: 0 0 0 1px;
+		border-color: #e0e0e0;
+	}
+	.ui.threaded.comments .comment .comments {
+		box-shadow: none;
+		margin-top: -2em;
+	}
+
 	.comment {
 		padding-right: 2em !important;
 		padding-left: 1em !important;
@@ -78,11 +96,13 @@
 		padding: 4px 5px;
 	}
 
-	.anchor {
-		display: block;
-		height: 55px;
-		margin-top: -55px;
-		visibility: hidden;
+	.comment > .anchor {
+		position: absolute;
+		left: 0;
+		top: -48px;
+	}
+	.comment .comments .comment > .anchor {
+		top: -55px;
 	}
 
 	.ui.comments .comment .avatar {

blog-view/src/components/comment/CommentForm.vue

@@ -170,6 +170,11 @@
 </script>
 
 <style>
+	.form {
+		background: #fff;
+		position: relative;
+	}
+
 	.form h3 {
 		margin: 5px;
 		font-weight: 500 !important;