<template>
	<view class="content">
		<view class="head">
			<tn-list-view :card="cardMode" class="clipboard" unlined="all">
				<tn-list-cell class="listItem1s">
				<!-- 	<view class="list-left">
					  <view class="list-left-icon tn-icon-circle-fill tn-color-gray"></view>
					  <view class="list-left-text">
						  <view class="list-left-text-one">我是clipboard部分</view>
						 <view class="list-left-text-two">Beep when the scan is successfull.</view> 
					  </view>
					</view>-->
				</tn-list-cell> 
			</tn-list-view>
		</view>
		
		<view class="center">
			<tn-list-view :card="true" unlined="all" class="listView">
			   <tn-list-cell class="listItem">
				   <tn-grid align="center" :col="col">
					    <block v-for="(item, index) in categoryList" :key="index">
							<tn-grid-item class="toolItem">
								<view :class="item.icon"></view>
							    <view class="toolText">{{ item.label }}</view>
							</tn-grid-item>
						</block>
				   </tn-grid>
			   </tn-list-cell>
			</tn-list-view>
		</view>
		
		
		<!-- <view class="list-left">
		  <view class="list-left-icon tn-icon-circle-fill tn-color-gray"></view>
		  <view class="list-left-text">
			 <view class="list-left-text-one">我是share app部分</view>
		  </view>
		</view> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				col: 2,
				cardMode: true,
				categoryList:[
					{
						"sort": 0,
						"label": "Website",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 1,
						"label": "Wifi",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 2,
						"label": "Text",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 3,
						"label": "Contact",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 4,
						"label": "Tel",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 5,
						"label": "E-mail",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 6,
						"label": "SMS",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 7,
						"label": "Calendar",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 8,
						"label": "My card",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 9,
						"label": "Facebook",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 10,
						"label": "Instagram",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 11,
						"label": "Whatsapp",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 12,
						"label": "Youtube",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 13,
						"label": "X",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 14,
						"label": "Spotity",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 15,
						"label": "Paypal",
						"icon": "tn-icon-qr-code-circle"
					},
					{
						"sort": 16,
						"label": "Viber",
						"icon": "tn-icon-qr-code-circle"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #000000;
		height: auto;
		width: 100%;
		
		.head{
			//border: 2px solid green;
			width: 660rpx;
			height: 150rpx;
			margin-top: 60rpx;
			background-color: #141b29;
			z-index: 0;
			
			.clipboard{
				border: 2px solid blue;
				//background-color: blueviolet;
				height: 150rpx;
				z-index: 3;
			}
		}
		
		.center{
			border: 2px solid green;
			width: 660rpx;
			height: 700rpx;
			margin-top: 60rpx;
			//background-color: #141b29;
			background-color: red;
			z-index: 0;
			
			
		}
		
		
		
			
			.listItem{
				//border: 2px solid yellow;
				height: 50px;
				//margin-top: 30px;	
				background-color: #141b29;
				color: #fff;
				text-align: start;
				
				.list-icon-text {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
				
					.list-left{
						//border: 2px solid green;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						
						.list-left-text{
							width: 210px;
							.list-left-text-one{
								font-size: 15px;
								//border: 2px solid blue;
							}
							
							.list-left-text-two{
								color: grey;
								font-size:13px;
								//border: 2px solid lightsalmon;
							}
						}
						
						.list-left-feedback-text{
							width: 240px;
							.list-left-feedback-text-one{
								font-size: 15px;
								//border: 2px solid blue;
							}
							
							.list-left-feedback-text-two{
								color: grey;
								font-size:13px;
								//border: 2px solid lightsalmon;
							}
						}
						
						
						.list-left-icon{
							//border: 2px solid blueviolet;
							margin-right: 10px;
							font-size: 25px;
						}
						
						.list-left-select-text{
							width: 160px;
							.list-left-select-text-one{
								font-size: 15px;
								//border: 2px solid blue;
							}
						}
					}
					
					.list-right{
						//border: 2px solid pink;
						color: royalblue;
						font-size: 20px;
						
						.list-right-icon{
							//border: 2px solid gainsboro;
							font-size: 25px;
							margin-left: 15px;
						}
						
						.list-right-text{
							//border: 2px solid green;
							//margin-right: 30px;
							//padding-right: 30px;
						}
					}
				}
		}
		
		
	}
</style>
