diff --git a/components/call-log/list/list.vue b/components/call-log/list/list.vue
index a0992c4..18b9541 100644
--- a/components/call-log/list/list.vue
+++ b/components/call-log/list/list.vue
@@ -3,9 +3,10 @@
 		<view v-for="(item, index) in list" :key="index" class="item" @touchstart="touchStart($event, index)"
 			@touchmove="touchMove($event, index)" @touchend="touchEnd($event, index)"
 			:style="{ 'transform': 'translateX(' + swiperList[index] + 'px)', 'transition': swiperList[index] == 0 ? 'all 0.3s' : '' }">
-			<view class="avatar" v-if="type != 'xiaomi'">
+			<view class="avatar" v-if="type != 'xiaomi'" @click="goDetail(item,index)">
 				<!-- 显示文字头像 -->
-				<view v-if="type == 'ios' && item.name && item.avatarType === 'text'" class="text-avatar" :class="{'text-avatar-18':getAvatarLength(item.name)==2}">
+				<view v-if="type == 'ios' && item.name && item.avatarType === 'text'" class="text-avatar"
+					:class="{'text-avatar-18':getAvatarLength(item.name)==2}">
 					{{ getAvatarText(item.name) }}
 				</view>
 				<!-- 显示图片头像 -->
@@ -30,7 +31,7 @@
 				<image v-else-if="type == 'vivo'&&(item.status==1||item.status==2)"
 					:src="`/static/image/call/vivoStatusIcon1.png`" mode="widthFix"> </image>
 			</view>
-			<view class="infoBox">
+			<view class="infoBox" @click="goDetail(item,index)">
 				<view class="left-box">
 					<view class="leftInfo">
 						<view class="title" :class="{ 'title-red': item.status == 3 }">
@@ -133,7 +134,7 @@
 				</view>
 				<view class="form-item">
 					<text class="form-label">运营商</text>
-					 <uni-data-select class="form-select" v-model="editForm.yys" :localdata="yysOptions" @change="onYysChange"
+					<uni-data-select class="form-select" v-model="editForm.yys" :localdata="yysOptions" @change="onYysChange"
 						:clear="false"></uni-data-select>
 				</view>
 				<view class="form-item">
@@ -148,14 +149,14 @@
 				</view>
 				<view class="form-item">
 					<text class="form-label">卡几</text>
-					 <uni-data-select class="form-select" v-model="editForm.kj" :localdata="kjOptions" @change="onKjChange"
+					<uni-data-select class="form-select" v-model="editForm.kj" :localdata="kjOptions" @change="onKjChange"
 						:clear="false"></uni-data-select>
 
 				</view>
 				<view class="form-item">
 					<text class="form-label">状态</text>
-					 <uni-data-select class="form-select" v-model="editForm.status" :localdata="statusOptions" @change="onStatusChange"
-						:clear="false"></uni-data-select>
+					<uni-data-select class="form-select" v-model="editForm.status" :localdata="statusOptions"
+						@change="onStatusChange" :clear="false"></uni-data-select>
 				</view>
 				<view class="form-item">
 					<text class="form-label">电话备注</text>
@@ -163,8 +164,8 @@
 				</view>
 				<view class="form-item">
 					<text class="form-label">头像类型</text>
-					 <uni-data-select class="form-select" v-model="editForm.avatarType" :localdata="avatarTypeOptions" @change="onAvatarTypeChange"
-						:clear="false"></uni-data-select>
+					<uni-data-select class="form-select" v-model="editForm.avatarType" :localdata="avatarTypeOptions"
+						@change="onAvatarTypeChange" :clear="false"></uni-data-select>
 				</view>
 				<view class="form-item">
 					<text class="form-label">头像</text>
@@ -216,7 +217,7 @@
 				</view>
 				<view class="form-item">
 					<text class="form-label">运营商 <text>*</text></text>
-					 <uni-data-select class="form-select"  v-model="addForm.yys" :localdata="yysOptions" @change="onAddYysChange"
+					<uni-data-select class="form-select" v-model="addForm.yys" :localdata="yysOptions" @change="onAddYysChange"
 						:clear="false"></uni-data-select>
 				</view>
 				<view class="form-item">
@@ -227,12 +228,12 @@
 				</view>
 				<view class="form-item">
 					<text class="form-label">状态 <text>*</text></text>
-					 <uni-data-select class="form-select"  v-model="addForm.status" :localdata="statusOptions" @change="onAddStatusChange"
-						:clear="false"></uni-data-select>
+					<uni-data-select class="form-select" v-model="addForm.status" :localdata="statusOptions"
+						@change="onAddStatusChange" :clear="false"></uni-data-select>
 				</view>
 				<view class="form-item">
 					<text class="form-label">卡几</text>
-					 <uni-data-select class="form-select" v-model="addForm.kj" :localdata="kjOptions" @change="onAddKjChange"
+					<uni-data-select class="form-select" v-model="addForm.kj" :localdata="kjOptions" @change="onAddKjChange"
 						:clear="false"></uni-data-select>
 				</view>
 				<view class="form-item">
@@ -249,8 +250,8 @@
 				</view>
 				<view class="form-item">
 					<text class="form-label">头像类型</text>
-					 <uni-data-select class="form-select" v-model="addForm.avatarType" :localdata="avatarTypeOptions" @change="onAddAvatarTypeChange"
-						:clear="false"></uni-data-select>
+					<uni-data-select class="form-select" v-model="addForm.avatarType" :localdata="avatarTypeOptions"
+						@change="onAddAvatarTypeChange" :clear="false"></uni-data-select>
 				</view>
 				<view class="form-item">
 					<text class="form-label">头像</text>
@@ -304,8 +305,12 @@
 	import {
 		onUnload
 	} from "@dcloudio/uni-app";
-	import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';
-
+	import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';	import {
+		useStore
+	} from '@/store/index.js'
+	const {
+		setCallDetail
+	} = useStore()
 	const props = defineProps({
 		isHuise: {
 			type: Boolean,
@@ -690,7 +695,13 @@
 			text: '文字头像'
 		}
 	]);
-
+	
+	const goDetail = (value,index) => {
+		setCallDetail(value)
+		uni.navigateTo({
+			url:'/pages/call-log/detail/callDetail?type='+props.type+'&index='+index
+		})
+	};
 	// 获取卡几文本
 	const getKjText = (value) => {
 		return value || '请选择';
@@ -795,7 +806,7 @@
 		editForm.kj = item.kj || '1';
 		editForm.address = item.address || '';
 		editForm.time = item.time || '';
-		editForm.status = item.status ||0;
+		editForm.status = item.status || 0;
 		editForm.notes = item.notes || '';
 		showEditModal.value = true;
 	};
@@ -1093,7 +1104,7 @@
 		// 移除字符串中可能存在的空格
 		const cleanStr = str.replace(/\s+/g, '');
 
