diff --git a/pages/history/History.vue b/pages/history/History.vue
index 4667e98..2d04bb2 100644
--- a/pages/history/History.vue
+++ b/pages/history/History.vue
@@ -1,8 +1,48 @@
 <template>
 	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
+		<view class="head">
+			<view class="headLine">Favorites</view>
+			<tn-list-view :card="cardMode" class="settingList" unlined="all">
+				<tn-list-cell class="listItem" v-for="(item, index) in favoritesList" :key="index">
+					<view class="list-icon-text">
+						<!-- 左边图标文本显示部分 -->
+					    <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">{{ item.label }}</view>
+							 <view class="list-left-text-two">{{ item.text }}</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-view>
+		</view>
+		<view class="body">
+			<view class="headLine">History</view>
+			<tn-list-view :card="cardMode" class="settingList" unlined="all">
+				<tn-list-cell class="listItem" v-for="(item, index) in historyList" :key="index">
+					<view class="list-icon-text">
+						<!-- 左边图标文本显示部分 -->
+					    <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">{{ item.label }}</view>
+							 <view class="list-left-text-two">{{ item.text }}</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-view>
 		</view>
 	</view>
 </template>
@@ -21,6 +61,78 @@
 				list:[],
 				pages:0,
 				total:0,
+				cardMode: true,
+				favoritesList:[
+					{
+						"icon":"grid-item-icon tn-icon-empty-network",
+						"text":"https://test1.com",
+						"sort":"0",
+						"label":"URL"
+					},
+					{
+						"icon":"grid-item-icon tn-icon-empty-network",
+						"text":"https://test2.com",
+						"sort":"1",
+						"label":"URL"
+					},
+					{
+						"icon":"grid-item-icon tn-icon-empty-network",
+						"text":"https://test3.com",
+						"sort":"2",
+						"label":"URL"
+					},
+					{
+						"icon":"grid-item-icon tn-icon-empty-network",
+						"text":"https://test4.com",
+						"sort":"3",
+						"label":"URL"
+					},
+					{
+						"icon":"grid-item-icon tn-icon-empty-network",
+						"text":"https://test5.com",
+						"sort":"4",
+						"label":"URL"
+					},
+					{
+						"icon":"grid-item-icon tn-icon-empty-network",
+						"text":"https://test6.com",
+						"sort":"5",
+						"label":"URL"
+					},
+				],
+				
+				historyList:[
+					{
+						"icon":"grid-item-icon tn-icon-empty-network",
+						"text":"15936215478",
+						"sort":"0",
+						"label":"WIFI"
+					},
+					{
+						"icon":"grid-item-icon tn-icon-empty-network",
+						"text":"15936215478",
+						"sort":"1",
+						"label":"WIFI"
+					},
+					{
+						"icon":"grid-item-icon tn-icon-empty-network",
+						"text":"15936215478",
+						"sort":"2",
+						"label":"WIFI"
+					},
+					{
+						"icon":"grid-item-icon tn-icon-empty-network",
+						"text":"15936215478",
+						"sort":"3",
+						"label":"WIFI"
+					},
+					{
+						"icon":"grid-item-icon tn-icon-empty-network",
+						"text":"15936215478",
+						"sort":"4",
+						"label":"WIFI"
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -95,30 +207,131 @@
 	}
 </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: 36rpx;
+			//padding-top:30px;
+			//margin-right:200px;
+			margin-top:60rpx;
+			//border: 2px solid purple;
+		}
+		
+		.settingList{
+			//border: 2px solid red;
+			width: 330px;
+			//height:300px;
+			height: auto;
+			//margin-top: 10px;
+			//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-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-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;
+						}
+					}
+				}
+			}
+		}
 	}
 
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
+	.head{
+		//border: 2px solid red;
+		font-size: 72rpx;
+		color: white;
+		margin-top:100rpx;
+		
 	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+	
+	.body{
+		//border: 2px solid blue;
+		font-size: 72rpx;
+		color: white;
+		margin-top:50rpx;
 	}
+	
 </style>