mp_exhibitor_miniprog/pages/exhibitor/index.vue

<template>
	<view class="exhibitor-index">
		<nav-bar title="展商信息"></nav-bar>
		<view class="main-container">
			<view class="exhibitor-filter">
				<view>
					<view>展馆号</view>
					<u-dropdown-select v-model="categoryId" placeholder="产品分类" :options="categories" /> 
				</view>
				<view>
					<view>产品类别</view>
					<u-dropdown-select v-model="categoryId" placeholder="产品分类" :options="categories" /> 
				</view>
				<view>
					<view>应用领域</view>
					<u-dropdown-select v-model="categoryId" placeholder="产品分类" :options="categories" /> 
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar.vue'
	import UDropdownSelect from '@/components/common/u-dropdown-select/index.vue'

	export default {
		options: {
			// styleIsolation: 'shared'
		},
		components: {
			NavBar,
			UDropdownSelect
		},
		data() {
			return {
				categories: [{
					label: '表面贴装',
					value: 1,
					children: [{
						label: '表面贴装技术',
						value: 11
					}, {
						label: 'PCB焊接和连接技术',
						value: 12
					}, {
						label: '测试测量和质量保证',
						value: 13
					}, {
						label: '电子组装自动化',
						value: 14
					}, {
						label: '生产物流和物流技术',
						value: 15
					}, {
						label: '清洗技术',
						value: 16
					}]
				}, {
					label: '线束加工',
					value: 2
				}, {
					label: '工厂自动化',
					value: 3
				}, {
					label: '点胶注胶',
					value: 4
				}, {
					label: '电子制造服务',
					value: 5
				}, {
					label: '未来服务',
					value: 6
				}]
			}
		},
		created() {},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.exhibitor-filter{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 29rpx;
		font-size: $fontSize2;
		color: #333333;
	}
</style>