a1300399510@qq.com 提交于 2023/03/30 -11:00:01

src/views/search/searchResult/SearchResult.vue

@@ -13,17 +13,24 @@
 		<!-- 结果数量 -->
 		<div class="numberResults flexacenter">大约找到 <div class="number">{{ 800 }}</div> 条结果</div>
 
-		<div class="result-box flexflex">
-			<div class="result-item flexflex">
+		<div class="result-box flexacenter">
+			<div class="result-item flexflex" v-for="item in 3" :key="item">
 				<div class="result-header one-line">
 					<div class="result-label">租房租房租房</div>
 					<div class="result-title">诚招室友一起合租香港大学附近房子 女生</div>
 				</div>
 
 				<div class="result-content two-lines flex1">
-					香港理工大学附近求租房，红磡何文田或黄埔附近最好
+					<template v-if="item == 1">
+						香港理工大学附近求租房，红磡何文田或黄埔附近最好
+					</template>
+
+					<div v-else class="reply-visible flexcenter">
+						回复可见
+					</div>
 				</div>
 
+
 				<div class="result-info flexacenter">
 					<div class="user-info flexacenter">
 						<svg-icon icon-class="test-head" class-name="icon-head"></svg-icon>
@@ -42,9 +49,21 @@
 				</div>
 
 
+				<!-- 精华 -->
+				<div class="rightTop">
+					<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
+					<span>精华</span>
+				</div>
+
 			</div>
 
 		</div>
+
+		<div class="paging">
+			<el-pagination background layout="prev, pager, next" :total="1000">
+			</el-pagination>
+		</div>
+
 	</div>
 </template>
 
@@ -121,6 +140,7 @@ export default {
 
 	.result-box {
 		justify-content: center;
+		flex-direction: column;
 
 		.result-item {
 			margin-bottom: .32rem;
@@ -135,6 +155,7 @@ export default {
 			padding: 0.4rem;
 			box-sizing: border-box;
 			flex-direction: column;
+			position: relative;
 
 			.result-header {
 				margin-bottom: .32rem;
@@ -166,6 +187,12 @@ export default {
 				color: #7f7f7f;
 			}
 
+			.reply-visible {
+				font-size: .32rem;
+				height: 1.04rem;
+				background: rgba(242, 242, 242, 0.7);
+			}
+
 			.result-info {
 
 				justify-content: space-between;
@@ -209,6 +236,10 @@ export default {
 		}
 	}
 
+	.paging {
+		width: 483px;
+	}
+
 
 }
 </style>