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

src/assets/css/public.scss

@@ -138,37 +138,39 @@ section {
 			}
 		}
 	}
+}
 
-	// 精华
-	.rightTop {
+// 精华
+.rightTop {
+	position: absolute;
+	top: 0;
+	right: 0;
+
+	.rightTop-img {
+		width: 1.28rem;
+		height: 1.28rem;
+		margin-top: -.1rem;
+		margin-right: -.1rem;
+	}
+
+	// 丝带
+	span {
 		position: absolute;
 		top: 0;
-		right: 0;
-
-		.rightTop-img {
-			width: 1.28rem;
-			height: 1.28rem;
-			margin-top: -.1rem;
-			margin-right: -.1rem;
-		}
-
-		// 丝带
-		span {
-			position: absolute;
-			top: 0;
-			left: 0;
-			transform: rotate(45deg);
-			transform-origin: bottom;
-			margin-top: 0.01rem;
-			margin-left: 0.25rem;
-			width: 0.9rem;
-			font-size: 0.3rem;
-			text-align: center;
-			color: #fff;
-		}
+		left: 0;
+		transform: rotate(45deg);
+		transform-origin: bottom;
+		margin-top: 0.01rem;
+		margin-left: 0.25rem;
+		width: 0.9rem;
+		font-size: 0.3rem;
+		text-align: center;
+		color: #fff;
 	}
 }
 
+
+
 // 广告
 .banner-box {
 	border-radius: 0.32rem;

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import ElementUI, {Message} from 'element-ui';
+import ElementUI, { Message, Pagination } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import { skipUrl, pageStop, pageMove, goTologin } from "@/utils/common.js"
 import http from "@/utils/request"
@@ -28,6 +28,7 @@ import './utils/fontSize.js'
 
 //ElementUI
 Vue.use(ElementUI);
+Vue.use(Pagination);
 
 
 

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>