<template>
	<view>
		<view class="top">
			<view v-for="(item,index) in tabList" :key='index' @click="tabClick(index)" :class="{on:active==index}">
				{{item}}
			</view>
		</view>
		
		<view class="middle">
			
		</view>
		
		<view class="bottom">
			<text v-if="active==0">新增联系人</text>
			<text v-else>新增地址</text>
		</view>
		 
	</view>
</template>

<script>
export default {
  data() {
    return {
      active:0,//导航下标
      tabList:['联系人','收货地址']//导航标题
    }
  },
  onLoad(option) {
    
  },
  methods: {
    //---导航点击
    tabClick(index){
      this.active=index
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
	position: fixed;
	z-index: 1;
	background: #fff;
	display: flex;
	padding:28rpx 0;
	width: 100%;
	view{
		width: 50%;
		text-align: center;
	}
	view.on{
		color: $theme;
		font-weight: bold;
	}
}
.bottom{
	height: 128rpx;
	background: #fff;
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;
	z-index: 1;
	width: 100%;
	padding: 0 32rpx;
	text{
		display:flex;
		height: 88rpx;
		width: 100%;
		align-items: center;
		justify-content: center;
		background: $red;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
	}
}

</style>