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

---
 manifest.json                |   2 +-
 pages/scan/Barcode.vue       | 159 ++++++++++++++++++-----------------
 pages/scan/Book.vue          | 158 ++++++++++++++++++++++++++++------
 pages/scan/Calendar.vue      | 156 ++++++++++++++++++++++++++++------
 pages/scan/Contacts.vue      | 154 +++++++++++++++++++++++++++------
 pages/scan/Email.vue         | 157 ++++++++++++++++++++++++++++------
 pages/scan/Location.vue      | 156 ++++++++++++++++++++++++++++------
 pages/scan/Paypal.vue        | 149 ++++++++++++++++++++++++++------
 pages/scan/Product.vue       | 152 +++++++++++++++++++++++++++------
 pages/scan/Scan.vue          |   2 +-
 pages/scan/Sms.vue           | 156 ++++++++++++++++++++++++++++------
 pages/scan/Tel.vue           | 156 ++++++++++++++++++++++++++++------
 pages/scan/Text.vue          | 156 ++++++++++++++++++++++++++++------
 pages/scan/Url.vue           | 152 +++++++++++++++++++++++++++------
 pages/scan/Wifi.vue          | 159 +++++++++++++++++++++++++++++------
 tuniao-ui/libs/css/main.scss |   4 +
 16 files changed, 1651 insertions(+), 377 deletions(-)

diff --git a/manifest.json b/manifest.json
index 0e9b4f7..7a468ce 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,6 +1,6 @@
 {
     "name" : "scanCode",
-    "appid" : "",
+    "appid" : "__UNI__44D25EC",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",
diff --git a/pages/scan/Barcode.vue b/pages/scan/Barcode.vue
index f683454..ec0404f 100644
--- a/pages/scan/Barcode.vue
+++ b/pages/scan/Barcode.vue
@@ -1,21 +1,21 @@
 <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-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
 		   <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="item.icon"></view>
+							<view class="cutline"></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="listItem-ad">我是谷歌ad部分</tn-list-cell>
 		   <tn-list-cell class="listItemBottom">
 			   <image src="/static/logo.png" class="buttomImg"/>
 		   </tn-list-cell>
@@ -32,18 +32,18 @@
 				fastToolList:[
 					{
 						"index": 0,
-						"text":"Web Sertch",
+						"text":"Web Search",
 						"icon": "tn-icon-search"
 					},
 					{
 						"index": 1,
 						"text":"Copy",
-						"icon": "tn-icon-search"
+						"icon": "tn-icon-copy-fill"
 					},
 					{
 						"index": 2,
 						"text":"Share",
-						"icon": "tn-icon-search"
+						"icon": "tn-icon-share-triangle"
 					}
 				]
 			}
@@ -66,82 +66,89 @@
 		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{
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
 			background-color: #141b29;
 			
-			.toolText{
-				font-size: 12px;
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
 				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+				
 			}
 		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
 		
 		
-	}
-	.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;
 		}
 		
 	}
-	.bottomText{
-		color: #fff;
-		text-align: center;
-		font-size: 12px;
-		margin-top: 20px;
-		margin-bottom: 20px;
-	}
-	.cutline{
-		border: 1px solid #8f8f94;
-	}
-	
 </style>
diff --git a/pages/scan/Book.vue b/pages/scan/Book.vue
index 6fe31bc..53fc598 100644
--- a/pages/scan/Book.vue
+++ b/pages/scan/Book.vue
@@ -1,9 +1,26 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
+		<tn-list-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
+		   <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="item.icon"></view>
+							<view class="cutline"></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">我是谷歌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>
 
