diff --git a/.hbuilderx/launch.json b/.hbuilderx/launch.json
index e608e7a..d43c75c 100644
--- a/.hbuilderx/launch.json
+++ b/.hbuilderx/launch.json
@@ -6,8 +6,8 @@
             "type" : "uni-app:app-ios"
         },
         {
-            "customPlaygroundType" : "local",
-            "playground" : "custom",
+            "customPlaygroundType" : "device",
+            "playground" : "standard",
             "type" : "uni-app:app-android"
         }
     ]
diff --git a/components/call-log/list/list.vue b/components/call-log/list/list.vue
new file mode 100644
index 0000000..b60e1ef
--- /dev/null
+++ b/components/call-log/list/list.vue
@@ -0,0 +1,335 @@
+<template>
+	<view class="call-list" :class="['call-list-'+type]">
+		<view v-for="(item,index) in list" :key="index" class="item">
+				<view class="avatar" v-if="type!='xiaomi'">
+					<image v-if="type=='ios'" :src="'/static/image/call/iosAvatar.png'||item.avatar" mode=""></image>
+					<image v-else-if="type=='oppo'" :src="`/static/image/call/${type}StatusIcon${item.status}.png`" mode="widthFix"></image>
+				</view>
+				<view class="infoBox">
+					<view class="left-box">
+						<view class="leftInfo">
+							<view class="title" :class="{'title-red':item.status==0}">
+								<!-- ios -->
+								<view class="notes" v-if="type=='ios'">
+									{{item.name||item.phone}}
+								</view>
+								<!-- xiaomi -->
+								<view class="notes" v-else-if="type=='xiaomi'">
+									{{item.name||item.notes||item.phone}} 
+									<text v-if="!item.name&&item.notes">{{item.phone}}</text>
+								</view>
+								<view class="notes" v-else-if="type='oppo'">
+									{{item.name||item.phone}}
+								</view>
+							</view>
+							<view class="info">
+							
+								<!-- 卡几 -->
+								<view class="kj"  v-if="type!='ios'&&type!='xiaomi'&&(type=='oppo')">
+									<image :src="`/static/image/call/${type}KJ${item.kj}.png`" mode=""></image>
+								</view>
+								<!-- 时间 -->
+								<view class="time" v-if="type!='ios'&&(type=='xiaomi')">
+									{{item.time}}
+								</view>
+								<!-- icon -->
+								 <view class="status-icon" v-if="type=='ios'">
+										<image src="/static/image/call/iosStatusIcon.png" mode=""></image>
+								 </view>
+								<!-- 地址 -->
+								<view class="address" v-if="type!='ios'&&(type=='xiaomi'||type=='oppo')">
+									{{item.address}}
+								</view>
+								<!-- 运营商 -->
+								<view class="yys">
+									{{item.yys}}
+								</view>
+								<!-- 电话 -->
+								<view class="phone" v-if="type!='xiaomi'&&type!='oppo'">
+									{{item.phone}}
+								</view>
+								<!-- 备注 -->
+								<view class="notes" v-if="type=='oppo'">
+									{{item.notes}}
+								</view>
+							</view>
+					</view>
+				</view>
+				<view class="right-box">
+					<!-- 时间 -->
+					<view class="time" v-if="type=='ios'&&(type!='xiaomi')">
+						{{item.time}}
+					</view>
+					<!-- 图标 -->
+					<view class="icon" v-if="type=='ios'||type=='xiaomi'||type=='oppo'">
+						<image :src="`/static/image/call/${type}RightIcon.png`" mode=""></image>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+export default {
+	name: 'call-list',
+	props: {
+		isHuise: {
+			type: Boolean,
+			default: true
+		},
+		type: {
+			type: String,
+			default: 'ios'
+		}
+	},
+	data() {
+		return {
+			list:[
+				{
+					avatar: '/static/logo.png',
+					title: '18888888888',
+					name: '大王',
+					phone: '18888888888',
+					phoneNotes: '电话',
+					yys: '移动',
+					kj: '1',
+					address: '重庆',
+					time: '星期一',
+					icon: '/static/logo.png',
+					status: 0,// 播出 0:无响应 1:已接 2:已拒绝 | 来电 3：未接 4:已接 5:已拒绝
+					notes: '骚扰电话',
+
+				},
+				{
+					avatar: '/static/logo.png',
+					title: '18888888888',
+					name: '',
+					phone: '18888888888',
+					phoneNotes: '电话',
+					yys: '移动',
+					kj: '1',
+					address: '重庆',
+					time: '星期一',
+					icon: '/static/logo.png',
+					status: 1,// 播出 0:无响应 1:已接 2:已拒绝 | 来电 3：未接 4:已接 5:已拒绝
+					notes: '骚扰电话',
+
+				},
+			]
+		};
+	},
+	watch: {
+		isHuise(newValue, oldValue) {
+			console.log(newValue)
+
+		}
+	},
+	mounted() {
+		
+	},
+	methods: {
+		
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.call-list {
+		box-sizing: border-box;
+		background-color: #fff;
+		.item {
+			display: flex;
+			.avatar {
+				width: 80rpx;
+				height: 80rpx;
+				overflow: hidden;
+				image {
+					width: 100% !important;
+					height: 100% !important;
+				}
+			}
+			.infoBox{
+				width: calc(100% - 80rpx);
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				box-shadow: inset 0 -0.3px 0 0 #C2C2C2;
+				.left-box {
+					display: flex;
+					justify-content: flex-start;
+					align-items: center;
+					
+					.leftInfo {
+						.title {
+							font-size: 32rpx;
+							color: #333;
+							margin-bottom: 10rpx;
+						}
+						.info {
+							display: flex;
+							font-size: 28rpx;
+							color: #666;
+							view{
+								margin-right: 10rpx;
+							}
+							.kj{
+								line-height: 0;
+								width: 22rpx;
+								height: 22rpx;
+								image {
+									width: 100%;
+									height: 100%;
+								}
+							}
+							.status-icon{
+								line-height: 0;
+								width: 22rpx;
+								height: 22rpx;
+								image {
+									width: 100%;
+									height: 100%;
+								}
+							}
+						}
+						
+					}
+				}
+				.right-box {
+					display: flex;
+					justify-content: flex-end;
+					align-items: center;
+					.time {
+						font-size: 28rpx;
+						color: #666;
+					}
+					.icon {
+						width: 40rpx;
+						height: 40rpx;
+						overflow: hidden;
+						margin-left: 20rpx;
+						image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+			}
+			
+		}
+	}
+	.call-list-ios {
+		.item{
+			align-items: center;
+			justify-content: space-between;
+		}
+		.avatar {
+			width: 84rpx;
+			height: 84rpx;
+			border-radius: 50%;
+			margin-left: 32rpx;
+		}
+		.infoBox{
+			width: calc(100% - 136rpx) !important;
+			padding: 24rpx 32rpx 24rpx 0;
+			.left-box{
+				.title {
+					font-weight: 400;
+					font-size: 16px;
+					color: #1A1A1A;
+					line-height: 16px;
+				}
+				.title-red{
+					color: #FC3E30 !important;
+				}
+				.info{
+					align-items: center;
+				}
+				.info .phone {
+					font-weight: 400;
+					font-size: 14px;
+					color: #838383;
+					line-height: 20px;
+				}
+				.info .yys {
+					height: 12px;
+					background: #C7C7C7;
+					border-radius: 2px 2px 2px 2px;
+					padding:0 4rpx;
+					font-weight: 400;
+					font-size: 10px;
+					color: #FFFFFF;
+					line-height: 10px;
+					text-align: center;
+				}
+			}
+			.right-box{
+				.time {
+					font-weight: 400;
+					font-size: 14px;
+					color: #838383;
+					line-height: 14px;
+				}
+				.icon {
+					width: 40rpx;
+					height: 40rpx;
+					overflow: hidden;
+					margin-left: 14rpx;
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+		}
+	}
+	.call-list-xiaomi{
+		.infoBox{
+			width: 100% !important;
+			padding: 34rpx 56rpx 28rpx 56rpx;
+			.title {
+				font-weight: 400;
+				font-size: 16px;
+				color: #1A1A1A;
+				text{
+					font-size: 13px !important;
+					color: #767676 !important;
+				}
+			}
+			.title-red{
+				color: #EE0115 !important;
+			}
+			.info{
+				
+				view{
+					font-size: 13px;
+					color: #767676;
+				}
+			}
+		}
+	}
+	.call-list-oppo{
+		.item{
+			padding: 32rpx 36rpx 0  36rpx !important;
+			justify-content: space-between;
+		}
+		.infoBox{
+			width: calc(100% - 20rpx);
+			padding-bottom: 36rpx;
+		}
+		.avatar{
+			width: 26rpx !important;
+			height: 26rpx !important;
+			border-radius: 0 !important;
+			image {
+				width: 100% !important;
+				height: 100% !important;
+			}
+		}
+		.info{
+			display: flex;
+			align-items: center;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 71d7580..49548e5 100644
--- a/pages.json
+++ b/pages.json
@@ -9,7 +9,20 @@
 			}
 		}
 	],
-	"subPackages": [{
+	
+	"subPackages": [
+		{
+			"root": "pages/call-log",
+			"pages": [{
+							"path": "call",
+							"style": {
+								"navigationBarTitleText": "通话记录页面",
+								"navigationStyle": "custom"
+							}
+						}
+					]
+		},
+		{
 			"root": "pages/balance",
 			"pages": [{
 					"path": "index",
diff --git a/pages/call-log/call.vue b/pages/call-log/call.vue
new file mode 100644
index 0000000..3dbe2ea
--- /dev/null
+++ b/pages/call-log/call.vue
@@ -0,0 +1,65 @@
+<template>
+	<view class="container">
+		<!-- 自定义头部导航栏 -->
+		<ZdyNavbar  :title="data.navbar.title"
+			:bgColor="data.navbar.bgColor" :isBack="true" />
+        <!-- 通话记录列表 -->
+        <callList type="ios"></callList>
+        <callList type="xiaomi"></callList>
+        <callList type="oppo"></callList>
+	</view>
+</template>
+
+<script setup>
+// 自定义头部
+import ZdyNavbar from "@/components/nav-bar/nav-bar.vue"
+import callList from "@/components/call-log/list/list.vue"
+
+import {
+	ref,
+	reactive,
+	watch,
+	nextTick,
+	getCurrentInstance
+} from "vue";
+import {
+	onLoad,
+	onShow,
+	onReady,
+	onPullDownRefresh,
+	onReachBottom
+} from "@dcloudio/uni-app";
+const {
+	appContext,
+	proxy
+} = getCurrentInstance();
+const data = reactive({
+	navbar: {
+		title: "身份证",
+		bgColor: '#EDEDED',
+	},
+
+	})
+
+
+
+onLoad((option) => {
+
+})
+onReady(() => {
+
+})
+onShow(() => { })
+onPullDownRefresh(() => {
+	setTimeout(() => {
+		uni.stopPullDownRefresh();
+	}, 1000);
+})
+onReachBottom(() => {
+
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/static/image/call/iosAvatar.png b/static/image/call/iosAvatar.png
new file mode 100644
index 0000000..6a157d6
Binary files /dev/null and b/static/image/call/iosAvatar.png differ
diff --git a/static/image/call/iosRightIcon.png b/static/image/call/iosRightIcon.png
new file mode 100644
index 0000000..7b3ed03
Binary files /dev/null and b/static/image/call/iosRightIcon.png differ
diff --git a/static/image/call/iosStatusIcon.png b/static/image/call/iosStatusIcon.png
new file mode 100644
index 0000000..fc601b8
Binary files /dev/null and b/static/image/call/iosStatusIcon.png differ
diff --git a/static/image/call/oppoKJ1.png b/static/image/call/oppoKJ1.png
new file mode 100644
index 0000000..965b39b
Binary files /dev/null and b/static/image/call/oppoKJ1.png differ
diff --git a/static/image/call/oppoKJ2.png b/static/image/call/oppoKJ2.png
new file mode 100644
index 0000000..9087588
Binary files /dev/null and b/static/image/call/oppoKJ2.png differ
diff --git a/static/image/call/oppoRightIcon.png b/static/image/call/oppoRightIcon.png
new file mode 100644
index 0000000..b5405e4
Binary files /dev/null and b/static/image/call/oppoRightIcon.png differ
diff --git a/static/image/call/oppoStatusIcon1.png b/static/image/call/oppoStatusIcon1.png
new file mode 100644
index 0000000..4850022
Binary files /dev/null and b/static/image/call/oppoStatusIcon1.png differ
diff --git a/static/image/call/oppoStatusIcon2.png b/static/image/call/oppoStatusIcon2.png
new file mode 100644
index 0000000..f4b9f09
Binary files /dev/null and b/static/image/call/oppoStatusIcon2.png differ
diff --git a/static/image/call/oppoStatusIcon3.png b/static/image/call/oppoStatusIcon3.png
new file mode 100644
index 0000000..b099ded
Binary files /dev/null and b/static/image/call/oppoStatusIcon3.png differ
diff --git a/static/image/call/oppoStatusIcon4.png b/static/image/call/oppoStatusIcon4.png
new file mode 100644
index 0000000..aa0a3c8
Binary files /dev/null and b/static/image/call/oppoStatusIcon4.png differ
diff --git a/static/image/call/xiaomiRightIcon.png b/static/image/call/xiaomiRightIcon.png
new file mode 100644
index 0000000..259f3cb
Binary files /dev/null and b/static/image/call/xiaomiRightIcon.png differ