<template>
	<view class="content">
		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
		<tn-list-view title="1" :card="true" unlined="all" class="listView">
		   <tn-list-cell class="listItem">我是扫码内容部分</tn-list-cell>
		   <view class="cutline"></view>
		   <tn-list-cell class="listItem">
			   <tn-grid align="center" :col="col">
				    <block v-for="(item, index) in fastToolList" :key="index">
						<tn-grid-item class="toolItem">
							<view class="tn-icon-search"></view>
						    <view class="toolText">{{ item.text }}</view>
						</tn-grid-item>
					</block>
			   </tn-grid>
		   </tn-list-cell>
		   <view class="cutline"></view>
		   <tn-list-cell class="listItem">我是谷歌ad部分</tn-list-cell>
		   <tn-list-cell class="listItemBottom">
			   <image src="/static/logo.png" class="buttomImg"/>
		   </tn-list-cell>
		</tn-list-view>
		<text class="bottomText">Feedback or Suggestion</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				col: 3,
				fastToolList:[
					{
						"index": 0,
						"text":"Web Sertch",
						"icon": "tn-icon-search"
					},
					{
						"index": 1,
						"text":"Copy",
						"icon": "tn-icon-search"
					},
					{
						"index": 2,
						"text":"Share",
						"icon": "tn-icon-search"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #000000;
		height:100%;
		
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.listView{
		z-index: 0;
		position: relative;
		width: 300px;
		height:500px;
		margin-top: 50px;
		background-color: #141b29;
	}
	.icon{
		z-index: 1;
		position: absolute;
		margin-top: -480px;
		
	}
	.listItem{
		height: 50px;
		margin-top: 30px;
		background-color: #141b29;
		color: #fff;
		
		.toolItem{
			background-color: #141b29;
			
			.toolText{
				font-size: 12px;
				color: #fff;
			}
		}
		
		
	}
	.listItemBottom{
		height: 200px;
		margin-top: 10px;
		background-color: #141b29;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.buttomImg{
			width: 150px;
			height: 150px;
		}
		
	}
	.bottomText{
		color: #fff;
		text-align: center;
		font-size: 12px;
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.cutline{
		border: 1px solid #8f8f94;
	}
	
</style>
