talk_appAmin/pages/search/index.vue

<template>
	<view style="position: relative; ">
		
		<u-navbar leftText="" title="搜索" 
		 :placeholder="true" 
		 leftIcon="arrow-left"
		 :leftIconSize="32"
		 @leftClick="leftClick"
		 :safeAreaInsetTop="true"  :bgColor="bgColor">
		</u-navbar>
		<view class="top">



			<view class="bj"></view>
			<view class="sousuoBox1">
				<view class="sousuoBox">
					<view class="souBOx">
						<image src="../../static/images/search/tu2-2.png" class="img3"></image>
						<view class="shuruText">在食堂捡到一张饭卡</view>
					</view>
					<image src="../../static/images/search/tu2-3.png" class="img4"></image>

				</view>
				<view class="sousuoText"  @click="deletehistory">搜索</view>

			</view>
		</view>


		<!-- 搜索历史 -->
		<view class="history" v-if="!histortOpen">
			<view class="hustortTop">
				<view class="historyTopText">搜索历史</view>
				<image src="../../static//images/search/shanchu.png" class="img5"></image>
			</view>
			<view class="hustoryCenter">
				<view v-for="(item,index) in historyList" :key="index" class="hustoryList">
					<view class="item">
						{{ item }}
					</view>
				</view>
			</view>
		</view>

				<!-- 无内容 -->
				<view v-if="histortOpen">
			<view class="noContent">
				<image src="../../static/images/search/noContent.png" class="img6"></image>
				<view class="noContentText">没有找到相关内容奥,换个词试试吧!</view>
			</view>
		</view>

	</view>
</template>

<script setup>

import {
	ref,
	reactive,
	toRefs,
	getCurrentInstance
} from 'vue';

const keyword = ref('')

const noSearch = ref(false)
const bgColor = ref('#ffffff80')
const leftClick = ()=> {
	uni.navigateBack({
		delta: 1
	})
}
const histortOpen = ref(false)
const historyList  = ref(['三毛流浪记','假如给我三天光明','遥望无期',
'假如给我三天光明(青少年儿童读物)','遥望无期',
'过年','遥望无期','纵横还第三万里'])

const deletehistory = () => {
	histortOpen.value = !histortOpen.value
}


</script>

<style lang="scss" scoped>

:deep(.u-navbar__content__title.data-v-f631659b ){
	
    text-align: center;
    font-size: 36rpx;
    color: #303133;

}

.top {
	position: relative;
	background: #ffffff80;
	.img1BOX{
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 88rpx;
		margin-top: 88rpx;
	}
	.bj{
		background-color: #FAF9FA;
		z-index: -1;
		width: 750rpx;
		height: 268rpx;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
	}
	.sousuoBox1 {
		display: flex;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		padding: 16rpx 32rpx 16rpx 32rpx;
		width: auto;
		.sousuoBox{
		display: flex;
		align-content: center;
		width: 538rpx;
		height: 60rpx;
		border: #B3D7FF solid 2rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		
		justify-content: space-between;
		align-items: center;
			.souBOx {
				margin-left: 32rpx;
				display: flex;
				align-content: center;
			
					.shuruText {
						font-weight: 400;
						font-size: 28rpx;
						text-align: left;
						color: #999999;
						margin-left: 18rpx;
					}
			
					.img3 {
						width: 35rpx;
						height: 35rpx;
					}
			

				}
				.img4 {
						width: 32rpx;
							height: 32rpx;
							margin-right: 32rpx;
					}
		}
				.sousuoText {
					width: 62rpx;
					height: 31rpx;
					font-size: 30rpx;
				}


		
	}
}





.history {
	margin-top: 30rpx;
	.hustortTop{
		display: flex;
		justify-content: space-between;
		margin-left: 32rpx;
		margin-right: 32rpx;
		.historyTopText{
			width: 139rpx;
			height: 35rpx;
			font-size: 34rpx;
			font-weight: 400;
		}
		.img5{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.hustoryCenter{
		margin: 32rpx;
		display: flex;
			
			align-items: center;
			flex-wrap: wrap;
		.hustoryList{
			margin-right: 24rpx;
			height: 58rpx;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			background: #f6f6f6;
			margin-bottom: 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.item{
				font-weight: 400;
				height: 29rpx;
				font-size: 28rpx;
				// margin: 14rpx 20rpx;
				padding-bottom: 20px;
				padding-left: 20rpx;
				padding-right: 20rpx;
			}
		}
	}

}
.noContent{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	.noContentText{
		font-weight: 400;
		width: 490rpx;
		height: 30rpx;
		font-size: 30rpx;
	}

	.img6{
		
		width: 326rpx;
		height: 280rpx;
		margin-bottom: 56rpx;
		margin-top: 150rpx;
	}
}
</style>