From a98b955b90287202cc7e00c3f3bc7d7c0f24b830 Mon Sep 17 00:00:00 2001
From: XiaoMo <a1300399510@qq.com>
Date: Fri, 31 Mar 2023 23:20:11 +0800
Subject: [PATCH] =?UTF-8?q?a1300399510@qq.com=20=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=8E=202023/03/31=20-23:20:02?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...OP-6MA514B_3月-31-231138-2023_Conflict.vue | 267 ++++++++++++++++++
 1 file changed, 267 insertions(+)
 create mode 100755 src/views/search/searchResult/SearchResult_DESKTOP-6MA514B_3月-31-231138-2023_Conflict.vue

diff --git a/src/views/search/searchResult/SearchResult_DESKTOP-6MA514B_3月-31-231138-2023_Conflict.vue b/src/views/search/searchResult/SearchResult_DESKTOP-6MA514B_3月-31-231138-2023_Conflict.vue
new file mode 100755
index 0000000..03656f4
--- /dev/null
+++ b/src/views/search/searchResult/SearchResult_DESKTOP-6MA514B_3月-31-231138-2023_Conflict.vue
@@ -0,0 +1,267 @@
+<template>
+	<div class="container">
+		<!-- 搜索框 -->
+		<div class="search-input-box flexacenter">
+			<div class="search-input flexacenter">
+				<img class="search-input-icon" src="@/assets/img/headerNav/search.png">
+				<input class="search-input-input flex1" placeholder="请输入搜索关键词" />
+				<img class="search-input-cross" src="@/assets/img/icon/clear.png">
+			</div>
+
+			<div class="search-input-cancel" @click.stop="handCancel">取消</div>
+		</div>
+
+		<!-- 结果数量 -->
+		<div class="numberResults flexacenter">大约找到 <div class="number">{{ 800 }}</div> 条结果</div>
+
+		<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>
+						<div class="user-name">匿名用户</div>
+					</div>
+					<div class="item-data flexacenter">
+						<div class="item-data-item flexacenter">
+							<svg-icon icon-class="look" class-name="icon-look"></svg-icon>
+							<div>1552</div>
+						</div>
+						<div class="item-data-item flexacenter">
+							<svg-icon icon-class="msg" class-name="icon-msg"></svg-icon>
+							<div>12</div>
+						</div>
+					</div>
+				</div>
+
+
+				<!-- 精华 -->
+				<div class="rightTop">
+					<img class="rightTop-img" src="@/assets/img/icon/topRight .png">
+					<span>精华</span>
+				</div>
+
+			</div>
+
+		</div>
+
+		<div class="paging flexcenter">
+			<el-pagination small background layout="prev, pager, next" :total="1000">
+			</el-pagination>
+		</div>
+
+	</div>
+</template>
+
+<script>
+export default {
+	name: "SearchResult",
+	data() {
+		return {
+
+		}
+	},
+	components: {
+
+	},
+
+	methods: {
+		// 处理点击取消的返回上一页
+		handCancel() {
+			if (this.$route.fullPath != "/") this.$router.go(-1)
+			else this.$router.push('/recommend')
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+	padding-top: 1.3rem;
+
+	.search-input-box {
+		margin-left: .32rem;
+
+		.search-input {
+			width: 8.2rem;
+			height: .96rem;
+			border-radius: 2.56rem;
+			background: rgba(235, 235, 235, 1);
+
+			.search-input-icon,
+			.search-input-cross {
+				width: .4rem;
+				height: .4rem;
+			}
+
+			.search-input-icon {
+				padding: 0 .4rem;
+			}
+
+			.search-input-cross {
+				padding-right: .4rem;
+			}
+
+			.search-input-input {
+				height: 100%;
+				background: transparent;
+				border: none;
+				outline: none;
+			}
+
+		}
+
+		.search-input-cancel {
+			color: #000;
+			font-size: .36rem;
+			padding-left: .46rem;
+			width: .74rem;
+		}
+	}
+
+	.numberResults {
+		font-size: .32rem;
+		color: #555;
+		// margin-top: .64rem;
+		margin: .64rem .32rem .48rem;
+
+		.number {
+			color: #000;
+			font-weight: 650;
+			margin: 0 .1667rem;
+		}
+	}
+
+	.result-box {
+		justify-content: center;
+		flex-direction: column;
+
+		.result-item {
+			margin-bottom: .32rem;
+			width: 9.36rem;
+			height: 3.96rem;
+			background-color: rgba(255, 255, 255, 1);
+			border: none;
+			border-radius: .32rem;
+			-moz-box-shadow: 0 0 .16rem rgba(0, 0, 0, 0.0784313725490196);
+			-webkit-box-shadow: 0 0 .16rem rgba(0, 0, 0, 0.08);
+			box-shadow: 0 0 .16rem rgba(0, 0, 0, .08);
+			padding: 0.4rem;
+			box-sizing: border-box;
+			flex-direction: column;
+			position: relative;
+
+			.result-header {
+				margin-bottom: .32rem;
+
+				.result-label {
+					font-size: .28rem;
+					height: .52rem;
+					line-height: .52rem;
+					background: rgb(51, 51, 51);
+					color: #fff;
+					display: inline-block;
+					border-radius: .16rem;
+					padding: 0 .12rem;
+					margin-right: .12rem;
+				}
+
+				.result-title {
+					color: #000;
+					font-size: 0.37333rem;
+					line-height: 0.65rem;
+					display: inline;
+				}
+
+			}
+
+			.result-content {
+				line-height: .52rem;
+				font-size: .3rem;
+				color: #7f7f7f;
+			}
+
+			.reply-visible {
+				font-size: .32rem;
+				height: 1.04rem;
+				background: rgba(242, 242, 242, 0.7);
+			}
+
+			.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 {
+
+					font-size: .28rem;
+
+					.item-data-item {
+
+						&:last-of-type {
+							margin-left: .4rem;
+						}
+
+						.icon-look {
+							width: .4267rem;
+							height: .18rem;
+						}
+
+						.icon-msg {
+							width: .32rem;
+							height: .28rem;
+						}
+					}
+				}
+			}
+
+		}
+	}
+
+	.paging {
+		// width: 6.44rem;
+		margin-top: .48rem;
+
+		::v-deep {
+			.el-pagination.is-background .el-pager li:not(.disabled).active {
+				background: rgba(98, 177, 255, 1);
+				border-radius: 50%;
+			}
+
+			.el-pagination .btn-next .el-icon,
+			.el-pagination .btn-prev .el-icon {
+				font-size: .4rem;
+			}
+		}
+	}
+
+
+}
+</style>