@@ -11,7 +28,29 @@
 	export default {
 		data() {
 			return {
-				title: 'Book'
+				col: 4,
+				fastToolList:[
+					{
+						"index": 0,
+						"text":"Web Search",
+						"icon": "tn-icon-search"
+					},
+					{
+						"index": 1,
+						"text":"View in store",
+						"icon": "tn-icon-shop"
+					},
+					{
+						"index": 2,
+						"text":"Price history",
+						"icon": "tn-icon-statistics"
+					},
+					{
+						"index": 3,
+						"text":"Copy",
+						"icon": "tn-icon-copy-fill"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -23,30 +62,99 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
-
-	.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;
+		background-color: #000000;
+		height:100%;
+		
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
+			background-color: #141b29;
+			
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
+				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+				
+			}
+		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
+		
+		
+		.bottomText{
+			color: #fff;
+			text-align: center;
+			font-size: 12px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+		.cutline{
+			border: 1px solid #8f8f94;
+		}
+		
 	}
 </style>
diff --git a/pages/scan/Calendar.vue b/pages/scan/Calendar.vue
index 065be2e..9fce0da 100644
--- a/pages/scan/Calendar.vue
+++ b/pages/scan/Calendar.vue
@@ -1,9 +1,26 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
+		<tn-list-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
+		   <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="item.icon"></view>
+							<view class="cutline"></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">我是谷歌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>
 
@@ -11,7 +28,29 @@
 	export default {
 		data() {
 			return {
-				title: 'Calendar'
+				col: 4,
+				fastToolList:[
+					{
+						"index": 0,
+						"text":"Add to events",
+						"icon": "tn-icon-calendar"
+					},
+					{
+						"index": 1,
+						"text":"Send email",
+						"icon": "tn-icon-email"
+					},
+					{
+						"index": 2,
+						"text":"Copy",
+						"icon": "tn-icon-copy-fill"
+					},
+					{
+						"index": 3,
+						"text":"Share",
+						"icon": "tn-icon-share-triangle"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -23,30 +62,97 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
-
-	.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;
+		background-color: #000000;
+		height:100%;
+		
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
+			background-color: #141b29;
+			
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
+				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+			}
+		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
+		
+		.bottomText{
+			color: #fff;
+			text-align: center;
+			font-size: 12px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+		.cutline{
+			border: 1px solid #8f8f94;
+		}
 	}
 </style>
diff --git a/pages/scan/Contacts.vue b/pages/scan/Contacts.vue
index ea4efb6..f97c23c 100644
--- a/pages/scan/Contacts.vue
+++ b/pages/scan/Contacts.vue
@@ -1,9 +1,26 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
+		<tn-list-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
+		   <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="item.icon"></view>
+							<view class="cutline"></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">我是谷歌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>
 
@@ -11,7 +28,29 @@
 	export default {
 		data() {
 			return {
-				title: 'Contacts'
+				col: 4,
+				fastToolList:[
+					{
+						"index": 0,
+						"text":"Add to contacts",
+						"icon": "tn-icon-my-circle-fill"
+					},
+					{
+						"index": 1,
+						"text":"Call",
+						"icon": "tn-icon-tel"
+					},
+					{
+						"index": 2,
+						"text":"Copy",
+						"icon": "tn-icon-copy-fill"
+					},
+					{
+						"index": 3,
+						"text":"Share",
+						"icon": "tn-icon-share-triangle"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -23,30 +62,95 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
-
-	.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;
+		background-color: #000000;
+		height:100%;
+		
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
+			background-color: #141b29;
+			
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
+				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+			}
+		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
+		
+		.bottomText{
+			color: #fff;
+			text-align: center;
+			font-size: 12px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+		.cutline{
+			border: 1px solid #8f8f94;
+		}
 	}
 </style>
diff --git a/pages/scan/Email.vue b/pages/scan/Email.vue
index b55baf7..c3628de 100644
--- a/pages/scan/Email.vue
+++ b/pages/scan/Email.vue
@@ -1,9 +1,26 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
+		<tn-list-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
+		   <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="item.icon"></view>
+							<view class="cutline"></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">我是谷歌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>
 
@@ -11,7 +28,29 @@
 	export default {
 		data() {
 			return {
-				title: 'Email'
+				col: 4,
+				fastToolList:[
+					{
+						"index": 0,
+						"text":"Send email",
+						"icon": "tn-icon-email"
+					},
+					{
+						"index": 1,
+						"text":"Add to contacts",
+						"icon": "tn-icon-my-circle-fill"
+					},
+					{
+						"index": 2,
+						"text":"Copy",
+						"icon": "tn-icon-copy-fill"
+					},
+					{
+						"index": 3,
+						"text":"Share",
+						"icon": "tn-icon-share-triangle"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -23,30 +62,98 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
-
-	.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;
+		background-color: #000000;
+		height:100%;
+		
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
+			background-color: #141b29;
+			
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
+				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+				
+			}
+		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
+		
+		.bottomText{
+			color: #fff;
+			text-align: center;
+			font-size: 12px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+		.cutline{
+			border: 1px solid #8f8f94;
+		}
 	}
 </style>
diff --git a/pages/scan/Location.vue b/pages/scan/Location.vue
index 9d62e1a..6490ecb 100644
--- a/pages/scan/Location.vue
+++ b/pages/scan/Location.vue
@@ -1,9 +1,26 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
+		<tn-list-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
+		   <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="item.icon"></view>
+							<view class="cutline"></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">我是谷歌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>
 
@@ -11,7 +28,29 @@
 	export default {
 		data() {
 			return {
-				title: 'Location'
+				col: 4,
+				fastToolList:[
+					{
+						"index": 0,
+						"text":"Show on map",
+						"icon": "tn-icon-map"
+					},
+					{
+						"index": 1,
+						"text":"Navigation",
+						"icon": "tn-icon-share"
+					},
+					{
+						"index": 2,
+						"text":"Copy",
+						"icon": "tn-icon-copy-fill"
+					},
+					{
+						"index": 3,
+						"text":"Share",
+						"icon": "tn-icon-share-triangle"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -23,30 +62,97 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
-
-	.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;
+		background-color: #000000;
+		height:100%;
+		
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
+			background-color: #141b29;
+			
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
+				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+			}
+		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
+		
+		.bottomText{
+			color: #fff;
+			text-align: center;
+			font-size: 12px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+		.cutline{
+			border: 1px solid #8f8f94;
+		}
 	}
 </style>
diff --git a/pages/scan/Paypal.vue b/pages/scan/Paypal.vue
index e68e31e..5e09465 100644
--- a/pages/scan/Paypal.vue
+++ b/pages/scan/Paypal.vue
@@ -1,9 +1,26 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
+		<tn-list-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
+		   <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="item.icon"></view>
+							<view class="cutline"></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">我是谷歌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>
 
@@ -11,7 +28,24 @@
 	export default {
 		data() {
 			return {
-				title: 'Paypal'
+				col: 3,
+				fastToolList:[
+					{
+						"index": 0,
+						"text":"Open",
+						"icon": "tn-icon-plane"
+					},
+					{
+						"index": 1,
+						"text":"Copy",
+						"icon": "tn-icon-copy-fill"
+					},
+					{
+						"index": 2,
+						"text":"Share",
+						"icon": "tn-icon-share-triangle"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -29,24 +63,91 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
-
-	.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;
+		background-color: #000000;
+		height:100%;
+		
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
+			background-color: #141b29;
+			
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
+				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+				
+			}
+		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
+		
+		.bottomText{
+			color: #fff;
+			text-align: center;
+			font-size: 12px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+		.cutline{
+			border: 1px solid #8f8f94;
+		}
+		
 	}
 </style>
diff --git a/pages/scan/Product.vue b/pages/scan/Product.vue
index 83546e6..a94e66e 100644
--- a/pages/scan/Product.vue
+++ b/pages/scan/Product.vue
@@ -1,9 +1,26 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
+		<tn-list-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
+		   <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="item.icon"></view>
+							<view class="cutline"></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">我是谷歌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>
 
@@ -11,7 +28,24 @@
 	export default {
 		data() {
 			return {
-				title: 'Product'
+				col: 3,
+				fastToolList:[
+					{
+						"index": 0,
+						"text":"Web Search",
+						"icon": "tn-icon-search"
+					},
+					{
+						"index": 1,
+						"text":"View in store",
+						"icon": "tn-icon-shop"
+					},
+					{
+						"index": 2,
+						"text":"Copy",
+						"icon": "tn-icon-copy-fill"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -23,30 +57,98 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
-
-	.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;
+		background-color: #000000;
+		height:100%;
+		
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
+			background-color: #141b29;
+			
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
+				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+				
+			}
+		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
+		
+		
+		.bottomText{
+			color: #fff;
+			text-align: center;
+			font-size: 12px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+		.cutline{
+			border: 1px solid #8f8f94;
+		}
+		
 	}
 </style>
diff --git a/pages/scan/Scan.vue b/pages/scan/Scan.vue
index 1fe32ce..7234583 100644
--- a/pages/scan/Scan.vue
+++ b/pages/scan/Scan.vue
@@ -13,7 +13,7 @@
 		<tn-button shape="round" @click="jumpToPage('/pages/scan/Paypal')">跳转Paypal页面</tn-button>
 		<tn-button shape="round" @click="jumpToPage('/pages/scan/Product')">跳转Product页面</tn-button>
 		<tn-button shape="round" @click="jumpToPage('/pages/scan/Sms')">跳转Sms页面</tn-button>
-		<tn-button shape="round" @click="jumpToPage('/pages/scan/Tel')">跳转Url页面</tn-button>
+		<tn-button shape="round" @click="jumpToPage('/pages/scan/Tel')">跳转Tel页面</tn-button>
 		<tn-button shape="round" @click="jumpToPage('/pages/scan/Text')">跳转Text页面</tn-button>
 		<tn-button shape="round" @click="jumpToPage('/pages/scan/Url')">跳转Url页面</tn-button>
 		<tn-button shape="round" @click="jumpToPage('/pages/scan/Wifi')">跳转Wifi页面</tn-button>
diff --git a/pages/scan/Sms.vue b/pages/scan/Sms.vue
index a5b625e..1ee5c9b 100644
--- a/pages/scan/Sms.vue
+++ b/pages/scan/Sms.vue
@@ -1,9 +1,26 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
+		<tn-list-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
+		   <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="item.icon"></view>
+							<view class="cutline"></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">我是谷歌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>
 
@@ -11,7 +28,29 @@
 	export default {
 		data() {
 			return {
-				title: 'Sms'
+				col: 4,
+				fastToolList:[
+					{
+						"index": 0,
+						"text":"Send SMS",
+						"icon": "tn-icon-email"
+					},
+					{
+						"index": 1,
+						"text":"Send MMS",
+						"icon": "tn-icon-my-circle-fill"
+					},
+					{
+						"index": 2,
+						"text":"Copy",
+						"icon": "tn-icon-copy-fill"
+					},
+					{
+						"index": 3,
+						"text":"Share",
+						"icon": "tn-icon-share-triangle"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -23,30 +62,97 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
-
-	.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;
+		background-color: #000000;
+		height:100%;
+		
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
+			background-color: #141b29;
+			
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
+				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+			}
+		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
+		
+		.bottomText{
+			color: #fff;
+			text-align: center;
+			font-size: 12px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+		.cutline{
+			border: 1px solid #8f8f94;
+		}
 	}
 </style>
diff --git a/pages/scan/Tel.vue b/pages/scan/Tel.vue
index 59bae02..dced38c 100644
--- a/pages/scan/Tel.vue
+++ b/pages/scan/Tel.vue
@@ -1,9 +1,26 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
+		<tn-list-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
+		   <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="item.icon"></view>
+							<view class="cutline"></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">我是谷歌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>
 
@@ -11,7 +28,29 @@
 	export default {
 		data() {
 			return {
-				title: 'Tel'
+				col: 4,
+				fastToolList:[
+					{
+						"index": 0,
+						"text":"Call",
+						"icon": "tn-icon-tel"
+					},
+					{
+						"index": 1,
+						"text":"Add to contacts",
+						"icon": "tn-icon-my-circle-fill"
+					},
+					{
+						"index": 2,
+						"text":"Copy",
+						"icon": "tn-icon-copy-fill"
+					},
+					{
+						"index": 3,
+						"text":"Share",
+						"icon": "tn-icon-share-triangle"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -23,30 +62,97 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
-
-	.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;
+		background-color: #000000;
+		height:100%;
+		
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
+			background-color: #141b29;
+			
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
+				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+			}
+		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
+		
+		.bottomText{
+			color: #fff;
+			text-align: center;
+			font-size: 12px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+		.cutline{
+			border: 1px solid #8f8f94;
+		}
 	}
 </style>
diff --git a/pages/scan/Text.vue b/pages/scan/Text.vue
index a431188..a097b8a 100644
--- a/pages/scan/Text.vue
+++ b/pages/scan/Text.vue
@@ -1,9 +1,26 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
+		<tn-list-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
+		   <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="item.icon"></view>
+							<view class="cutline"></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">我是谷歌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>
 
@@ -11,7 +28,29 @@
 	export default {
 		data() {
 			return {
-				title: 'Text'
+				col: 4,
+				fastToolList:[
+					{
+						"index": 0,
+						"text":"Web Search",
+						"icon": "tn-icon-search"
+					},
+					{
+						"index": 1,
+						"text":"Send email",
+						"icon": "tn-icon-email"
+					},
+					{
+						"index": 2,
+						"text":"Copy",
+						"icon": "tn-icon-copy-fill"
+					},
+					{
+						"index": 3,
+						"text":"Share",
+						"icon": "tn-icon-share-triangle"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -23,30 +62,97 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
-
-	.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;
+		background-color: #000000;
+		height:100%;
+		
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
+			background-color: #141b29;
+			
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
+				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+			}
+		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
+		
+		.bottomText{
+			color: #fff;
+			text-align: center;
+			font-size: 12px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+		.cutline{
+			border: 1px solid #8f8f94;
+		}
 	}
 </style>
diff --git a/pages/scan/Url.vue b/pages/scan/Url.vue
index 188798c..049e66a 100644
--- a/pages/scan/Url.vue
+++ b/pages/scan/Url.vue
@@ -1,9 +1,26 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
+		<tn-list-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
+		   <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="item.icon"></view>
+							<view class="cutline"></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">我是谷歌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>
 
@@ -11,7 +28,24 @@
 	export default {
 		data() {
 			return {
-				title: 'Url'
+				col: 3,
+				fastToolList:[
+					{
+						"index": 0,
+						"text":"Open",
+						"icon": "tn-icon-plane"
+					},
+					{
+						"index": 1,
+						"text":"Copy",
+						"icon": "tn-icon-copy-fill"
+					},
+					{
+						"index": 2,
+						"text":"Share",
+						"icon": "tn-icon-share-triangle"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -23,30 +57,98 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
-
-	.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;
+		background-color: #000000;
+		height:100%;
+		
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
+			background-color: #141b29;
+			
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
+				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+				
+			}
+		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
+		
+		
+		.bottomText{
+			color: #fff;
+			text-align: center;
+			font-size: 12px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+		.cutline{
+			border: 1px solid #8f8f94;
+		}
+		
 	}
 </style>
diff --git a/pages/scan/Wifi.vue b/pages/scan/Wifi.vue
index 8ee6a85..08886d8 100644
--- a/pages/scan/Wifi.vue
+++ b/pages/scan/Wifi.vue
@@ -1,9 +1,26 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		<tn-avatar src="/static/logo.png" class="icon" size="xl"></tn-avatar>
+		<tn-list-view :card="true" unlined="all" class="listView">
+		   <tn-list-cell class="listItem-1">我是扫码内容部分</tn-list-cell>
+		   <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="item.icon"></view>
+							<view class="cutline"></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">我是谷歌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>
 
@@ -11,7 +28,29 @@
 	export default {
 		data() {
 			return {
-				title: 'Wifi'
+				col: 4,
+				fastToolList:[
+					{
+						"index": 0,
+						"text":"Connect to Wifi",
+						"icon": "tn-icon-wifi"
+					},
+					{
+						"index": 1,
+						"text":"Copy password",
+						"icon": "tn-icon-coupon"
+					},
+					{
+						"index": 2,
+						"text":"Copy",
+						"icon": "tn-icon-copy-fill"
+					},
+					{
+						"index": 3,
+						"text":"Share",
+						"icon": "tn-icon-share-triangle"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -23,30 +62,100 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
-
-	.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;
+		background-color: #000000;
+		height:100%;
+		
+		.listView{
+			z-index: 0;
+			position: relative;
+			width: 330px;
+			height:500px;
+			margin-top: 50px;
+			background-color: #141b29;
+			
+			.listItem-1{
+				margin-top: 60px;
+				background-color: #141b29;
+				color: #fff;
+				//border: 2px solid yellow;
+				height: 80px;
+				text-align: center;
+			}
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 80px;
+				//margin-top: 30px;	
+				//padding-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				
+				.toolItem{
+					//border: 2px solid red;
+					background-color: #141b29;
+					font-size: 30px;
+					height: 60px;
+					text-align: center;
+					
+					
+					
+					.toolText{
+						font-size: 12px;
+						color: #fff;
+					}
+				}
+				
+			}
+			
+			.listItem-ad{
+				background-color: #141b29;
+				text-align: center;
+				color: #fff;
+				//border: 2px solid red;
+				height: 80px;
+			}
+			
+			.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;
+				}
+				
+			}
+		}
+		.icon{
+			z-index: 1;
+			position: absolute;
+			margin-top: -480px;
+			
+		}
+		
+		
+		.bottomText{
+			color: #fff;
+			text-align: center;
+			font-size: 12px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+		}
+		.cutline{
+			border: 1px solid #8f8f94;
+		}
+		
 	}
 </style>
diff --git a/tuniao-ui/libs/css/main.scss b/tuniao-ui/libs/css/main.scss
index f60ab11..99882c6 100644
--- a/tuniao-ui/libs/css/main.scss
+++ b/tuniao-ui/libs/css/main.scss
@@ -668,6 +668,10 @@ button::after {
 .tn-hover {
   opacity: 0.6;
 }
+.tn-special-hover{
+	z-index: -1;
+	//opacity: 0.6;
+}
 /* hover 点击效果 end */
 
 /* 去除原生button样式 start */