From fef49f3bb26d2fe3361416e4508a6d4620b45b05 Mon Sep 17 00:00:00 2001
From: chengkun <kun.cheng@funi.com>
Date: Thu, 3 Aug 2023 17:44:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2=E5=A4=84?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/setting/Setting.vue | 301 +++++++++++++++++++++++++++++++++++---
 1 file changed, 277 insertions(+), 24 deletions(-)

diff --git a/pages/setting/Setting.vue b/pages/setting/Setting.vue
index ec0ec26..d878caa 100644
--- a/pages/setting/Setting.vue
+++ b/pages/setting/Setting.vue
@@ -1,9 +1,137 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
-		</view>
+		
+		<!-- 顶部通用设置模块 -->
+		<view class="headLine">General Settings</view>
+		<tn-list-view :card="cardMode" class="settingList" unlined="all">
+			<tn-list-cell class="listItem">
+				<view class="list-icon-text">
+					<!-- 左边图标文本显示部分 -->
+				    <view class="list-left">
+					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
+					  <view class="list-left-text">
+						 <view class="list-left-text-one">Beep</view>
+						 <view class="list-left-text-two">Beep when the scan is successfull.</view> 
+					  </view>
+				    </view>
+					<!-- 右边操作按钮部分 -->
+					<view class="list-right">
+						<tn-switch v-model="beepChecked" :inactiveValue="0" :activeValue="1"
+						:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> 
+					</view>
+				</view>
+			</tn-list-cell>
+			
+			<tn-list-cell class="listItem">
+				<view class="list-icon-text">
+					<!-- 左边图标文本显示部分 -->
+				    <view class="list-left">
+					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
+					  <view class="list-left-text">
+						 <view class="list-left-text-one">Auto-copied to clipboard</view>
+					  </view>
+				    </view>
+					<!-- 右边操作按钮部分 -->
+					<view class="list-right">
+						<tn-switch v-model="ClipboardCheked" :inactiveValue="0" :activeValue="1"
+						:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> 
+					</view>
+				</view>
+			</tn-list-cell>
+			
+			<tn-list-cell class="listItem">
+				<view class="list-icon-text">
+					<!-- 左边图标文本显示部分 -->
+				    <view class="list-left">
+					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
+					  <view class="list-left-text">
+						 <view class="list-left-text-one">Search Engine</view>
+					  </view>
+				    </view>
+					<!-- 右边操作按钮部分 -->
+					<view class="list-right">
+						<!-- <tn-switch v-model="checked" :inactiveValue="0" :activeValue="1"></tn-switch> -->
+					</view>
+				</view>
+			</tn-list-cell>
+			
+			<tn-list-cell class="listItem">
+				<view class="list-icon-text">
+					<!-- 左边图标文本显示部分 -->
+				    <view class="list-left">
+					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
+					  <view class="list-left-text">
+						 <view class="list-left-text-one">Dark Mode</view>
+					  </view>
+				    </view>
+					<!-- 右边操作按钮部分 -->
+					<view class="list-right">
+						<tn-switch v-model="DarkModeChecked" :inactiveValue="0" :activeValue="1"
+						:inactiveColor="inactiveColor" :activeColor="activeColor"></tn-switch> 
+					</view>
+				</view>
+			</tn-list-cell>
+			
+			<tn-list-cell class="listItem">
+				<view class="list-icon-text">
+					<!-- 左边图标文本显示部分 -->
+				    <view class="list-left">
+					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
+					  <view class="list-left-text">
+						 <view class="list-left-text-one">Language options</view>
+					  </view>
+				    </view>
+					<!-- 右边操作按钮部分 -->
+					<view class="list-right">
+						<!-- <tn-switch v-model="checked" :inactiveValue="0" :activeValue="1"></tn-switch> -->
+					</view>
+				</view>
+			</tn-list-cell>
+		</tn-list-view>
+		
+		
+		<!-- 底部Help帮助模块 -->
+		
+		
+		<view class="headLine">Help</view>
+		<tn-list-view :card="cardMode" class="settingList">
+			<tn-list-cell class="listItem">
+				<view class="list-icon-text">
+					<!-- 左边图标文本显示部分 -->
+				    <view class="list-left">
+					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
+					  <view class="list-left-text">
+						 <view class="list-left-text-one">FAQ</view>
+					  </view>
+				    </view>
+				</view>
+			</tn-list-cell>
+			
+			<tn-list-cell class="listItem">
+				<view class="list-icon-text">
+					<!-- 左边图标文本显示部分 -->
+				    <view class="list-left">
+					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
+					  <view class="list-left-text">
+						 <view class="list-left-text-one">Feedback</view>
+						 <view class="list-left-text-two">Report bugs and tell us what to improve</view> 
+					  </view>
+				    </view>
+				</view>
+			</tn-list-cell>
+			
+			<tn-list-cell class="listItem">
+				<view class="list-icon-text">
+					<!-- 左边图标文本显示部分 -->
+				    <view class="list-left">
+					  <view class="list-left-icon tn-icon-discover tn-color-gray"></view>
+					  <view class="list-left-text">
+						 <view class="list-left-text-one">Provacy policy</view>
+					  </view>
+				    </view>
+				</view>
+			</tn-list-cell>
+		</tn-list-view>
 	</view>
 </template>
 
