<template>
	<niu-page Tab>
		<niu-navbar offsetHide forceFixed fixed adjust middleLayout='left' :back="false" color="white" bg="#39b54a">
			爱能森组件库
			<template #right>
				asd
			</template>
		</niu-navbar>
		<view class="title">
			组件池
		</view>
		<view>
			<Cell title="Tabs" content="选项卡切换" path="/pages/Sub/Tabs/Tabs"></Cell>
			<!-- <Swiper></Swiper> -->
		</view>
		<view class="title">
			模板池
		</view>
		<view>
			<Cell title="Socket" content="socket测试" path="/pages/Sub/Socket/Socket"></Cell>
			<Cell title="Canvas" content="海报绘制" path="/pages/Sub/Socket/Socket"></Cell>
		</view>
		<view class="title">
			项目功能Demo
		</view>
		<view>
			<Cell title="时间选择器" content="" path="/pages/Sub/Pro/SelectTime/SelectTime"></Cell>
		</view>
		<view class="">
			<text style="font-size:12rpx;">sadsa</text>
			<niu-image circle border="1px solid red" mode="aspectFill" inline rect="100rpx" preview
				src="https://i.loli.net/2021/08/02/PEKnxSkbAHdtFfi.png"></niu-image>
		</view>
		<!-- <niu-grid :num="4">
			<niu-grid-item rect="100px" icon="https://i.loli.net/2021/08/02/PEKnxSkbAHdtFfi.png" text="1231"></niu-grid-item>
			<niu-grid-item>11</niu-grid-item>
			<niu-grid-item>11</niu-grid-item>
			<niu-grid-item>11</niu-grid-item>
			<niu-grid-item>11</niu-grid-item>
			<niu-grid-item>11</niu-grid-item>
		</niu-grid> -->
		<view>{{$n.data.navbarTop}}px</view>
		<view>{{$n.data.navbarTop }}</view>
		<view :style="{backgroundColor: 'red', height: $n.data.navbarTop +'px'}"></view>
		<view style="padding: 15rpx;background-color: white;">
			<niu-input leftText="账号" arraw border closeable focus></niu-input>
			<niu-input leftText="密码" border rightText="$" closeable></niu-input>
			<niu-input @send="sendCode" sendcode border sendcodeBorder></niu-input>
			<niu-input border></niu-input>
			<niu-input border></niu-input>
			<niu-input border></niu-input>
			<niu-input border></niu-input>
			<niu-input border></niu-input>
			<niu-input border></niu-input>
			<niu-input border></niu-input>
		</view>
		<niu-tabbar></niu-tabbar>
	</niu-page>
</template>

<script>
	export default {
		data() {
			return {
				text: ''
			}
		},
		onReady() {
			console.log(this.$n.data.navbarTop);
		},
		methods: {
			sendCode(done){
				done(true)
			},
			go(path) {
				uni.navigateTo({
					url: path
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 36rpx;
		padding: 20rpx;
		color: #333333;
	}

	.color-list {
		display: flex;
		padding: 0 20rpx;
		text-align: center;
	}

	.box-list {
		display: flex;
		flex-wrap: wrap;

		.box-item {
			text-align: center;
			width: 33.3333%;
			height: 100rpx;
			line-height: 100rpx;
			color: #FFFFFF;
		}
	}
</style>
