<template>
	<niu-page>
		<niu-navbar fixed color="white" bg="#39b54a">
			Tabs
		</niu-navbar>
		<niu-tabs :list="colorList" @change="change" v-model="active"></niu-tabs>
		<niu-tabs :list="colorList"  @change="change" capsule v-model="active"></niu-tabs>
		<niu-tabs :list="fiveList" full @change="change" v-model="active"></niu-tabs>
		<niu-tabs :list="fiveList" :bar="false" full @change="change" v-model="active">
			<template #default="{data, pData, index}">
				2{{data.text}}
			</template>
			<template #bar="{show, barLeft, barWidth}">
				<view v-if="show" :style="[
					{
						transition: 'left .3s ease',
						position: 'absolute',
						top: '50%',
						transform: 'translateY(-50%)',
						left: barLeft+barWidth/4 + 'px',
						height: '55%',
						border: '1px solid red',
						borderRadius: '100rpx',
						bottom: 0,
						width: barWidth/2 + 'px',
					}
				]"></view>
			</template>
		</niu-tabs>
		<niu-tabs :list="fiveList" @change="change" v-model="active"></niu-tabs>
		<cell title="建筑面积(m²)" inputType="digit" oneline v-model="formData.buildingArea" placeholder="请输入"></cell>
	</niu-page>
</template>

<script>
	import cell from "./cell.vue"
	export default {
		components: {
			cell
		},
		data() {
			return {
				formData:{
					buildingArea: ''
				},
				active: 0,
				fiveList: [
					{ text: "金吒" },
					{ text: "木吒" },
					{ text: "水吒" },
					{ text: "火吒" },
					{ text: "土吒" }
				],
				colorList: [
					{ text: "嫣红", color: "#e54d42" },
					{ text: "桔橙", color: "#f37b1d" },
					{ text: "明黄", color: "#fbbd08" },
					{ text: "橄榄", color: "#8dc63f" },
					{ text: "森绿", color: "#39b54a" },
					{ text: "天青", color: "#1cbbb4" },
					{ text: "海蓝", color: "#0081ff" },
					{ text: "姹紫", color: "#6739b6" },
					{ text: "木槿", color: "#9c26b0" },
					{ text: "桃粉", color: "#e03997" },
					{ text: "棕褐", color: "#a5673f" },
					{ text: "玄灰", color: "#8799a3" },
					{ text: "草灰", color: "#aaaaaa" },
					{ text: "墨黑", color: "#333333" },
					{ text: "雅白", color: "#ffffff" },
				]
			};
		},methods: {
			change(index) {
			}
		},
	}
</script>

<style lang="scss">

</style>