@@ -11,7 +139,13 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				cardMode: true,
+				beepChecked: true,
+				ClipboardCheked: true,
+				DarkModeChecked: true,
+				unlined: false,
+				inactiveColor: 'grey',
+				activeColor: 'darkblue'
 			}
 		},
 		onLoad() {
@@ -23,30 +157,149 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	.content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
+		background-color: #000000;
+		height:100%;
+		
+		
+		
+		.headLine{
+			color: royalblue;
+			font-size: 18px;
+			padding-top:30px;
+		}
+		
+		.settingList{
+			//border: 2px solid red;
+			width: 330px;
+			//height:300px;
+			height: auto;
+			margin-top: 50px;
+			//background-color: #141b29;
+			
+			.listItem{
+				//border: 2px solid yellow;
+				height: 50px;
+				//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: 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-icon{
+							//border: 2px solid blueviolet;
+							margin-right: 10px;
+							font-size: 25px;
+						}
+						
+						
+						
+					}
+					
+					.list-right{
+						//border: 2px solid pink;
+					}
+				  
+				  // .list {
+				  //   &__left {
+				  //     display: flex;
+				  //     align-items: center;
+				  //     justify-content: flex-start;
+				      
+				  //     &__icon, &__image {
+				  //       margin-right: 18rpx;
+						// font-size: 25px;
+				  //     }
+				  //   }
+				    
+				  //   &__right {
+				  //     display: flex;
+				  //     align-items: center;
+				  //     justify-content: flex-end;
+				  //   }
+				  // }
+				}
+				
+			}
+			
+			// .icon{
+			// 	color: dimgrey;
+			// 	font-size: 25px;
+			// 	display: flex;
+			// }
+			
+		}
 	}
+	
+	// .message {
+	//   display: flex;
+	//   flex-direction: row;
+	//   align-items: center;
+	//   justify-content: space-around;
+	  
+	//   &__left {
+	//     width: 10%;
+	//   }
+	//   &__middle {
+	//     width: 80%;
+	//     padding-left: 20rpx;
+	//     padding-right: 40rpx;
+	//   }
+	//   &__right {
+	//     width: 10%;
+	//     display: flex;
+	//     flex-direction: column;
+	//     align-items: center;
+	//     justify-content: center;
+	//   }
+	  
+	//   &__name {
+	//     font-size: 32rpx;
+	//     margin-bottom: 8rpx;
+	//   }
+	//   &__content {
+	// 	//margin-top: 20px;
+	//     font-size: 26rpx;
+	//     color: #838383;
+	//   }
+	//   &__tips {
+	//     &__icon {
+	//       font-size: 36rpx;
+	//       color: #AAAAAA;
+	//     }
+	//   }
+	// }
 
-	.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;
-	}
+	
 </style>