<template>
	<view :class="['content',{'gray':store.isgray==1}]">
		<customNav>
			<view class="nav_box f-row aic jcb">
				<view class="back f-row aic" @click="back">
					<uni-icons type="left" size="20" color="#fff"></uni-icons>
				</view>
				<view class="search f-row aic">
					<input type="text" v-model="searchKey" @confirm="search" @blur="showicon=true&&!searchKey"
						@focus="showicon=false" />
					<view class="f-row aic" v-if="showicon">
						<image src="../../static/search.png" mode=""></image>
						<text>搜索</text>
					</view>
				</view>
			</view>
		</customNav>
		<view class="">
			<safeCom></safeCom>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import safeCom from '../../component/safeCom.vue';
	import customNav from '../../component/customNav.vue';
	import {
		useStore
	} from '@/store';
	const store = useStore()
	const showicon = ref(true)
	const searchKey = ref('')
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx 30rpx 30rpx;
	}



	.nav_box {
		position: absolute;
		bottom: 14rpx;
		width: 100%;
		left: 0;
	}

	.back {
		padding: 0 30rpx;
	}

	.search {
		position: relative;
		padding-right: 30rpx;
		flex: 1;

		view {
			position: absolute;
			left: 28rpx;
			top: 50%;
			transform: translateY(-50%);

			font-size: 28rpx;
			color: #999999;

		}

		input {
			flex: 1;
			height: 72rpx;
			background: #F8F8F8;
			border-radius: 44rpx;
			padding: 0 28rpx;
		}

		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 16rpx;
		}
	}
</style>