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="">大约找到 <div class="">{{800}}</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;
		}
	}

}
</style>