tabs

<template>
	<view class="botm-wrap">
		
			<view :class="`tabs-wrap${count}`">
				<view @click="onTabs(1)" class="tabs-item-w">
					<view class="tabs-item">整租</view>
				</view>
				<view @click="onTabs(2)" class="tabs-item-w1">
					<view class="tabs-item1">公寓</view>
				</view>
				<view @click="onTabs(3)" class="tabs-item-w2">
					<view class="tabs-item2">合租</view>
				</view>
			</view>
			
	</view>
</template>

<script>
import SearChcard from './search-card.vue'
import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
export default {
	components: {
		RenDropdownFilter,
		SearChcard
	},
	data() {
		return {
			count: 1,
		}
	},
	methods: {
		onTabs(i) {
			this.count = i
		},
		

	}
}
</script>

<style lang="scss" scoped>
.botm-wrap {
	background-color: #F1F1F2;
	height: calc(100vh - 80rpx);
	padding: 10rpx 0 20rpx;
	overflow-y: auto;
}

.tabs-wrap1 {
	overflow: hidden;
	display: flex;
	justify-content: center;
	background-color: #ffffff;

	.tabs-item-w,
	.tabs-item-w1,
	.tabs-item-w2 {
		width: calc(100% / 3);
	}

	.tabs-item,
	.tabs-item1,
	.tabs-item2 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tabs-item-w {
		background-color: #F5F5F5;
	}

	.tabs-item-w1 {
		background-color: #ffffff;
	}

	.tabs-item-w2 {
		background-color: #ffffff;
	}

	.tabs-item {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.tabs-item1 {
		height: 90%;
		border-radius: 0 0 0 60rpx;
		background-color: #F5F5F5;
	}

	.tabs-item2 {
		height: 90%;
		background-color: #F5F5F5;
	}
}

.tabs-wrap3 {
	overflow: hidden;
	display: flex;
	justify-content: center;
	background-color: #ffffff;

	.tabs-item-w,
	.tabs-item-w1,
	.tabs-item-w2 {
		width: calc(100% / 3);
	}

	.tabs-item,
	.tabs-item1,
	.tabs-item2 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tabs-item-w {
		background-color: #ffffff;
	}

	.tabs-item-w1 {
		background-color: #ffffff;
	}

	.tabs-item-w2 {
		background-color: #F5F5F5;
	}

	.tabs-item {
		height: 90%;
		background-color: #F5F5F5;
	}

	.tabs-item1 {
		height: 90%;
		border-radius: 0 0 60rpx 0;
		background-color: #F5F5F5;
	}

	.tabs-item2 {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
	}
}

.tabs-wrap2 {
	overflow: hidden;
	display: flex;
	justify-content: center;
	background-color: #ffffff;

	.tabs-item-w,
	.tabs-item-w1,
	.tabs-item-w2 {
		width: calc(100% / 3);
	}

	.tabs-item,
	.tabs-item1,
	.tabs-item2 {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tabs-item-w {
		background-color: #ffffff;
	}

	.tabs-item-w1 {
		background-color: #F5F5F5;
	}

	.tabs-item-w2 {
		background-color: #ffffff;
	}

	.tabs-item {
		height: 90%;
		border-radius: 0 0 60rpx 0;
		background-color: #F5F5F5;
	}

	.tabs-item1 {
		padding: 20rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #ffffff;
	}

	.tabs-item2 {
		height: 90%;
		background-color: #F5F5F5;
		border-radius: 30rpx 30rpx 0 0;
		border-radius: 0 0 0 60rpx;
	}
}
</style>