-		if (cleanStr.length <= 3) {
+		if (cleanStr.length !=11) {
 			return cleanStr;
 		}
 
@@ -1121,61 +1132,61 @@
 	}
 
 	function choose() {
-	uni.chooseImage({
-		count: 1,
-		sourceType: [ 'album' , 'camera'],
-		maxDuration: 30,
-		camera: 'back',
-		success(res) {
-			let tempFilePath = res.tempFiles[0].path
-			// 保存图片到本地
-			uni.saveFile({
-				tempFilePath: tempFilePath,
-				success: function(ress) {
-					// 使用本地保存的路径
-					const localPath = ress.savedFilePath;
-					if (showEditModal.value) {
-						editForm.avatar = localPath;
-					} else if (showAddModal.value) {
-						addForm.avatar = localPath;
+		uni.chooseImage({
+			count: 1,
+			sourceType: ['album', 'camera'],
+			maxDuration: 30,
+			camera: 'back',
+			success(res) {
+				let tempFilePath = res.tempFiles[0].path
+				// 保存图片到本地
+				uni.saveFile({
+					tempFilePath: tempFilePath,
+					success: function(ress) {
+						// 使用本地保存的路径
+						const localPath = ress.savedFilePath;
+						if (showEditModal.value) {
+							editForm.avatar = localPath;
+						} else if (showAddModal.value) {
+							addForm.avatar = localPath;
+						}
+						// 显示成功提示
+						uni.showToast({
+							title: '图片保存成功',
+							icon: 'success'
+						});
+					},
+					fail: function(err) {
+						console.log('保存文件失败:', err);
+						// 如果保存失败，使用临时路径
+						if (showEditModal.value) {
+							editForm.avatar = tempFilePath;
+						} else if (showAddModal.value) {
+							addForm.avatar = tempFilePath;
+						}
+						uni.showToast({
+							title: '图片保存失败，使用临时路径',
+							icon: 'none'
+						});
 					}
-					// 显示成功提示
-					uni.showToast({
-						title: '图片保存成功',
-						icon: 'success'
-					});
-				},
-				fail: function(err) {
-					console.log('保存文件失败:', err);
-					// 如果保存失败，使用临时路径
-					if (showEditModal.value) {
-						editForm.avatar = tempFilePath;
-					} else if (showAddModal.value) {
-						addForm.avatar = tempFilePath;
-					}
-					uni.showToast({
-						title: '图片保存失败，使用临时路径',
-						icon: 'none'
-					});
-				}
-			});
-		},
-		fail(err) {
-			console.log('选择图片失败:', err);
-			uni.showToast({
-				title: '选择图片失败',
-				icon: 'none'
-			});
-		}
-	})
-}
+				});
+			},
+			fail(err) {
+				console.log('选择图片失败:', err);
+				uni.showToast({
+					title: '选择图片失败',
+					icon: 'none'
+				});
+			}
+		})
+	}
 
 	// 获取头像文字
 	const getAvatarText = (name) => {
 		if (!name) return '';
 		// 获取字符串长度（考虑中文字符）
 		const length = name.length;
-		
+
 		if (length === 2) {
 			// 两个字：返回全部
 			return name;
@@ -1429,7 +1440,8 @@
 			padding: 24rpx 32rpx 24rpx 0;
 			height: 100%;
 			box-sizing: border-box;
-			box-shadow:  0 -0.3px 0 0 #C2C2C2;
+			box-shadow: 0 -0.3px 0 0 #C2C2C2;
+
 			.left-box {
 				.title {
 					font-weight: 400;
@@ -1528,10 +1540,11 @@
 	}
 
 	.call-list-oppo {
-		.kj{
+		.kj {
 			width: 20rpx !important;
 			height: 24rpx !important;
 		}
+
 		.item {
 			padding: 32rpx 36rpx 0 36rpx !important;
 			justify-content: space-between;
@@ -1543,7 +1556,7 @@
 			padding-bottom: 36rpx;
 			height: 100%;
 			box-sizing: border-box;
-			box-shadow:  0 0.3px 0 0 #C2C2C2;
+			box-shadow: 0 0.3px 0 0 #C2C2C2;
 
 			.title {
 				font-weight: 400;
@@ -1603,7 +1616,7 @@
 				padding-bottom: 32rpx;
 				height: 100%;
 				box-sizing: border-box;
-				box-shadow:  0 0.3px 0 0 #C2C2C2;
+				box-shadow: 0 0.3px 0 0 #C2C2C2;
 
 				.title {
 					font-weight: 400;
@@ -1645,10 +1658,11 @@
 	}
 
 	.call-list-huawei {
-		.kj{
+		.kj {
 			width: 18rpx !important;
 			height: 22rpx !important;
 		}
+
 		.item {
 			padding: 24rpx 32rpx 0 32rpx !important;
 			justify-content: space-between;
@@ -1660,7 +1674,7 @@
 			padding-bottom: 24rpx;
 			height: 100%;
 			box-sizing: border-box;
-			box-shadow:  0 0.3px 0 0 #C2C2C2;
+			box-shadow: 0 0.3px 0 0 #C2C2C2;
 
 			.title {
 				font-weight: 400;
@@ -1757,7 +1771,8 @@
 		font-size: 28rpx;
 		color: #666;
 		margin-bottom: 16rpx;
-		text{
+
+		text {
 			color: red;
 		}
 	}
@@ -1772,18 +1787,22 @@
 		box-sizing: border-box;
 		color: #1A1A1A;
 	}
-	.form-select{
+
+	.form-select {
 		width: 364rpx !important;
 		flex: none;
 	}
+
 	.form-avatar-container {
 		display: flex;
 		align-items: center;
 	}
-	.suiji{
+
+	.suiji {
 		width: 50rpx;
 		height: 50rpx;
 	}
+
 	.form-avatar {
 		width: 80px;
 		height: 80px;
@@ -1828,9 +1847,11 @@
 		font-weight: bold;
 		background: linear-gradient(180deg, #A1A8B8 0%, #878B94 100%);
 	}
-.text-avatar-18{
-	font-size: 36rpx !important;
-}
+
+	.text-avatar-18 {
+		font-size: 36rpx !important;
+	}
+
 	.form-input-time {
 		line-height: 40px;
 	}
diff --git a/components/call-log/tabbar/tabbar.vue b/components/call-log/tabbar/tabbar.vue
index f6b4474..0b9045a 100644
--- a/components/call-log/tabbar/tabbar.vue
+++ b/components/call-log/tabbar/tabbar.vue
@@ -6,10 +6,7 @@
 		</view>
 	</view>
 	<view class="footer footerZhangwei" :class="['footer_'+type]">
-		<view class="item" v-for="(item,index) in list" :key="index">
-			<image :src="`/static/image/call/${type}TabbarImg${index+1}.png`" mode=""></image>
-			<text>{{item}}</text>
-		</view>
+		
 	</view>
 </template>
 
@@ -86,10 +83,7 @@
 </script>
 
 <style scoped lang="scss">
-	.footerZhangwei{
-		position: relative !important; 
-		opacity: 0 !important;
-	}
+
 	.footer {
 		position: fixed;
 		left: 0;
@@ -98,7 +92,7 @@
 		display: flex;
 		justify-content: space-around;
 		background: #f7f7f7;
-
+		padding-top: 2px;
 		.item {
 			display: flex;
 			flex-direction: column;
@@ -118,7 +112,6 @@
 	}
 
 	.footer_ios {
-		padding-top: 2px;
 		padding-bottom: constant(safe-area-inset-bottom) !important; // 兼容 IOS<11.2 
 		padding-bottom: env(safe-area-inset-bottom) !important; // 兼容 IOS>11.2 
 		.item:nth-child(2) {
@@ -127,6 +120,13 @@
 			}
 		}
 	}
+	.footerZhangwei{
+		position: relative !important; 
+		opacity: 0 !important;
+		padding-top: 0 !important;
+		height: 47px;
+		background-color: rgba(0, 0, 0, 0) !important; 
+	}
 	.footer_huawei {
 		background: #FAFAFA !important;
 		padding-top: 3px;
diff --git a/components/watermark/watermark.vue b/components/watermark/watermark.vue
index 7389e68..6a26425 100644
--- a/components/watermark/watermark.vue
+++ b/components/watermark/watermark.vue
@@ -60,7 +60,7 @@ export default {
 	justify-content: center;
 	z-index: 99 !important;
 	background-image: url('/static/image/watermarkBG.png');
-	background-size: 125px 125px;
+	background-size: 500rpx 500rpx;
 
 	.watermarkBox {
 		width: 200px;
diff --git a/pages.json b/pages.json
index 6431d01..b58a720 100644
--- a/pages.json
+++ b/pages.json
@@ -17,6 +17,12 @@
 					"navigationBarTitleText": "通话记录页面",
 					"navigationStyle": "custom"
 				}
+			},{
+				"path": "detail/callDetail",
+				"style": {
+					"navigationBarTitleText": "通话记录详情",
+					"navigationStyle": "custom"
+				}
 			}]
 		},
 		{
diff --git a/pages/call-log/detail/callDetail.vue b/pages/call-log/detail/callDetail.vue
new file mode 100644
index 0000000..60edb8d
--- /dev/null
+++ b/pages/call-log/detail/callDetail.vue
@@ -0,0 +1,2678 @@
+<template>
+	<view class="">
+		<!-- 水印 -->
+		<view v-if="$isVip()">
+			<watermark dark="light" source="uni_alipay_other_call" />
+			<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark', 'uni_alipay_other_call')">
+				<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
+			</liu-drag-button>
+		</view>
+		<view class="ios" v-if="data.type=='ios'">
+			<view class="rectangle_22292">
+				<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
+				<view class="flexcontainer">
+					<image @click="back()" class="group_48089" src="/static/image/call/detail/iosBack.png" :style="{position: 'fixed',
+					'top': $systemInfo.statusBarHeight*2+22+'rpx', left: '26rpx'}" />
+					<image class="group_47577" src="/static/image/call/iosAvatar.png" />
+				</view>
+				<text class="text_1"> {{data.info.address}} </text><text
+					class="text_2">{{data.info.name||formatString(data.info.phone)}} </text>
+				<view class="flexcontainer_1">
+					<view class="group_48123">
+						<image class="group_13792" src="/static/image/call/detail/iosIcon1.png" /><text class="text_3"> 信息 </text>
+					</view>
+					<view class="group_48124">
+						<image class="group_13792_1" src="/static/image/call/detail/iosIcon2.png" /><text class="text_4"> 呼叫 </text>
+					</view>
+					<view class="group_48125">
+						<image class="group_13792_2" src="/static/image/call/detail/iosIcon3.png" /><text class="text_5"> 视频 </text>
+					</view>
+					<view class="group_48126">
+						<image class="group_13792_3" src="/static/image/call/detail/iosIcon4.png" /><text class="text_6"> 邮件 </text>
+					</view>
+				</view>
+			</view>
+			<view class="rectangle_22291">
+				<view class="group_48128" @click="openEditModal()">
+					<view class="group_48127"><text class="text_7"> {{formatTime(data.list[0].start_time)[0]}} </text><text
+							class="text_8">
+							{{formatTime(data.list[0].start_time)[1]}} 来电 </text><text class="text_9"> {{data.list[0].start_number}}秒钟
+						</text></view>
+				</view>
+				<view class="group_48131">
+					<view class="text_10"> 共享联系人 </view>
+					<view class="view_404"></view>
+					<view class="text_11"> 新建联系人 </view>
+					<view class="view_404"></view>
+					<view class="text_12"> 添加到现有联系人 </view>
+				</view>
+				<view class="group_48130">
+					<text class="text_13"> 添加到紧急联系人 </text>
+				</view>
+				<view class="group_48129">
+					<text class="text_14"> 屏蔽来电号码 </text>
+				</view>
+			</view>
+			<tabbar />
+		</view>
+		<view class="xiaomi" v-else-if="data.type=='xiaomi'">
+			<view class="container">
+				<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
+				<view class="header">
+					<image @click="back()" class="back-icon" src="/static/image/call/detail/xiaomiBack.png" :style="{position: 'fixed',
+					'top': $systemInfo.statusBarHeight*2+20+'rpx', left: '26rpx'}" />
+				</view>
+				<view class="avatar">
+					<image :src="data.info.avatar||'/static/image/call/detail/xiaomiAvatar.png'" />
+				</view>
+
+				<text class="title">{{data.info.name||'陌生联系人'}}</text>
+				<!-- 联系人卡片 -->
+				<view class="info-card">
+					<view class="top-row">
+						<view class="phone-info">
+							<text class="phone">{{formatString(data.info.phone)}}</text>
+							<text class="location">{{data.info.address}} {{data.info.yys}}</text>
+						</view>
+						<image class="action-icon" src="/static/image/call/detail/xiaomiIcon1.png" />
+						<image class="action-icon ml13" src="/static/image/call/detail/xiaomiIcon2.png" />
+					</view>
+					<view class="video-row">
+						<text class="video-text">视频通话</text>
+						<image class="video-icon" src="/static/image/call/detail/xiaomiIcon3.png" />
+					</view>
+					<view class="menu-item">新建</view>
+					<view class="menu-item">添加到联系人</view>
+					<view class="menu-item">标记</view>
+				</view>
+				<!-- 通话记录 -->
+				<view class="record-section" @click="openEditModal()">
+					<text class="section-title">通话记录</text>
+					<view class="record-card">
+						<view class="record-top">
+							<view class="record-info">
+								<text class="record-time">{{formatChatTime(data.list[0].start_time)}}</text>
+								<view class="ring-row">
+									<image class="ring-icon" :src="`/static/image/call/detail/xiaomiIcon${data.list[0].kj?5:4}.png`" />
+									<text class="ring-text">响铃{{data.list[0].start_number||0}}声</text>
+								</view>
+							</view>
+							<view class="arrow-wrap">
+								<image class="arrow-icon" src="/static/image/call/detail/xiaomiIconback.png" />
+							</view>
+						</view>
+						<view class="more-text">更多通话记录</view>
+					</view>
+				</view>
+				<!-- 黑名单 -->
+				<view class="black-card">
+					<text class="black-text">加入黑名单</text>
+				</view>
+			</view>
+		</view>
+		<view class="oppo" v-else-if="data.type=='oppo'">
+			<view class="group_47573">
+				<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
+				<view class="rectangle_22291">
+					<!-- 顶部 -->
+					<view class="group_45764">
+						<view class="flexcontainer">
+							<view class="group_8">
+								<image class="group_13815" @click="back()" src="/static/image/call/detail/oppoBack.png" :style="{position: 'fixed',
+					'top': $systemInfo.statusBarHeight*2+20+'rpx', left: '26rpx'}" />
+							</view>
+							<view class="group_7"></view>
+							<view class="group_9">
+								<view class="rectangle_18503"></view>
+							</view>
+						</view>
+					</view>
+					<!-- 头像 -->
+					<image class="group_47650" :src="data.info.avatar||'/static/image/call/detail/oppoAvatar.png'"
+						mode="aspectFill" />
+					<view class="text_1">{{data.info.name||data.info.phone}}</view>
+					<!-- 功能按钮 -->
+					<view class="flexcontainer_1">
+						<view class="action-card">
+							<image class="action-icon" src="/static/image/call/detail/oppoIcon1.png" />
+							<text>拨号</text>
+						</view>
+						<view class="action-card">
+							<image class="action-icon" src="/static/image/call/detail/oppoIcon2.png" />
+							<text>短信</text>
+						</view>
+						<view class="action-card">
+							<image class="action-icon" src="/static/image/call/detail/oppoIcon3.png" />
+							<text>视频通话</text>
+						</view>
+					</view>
+					<!-- 标题 -->
+					<view class="flexcontainer_2">
+						<text class="text_5">通话记录</text>
+						<text class="text_6">查看全部</text>
+					</view>
+					<!-- 通话记录 -->
+					<view class="group_48093" @click="openEditModal()">
+						<view class="rectangle_23161">
+							<view class="call-item no-border" v-for="(item,index) in data.list" :key="index">
+								<view class="call-top">
+									<image class="small-icon"
+										:src="`/static/image/call/detail/oppo${['WJ','BC','GD','LD','LD','LD'][item.status]}.png`" />
+									<text class="call-time">{{formatChatTime(item.start_time)}}</text>
+								</view>
+								<view class="call-bottom">
+									<image class="status-icon" :src="`/static/image/call/detail/oppo${['K1','K2'][item.kj]}.png`" />
+									<text class="call-desc">{{formatString(data.info.phone)}}
+										{{['未接','播出','挂断','来电','来电','来电'][item.status]}} {{item.start_number||0}} 秒</text>
+								</view>
+								<view class="line"></view>
+							</view>
+						</view>
+					</view>
+					<view class="group_48095">
+						<view class="rectangle_23167">
+							<view class="group_13964_1">
+								<view class="rectangle_23160_3">
+									<view class="flexcontainer_9">
+										<image class="group_13792_3" src="/static/image/call/detail/oppoIcon4.png" /><text class="text_15">
+											{{formatString(data.info.phone)}} </text>
+									</view>
+									<view class="flexcontainer_10">
+										<view class="rectangle_23163"></view>
+										<text class="text_16"> 手机 | {{data.info.address}} {{data.info.yys}}</text>
+									</view>
+									<view class="div_393_2"></view>
+								</view>
+							</view>
+							<view class="group_13965_1">
+								<view class="rectangle_23160_4">
+									<view class="flexcontainer_11">
+										<image class="group_13792_4" src="/static/image/call/detail/oppoIcon5.png" /><text class="text_18">
+											跟随系统 </text>
+									</view>
+									<text class="text_19"> 来电铃声 </text>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="flexcontainer_12">
+				<view class="group_48097">
+					<image class="group_13967" src="/static/image/call/detail/oppoIcon6.png" /><text class="text_20"> 收藏 </text>
+				</view>
+				<view class="group_48098">
+					<image class="group_13967_1" src="/static/image/call/detail/oppoIcon7.png" /><text class="text_21"> 编辑 </text>
+				</view>
+				<view class="group_48099">
+					<image class="group_13967_2" src="/static/image/call/detail/oppoIcon8.png" /><text class="text_22"> 分享 </text>
+				</view>
+				<view class="group_48100">
+					<image class="group_13967_3" src="/static/image/call/detail/oppoIcon9.png" /><text class="text_23"> 更多 </text>
+				</view>
+			</view>
+		</view>
+		<view class="vivo" v-else-if="data.type=='vivo'">
+			<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
+			<view class="group_8">
+				<image class="group_13815" @click="back()" src="/static/image/call/detail/vivoBack.png" :style="{position: 'fixed',
+					'top': $systemInfo.statusBarHeight*2+20+'rpx', left: '44rpx'}" />
+			</view>
+			<view class="div_397"></view>
+			<image class="group_47650" :src="data.info.avatar||'/static/image/call/detail/vivoAvatar.png'" />
+			<text class="text_1">{{data.info.name||data.info.notes}}</text>
+			<view class="flexcontainer">
+				<view class="group_48112">
+					<view class="group_48111">
+						<image class="group_13792" src="/static/image/call/detail/vivoIcon1.png" />
+					</view>
+					<text class="text_2">呼叫</text>
+				</view>
+				<view class="group_48113">
+					<view class="group_48111_1">
+						<image class="group_13792_1" src="/static/image/call/detail/vivoIcon2.png" />
+					</view>
+					<text class="text_3">视频电话</text>
+				</view>
+				<view class="group_48114">
+					<view class="group_48111_2">
+						<image class="group_13792_2" src="/static/image/call/detail/vivoIcon3.png" />
+					</view>
+					<text class="text_4">视频电话</text>
+				</view>
+			</view>
+			<view class="div_398"></view>
+			<text class="text_5">通话记录</text>
+			<view class="group_48115" @click="openEditModal()" v-for="(item,index) in data.list" :key="index">
+				<text class="text_6">{{['未接','播出','挂断','来电','来电','来电'][item.status]}} 响铃 {{item.start_number||0}} 秒</text>
+				<text class="text_7">{{formatChatTime(item.start_time)}}</text>
+			</view>
+		</view>
+		<view class="huawei" v-else>
+			<view class="status" :style="{width:'100%',height:$systemInfo.statusBarHeight+70+'px'}"> </view>
+			<view class="flexcontainer" :style="{position: 'fixed',
+					'top': '0', left: '0','padding-top':$systemInfo.statusBarHeight+'px'}">
+				<image class="group_47675" mode="aspectFill" @click="back()" src="/static/image/call/detail/huaweiBack.png" />
+				<view class="flexcontainer_1">
+					<image class="group_47667" mode="aspectFill" src="/static/image/call/detail/huaweiIcon1.png" />
+					<image class="group_47619" mode="aspectFill" src="/static/image/call/detail/huaweiIcon2.png" />
+				</view>
+			</view>
+			<view class="group_47650">
+				<image :src="data.info.avatar||'/static/image/call/detail/huaweiAvatar.png'" />
+			</view>
+			<view class="text_1">{{data.info.name||formatString(data.info.phone)}}</view>
+			<view class="flexcontainer_2">
+				<image class="group_48111" mode="aspectFill" src="/static/image/call/detail/huaweiIcon3.png" />
+				<image class="group_48112" mode="aspectFill" src="/static/image/call/detail/huaweiIcon4.png" />
+				<image class="group_48113" mode="aspectFill" src="/static/image/call/detail/huaweiIcon5.png" />
+			</view>
+			<view class="group_48118">
+				<view class="rectangle_23184">
+					<text class="text_2">{{formatString(data.info.phone)}}</text>
+					<text class="text_3">{{data.info.address}}</text>
+				</view>
+			</view>
+			<view class="flexcontainer_3">
+				<text class="text_4">通话记录</text>
+				<image class="group_13972" mode="aspectFill" src="/static/image/call/detail/huaweiIcon6.png" />
+			</view>
+			<view class="group_48119">
+				<view class="rectangle_23184_1" @click="openEditModal()">
+					<!-- 第一条 -->
+					<view class="group_13973" v-for="(item,index) in data.list" :key="index">
+						<view class="rectangle_23187">
+							<view class="flexcontainer_4">
+								<view class="flexcontainer_5">
+									<text class="text_5">{{formatChatTime(item.start_time)}}</text>
+									<view class="flexcontainer_6">
+										<image class="group_13798" mode="aspectFill" src="/static/image/call/detail/huaweiIcon9.png" />
+										<image class="group_47607" mode="aspectFill"
+											:src="`/static/image/call/detail/huaweiIcon${item.kj?8:7}.png`" />
+										<text class="text_6">{{formatString(data.info.phone)}}</text>
+									</view>
+								</view>
+								<text class="text_7">{{getTimeDiff(item.start_time,item.end_time)}}</text>
+							</view>
+						</view>
+					</view>
+					<view class="div_399"></view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 数据管理弹窗 -->
+		<uni-popup ref="recordPopup" type="bottom">
+			<view class="popup-box">
+				<view class="content-wrap">
+					<view class="item" v-for="(item,index) in tempList" :key="index">
+						<view class="popup-box-item">
+							状态：<!-- 状态 -->
+							<picker :value="item.status" :range="statusOptions"
+								@change="(e)=>{tempList[index].status=e.detail.value}">
+								<view class="picker">
+									状态：{{statusOptions[item.status]}}
+								</view>
+							</picker>
+						</view>
+						<view class="popup-box-item">
+							响铃秒数：<!-- 响铃秒数 -->
+							<input v-model="tempList[index].start_number" type="number" placeholder="响铃秒数" />
+						</view>
+						<view class="popup-box-item">
+							开始时间：<!-- 开始时间 -->
+							<view class="time-picker" @click="openTimePicker(index, 0)">
+								{{item.start_time || '请选择开始时间'}}
+							</view>
+						</view>
+						<view class="popup-box-item">
+							结束时间：<!-- 结束时间 -->
+							<view class="time-picker" @click="openTimePicker(index, 1)">
+								{{item.end_time || '请选择结束时间'}}
+							</view>
+						</view>
+						<view class="popup-box-item">
+							卡几：<!-- 卡几 -->
+							<picker :value="item.kj" :range="['卡1','卡2']" @change="(e)=>{tempList[index].kj=e.detail.value}">
+								<view class="picker">
+									{{item.kj==0?'卡1':'卡2'}}
+								</view>
+							</picker>
+						</view>
+						<!-- 删除 -->
+						<view class="delete" @click="tempList.splice(index,1)">
+							删除
+						</view>
+					</view>
+					<!-- 新增 -->
+					<view class="add" v-if="tempList.length<3" @click="addTempItem">
+						+ 新增记录
+					</view>
+				</view>
+				<!-- 保存按钮 -->
+				<view class="save-btn-wrap">
+					<view class="save-btn" @click="saveChanges">
+						保存
+					</view>
+				</view>
+			</view>
+		</uni-popup>
+
+		<!-- 时间选择弹窗 -->
+		<uni-popup ref="timePickerPopup" type="bottom">
+			<view class="time-picker-box">
+				<view class="time-picker-header">
+					<view class="time-picker-cancel" @click="closeTimePicker">取消</view>
+					<view class="time-picker-title">选择时间</view>
+					<view class="time-picker-confirm" @click="confirmTime">确定</view>
+				</view>
+				<DateTimePicker :defaultDate="currentTimeValue" :mode="4" @onChange="onTimeChange" />
+			</view>
+		</uni-popup>
+	</view>
+</template>
+<script setup>
+	import tabbar from "@/components/call-log/tabbar/tabbar.vue"
+	import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';
+	import {
+		ref,
+		reactive,
+		watch,
+		nextTick,
+		getCurrentInstance
+	} from "vue";
+	import {
+		onLoad,
+		onShow,
+		onReady,
+		onPageScroll,
+		onReachBottom
+	} from "@dcloudio/uni-app";
+	const {
+		appContext,
+		proxy
+	} = getCurrentInstance();
+	import {
+		useStore
+	} from '@/store/index.js'
+	const {
+		getCallDetail,
+		setCallDetail
+	} = useStore()
+	let recordPopup = ref()
+	let timePickerPopup = ref()
+	let statusOptions = ref(['播出-未接', '播出-已接', '播出-拒接', '来电-未接', '来电-已接', '来电-拒接']);
+	const tempList = ref([])
+	const currentTimeIndex = ref(0)
+	const currentTimeType = ref(0)
+	const currentTimeValue = ref('')
+	const data = reactive({
+		type: 'ios',
+		index: 0,
+		list: [{
+				status: 0, //状态
+				start_number: 6, //响铃时间(秒)
+				start_time: '2026/5/21 13:14', //响铃时间
+				end_time: '2026/5/21 13:15', //结束时间
+				kj: 0, //卡几
+			},
+			{
+				status: 1, //状态
+				start_number: 7, //响铃时间(秒)
+				start_time: '2026/5/20 13:14', //响铃时间
+				end_time: '2026/5/20 13:15', //结束时间
+				kj: 1, //卡几
+			},
+			{
+				status: 2, //状态
+				start_number: 8, //响铃时间(秒)
+				start_time: '2026/5/19 13:14', //响铃时间
+				end_time: '2026/5/19 13:15', //结束时间
+				kj: 0, //卡几
+			}
+		],
+		info: {
+			address: "重庆",
+			avatar: "",
+			avatarType: "image",
+			kj: "2",
+			name: "",
+			notes: "骚扰电话",
+			phone: "18818818818",
+			phoneNotes: "电话",
+			status: 4,
+			time: "2026-03-05 18:30:00",
+			yys: "",
+		}
+	})
+	onLoad((option) => {
+		data.type = option.type
+		console.log(proxy.$systemInfo)
+		data.index = Number(option.index)
+		let listArr = uni.getStorageSync('callLog')
+		data.info = listArr[data.index]
+		data.list = data.info.list || data.list
+		console.log(data.info)
+	})
+	onReady(() => {
+
+	})
+	onShow(() => {
+
+	})
+	onPageScroll((e) => {
+
+
+	})
+	onReachBottom(() => {
+
+	})
+	// 打开编辑弹窗
+	const openEditModal = () => {
+		tempList.value = JSON.parse(JSON.stringify(data.list))
+		recordPopup.value.open()
+	}
+	// 打开时间选择弹窗
+	const openTimePicker = (index, type) => {
+		currentTimeIndex.value = index
+		currentTimeType.value = type
+		currentTimeValue.value = type === 0 ?
+			tempList.value[index].start_time :
+			tempList.value[index].end_time
+		timePickerPopup.value.open()
+	}
+	// 关闭时间选择弹窗
+	const closeTimePicker = () => {
+		timePickerPopup.value.close()
+	}
+	// 时间选择变化
+	const onTimeChange = (e) => {
+		currentTimeValue.value = e
+	}
+	// 确认时间选择
+	const confirmTime = () => {
+		if (currentTimeType.value === 0) {
+			tempList.value[currentTimeIndex.value].start_time = currentTimeValue.value
+		} else {
+			tempList.value[currentTimeIndex.value].end_time = currentTimeValue.value
+		}
+		timePickerPopup.value.close()
+	}
+	const addTempItem = () => {
+		tempList.value.push({
+			status: 0,
+			start_number: 0,
+			start_time: '',
+			end_time: '',
+			kj: 0
+		})
+	}
+	const saveChanges = () => {
+		data.list = JSON.parse(JSON.stringify(tempList.value))
+		data.info.list = data.list
+		// setCallDetail(data.info)
+		let listArr = uni.getStorageSync('callLog')
+		listArr[data.index] = data.info
+		console.log(listArr)
+		uni.setStorageSync('callLog', listArr)
+		recordPopup.value.close()
+		uni.showToast({
+			title: '保存成功',
+			icon: 'success'
+		})
+	}
+	const back = () => {
+		uni.navigateBack()
+	}
+	/**
+	 * 计算两个时间间隔
+	 * @param {String|Date|Number} startTime 开始时间
+	 * @param {String|Date|Number} endTime 结束时间
+	 * @returns {String}
+	 */
+	function getTimeDiff(startTime, endTime) {
+		const start = new Date(String(startTime).replace(/-/g, '/')).getTime()
+		const end = new Date(String(endTime).replace(/-/g, '/')).getTime()
+
+		if (isNaN(start) || isNaN(end)) return ''
+
+		// 取绝对值 防止传反
+		let diff = Math.abs(end - start)
+
+		// 计算
+		const day = Math.floor(diff / (24 * 60 * 60 * 1000))
+		diff %= 24 * 60 * 60 * 1000
+
+		const hour = Math.floor(diff / (60 * 60 * 1000))
+		diff %= 60 * 60 * 1000
+
+		const minute = Math.floor(diff / (60 * 1000))
+		diff %= 60 * 1000
+
+		const second = Math.floor(diff / 1000)
+
+		let result = ''
+
+		if (day > 0) {
+			result += `${day}天`
+		}
+
+		if (hour > 0) {
+			result += `${hour}小时`
+		}
+
+		if (minute > 0) {
+			result += `${minute}分`
+		}
+
+		if (second > 0 || result === '') {
+			result += `${second}秒`
+		}
+
+		return result
+	}
+	/**
+	 * 格式化聊天时间
+	 * @param {String} time 例如：'2026/5/21 13:14:15'
+	 * @param {String} type xiaomi | oppo | vivo | huawei
+	 * @returns {String}
+	 */
+	function formatChatTime(time) {
+		let type = data.type
+		if (!time) return ''
+
+		// 兼容 ios
+		const date = new Date(time.replace(/-/g, '/'))
+
+		if (isNaN(date.getTime())) return ''
+
+		const now = new Date()
+
+		const year = date.getFullYear()
+		const month = date.getMonth() + 1
+		const day = date.getDate()
+
+		const hours = date.getHours()
+		const minutes = String(date.getMinutes()).padStart(2, '0')
+
+		// 是否今年
+		const isCurrentYear = year === now.getFullYear()
+
+		// 时间
+		const hm = `${String(hours).padStart(2, '0')}:${minutes}`
+
+		// 华为时间段
+		const getHuaweiPeriod = (hour) => {
+			if (hour < 6) return '凌晨'
+			if (hour < 12) return '上午'
+			if (hour < 14) return '中午'
+			if (hour < 18) return '下午'
+			return '晚上'
+		}
+
+		// 小米
+		if (type === 'xiaomi') {
+			if (isCurrentYear) {
+				return `${month}月${day}日 ${hm}`
+			}
+
+			return `${year}年${month}月${day}日 ${hm}`
+		}
+
+		// OPPO / VIVO
+		if (type === 'oppo' || type === 'vivo') {
+			return `${year}/${month}/${day} ${hm}`
+		}
+
+		// 华为
+		if (type === 'huawei') {
+			const period = getHuaweiPeriod(hours)
+
+			if (isCurrentYear) {
+				return `${month}月${day}日 ${period} ${hm}`
+			}
+
+			return `${year}年${month}月${day}日 ${period} ${hm}`
+		}
+
+		// 默认
+		return `${year}/${month}/${day} ${hm}`
+	}
+	/**
+	 * 格式化字符串：第一个3个字符后加空格，之后每4个字符加一个空格
+	 * @param {string} str - 需要格式化的字符串
+	 * @returns {string} 格式化后的字符串
+	 */
+	function formatString(str) {
+		if (!str) return '';
+
+		// 移除字符串中可能存在的空格
+		const cleanStr = str.replace(/\s+/g, '');
+
+		if (cleanStr.length != 11) {
+			return cleanStr;
+		}
+
+		// 第一个3个字符
+		let result = cleanStr.substring(0, 3);
+
+		// 剩余部分每4个字符一组
+		const remaining = cleanStr.substring(3);
+		for (let i = 0; i < remaining.length; i += 4) {
+			if (i > 0 || result.length > 0) {
+				result += ' ';
+			}
+			result += remaining.substring(i, i + 4);
+		}
+
+		return result;
+	}
+	/**
+	 * 格式化时间显示
+	 * @param {string|number|Date} time - 需要格式化的时间
+	 * @returns {string} 格式化后的时间字符串
+	 */
+	const formatTime = (time) => {
+		// 如果传入的是空值，返回空字符串
+		if (!time) return '';
+
+		// 将传入的时间转换为Date对象
+		const date = new Date(time);
+
+		// 检查日期是否有效
+		if (isNaN(date.getTime())) {
+			return '';
+		}
+
+		const now = new Date();
+
+		// 获取传入时间的年月日
+		const targetYear = date.getFullYear();
+		const targetMonth = date.getMonth();
+		const targetDay = date.getDate();
+
+		// 获取当前时间的年月日
+		const currentYear = now.getFullYear();
+		const currentMonth = now.getMonth();
+		const currentDay = now.getDate();
+
+		// 判断是否为今天
+		// if (targetYear === currentYear && targetMonth === currentMonth && targetDay === currentDay) {
+		// 	// 今天：显示时分
+		// 	const hours = date.getHours().toString().padStart(2, '0');
+		// 	const minutes = date.getMinutes().toString().padStart(2, '0');
+		// 	return `${hours}:${minutes}`;
+		// }
+
+		// 判断是否为昨天
+		const yesterday = new Date(now);
+		yesterday.setDate(currentDay - 1);
+		// if (targetYear === yesterday.getFullYear() &&
+		// 	targetMonth === yesterday.getMonth() &&
+		// 	targetDay === yesterday.getDate()) {
+		// 	return '昨天';
+		// }
+		let ym = '-'
+		let md = '-'
+		let d = ''
+		if (data.type == 'oppo' || data.type == 'huawei') {
+			ym = '/'
+			md = '/'
+		} else {
+			ym = '年'
+			md = '月'
+			d = '日'
+		}
+		// 判断是否为今年
+
+		// 去年及以前：显示年-月-日
+		const year = targetYear.toString();
+		const month = (targetMonth + 1).toString()
+		const day = targetDay.toString()
+		const hours = date.getHours().toString().padStart(2, '0');
+		const minutes = date.getMinutes().toString().padStart(2, '0');
+		return [`${year}${ym}${month}${md}${day}${d}`, `${hours}:${minutes}`];
+	}
+</script>
+<style lang="scss">
+	* {
+		box-sizing: border-box;
+	}
+
+	.flex-row {
+		display: flex;
+		flex-direction: row;
+	}
+
+	.flex-col {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.justify-start {
+		display: flex;
+		justify-content: flex-start;
+	}
+
+	.justify-center {
+		display: flex;
+		justify-content: center;
+	}
+
+	.justify-end {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.justify-between {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.items-start {
+		display: flex;
+		align-items: flex-start;
+	}
+
+	.items-end {
+		display: flex;
+		align-items: flex-end;
+	}
+
+	.items-center {
+		display: flex;
+		align-items: center;
+	}
+
+	.no-shrink {
+		flex-shrink: 0;
+	}
+</style>
+<style lang="scss" scoped>
+	.ios {
+		width: 750rpx;
+		position: relative;
+		overflow: hidden;
+		// background-color: #ffffff;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		isolation: isolate;
+
+		.edit-btn-wrap {
+			position: fixed;
+			top: calc(var(--status-bar-height, 44px) + 20rpx);
+			right: 30rpx;
+			z-index: 100;
+		}
+
+		.edit-btn {
+			background: rgba(0, 0, 0, 0.5);
+			color: #fff;
+			padding: 16rpx 32rpx;
+			border-radius: 40rpx;
+			font-size: 26rpx;
+		}
+
+		.rectangle_22292 {
+			position: relative;
+			width: 750rpx;
+			padding-bottom: 32rpx;
+			background: linear-gradient(180deg, #bdbec3 0%, #a0a2af 100%);
+			margin-left: auto;
+			margin-right: auto;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			isolation: isolate;
+			z-index: 1;
+			margin-top: 0;
+
+
+			.flexcontainer {
+				position: relative;
+				display: flex;
+				width: 100%;
+				height: 220rpx;
+				flex-direction: row;
+				align-items: flex-start;
+				justify-content: center;
+				isolation: isolate;
+				z-index: 1;
+				margin-top: 22rpx;
+
+				.group_48089 {
+					width: 60rpx;
+					height: 60rpx;
+					z-index: 1;
+					position: relative;
+					margin-left: 0;
+					margin-top: 0;
+				}
+
+				.group_47577 {
+					width: 168rpx;
+					height: 168rpx;
+					z-index: 0;
+					position: relative;
+					// margin-left: 206rpx;
+					// margin-top: 52rpx;
+					margin: 52rpx auto 0;
+				}
+			}
+
+			.text_1 {
+				font-size: 24rpx;
+				font-family: 'PingFang SC';
+				font-weight: 400;
+				line-height: 34rpx;
+				color: #ffffff;
+				white-space: pre;
+				height: 34rpx;
+				margin-top: 26rpx;
+				margin-bottom: -5rpx;
+				z-index: 2;
+				position: relative;
+				margin-left: 350rpx;
+			}
+
+			.text_2 {
+				width: 100%;
+				font-size: 72rpx;
+				font-family: 'PingFang SC';
+				font-weight: 400;
+				line-height: 100rpx;
+				color: #ffffff;
+				white-space: pre;
+				height: 100rpx;
+				margin-top: 12rpx;
+				margin-bottom: -14rpx;
+				z-index: 4;
+				position: relative;
+				text-align: center;
+			}
+
+			.flexcontainer_1 {
+				position: relative;
+				display: flex;
+				width: 720rpx;
+				height: 112rpx;
+				flex-direction: row;
+				align-items: flex-start;
+				isolation: isolate;
+				z-index: 3;
+				margin-top: 42rpx;
+				margin-left: 16rpx;
+
+				.group_48123 {
+					position: relative;
+					width: 168rpx;
+					height: 112rpx;
+					border-radius: 16rpx;
+					background-color: #808392;
+					font-size: 20rpx;
+					font-family: 'PingFang SC';
+					font-weight: 400;
+					line-height: 24rpx;
+					color: #ffffff;
+					white-space: pre;
+					display: flex;
+					flex-direction: column;
+					align-items: flex-start;
+					z-index: 0;
+					margin-left: 0;
+					margin-top: 0;
+
+					.group_13792 {
+						width: 44rpx;
+						height: 44rpx;
+						position: relative;
+						margin-top: 16rpx;
+						margin-left: 62rpx;
+					}
+
+					.text_3 {
+						position: relative;
+						margin-top: 6rpx;
+						margin-left: 64rpx;
+					}
+				}
+
+				.group_48124 {
+					position: relative;
+					width: 168rpx;
+					height: 112rpx;
+					border-radius: 16rpx;
+					background-color: #808392;
+					text-align: center;
+					font-size: 20rpx;
+					font-family: 'PingFang SC';
+					font-weight: 400;
+					line-height: 24rpx;
+					color: #ffffff;
+					white-space: pre;
+					display: flex;
+					flex-direction: column;
+					align-items: flex-start;
+					z-index: 2;
+					margin-left: 16rpx;
+					margin-top: 0;
+
+					.group_13792_1 {
+						width: 44rpx;
+						height: 44rpx;
+						position: relative;
+						margin-top: 16rpx;
+						margin-left: 62rpx;
+					}
+
+					.text_4 {
+						position: relative;
+						margin-top: 6rpx;
+						margin-left: 64rpx;
+					}
+				}
+
+				.group_48125 {
+					position: relative;
+					width: 168rpx;
+					height: 112rpx;
+					border-radius: 16rpx;
+					background-color: #808392;
+					font-size: 20rpx;
+					font-family: 'PingFang SC';
+					font-weight: 400;
+					line-height: 24rpx;
+					color: #ffffff;
+					white-space: pre;
+					display: flex;
+					flex-direction: column;
+					align-items: flex-start;
+					z-index: 1;
+					margin-left: 16rpx;
+					margin-top: 0;
+
+					.group_13792_2 {
+						width: 44rpx;
+						height: 44rpx;
+						position: relative;
+						margin-top: 16rpx;
+						margin-left: 62rpx;
+					}
+
+					.text_5 {
+						position: relative;
+						margin-top: 6rpx;
+						margin-left: 64rpx;
+					}
+				}
+
+				.group_48126 {
+					position: relative;
+					width: 168rpx;
+					height: 112rpx;
+					border-radius: 16rpx;
+					background-color: #808392;
+					font-size: 20rpx;
+					font-family: 'PingFang SC';
+					font-weight: 400;
+					line-height: 24rpx;
+					color: #ffffff;
+					white-space: pre;
+					display: flex;
+					flex-direction: column;
+					align-items: flex-start;
+					z-index: 3;
+					margin-left: 16rpx;
+					margin-top: 0;
+
+					.group_13792_3 {
+						width: 44rpx;
+						height: 44rpx;
+						position: relative;
+						margin-top: 16rpx;
+						margin-left: 62rpx;
+					}
+
+					.text_6 {
+						position: relative;
+						margin-top: 6rpx;
+						margin-left: 64rpx;
+					}
+				}
+			}
+		}
+
+		.rectangle_22291 {
+			position: relative;
+			width: 750rpx;
+			background-color: #f3f2f8;
+			margin-left: auto;
+			margin-right: auto;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			isolation: isolate;
+			z-index: 0;
+			margin-top: 0;
+
+			.group_48128 {
+				position: relative;
+				width: 720rpx;
+				height: 184rpx;
+				border-radius: 20rpx;
+				background-color: #ffffff;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				z-index: 2;
+				margin-top: 32rpx;
+				margin-left: 16rpx;
+
+				.group_48127 {
+					position: relative;
+					width: 196rpx;
+					height: 114rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: flex-start;
+					margin-top: 42rpx;
+					margin-left: 30rpx;
+
+					.text_7 {
+						position: relative;
+						font-size: 28rpx;
+						font-family: 'PingFang SC';
+						font-weight: 400;
+						line-height: 32rpx;
+						color: var(--, #1a1a1a);
+						white-space: pre;
+						width: max-content;
+						margin-left: auto;
+						margin-right: auto;
+						margin-top: 0;
+					}
+
+					.text_8 {
+						position: relative;
+						font-size: 22rpx;
+						font-family: 'PingFang SC';
+						font-weight: 400;
+						line-height: 30rpx;
+						color: #1a1a1a;
+						white-space: pre;
+						height: 30rpx;
+						margin-top: 24rpx;
+						margin-bottom: -4rpx;
+						width: max-content;
+						margin-left: calc(50% - 98rpx);
+						margin-right: auto;
+					}
+
+					.text_9 {
+						position: relative;
+						font-size: 22rpx;
+						font-family: 'PingFang SC';
+						font-weight: 400;
+						line-height: 30rpx;
+						color: #767676;
+						white-space: pre;
+						height: 30rpx;
+						margin-top: 14rpx;
+						margin-bottom: -4rpx;
+						width: max-content;
+						margin-left: calc(50% - 24rpx);
+						margin-right: auto;
+					}
+				}
+			}
+
+			.group_48131 {
+				position: relative;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				isolation: isolate;
+				z-index: 5;
+				margin-top: 32rpx;
+				margin-left: 16rpx;
+				padding-left: 30rpx;
+				background-color: #FFFFFF;
+				border-radius: 16rpx;
+
+				.text_10 {
+					font-size: 32rpx;
+					font-family: 'PingFang SC';
+					font-weight: 400;
+					line-height: 84rpx;
+					height: 84rpx;
+					color: #007ad8;
+					white-space: pre;
+					margin-top: 0;
+					z-index: 1;
+					position: relative;
+					margin-left: 0;
+				}
+
+				.view_404 {
+					width: 690rpx;
+					height: 1rpx;
+					position: relative;
+					border-bottom: 0.5rpx solid #d8d8d8;
+					z-index: 0;
+					margin-left: auto;
+					margin-right: 0;
+				}
+
+				.text_11 {
+					font-size: 32rpx;
+					font-family: 'PingFang SC';
+					font-weight: 400;
+					line-height: 84rpx;
+					height: 84rpx;
+					color: #007ad8;
+					white-space: pre;
+					z-index: 2;
+					position: relative;
+					margin-left: 0;
+				}
+
+				.text_12 {
+					font-size: 32rpx;
+					font-family: 'PingFang SC';
+					font-weight: 400;
+					line-height: 84rpx;
+					height: 84rpx;
+					color: #007ad8;
+					white-space: pre;
+					z-index: 3;
+					position: relative;
+					margin-left: 0;
+				}
+			}
+
+			.group_48130 {
+				position: relative;
+				width: 720rpx;
+				height: 84rpx;
+				border-radius: 16rpx;
+				background-color: #ffffff;
+				font-size: 32rpx;
+				font-family: 'PingFang SC';
+				font-weight: 400;
+				line-height: 44rpx;
+				color: #007ad8;
+				white-space: pre;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				z-index: 4;
+				margin-top: 30rpx;
+				margin-left: 16rpx;
+
+				.text_13 {
+					height: 44rpx;
+					margin-top: 26rpx;
+					margin-bottom: -6rpx;
+					position: relative;
+					margin-left: 30rpx;
+				}
+			}
+
+			.group_48129 {
+				position: relative;
+				width: 720rpx;
+				height: 84rpx;
+				border-radius: 16rpx;
+				background-color: #ffffff;
+				font-size: 32rpx;
+				font-family: 'PingFang SC';
+				font-weight: 400;
+				line-height: 44rpx;
+				color: #e44a3d;
+				white-space: pre;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				z-index: 3;
+				margin-top: 30rpx;
+				margin-left: 16rpx;
+
+				.text_14 {
+					height: 44rpx;
+					margin-top: 26rpx;
+					margin-bottom: -6rpx;
+					position: relative;
+					margin-left: 30rpx;
+				}
+			}
+		}
+	}
+
+	.xiaomi {
+		width: 750rpx;
+		height: 1826rpx;
+		overflow: hidden;
+		background: #ffffff;
+
+		.edit-btn-wrap {
+			position: fixed;
+			top: calc(var(--status-bar-height, 44px) + 20rpx);
+			right: 30rpx;
+			z-index: 100;
+		}
+
+		.edit-btn {
+			background: rgba(0, 0, 0, 0.5);
+			color: #fff;
+			padding: 16rpx 32rpx;
+			border-radius: 40rpx;
+			font-size: 26rpx;
+		}
+
+		.container {
+			width: 100%;
+			height: 100%;
+			background: #f7f7f7;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.header {
+			width: 100%;
+
+			.back-icon {
+				width: 48rpx;
+				height: 48rpx;
+				margin-top: 12rpx;
+				margin-left: 52rpx;
+			}
+		}
+
+		.avatar {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-top: 106rpx;
+
+			image {
+				width: 208rpx;
+				height: 208rpx;
+			}
+		}
+
+		.title {
+			margin-top: 40rpx;
+			font-size: 60rpx;
+			line-height: 84rpx;
+			color: #1a1a1a;
+			font-family: PingFang SC;
+			font-weight: 400;
+		}
+
+		/* 联系人卡片 */
+		.info-card {
+			width: 702rpx;
+			// height: 596rpx;
+			background: #ffffff;
+			border-radius: 28rpx;
+			margin-top: 110rpx;
+			padding: 30rpx;
+
+			.top-row {
+				display: flex;
+				align-items: center;
+
+				.phone-info {
+					display: flex;
+					flex-direction: column;
+
+					.phone {
+						font-size: 32rpx;
+						line-height: 48rpx;
+						color: #1a1a1a;
+						font-weight: 500;
+					}
+
+					.location {
+						margin-top: 10rpx;
+						font-size: 26rpx;
+						line-height: 38rpx;
+						color: #696969;
+					}
+				}
+
+				.action-icon {
+					width: 76rpx;
+					height: 76rpx;
+					margin-left: auto;
+
+					&.ml13 {
+						margin-left: 26rpx;
+					}
+				}
+			}
+
+			.video-row {
+				margin-top: 54rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				.video-text {
+					font-size: 32rpx;
+					line-height: 48rpx;
+					color: #1a1a1a;
+					font-weight: 500;
+				}
+
+				.video-icon {
+					width: 76rpx;
+					height: 76rpx;
+				}
+			}
+
+			.menu-item {
+				margin-top: 80rpx;
+				font-size: 32rpx;
+				line-height: 48rpx;
+				color: #2b7de7;
+				font-weight: 500;
+
+				&:first-of-type {
+					margin-top: 66rpx;
+				}
+			}
+		}
+
+		/* 通话记录 */
+		.record-section {
+			width: 702rpx;
+			margin-top: 40rpx;
+
+			.section-title {
+				font-size: 26rpx;
+				line-height: 32rpx;
+				color: #8a8ba6;
+			}
+
+			.record-card {
+				margin-top: 18rpx;
+				background: #ffffff;
+				border-radius: 28rpx;
+				padding: 32rpx 28rpx 40rpx;
+
+				.record-top {
+					display: flex;
+					align-items: flex-start;
+
+
+
+					.record-info {
+						margin-left: 4rpx;
+						display: flex;
+						flex-direction: column;
+
+						.record-time {
+							font-size: 32rpx;
+							line-height: 48rpx;
+							color: #e00012;
+							font-weight: 500;
+						}
+
+						.ring-row {
+							margin-top: 8rpx;
+							display: flex;
+							align-items: center;
+
+							.ring-icon {
+								width: 22rpx;
+								height: 25rpx;
+							}
+
+							.ring-text {
+								margin-left: 18rpx;
+								font-size: 26rpx;
+								line-height: 32rpx;
+								color: #6b6b6b;
+							}
+						}
+					}
+
+					.arrow-wrap {
+						margin-left: auto;
+						margin-top: 20rpx;
+
+						.arrow-icon {
+							width: 28rpx;
+							height: 28rpx;
+						}
+					}
+				}
+
+				.more-text {
+					margin-top: 70rpx;
+					font-size: 32rpx;
+					line-height: 48rpx;
+					color: #2b7de7;
+					font-weight: 500;
+				}
+			}
+		}
+
+		/* 黑名单 */
+		.black-card {
+			width: 702rpx;
+			height: 110rpx;
+			background: #ffffff;
+			border-radius: 28rpx;
+			margin-top: 20rpx;
+			display: flex;
+			align-items: center;
+			padding-left: 30rpx;
+
+			.black-text {
+				font-size: 32rpx;
+				line-height: 48rpx;
+				color: #e00012;
+				font-weight: 500;
+			}
+		}
+	}
+
+	.oppo {
+		width: 750rpx;
+		min-height: 100vh;
+		padding-bottom: 160rpx;
+		background: #f0f1f3;
+
+		.edit-btn-wrap {
+			position: fixed;
+			top: calc(var(--status-bar-height, 44px) + 20rpx);
+			right: 30rpx;
+			z-index: 100;
+		}
+
+		.edit-btn {
+			background: rgba(0, 0, 0, 0.5);
+			color: #fff;
+			padding: 16rpx 32rpx;
+			border-radius: 40rpx;
+			font-size: 26rpx;
+		}
+
+		.rectangle_22291 {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			padding-bottom: 40rpx;
+		}
+
+		.group_45764 {
+			width: 750rpx;
+			// height: 176rpx;
+		}
+
+		.flexcontainer {
+			height: 88rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 32rpx;
+		}
+
+		.group_8,
+		.group_7,
+		.group_9 {
+			width: 240rpx;
+			height: 88rpx;
+		}
+
+		.group_13815 {
+			width: 48rpx;
+			height: 48rpx;
+			margin-top: 20rpx;
+		}
+
+		.rectangle_18503 {
+			width: 240rpx;
+			height: 88rpx;
+		}
+
+		.group_47650 {
+			width: 180rpx;
+			height: 180rpx;
+			border-radius: 50%;
+			margin-top: 16rpx;
+		}
+
+		.text_1 {
+			margin-top: 36rpx;
+			font-size: 60rpx;
+			font-weight: 500;
+			color: #1a1a1a;
+		}
+
+		.flexcontainer_1 {
+			width: 680rpx;
+			display: flex;
+			justify-content: space-between;
+			margin-top: 56rpx;
+		}
+
+		.action-card {
+			width: 216rpx;
+			height: 144rpx;
+			background: #ffffff;
+			border-radius: 24rpx;
+
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+
+			font-size: 24rpx;
+			color: #1a1a1a;
+		}
+
+		.action-icon {
+			width: 48rpx;
+			height: 48rpx;
+			margin-bottom: 16rpx;
+		}
+
+		.flexcontainer_2 {
+			width: 680rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-top: 56rpx;
+		}
+
+		.text_5 {
+			font-size: 24rpx;
+			font-weight: 600;
+			color: #1a1a1a;
+		}
+
+		.text_6 {
+			font-size: 24rpx;
+			color: #059511;
+		}
+
+		.group_48093 {
+			width: 682rpx;
+			margin-top: 20rpx;
+		}
+
+		.rectangle_23161 {
+			background: #ffffff;
+			border-radius: 24rpx;
+			overflow: hidden;
+		}
+
+		.call-item {
+			padding: 32rpx 28rpx 0;
+		}
+
+		.call-top {
+			display: flex;
+			align-items: center;
+		}
+
+		.small-icon {
+			width: 26rpx;
+			height: 26rpx;
+			margin-right: 20rpx;
+		}
+
+		.call-time {
+			font-size: 32rpx;
+			font-weight: 700;
+			color: #1a1a1a;
+		}
+
+		.call-bottom {
+			display: flex;
+			align-items: center;
+			margin-top: 22rpx;
+			margin-left: 46rpx;
+		}
+
+		.status-icon {
+			width: 20rpx;
+			height: 24rpx;
+			margin-right: 12rpx;
+		}
+
+		.call-desc {
+			font-size: 28rpx;
+			color: #767676;
+		}
+
+		.extra-text {
+			margin-top: 20rpx;
+			margin-left: 46rpx;
+			font-size: 28rpx;
+			color: #767676;
+		}
+
+		.line {
+			width: 100%;
+			height: 1rpx;
+			background: #dfdfdf;
+			margin-top: 36rpx;
+		}
+
+		.no-border {
+			padding-bottom: 32rpx;
+
+			.line {
+				display: none;
+			}
+		}
+
+		/* 组 48095 */
+		.group_48095 {
+			position: relative;
+			width: 682rpx;
+			height: 280rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			z-index: 6;
+			margin-top: 32rpx;
+			// margin-left: 34rpx;
+
+			/* 矩形 23167 */
+			.rectangle_23167 {
+				position: relative;
+				width: 682rpx;
+				height: 280rpx;
+				border-radius: 24rpx;
+				background-color: #ffffff;
+				margin-left: auto;
+				margin-right: auto;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				margin-top: 0;
+			}
+
+			/* 蒙版组 13964 */
+			.group_13964_1 {
+				position: relative;
+				width: 682rpx;
+				height: 140rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				margin-top: 0;
+				margin-left: 0;
+			}
+
+			/* 矩形 23160 */
+			.rectangle_23160_3 {
+				position: relative;
+				width: 682rpx;
+				height: 140rpx;
+				margin-left: auto;
+				margin-right: auto;
+				overflow: hidden;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				isolation: isolate;
+				margin-top: 0;
+				-webkit-mask-image: linear-gradient(0, #d8d8d8, #d8d8d8);
+			}
+
+			/* flexContainer */
+			.flexcontainer_9 {
+				position: relative;
+				display: flex;
+				width: 326rpx;
+				height: 48rpx;
+				flex-direction: row;
+				align-items: flex-start;
+				z-index: 0;
+				margin-top: 30rpx;
+				margin-left: 32rpx;
+			}
+
+			/* 蒙版组 13792 */
+			.group_13792_3 {
+				width: 48rpx;
+				height: 48rpx;
+				position: relative;
+				margin-left: 0;
+				margin-top: 0;
+			}
+
+			/* 165 5463 1236 */
+			.text_15 {
+				position: absolute;
+				top: 8rpx;
+				left: 86rpx;
+				text-align: center;
+				font-size: 32rpx;
+				font-family: OPPOSans;
+				font-weight: 700;
+				line-height: 48rpx;
+				color: var(--, #1a1a1a);
+				white-space: pre;
+				height: 48rpx;
+				margin-top: -8rpx;
+				margin-bottom: -8rpx;
+				right: 0;
+				width: max-content;
+				margin-left: auto;
+				margin-right: auto;
+			}
+
+			/* flexContainer */
+			.flexcontainer_10 {
+				position: relative;
+				display: flex;
+				width: 216rpx;
+				height: 28rpx;
+				flex-direction: row;
+				align-items: flex-start;
+				z-index: 2;
+				margin-top: 4rpx;
+				margin-left: 116rpx;
+			}
+
+			/* 矩形 23163 */
+			.rectangle_23163 {
+				width: 2rpx;
+				height: 28rpx;
+				position: absolute;
+				top: 0;
+				left: 0;
+				background-color: var(--, #767676);
+				right: 66rpx;
+				margin-left: auto;
+				margin-right: auto;
+			}
+
+			/* 手机 */
+			.text_16 {
+				position: absolute;
+				top: 0;
+				left: 0;
+				font-size: 28rpx;
+				font-family: OPPOSans;
+				font-weight: 400;
+				line-height: 42rpx;
+				color: var(--, #767676);
+				white-space: pre;
+				height: 42rpx;
+				margin-top: -7rpx;
+				margin-bottom: -7rpx;
+				right: 160rpx;
+				width: max-content;
+				margin-left: auto;
+				margin-right: auto;
+			}
+
+			/* 重庆 移动 */
+			.text_17 {
+				position: absolute;
+				top: 0;
+				left: 94rpx;
+				font-size: 28rpx;
+				font-family: OPPOSans;
+				font-weight: 400;
+				line-height: 42rpx;
+				color: var(--, #767676);
+				white-space: pre;
+				height: 42rpx;
+				margin-top: -7rpx;
+				margin-bottom: -7rpx;
+				right: 0;
+				width: max-content;
+				margin-left: auto;
+				margin-right: auto;
+			}
+
+			/* 直线 393 */
+			.div_393_2 {
+				width: 572rpx;
+				height: 0;
+				position: relative;
+				border: 0.5rpx solid #dfdfdf;
+				margin-left: calc(50% - 225rpx);
+				z-index: 1;
+				margin-top: 30rpx;
+			}
+
+			/* 蒙版组 13965 */
+			.group_13965_1 {
+				position: relative;
+				width: 682rpx;
+				height: 140rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				margin-top: 0;
+				margin-left: 0;
+			}
+
+			/* 矩形 23160 */
+			.rectangle_23160_4 {
+				position: relative;
+				width: 682rpx;
+				height: 140rpx;
+				margin-left: auto;
+				margin-right: auto;
+				overflow: hidden;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				margin-top: 0;
+				-webkit-mask-image: linear-gradient(0, #d8d8d8, #d8d8d8);
+			}
+
+			/* flexContainer */
+			.flexcontainer_11 {
+				position: relative;
+				display: flex;
+				width: 212rpx;
+				height: 48rpx;
+				flex-direction: row;
+				align-items: flex-start;
+				margin-top: 26rpx;
+				margin-left: 32rpx;
+			}
+
+			/* 蒙版组 13792 */
+			.group_13792_4 {
+				width: 48rpx;
+				height: 48rpx;
+				position: relative;
+				margin-left: 0;
+				margin-top: 0;
+			}
+
+			/* 跟随系统 */
+			.text_18 {
+				position: absolute;
+				top: 8rpx;
+				left: 84rpx;
+				text-align: center;
+				font-size: 32rpx;
+				font-family: OPPOSans;
+				font-weight: 700;
+				line-height: 48rpx;
+				color: var(--, #1a1a1a);
+				white-space: pre;
+				height: 48rpx;
+				margin-top: -8rpx;
+				margin-bottom: -8rpx;
+				right: 0;
+				width: max-content;
+				margin-left: auto;
+				margin-right: auto;
+			}
+
+			/* 来电铃声 */
+			.text_19 {
+				position: relative;
+				font-size: 28rpx;
+				font-family: OPPOSans;
+				font-weight: 400;
+				line-height: 42rpx;
+				color: var(--, #767676);
+				white-space: pre;
+				height: 42rpx;
+				margin-top: 4rpx;
+				margin-bottom: -7rpx;
+				width: max-content;
+				margin-left: calc(50% - 225rpx);
+				margin-right: auto;
+			}
+		}
+
+		/* flexContainer */
+		.flexcontainer_12 {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			display: flex;
+			width: 750rpx;
+			flex-direction: row;
+			align-items: flex-start;
+			padding-top: 20rpx;
+			padding-left: 100rpx;
+			padding-bottom: 56rpx;
+			z-index: 9999;
+			margin-top: 18rpx;
+			background-color: #fff;
+
+			/* 组 48097 */
+			.group_48097 {
+				position: relative;
+				width: 48rpx;
+				height: 80rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				margin-left: 0;
+				margin-top: 0;
+			}
+
+			/* 蒙版组 13967 */
+			.group_13967 {
+				width: 48rpx;
+				height: 48rpx;
+				position: relative;
+				margin-top: 0;
+				margin-left: 0;
+			}
+
+			/* 收藏 */
+			.text_20 {
+				position: relative;
+				font-size: 20rpx;
+				font-family: OPPOSans;
+				font-weight: 500;
+				line-height: 30rpx;
+				color: var(--, #1a1a1a);
+				white-space: pre;
+				height: 30rpx;
+				margin-top: 12rpx;
+				margin-bottom: -5rpx;
+				width: max-content;
+				margin-left: auto;
+				margin-right: auto;
+			}
+
+			/* 组 48098 */
+			.group_48098 {
+				position: relative;
+				width: 48rpx;
+				height: 80rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				margin-left: 128rpx;
+				margin-top: 0;
+			}
+
+			/* 蒙版组 13967 */
+			.group_13967_1 {
+				width: 48rpx;
+				height: 48rpx;
+				position: relative;
+				margin-top: 0;
+				margin-left: 0;
+			}
+
+			/* 编辑 */
+			.text_21 {
+				position: relative;
+				font-size: 20rpx;
+				font-family: OPPOSans;
+				font-weight: 500;
+				line-height: 30rpx;
+				color: var(--, #1a1a1a);
+				white-space: pre;
+				height: 30rpx;
+				margin-top: 12rpx;
+				margin-bottom: -5rpx;
+				width: max-content;
+				margin-left: auto;
+				margin-right: auto;
+			}
+
+			/* 组 48099 */
+			.group_48099 {
+				position: relative;
+				width: 48rpx;
+				height: 80rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				margin-left: 126rpx;
+				margin-top: 0;
+			}
+
+			/* 蒙版组 13967 */
+			.group_13967_2 {
+				width: 48rpx;
+				height: 48rpx;
+				position: relative;
+				margin-top: 0;
+				margin-left: 0;
+			}
+
+			/* 分享 */
+			.text_22 {
+				position: relative;
+				font-size: 20rpx;
+				font-family: OPPOSans;
+				font-weight: 500;
+				line-height: 30rpx;
+				color: var(--, #1a1a1a);
+				white-space: pre;
+				height: 30rpx;
+				margin-top: 12rpx;
+				margin-bottom: -5rpx;
+				width: max-content;
+				margin-left: auto;
+				margin-right: auto;
+			}
+
+			/* 组 48100 */
+			.group_48100 {
+				position: relative;
+				width: 48rpx;
+				height: 80rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				margin-left: 126rpx;
+				margin-top: 0;
+			}
+
+			/* 蒙版组 13967 */
+			.group_13967_3 {
+				width: 48rpx;
+				height: 48rpx;
+				position: relative;
+				margin-top: 0;
+				margin-left: 0;
+			}
+
+			/* 更多 */
+			.text_23 {
+				position: relative;
+				font-size: 20rpx;
+				font-family: OPPOSans;
+				font-weight: 500;
+				line-height: 30rpx;
+				color: var(--, #1a1a1a);
+				white-space: pre;
+				height: 30rpx;
+				margin-top: 12rpx;
+				margin-bottom: -5rpx;
+				width: max-content;
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+	}
+
+	.vivo {
+		position: relative;
+		width: 750rpx;
+		height: 1624rpx;
+		overflow: hidden;
+		background: #ffffff;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+
+		.edit-btn-wrap {
+			position: fixed;
+			top: calc(var(--status-bar-height, 44px) + 20rpx);
+			right: 30rpx;
+			z-index: 100;
+		}
+
+		.edit-btn {
+			background: rgba(0, 0, 0, 0.5);
+			color: #fff;
+			padding: 16rpx 32rpx;
+			border-radius: 40rpx;
+			font-size: 26rpx;
+		}
+
+		.group_45764 {
+			position: relative;
+			width: 750rpx;
+			height: 88rpx;
+		}
+
+		.bars_status_bars_iphone_light {
+			position: absolute;
+			inset: 0;
+		}
+
+		.group_8 {
+			width: 48rpx;
+			height: 48rpx;
+			margin-top: 24rpx;
+			margin-left: 44rpx;
+		}
+
+		.group_13815 {
+			width: 48rpx;
+			height: 48rpx;
+		}
+
+		.div_397 {
+			width: 750rpx;
+			height: 1rpx;
+			background: #f8f8f8;
+			margin-top: 32rpx;
+		}
+
+		.group_47650 {
+			width: 188rpx;
+			height: 188rpx;
+			margin: 84rpx auto 0;
+		}
+
+		.text_1 {
+			align-self: center;
+			margin-top: 28rpx;
+			font-size: 32rpx;
+			font-weight: 400;
+			line-height: 40rpx;
+			color: #1a1a1a;
+		}
+
+		.flexcontainer {
+			width: 428rpx;
+			display: flex;
+			justify-content: space-between;
+			margin: 58rpx auto 0;
+		}
+
+		.group_48112,
+		.group_48113,
+		.group_48114 {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.group_48111,
+		.group_48111_1,
+		.group_48111_2 {
+			width: 76rpx;
+			height: 76rpx;
+			border-radius: 50%;
+			background: #f3f3f3;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.group_13792,
+		.group_13792_1,
+		.group_13792_2 {
+			width: 48rpx;
+			height: 48rpx;
+		}
+
+		.text_2,
+		.text_3,
+		.text_4 {
+			margin-top: 14rpx;
+			font-size: 24rpx;
+			line-height: 36rpx;
+			color: #1a1a1a;
+			text-align: center;
+		}
+
+		.div_398 {
+			width: 666rpx;
+			height: 1rpx;
+			background: #f8f8f8;
+			margin-top: 82rpx;
+			margin-left: 42rpx;
+		}
+
+		.text_5 {
+			margin-top: 48rpx;
+			margin-left: 42rpx;
+			font-size: 24rpx;
+			font-weight: 500;
+			line-height: 36rpx;
+			color: #686868;
+		}
+
+		.group_48115,
+		.group_48116,
+		.group_48117 {
+			width: 668rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-left: 42rpx;
+		}
+
+		.group_48115 {
+			margin-top: 66rpx;
+		}
+
+		.group_48116,
+		.group_48117 {
+			margin-top: 104rpx;
+		}
+
+		.text_6,
+		.text_8,
+		.text_10 {
+			font-size: 32rpx;
+			font-weight: 500;
+			line-height: 36rpx;
+			color: #1a1a1a;
+		}
+
+		.text_7,
+		.text_9,
+		.text_11 {
+			font-size: 28rpx;
+			font-weight: 500;
+			line-height: 42rpx;
+			color: #aaaaaa;
+		}
+	}
+
+	.huawei {
+		position: relative;
+		width: 750rpx;
+		height: 1624rpx;
+		overflow: hidden;
+		background: #f2f3f5;
+
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+
+		isolation: isolate;
+
+		.edit-btn-wrap {
+			position: fixed;
+			top: calc(var(--status-bar-height, 44px) + 20rpx);
+			right: 30rpx;
+			z-index: 100;
+		}
+
+		.edit-btn {
+			background: rgba(0, 0, 0, 0.5);
+			color: #fff;
+			padding: 16rpx 32rpx;
+			border-radius: 40rpx;
+			font-size: 26rpx;
+		}
+
+		.flexcontainer {
+			position: relative;
+			margin-bottom: 66rpx;
+			width: 750rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.group_45764 {
+				position: relative;
+				width: 88rpx;
+				height: 88rpx;
+			}
+
+			.bars_status_bars_iphone_light {
+				position: absolute;
+				inset: 0;
+			}
+
+			.group_47675 {
+				width: 136rpx;
+				height: 136rpx;
+			}
+
+			.flexcontainer_1 {
+				display: flex;
+				align-items: flex-start;
+				width: 230rpx;
+				height: 136rpx;
+
+				.group_47667,
+				.group_47619 {
+					width: 136rpx;
+					height: 136rpx;
+				}
+
+				.group_47619 {
+					margin-left: -42rpx;
+				}
+			}
+		}
+
+		.group_47650 {
+			width: 232rpx;
+			height: 232rpx;
+
+			image {
+				width: 232rpx;
+				height: 232rpx;
+			}
+
+			margin-left: 260rpx;
+		}
+
+		.text_1 {
+			height: 108rpx;
+			margin-top: 60rpx;
+			width: 100%;
+			text-align: center;
+
+			font-size: 72rpx;
+			font-weight: 700;
+			line-height: 108rpx;
+			color: #606163;
+		}
+
+		.flexcontainer_2 {
+			display: flex;
+			align-items: flex-start;
+
+			width: 462rpx;
+			height: 108rpx;
+
+			margin-top: 108rpx;
+			margin-left: 144rpx;
+
+			.group_48111,
+			.group_48112,
+			.group_48113 {
+				width: 108rpx;
+				height: 108rpx;
+			}
+
+			.group_48112 {
+				margin-left: 68rpx;
+			}
+
+			.group_48113 {
+				margin-left: 70rpx;
+			}
+		}
+
+		.group_48118 {
+			width: 690rpx;
+			height: 144rpx;
+
+			margin-top: 46rpx;
+			margin-left: 30rpx;
+
+			.rectangle_23184 {
+				width: 690rpx;
+				height: 144rpx;
+
+				border-radius: 36rpx;
+				background: #ffffff;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+
+				.text_2 {
+					margin-left: 24rpx;
+					font-size: 32rpx;
+					font-weight: 500;
+					line-height: 48rpx;
+					color: #1a1a1a;
+				}
+
+				.text_3 {
+					margin-top: 8rpx;
+					margin-left: 24rpx;
+					font-size: 28rpx;
+					line-height: 42rpx;
+					color: #686868;
+				}
+			}
+		}
+
+		.flexcontainer_3 {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			width: 634rpx;
+
+			margin-top: 64rpx;
+			margin-left: 54rpx;
+
+			.text_4 {
+				font-size: 28rpx;
+				line-height: 42rpx;
+				color: #686868;
+			}
+
+			.group_13972 {
+				width: 36rpx;
+				height: 36rpx;
+			}
+		}
+
+		.group_48119 {
+			width: 690rpx;
+			margin-top: 26rpx;
+			margin-left: 30rpx;
+
+			.rectangle_23184_1 {
+				background: #ffffff;
+				border-radius: 36rpx;
+				overflow: hidden;
+			}
+		}
+
+		.rectangle_23187,
+		.rectangle_23187_1 {
+			padding: 36rpx 24rpx;
+		}
+
+		.flexcontainer_4,
+		.flexcontainer_8 {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+		}
+
+		.flexcontainer_5,
+		.flexcontainer_9 {
+			display: flex;
+			flex-direction: column;
+		}
+
+		.text_5,
+		.text_8 {
+			font-size: 30rpx;
+			line-height: 32rpx;
+			font-weight: 500;
+		}
+
+		.text_5 {
+			color: #1a1a1a;
+		}
+
+		.text_8 {
+			color: #de4134;
+		}
+
+		.flexcontainer_6,
+		.flexcontainer_10 {
+			display: flex;
+			align-items: center;
+
+			margin-top: 20rpx;
+		}
+
+		.group_13798,
+		.group_13797,
+		.group_13797_1 {
+			width: 24rpx;
+			height: 24rpx;
+		}
+
+		.group_47607,
+		.group_47607_1,
+		.group_47608 {
+			width: 18rpx;
+			height: 20rpx;
+
+			margin-left: 10rpx;
+		}
+
+		.group_13799 {
+			width: 24rpx;
+			height: 24rpx;
+
+			margin-left: 6rpx;
+		}
+
+		.text_6,
+		.text_9 {
+			margin-left: 12rpx;
+
+			font-size: 26rpx;
+			line-height: 39rpx;
+			color: #686868;
+		}
+
+		.text_7,
+		.text_10 {
+			font-size: 26rpx;
+			line-height: 39rpx;
+			color: #686868;
+		}
+
+		.flexcontainer_7 {
+			display: flex;
+			align-items: center;
+
+			margin-top: 6rpx;
+			margin-left: 58rpx;
+		}
+
+		.div_399,
+		.div_399_1 {
+			width: 636rpx;
+			height: 1rpx;
+
+			background: #eeeeee;
+			margin: 0 auto 0;
+		}
+	}
+
+	.popup-box {
+		background: #fff;
+		border-radius: 24rpx 24rpx 0 0;
+		max-height: 80vh;
+		display: flex;
+		flex-direction: column;
+
+		.content-wrap {
+			padding: 30rpx;
+			overflow-y: auto;
+			flex: 1;
+		}
+
+		.item {
+			background: #f7f7f7;
+			border-radius: 20rpx;
+			padding: 20rpx;
+			margin-bottom: 20rpx;
+		}
+
+		input {
+			height: 80rpx;
+			background: #fff;
+			border-radius: 12rpx;
+			padding: 0 20rpx;
+			margin-top: 20rpx;
+		}
+
+		.picker {
+			height: 80rpx;
+			line-height: 80rpx;
+			background: #fff;
+			border-radius: 12rpx;
+			padding: 0 20rpx;
+			margin-top: 20rpx;
+		}
+
+		.delete {
+			height: 72rpx;
+			line-height: 72rpx;
+			text-align: center;
+			background: #fa3534;
+			color: #fff;
+			border-radius: 12rpx;
+			margin-top: 20rpx;
+		}
+
+		.add {
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+			background: #07C160;
+			color: #fff;
+			border-radius: 16rpx;
+		}
+
+		.popup-box-item {
+			margin-bottom: 20rpx;
+		}
+
+		.save-btn-wrap {
+			padding: 30rpx;
+			border-top: 1rpx solid #eee;
+			background: #fff;
+		}
+
+		.save-btn {
+			background: #007aff;
+			color: #fff;
+			font-size: 32rpx;
+			text-align: center;
+			height: 88rpx;
+			line-height: 88rpx;
+			border-radius: 44rpx;
+		}
+
+		.time-picker {
+			height: 80rpx;
+			line-height: 80rpx;
+			background: #fff;
+			border-radius: 12rpx;
+			padding: 0 20rpx;
+			margin-top: 20rpx;
+			color: #333;
+		}
+	}
+
+	/* 时间选择弹窗样式 */
+	.time-picker-box {
+		background: #fff;
+		border-radius: 24rpx 24rpx 0 0;
+		padding-bottom: 30rpx;
+	}
+
+	.time-picker-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 88rpx;
+		padding: 0 30rpx;
+		border-bottom: 1rpx solid #eee;
+	}
+
+	.time-picker-cancel,
+	.time-picker-confirm {
+		font-size: 32rpx;
+		color: #007aff;
+	}
+
+	.time-picker-title {
+		font-size: 34rpx;
+		font-weight: 500;
+		color: #333;
+	}
+</style>
\ No newline at end of file
diff --git a/static/image/call/detail/huaweiAvatar.png b/static/image/call/detail/huaweiAvatar.png
new file mode 100644
index 0000000..3f97f17
Binary files /dev/null and b/static/image/call/detail/huaweiAvatar.png differ
diff --git a/static/image/call/detail/huaweiBack.png b/static/image/call/detail/huaweiBack.png
new file mode 100644
index 0000000..f32ec23
Binary files /dev/null and b/static/image/call/detail/huaweiBack.png differ
diff --git a/static/image/call/detail/huaweiIcon1.png b/static/image/call/detail/huaweiIcon1.png
new file mode 100644
index 0000000..5ed18c1
Binary files /dev/null and b/static/image/call/detail/huaweiIcon1.png differ
diff --git a/static/image/call/detail/huaweiIcon10.png b/static/image/call/detail/huaweiIcon10.png
new file mode 100644
index 0000000..c99fa22
Binary files /dev/null and b/static/image/call/detail/huaweiIcon10.png differ
diff --git a/static/image/call/detail/huaweiIcon11.png b/static/image/call/detail/huaweiIcon11.png
new file mode 100644
index 0000000..a78e9bc
Binary files /dev/null and b/static/image/call/detail/huaweiIcon11.png differ
diff --git a/static/image/call/detail/huaweiIcon2.png b/static/image/call/detail/huaweiIcon2.png
new file mode 100644
index 0000000..e98dcb6
Binary files /dev/null and b/static/image/call/detail/huaweiIcon2.png differ
diff --git a/static/image/call/detail/huaweiIcon3.png b/static/image/call/detail/huaweiIcon3.png
new file mode 100644
index 0000000..4c14e5d
Binary files /dev/null and b/static/image/call/detail/huaweiIcon3.png differ
diff --git a/static/image/call/detail/huaweiIcon4.png b/static/image/call/detail/huaweiIcon4.png
new file mode 100644
index 0000000..b382b75
Binary files /dev/null and b/static/image/call/detail/huaweiIcon4.png differ
diff --git a/static/image/call/detail/huaweiIcon5.png b/static/image/call/detail/huaweiIcon5.png
new file mode 100644
index 0000000..67f5c97
Binary files /dev/null and b/static/image/call/detail/huaweiIcon5.png differ
diff --git a/static/image/call/detail/huaweiIcon6.png b/static/image/call/detail/huaweiIcon6.png
new file mode 100644
index 0000000..48c9888
Binary files /dev/null and b/static/image/call/detail/huaweiIcon6.png differ
diff --git a/static/image/call/detail/huaweiIcon7.png b/static/image/call/detail/huaweiIcon7.png
new file mode 100644
index 0000000..020e347
Binary files /dev/null and b/static/image/call/detail/huaweiIcon7.png differ
diff --git a/static/image/call/detail/huaweiIcon8.png b/static/image/call/detail/huaweiIcon8.png
new file mode 100644
index 0000000..8e9da89
Binary files /dev/null and b/static/image/call/detail/huaweiIcon8.png differ
diff --git a/static/image/call/detail/huaweiIcon9.png b/static/image/call/detail/huaweiIcon9.png
new file mode 100644
index 0000000..74217b2
Binary files /dev/null and b/static/image/call/detail/huaweiIcon9.png differ
diff --git a/static/image/call/detail/iosBack.png b/static/image/call/detail/iosBack.png
new file mode 100644
index 0000000..b1be9e4
Binary files /dev/null and b/static/image/call/detail/iosBack.png differ
diff --git a/static/image/call/detail/iosIcon1.png b/static/image/call/detail/iosIcon1.png
new file mode 100644
index 0000000..0fe4e2c
Binary files /dev/null and b/static/image/call/detail/iosIcon1.png differ
diff --git a/static/image/call/detail/iosIcon2.png b/static/image/call/detail/iosIcon2.png
new file mode 100644
index 0000000..2f9c75e
Binary files /dev/null and b/static/image/call/detail/iosIcon2.png differ
diff --git a/static/image/call/detail/iosIcon3.png b/static/image/call/detail/iosIcon3.png
new file mode 100644
index 0000000..8393a2f
Binary files /dev/null and b/static/image/call/detail/iosIcon3.png differ
diff --git a/static/image/call/detail/iosIcon4.png b/static/image/call/detail/iosIcon4.png
new file mode 100644
index 0000000..a1a3068
Binary files /dev/null and b/static/image/call/detail/iosIcon4.png differ
diff --git a/static/image/call/detail/oppoAvatar.png b/static/image/call/detail/oppoAvatar.png
new file mode 100644
index 0000000..a3fcd8d
Binary files /dev/null and b/static/image/call/detail/oppoAvatar.png differ
diff --git a/static/image/call/detail/oppoBC.png b/static/image/call/detail/oppoBC.png
new file mode 100644
index 0000000..47641e1
Binary files /dev/null and b/static/image/call/detail/oppoBC.png differ
diff --git a/static/image/call/detail/oppoBack.png b/static/image/call/detail/oppoBack.png
new file mode 100644
index 0000000..4a91f3f
Binary files /dev/null and b/static/image/call/detail/oppoBack.png differ
diff --git a/static/image/call/detail/oppoGD.png b/static/image/call/detail/oppoGD.png
new file mode 100644
index 0000000..aa0a3c8
Binary files /dev/null and b/static/image/call/detail/oppoGD.png differ
diff --git a/static/image/call/detail/oppoIcon1.png b/static/image/call/detail/oppoIcon1.png
new file mode 100644
index 0000000..1b6f0a4
Binary files /dev/null and b/static/image/call/detail/oppoIcon1.png differ
diff --git a/static/image/call/detail/oppoIcon2.png b/static/image/call/detail/oppoIcon2.png
new file mode 100644
index 0000000..c7b342c
Binary files /dev/null and b/static/image/call/detail/oppoIcon2.png differ
diff --git a/static/image/call/detail/oppoIcon3.png b/static/image/call/detail/oppoIcon3.png
new file mode 100644
index 0000000..641d1d3
Binary files /dev/null and b/static/image/call/detail/oppoIcon3.png differ
diff --git a/static/image/call/detail/oppoIcon4.png b/static/image/call/detail/oppoIcon4.png
new file mode 100644
index 0000000..1dce841
Binary files /dev/null and b/static/image/call/detail/oppoIcon4.png differ
diff --git a/static/image/call/detail/oppoIcon5.png b/static/image/call/detail/oppoIcon5.png
new file mode 100644
index 0000000..876c667
Binary files /dev/null and b/static/image/call/detail/oppoIcon5.png differ
diff --git a/static/image/call/detail/oppoIcon6.png b/static/image/call/detail/oppoIcon6.png
new file mode 100644
index 0000000..7fc57f0
Binary files /dev/null and b/static/image/call/detail/oppoIcon6.png differ
diff --git a/static/image/call/detail/oppoIcon7.png b/static/image/call/detail/oppoIcon7.png
new file mode 100644
index 0000000..05c222d
Binary files /dev/null and b/static/image/call/detail/oppoIcon7.png differ
diff --git a/static/image/call/detail/oppoIcon8.png b/static/image/call/detail/oppoIcon8.png
new file mode 100644
index 0000000..81c6fcf
Binary files /dev/null and b/static/image/call/detail/oppoIcon8.png differ
diff --git a/static/image/call/detail/oppoIcon9.png b/static/image/call/detail/oppoIcon9.png
new file mode 100644
index 0000000..fb6b583
Binary files /dev/null and b/static/image/call/detail/oppoIcon9.png differ
diff --git a/static/image/call/detail/oppoK1.png b/static/image/call/detail/oppoK1.png
new file mode 100644
index 0000000..1732158
Binary files /dev/null and b/static/image/call/detail/oppoK1.png differ
diff --git a/static/image/call/detail/oppoK2.png b/static/image/call/detail/oppoK2.png
new file mode 100644
index 0000000..7157cc9
Binary files /dev/null and b/static/image/call/detail/oppoK2.png differ
diff --git a/static/image/call/detail/oppoLD.png b/static/image/call/detail/oppoLD.png
new file mode 100644
index 0000000..b099ded
Binary files /dev/null and b/static/image/call/detail/oppoLD.png differ
diff --git a/static/image/call/detail/oppoWJ.png b/static/image/call/detail/oppoWJ.png
new file mode 100644
index 0000000..4850022
Binary files /dev/null and b/static/image/call/detail/oppoWJ.png differ
diff --git a/static/image/call/detail/vivoAvatar.png b/static/image/call/detail/vivoAvatar.png
new file mode 100644
index 0000000..508c97d
Binary files /dev/null and b/static/image/call/detail/vivoAvatar.png differ
diff --git a/static/image/call/detail/vivoBack.png b/static/image/call/detail/vivoBack.png
new file mode 100644
index 0000000..ff900d6
Binary files /dev/null and b/static/image/call/detail/vivoBack.png differ
diff --git a/static/image/call/detail/vivoIcon1.png b/static/image/call/detail/vivoIcon1.png
new file mode 100644
index 0000000..ffa006a
Binary files /dev/null and b/static/image/call/detail/vivoIcon1.png differ
diff --git a/static/image/call/detail/vivoIcon2.png b/static/image/call/detail/vivoIcon2.png
new file mode 100644
index 0000000..00c08d6
Binary files /dev/null and b/static/image/call/detail/vivoIcon2.png differ
diff --git a/static/image/call/detail/vivoIcon3.png b/static/image/call/detail/vivoIcon3.png
new file mode 100644
index 0000000..0ee3c7c
Binary files /dev/null and b/static/image/call/detail/vivoIcon3.png differ
diff --git a/static/image/call/detail/xiaomiAvatar.png b/static/image/call/detail/xiaomiAvatar.png
new file mode 100644
index 0000000..c2508e6
Binary files /dev/null and b/static/image/call/detail/xiaomiAvatar.png differ
diff --git a/static/image/call/detail/xiaomiBack.png b/static/image/call/detail/xiaomiBack.png
new file mode 100644
index 0000000..4a91f3f
Binary files /dev/null and b/static/image/call/detail/xiaomiBack.png differ
diff --git a/static/image/call/detail/xiaomiIcon1.png b/static/image/call/detail/xiaomiIcon1.png
new file mode 100644
index 0000000..aa832ed
Binary files /dev/null and b/static/image/call/detail/xiaomiIcon1.png differ
diff --git a/static/image/call/detail/xiaomiIcon2.png b/static/image/call/detail/xiaomiIcon2.png
new file mode 100644
index 0000000..6e53a62
Binary files /dev/null and b/static/image/call/detail/xiaomiIcon2.png differ
diff --git a/static/image/call/detail/xiaomiIcon3.png b/static/image/call/detail/xiaomiIcon3.png
new file mode 100644
index 0000000..6cec44c
Binary files /dev/null and b/static/image/call/detail/xiaomiIcon3.png differ
diff --git a/static/image/call/detail/xiaomiIcon4.png b/static/image/call/detail/xiaomiIcon4.png
new file mode 100644
index 0000000..ce2a222
Binary files /dev/null and b/static/image/call/detail/xiaomiIcon4.png differ
diff --git a/static/image/call/detail/xiaomiIcon5.png b/static/image/call/detail/xiaomiIcon5.png
new file mode 100644
index 0000000..08928cf
Binary files /dev/null and b/static/image/call/detail/xiaomiIcon5.png differ
diff --git a/static/image/call/detail/xiaomiIconback.png b/static/image/call/detail/xiaomiIconback.png
new file mode 100644
index 0000000..1be9915
Binary files /dev/null and b/static/image/call/detail/xiaomiIconback.png differ
diff --git a/static/image/watermarkBG.png b/static/image/watermarkBG.png
index 9955479..fc830a3 100644
Binary files a/static/image/watermarkBG.png and b/static/image/watermarkBG.png differ
diff --git a/store/index.js b/store/index.js
index b254c61..6a1da0e 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,108 +1,127 @@
-import { reactive, ref, watch } from 'vue';
-import { storage } from '../utils/storage';
+import {
+	reactive,
+	ref,
+	watch
+} from 'vue';
+import {
+	storage
+} from '../utils/storage';
 
 
 
 // 防抖函数
 const debounce = (fn, delay = 300) => {
-  let timer = null
-  return function (...args) {
-    if (timer) clearTimeout(timer)
-    timer = setTimeout(() => {
-      fn.apply(this, args)
-    }, delay)
-  }
+	let timer = null
+	return function(...args) {
+		if (timer) clearTimeout(timer)
+		timer = setTimeout(() => {
+			fn.apply(this, args)
+		}, delay)
+	}
 }
 
 // 定义应用的全局状态
 export const store = reactive({
-  // 用户信息
-  userInfo: storage.get('userInfo') || null,
+	// 用户信息
+	userInfo: storage.get('userInfo') || null,
 
-  // 应用设置
-  settings: storage.get('settings') || {
-    theme: 'light',
-    language: 'zh-CN',
-    notifications: true
-  },
+	// 应用设置
+	settings: storage.get('settings') || {
+		theme: 'light',
+		language: 'zh-CN',
+		notifications: true
+	},
 
-  // 系统信息（从缓存读取，避免重复调用）
-  systemInfo: uni.getStorageSync('systemInfo') || {
-    statusBarHeight: 0,
-    windowHeight: 0,
-    windowWidth: 0,
-    platform: ''
-  },
+	// 系统信息（从缓存读取，避免重复调用）
+	systemInfo: uni.getStorageSync('systemInfo') || {
+		statusBarHeight: 0,
+		windowHeight: 0,
+		windowWidth: 0,
+		platform: ''
+	},
 
-  // 账单列表
-  billList: JSON.parse(JSON.stringify(storage.get('bill_list') || [])),
+	// 账单列表
+	billList: JSON.parse(JSON.stringify(storage.get('bill_list') || [])),
+	callInfo: {}
 
 });
 
 
 // 定义操作方法
 export const useStore = () => {
-  // 账单相关操作
-  const addBill = (bill) => {
-    store.billList.unshift(bill);
-    return bill;
-  };
+	// 账单相关操作
+	const addBill = (bill) => {
+		store.billList.unshift(bill);
+		return bill;
+	};
 
-  const updateBill = (id, updates) => {
-    const index = store.billList.findIndex(bill => bill.id === id);
-    if (index !== -1) {
-      store.billList[index] = { ...store.billList[index], ...updates };
-      return store.billList[index];
-    }
-    return null;
-  };
+	const updateBill = (id, updates) => {
+		const index = store.billList.findIndex(bill => bill.id === id);
+		if (index !== -1) {
+			store.billList[index] = {
+				...store.billList[index],
+				...updates
+			};
+			return store.billList[index];
+		}
+		return null;
+	};
 
-  const deleteBill = (id) => {
-    const index = store.billList.findIndex(bill => bill.id === id);
-    if (index !== -1) {
-      store.billList.splice(index, 1);
-      return true;
-    }
-    return false;
-  };
+	const deleteBill = (id) => {
+		const index = store.billList.findIndex(bill => bill.id === id);
+		if (index !== -1) {
+			store.billList.splice(index, 1);
+			return true;
+		}
+		return false;
+	};
 
-  const getBillList = () => {
-    return JSON.parse(JSON.stringify(store.billList))
-  }
-
-  return {
-    store,
-    addBill,
-    updateBill,
-    deleteBill,
-    getBillList
-  };
+	const getBillList = () => {
+		return JSON.parse(JSON.stringify(store.billList))
+	}
+	const getCallDetail = () => {
+		return JSON.parse(JSON.stringify(store.callInfo))
+	}
+	const setCallDetail = (info) => {
+		return store.callInfo = info
+	};
+	return {
+		store,
+		addBill,
+		updateBill,
+		deleteBill,
+		getBillList,
+		setCallDetail,
+		getCallDetail
+	};
 };
 
 // 优化后的监听：使用防抖减少存储频率
 const debouncedSaveSettings = debounce((newValue) => {
-  storage.set('settings', newValue)
+	storage.set('settings', newValue)
 }, 500)
 
 watch(
-  () => store.userInfo,
-  (newValue) => storage.set('userInfo', newValue),
-  { deep: true }
+	() => store.userInfo,
+	(newValue) => storage.set('userInfo', newValue), {
+		deep: true
+	}
 );
 
 watch(
-  () => store.settings,
-  (newValue) => debouncedSaveSettings(newValue),
-  { deep: true }
+	() => store.settings,
+	(newValue) => debouncedSaveSettings(newValue), {
+		deep: true
+	}
 );
 
 // 监听billList改变自动保存
 watch(
-  () => store.billList,
-  (newValue) => {
-    console.log("store.billList changed, saving...")
-    storage.set('bill_list', newValue)
-  },
-  { deep: true }
-);
-
+	() => store.billList,
+	(newValue) => {
+		console.log("store.billList changed, saving...")
+		storage.set('bill_list', newValue)
+	}, {
+		deep: true
+	}
+);
\ No newline at end of file