From ca1dc8ed99190f3e96b4675ea77db37189ba1d1f Mon Sep 17 00:00:00 2001
From: Penny <2500338766@qq.com>
Date: Thu, 17 Aug 2023 20:57:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=9B=E5=BB=BA=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/create/Create.vue | 304 ++++++++++++++++++++++------------------
 1 file changed, 169 insertions(+), 135 deletions(-)

diff --git a/pages/create/Create.vue b/pages/create/Create.vue
index e5c1ecf..aa0fc0f 100644
--- a/pages/create/Create.vue
+++ b/pages/create/Create.vue
@@ -2,41 +2,36 @@
 	<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> 
+				<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>
+				</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="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 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>
 	</view>
 </template>
 
@@ -46,91 +41,111 @@
 			return {
 				col: 2,
 				cardMode: true,
+				arrowStatus: true,
+				arrowRightStatus: true,
+				hoverStatus: true,
 				categoryList:[
 					{
 						"sort": 0,
 						"label": "Website",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-empty-network",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 1,
 						"label": "Wifi",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-wifi",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 2,
 						"label": "Text",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-font",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 3,
 						"label": "Contact",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-my-circle-fill",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 4,
 						"label": "Tel",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-tel",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 5,
 						"label": "E-mail",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-email",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 6,
 						"label": "SMS",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-message",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 7,
 						"label": "Calendar",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-calendar",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 8,
 						"label": "My card",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-bankcard",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 9,
 						"label": "Facebook",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-facebook",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 10,
 						"label": "Instagram",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-qr-code-circle",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 11,
 						"label": "Whatsapp",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-qr-code-circle",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 12,
 						"label": "Youtube",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-video",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 13,
-						"label": "X",
-						"icon": "tn-icon-qr-code-circle"
+						"label": "Twitter",
+						"icon": "grid-item-icon tn-icon-twitter",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 14,
 						"label": "Spotity",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-qr-code-circle",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 15,
 						"label": "Paypal",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-pay",
+						"text": "grid-item-text"
 					},
 					{
 						"sort": 16,
 						"label": "Viber",
-						"icon": "tn-icon-qr-code-circle"
+						"icon": "grid-item-icon tn-icon-qr-code-circle",
+						"text": "grid-item-text"
 					}
 				]
 			}
@@ -139,7 +154,10 @@
 
 		},
 		methods: {
-
+			
+			targetCreate(e){
+				console.log(e);
+			}
 		}
 	}
 </script>
@@ -156,119 +174,135 @@
 		
 		.head{
 			//border: 2px solid green;
-			width: 660rpx;
+			width: 650rpx;
 			height: 150rpx;
 			margin-top: 60rpx;
 			background-color: #141b29;
-			z-index: 0;
+			z-index: 2;
 			
 			.clipboard{
-				border: 2px solid blue;
-				//background-color: blueviolet;
+				//border: 2px solid blue;
 				height: 150rpx;
 				z-index: 3;
 			}
 		}
+	}
+	
+	.grid-view{
+		width: 650rpx;
+		height: auto;
+		//border: 2px solid yellow;
+		margin-top: 30rpx;		
 		
-		.center{
-			border: 2px solid green;
-			width: 660rpx;
-			height: 700rpx;
-			margin-top: 60rpx;
-			//background-color: #141b29;
-			background-color: red;
-			z-index: 0;
+		.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;
 			
-			.listItem{
-				//border: 2px solid yellow;
-				height: 50px;
-				//margin-top: 30px;	
-				background-color: #141b29;
-				color: #fff;
-				text-align: start;
+		
+			.list-left{
+				//border: 2px solid green;
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
 				
-				.list-icon-text {
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
+				.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{
-						//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-left-clipboard-text{
+					width: 480rpx;
+					.list-left-clipboard-text-one{
+						font-size: 36rpx;
+						//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;
-						}
+					.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>