ezhizao_dms_app/components/dialog-selectProduction/dialog-selectProduction.vue

<template>
	<dialog-base class="dialog-body" ref="baseDialog" title="搜索产品">
		<view class="box-bg uni-row">
			<view class="input-view uni-row">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input class="nav-bar-input" type="text" v-model="keywords" placeholder="请输入产品描述" />
			</view>
			<view class="search" @click="handleSearch">
				搜索
			</view>
		</view>
		
	</dialog-base>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		store
	} from '../../store';

	const baseDialog = ref(null)

	function open() {
		baseDialog.value.open();
	}

	function close() {
		baseDialog.value.close()
	}

	defineExpose({
		open
	})
</script>

<style lang="scss">
	$nav-height: 60rpx;
	
	.dialog-body {
		// height: 60%;
		// margin: auto auto;
		overflow: auto;
	}
	
	.box-bg {
		width: 94%;
		background-color: #F5F5F5;
		padding: 5rpx 16rpx;
		justify-content: space-around;
		align-items: center;
		margin: 24rpx auto 0;
	
		.input-view {
			width: 100%;
			flex: 4;
			background-color: #f8f8f8;
			height: $nav-height;
			border: 1rpx solid #999;
			border-radius: 15rpx;
			padding: 0 15rpx;
			flex-wrap: nowrap;
			margin: 0 10rpx 0;
			line-height: $nav-height;
	
			.input-uni-icon {
				line-height: $nav-height;
			}
	
			.nav-bar-input {
				width: 80%;
				height: $nav-height;
				line-height: $nav-height;
				padding: 0 5rpx;
				background-color: #f8f8f8;
			}
		}
	
		.search {
			width: 20%;
			text-align: center;
			color: #808080;
		}
	}
	

</style>