<template>
	<niu-page>
		<niu-navbar fixed :back="false" color="white" bg="#39b54a">
			爱能森组件库
		</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="2px solid red" mode="aspectFill" inline rect="100rpx" preview src="https://i.loli.net/2021/08/02/PEKnxSkbAHdtFfi.png"></niu-image>
		</view>
		<textarea style="width: 100%;" @blur="adjust" :maxlength="maxlength" placeholder="请输入" v-model="text"></textarea>
		<div style="text-align: right;">{{text.length}}/{{maxlength}}</div>
		{{text}}
		<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>
		<niu-tabbar></niu-tabbar>
		<view class="mask" style="position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(#949494, 180);z-index: 1;"></view>
	</niu-page>
</template>

<script>
	
	export default {
		data() {
			return {
				text: '',
				maxlength: 200
			}
		},
		onReady() {
			
		},
		methods: {
			adjust(){
				// let value = this.text
				// value = value.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");
				// if(value.length>this.maxlength) {
				// 	value = value.slice(0, this.maxlength);
				// }
				// this.text = value
			},
			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>
