GterForumWeB/src/views/search/searchResult/SearchResult.vue

<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">取消</div>
		</div>

		<!-- 结果数量 -->
		<div class="numberResults flexacenter">大约找到 <div class="number">{{ 800 }}</div> 条结果</div>

		<div class="result-box flexflex">
			<div class="result-item flexflex">
				<div class="result-header one-line">
					<div class="result-label">租房租房租房</div>
					<div class="result-title">诚招室友一起合租香港大学附近房子 女生</div>
				</div>

				<div class="result-content two-lines flex1">
					香港理工大学附近求租房，红磡何文田或黄埔附近最好
				</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>

		</div>
	</div>
</template>

<script>
export default {
	name: "SearchResult",
	data() {
		return {

		}
	},
	components: {

	},
}
</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;

		.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;

			.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;
			}

			.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;
						}
					}
				}
			}

		}
	}


}
</style>