scanCode/pages/create/Create.vue

<template>
	<view class="content">
		<view class="head">
			<tn-list-view :card="cardMode" class="clipboard" unlined="all">
				<tn-list-cell @click="targetCreate(0)" class="listItem" :arrow="arrowStatus" :arrowRight="arrowRightStatus" :hover="hoverStatus">
				<view class="list-icon-text">
					<!-- 左边图标文本显示部分 -->
				    <view class="list-left">
					  <view class="list-left-icon tn-icon-edit-form tn-color-white"></view>
					  <view class="list-left-clipboard-text">
						 <view class="list-left-clipboard-text-one">Clipboard</view>
						 <view class="list-left-clipboard-text-two">Copy to clipbord.</view> 
					  </view>
				    </view>
				</view>
				</tn-list-cell> 
			</tn-list-view>
		</view>
			
		<tn-grid align="center" :col="col" class="grid-view">
			<view class="grid-item" v-for="(item, index) in categoryList" :key="index" @click="targetCreate(item.sort)">
				<view :class="item.icon"></view>
				<view :class="item.text">{{ item.label }}</view>
			</view>
		</tn-grid>
		
		
		
		<view class="bottom">
		  <view class="list-bottom-icon tn-icon-share-triangle tn-color-white"></view>
		  <view class="list-bottom-text">
			 <view class="list-bottom-text-one tn-color-white">Use"Share"option from other apps</view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				col: 2,
				cardMode: true,
				arrowStatus: true,
				arrowRightStatus: true,
				hoverStatus: true,
				categoryList:[
					{
						"sort": 0,
						"label": "Website",
						"icon": "grid-item-icon tn-icon-empty-network",
						"text": "grid-item-text"
					},
					{
						"sort": 1,
						"label": "Wifi",
						"icon": "grid-item-icon tn-icon-wifi",
						"text": "grid-item-text"
					},
					{
						"sort": 2,
						"label": "Text",
						"icon": "grid-item-icon tn-icon-font",
						"text": "grid-item-text"
					},
					{
						"sort": 3,
						"label": "Contact",
						"icon": "grid-item-icon tn-icon-my-circle-fill",
						"text": "grid-item-text"
					},
					{
						"sort": 4,
						"label": "Tel",
						"icon": "grid-item-icon tn-icon-tel",
						"text": "grid-item-text"
					},
					{
						"sort": 5,
						"label": "E-mail",
						"icon": "grid-item-icon tn-icon-email",
						"text": "grid-item-text"
					},
					{
						"sort": 6,
						"label": "SMS",
						"icon": "grid-item-icon tn-icon-message",
						"text": "grid-item-text"
					},
					{
						"sort": 7,
						"label": "Calendar",
						"icon": "grid-item-icon tn-icon-calendar",
						"text": "grid-item-text"
					},
					{
						"sort": 8,
						"label": "My card",
						"icon": "grid-item-icon tn-icon-bankcard",
						"text": "grid-item-text"
					},
					{
						"sort": 9,
						"label": "Facebook",
						"icon": "grid-item-icon tn-icon-facebook",
						"text": "grid-item-text"
					},
					{
						"sort": 10,
						"label": "Instagram",
						"icon": "grid-item-icon tn-icon-qr-code-circle",
						"text": "grid-item-text"
					},
					{
						"sort": 11,
						"label": "Whatsapp",
						"icon": "grid-item-icon tn-icon-qr-code-circle",
						"text": "grid-item-text"
					},
					{
						"sort": 12,
						"label": "Youtube",
						"icon": "grid-item-icon tn-icon-video",
						"text": "grid-item-text"
					},
					{
						"sort": 13,
						"label": "Twitter",
						"icon": "grid-item-icon tn-icon-twitter",
						"text": "grid-item-text"
					},
					{
						"sort": 14,
						"label": "Spotity",
						"icon": "grid-item-icon tn-icon-qr-code-circle",
						"text": "grid-item-text"
					},
					{
						"sort": 15,
						"label": "Paypal",
						"icon": "grid-item-icon tn-icon-pay",
						"text": "grid-item-text"
					},
					{
						"sort": 16,
						"label": "Viber",
						"icon": "grid-item-icon tn-icon-qr-code-circle",
						"text": "grid-item-text"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			
			targetCreate(e){
				console.log(e);
			}
		}
	}
</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: 650rpx;
			height: 150rpx;
			margin-top: 60rpx;
			background-color: #141b29;
			z-index: 2;
			
			.clipboard{
				//border: 2px solid blue;
				height: 150rpx;
				z-index: 3;
			}
		}
	}
	
	.grid-view{
		width: 650rpx;
		height: auto;
		//border: 2px solid yellow;
		margin-top: 30rpx;		
		
		.grid-item{
			//border: 2px solid deeppink;
			width: 280rpx;
			height: 120rpx;
			margin: 25rpx 20rpx 25rpx 20rpx;
			font-size: 36rpx;
			color:white;
			text-align: center;
			background-color: #141b29;
			border-radius: 15%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			
			.grid-item-icon{
				//border: 2px solid wheat;
				font-size: 58rpx;
				margin-left: 10rpx;
			}
			
			.grid-item-text{
				//border: 2px solid greenyellow;
				margin-left: 10rpx;
			}
		}
	}
	
	.listItem{
		//border: 2px solid yellow;
		height: 150rpx;
		//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: 420rpx;
					.list-left-text-one{
						font-size: 30rpx;
						//border: 2px solid blue;
					}
					
					.list-left-text-two{
						color: grey;
						font-size: 26rpx;
						//border: 2px solid lightsalmon;
					}
				}
				
				.list-left-clipboard-text{
					width: 480rpx;
					.list-left-clipboard-text-one{
						font-size: 36rpx;
						//border: 2px solid blue;
					}
					
					.list-left-clipboard-text-two{
						color: grey;
						font-size: 33rpx;
						//border: 2px solid lightsalmon;
					}
				}
				
				.list-left-icon{
					//border: 2px solid blueviolet;
					margin-right: 20rpx;
					font-size: 58rpx;
				}
			}
		}
	}
	
	.bottom{
		//border: 2px solid blueviolet;
		width: 650rpx;
		height: 100rpx;
		background-color: #141b29;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-radius: 15%;
		
		.list-bottom-icon{
			//border: 2px solid blueviolet;
			margin-right: 20rpx;
			margin-left: 20rpx;
			font-size: 58rpx;
		}
		
		.list-bottom-text{
			width: 650rpx;
			//border: 2px solid pink;
			.list-bottom-text-one{
				font-size: 36rpx;
				//border: 2px solid blue;
			}
		}
	}
</style>