a1300399510@qq.com 提交于 2023/03/29 -18:40:01

src/App.vue

@@ -64,5 +64,20 @@ export default {
 	min-width: 7rem !important;
 }
 
+// 文字一行显示
+.one-line {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -moz-box;
+	-moz-box-orient: vertical;
+}
 
+// 文字两行显示
+.two-lines {
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
 </style>

src/views/search/searchResult/SearchResult.vue

@@ -16,16 +16,16 @@
 
 		<div class="result-box flexflex">
 			<div class="result-item">
-				<div class="result-header">
+				<div class="result-header one-line">
-					<div class="result-label">租房</div>
+					<div class="result-label">租房租房租房</div>
 					<div class="result-title">诚招室友一起合租香港大学附近房子 女生</div>
 				</div>
 
-				<div class="result-content">
+				<div class="result-content two-lines">
 					香港理工大学附近求租房，红磡何文田或黄埔附近最好
 				</div>
 
-				<div class="result-info">
+				<div class="result-info flexacenter">
 					<div class="user-info flexacenter">
 						<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
 						<div class="user-name">匿名用户</div>
@@ -164,27 +164,44 @@ export default {
 				line-height: .52rem;
 				font-size: .3rem;
 				color: #7f7f7f;
-				display: -webkit-box;
+				
-				-webkit-line-clamp: 2;
-				-webkit-box-orient: vertical;
-				overflow: hidden;
 			}
 
 			.result-info {
+
+				justify-content: space-between;
+
 				.user-info {
 					.icon-head {
-
+						width: .64rem;
+						height: .64rem;
 					}
 
 					.user-name {
-
+						font-size: .32rem;
+						color: #333;
+						margin-left: .2rem;
 					}
 				}
 
 				.item-data {
-					.item-data-item{
-						.icon-look{
 
+					font-size: .28rem;
+
+					.item-data-item {
+
+						&:last-of-type {
+							margin-left: .4rem;
+						}
+
+						.icon-look {
+							width: .4267rem;
+							height: .18rem;
+						}
+
+						.icon-msg {
+							width: .32rem;
+							height: .28rem;
 						}
 					}
 				}