添加创建页面功能

pages/create/Create.vue

@@ -1,9 +1,42 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
+		<view class="head">
-		<view class="text-area">
+			<tn-list-view :card="cardMode" class="clipboard" unlined="all">
-			<text class="title">{{title}}</text>
+				<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>
 
@@ -11,7 +44,95 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				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() {
@@ -23,30 +144,129 @@
 	}
 </script>
 
-<style>
+<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;
+			}
 		}
 		
-	.logo {
+		.center{
-		height: 200rpx;
+			border: 2px solid green;
-		width: 200rpx;
+			width: 660rpx;
-		margin-top: 200rpx;
+			height: 700rpx;
-		margin-left: auto;
+			margin-top: 60rpx;
-		margin-right: auto;
+			//background-color: #141b29;
-		margin-bottom: 50rpx;
+			background-color: red;
+			z-index: 0;
 		}
 		
-	.text-area {
+		
+		
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 50px;
+				//margin-top: 30px;	
+				background-color: #141b29;
+				color: #fff;
+				text-align: start;
+				
+				.list-icon-text {
 					display: flex;
-		justify-content: center;
+					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;
 							}
 							
-	.title {
+							.list-left-feedback-text-two{
-		font-size: 36rpx;
+								color: grey;
-		color: #8f8f94;
+								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>