<template>
	<div class="mainBox w100">
		<zgh-header :title="$route.name"></zgh-header>
		<div class="common-top mainBox">

      <zgh-dropdown v-model="active" class="left">
        <div slot="button" class="common-btn">left</div>
        <span class="center-block pdL30 pdR30" v-for="i in 3" :key="i">item1</span>

      </zgh-dropdown>
      <zgh-dropdown v-model="active2" class="right">
        <div slot="button" class="common-btn">right</div>
        <span class="center-block pdL30 pdR30" v-for="i in 3" :key="i">item2</span>

      </zgh-dropdown>
      <zgh-dropdown v-model="active3" class="center">
        <div slot="button" class="common-btn">center</div>
        <span class="center-block pdL30 pdR30" v-for="i in 3" :key="i">item3</span>

      </zgh-dropdown>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        active:false,
        active2:false,
        active3:false
			}
		},
		computed:{

		},
		mounted(){
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	@import url("../../assets/config.less");
	a{

		display:block;
		text-align: center;
		.lh(70);
	}
</style>
