<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  :style="{height:(data.info.avatar?519:325)+'px' }">
				
			</view>
			<view class="rectangle_22292"   style="position: fixed;left:0;top:0;overflow: hidden;"
				:style="{background:(data.info.avatar&&data.headerHeight!='206'?`rgba(0,0,0,0)`:'linear-gradient(180deg, #bdbec3 0%, #a0a2af 100%)')
				, height:data.headerHeight+'px'}">
				<view v-if="data.info.avatar" style="height:400rpx;"></view>
				<image v-if="data.info.avatar&&data.headerHeight!='206'" :src="data.info.avatar" mode="aspectFill" 
					style="width:100%;position: absolute;bottom: 0;left: 0;z-index:0;" :style="{height:data.headerHeight+'px'}"></image>
				<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
				<view class="flexcontainer"  @click="openEditModalDetail()">
					<image @click.stop="back()" class="group_48089" src="/static/image/call/detail/iosBack.png" :style="{position: 'fixed',
					'top': $systemInfo.statusBarHeight*2+22+'rpx', left: '26rpx'}" />
					<view class="ios-edit" :style="{position: 'fixed', 'top': $systemInfo.statusBarHeight*2+22+'rpx', right: '26rpx',opacity:1-data.scale}">编辑</view>
					<view class="text-avatar" v-if="data.info.name && data.info.avatarType === 'text'"
						:style="{opacity:data.info.avatar?0:1,transform: `scale(${data.avatarScale}) translateY(${data.avatarY}px)`}">
						{{data.info.name.substring(0,1)}}
					</view>
					<image v-else class="group_47577" :src="data.info.avatar||'/static/image/call/iosAvatar.png'"
						:style="{opacity:data.info.avatar?(data.headerHeight=='206'?1:0):1,transform: `scale(${data.avatarScale}) translateY(${data.avatarY}px)`}" />
				</view>
				<text class="text_1" v-if="!data.info.avatar"  :style="{opacity:data.scale}"> {{data.info.address}} </text>
				<text class="text_2" :style="{transform: `scale(${data.textScale}) translateY(${data.text2Y}px)`}">{{data.info.name||formatString(data.info.phone)}} </text>

				<view class="flexcontainer_1" :style="{transform: `translateY(${data.contentY}px)`}">
					<view class="group_48123" :style="{'background-color': `rgba(128,131,146,${data.info.avatar?0.5:1})`}">
						<image class="group_13792" src="/static/image/call/detail/iosIcon1.png" />
						<text class="text_3"> 信息 </text>
					</view>
					<view class="group_48124" :style="{'background-color': `rgba(128,131,146,${data.info.avatar?0.5:1})`}">
						<image class="group_13792_1" src="/static/image/call/detail/iosIcon2.png" />
						<text class="text_4"> 呼叫 </text>
					</view>
					<view class="group_48125" :style="{'background-color': `rgba(128,131,146,${data.info.avatar?0.5:1})`}">
						<image class="group_13792_2" src="/static/image/call/detail/iosIcon3.png" />
						<text class="text_5"> 视频 </text>
					</view>
					<view class="group_48126" :style="{'background-color': `rgba(128,131,146,${data.info.avatar?0.5:1})`}">
						<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>
						<template v-for="(item,index) in data.list" :key="index">
							<text class="text_8"> {{formatTime(item.start_time)[1]}}
								{{['去电','去电','去电','未接来电','来电','来电'][item.status]}} </text>
							<text class="text_9" v-if="item.start_number||Number(item.start_number)"> {{item.start_number}}秒钟 </text>
						</template>
						<br />
					</view>
				</view>
				<view class="infoBox" v-if="data.info.name">
					<view class="text-avatar2" v-if="data.info.name && data.info.avatarType === 'text'">
						{{data.info.name.substring(0,1)}}
					</view>
					<image v-else class="group_475772" :src="data.info.avatar||'/static/image/call/iosAvatar.png'" />
					<text class="dec">联系人照片与海报</text>
				</view>
				<view class="infoBox2" v-if="data.info.name">
					<view class="title">
						手机
					</view>
					<view class="dec">
						{{formatString(data.info.phone)}}
					</view>
				</view>
				<view class="infoBox2" v-if="data.info.name&&data.info.notes">
					<view class="title">
						备注
					</view>
					<view class="dec2">
						{{data.info.notes}}
					</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>
			<view style="height: 100rpx;">

			</view>
			<tabbar type2='ios'/>
		</view>
		<view class="xiaomi" v-else-if="data.type=='xiaomi'" style="padding-bottom: 30px;">
			<view class="container" >
				<view class="status" :style="{height:$systemInfo.statusBarHeight+'px'}"> </view>
				<view class="header"  @click="openEditModalDetail()">
					<image @click.stop="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"  @click="openEditModalDetail()">
						<view class="flexcontainer">
							<view class="group_8">
								<image class="group_13815" @click.stop="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 " v-for="(item,index) in data.list" :key="index" :class="{'no-border':data.list.length-1==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"  @click="openEditModalDetail()">
				<image class="group_13815" @click.stop="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 style="padding-bottom: 30px;">
			<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'}"  @click="openEditModalDetail()">
				<image class="group_47675" mode="aspectFill" @click.stop="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="响铃秒数(ios为0不显示)" />
						</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 class="modal-mask" v-if="showEditModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">编辑通话记录</text>
				</view>
				<view class="modal-body">
					<view class="form-item">
						<text class="form-label">姓名</text>
						<input class="form-input" v-model="editForm.name" placeholder="请输入姓名" />
					</view>
					<view class="form-item">
						<text class="form-label">电话</text>
						<input class="form-input" v-model="editForm.phone" placeholder="请输入电话" />
					</view>
					<view class="form-item">
						<text class="form-label">备注</text>
						<input class="form-input" v-model="editForm.notes" placeholder="请输入备注（骚扰电话）" />
					</view>
					<view class="form-item">
						<text class="form-label">运营商</text>
						<uni-data-select class="form-select" v-model="editForm.yys" :localdata="yysOptions" @change="onYysChange"
							:clear="false"></uni-data-select>
					</view>
					<view class="form-item">
						<text class="form-label">地址</text>
						<input class="form-input" v-model="editForm.address" placeholder="请输入地址" />
					</view>
					<view class="form-item">
						<text class="form-label">时间</text>
						<view class="form-input form-input-time" @click="setTimeType">
							{{ editForm.time }}
						</view>
					</view>
					<view class="form-item">
						<text class="form-label">卡几</text>
						<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="editStatusOptions"
							@change="onStatusChange" :clear="false"></uni-data-select>
					</view>
					<view class="form-item">
						<text class="form-label">电话备注</text>
						<input class="form-input" v-model="editForm.phoneNotes" placeholder="请输入电话备注" />
					</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>
					</view>
					<view class="form-item">
						<text class="form-label">头像</text>
						<view class="form-avatar-container">
							<view v-if="editForm.avatarType === 'image'" class="form-avatar" @click="choose()">
								<image :src="editForm.avatar||'/static/image/call/iosAvatar.png'" mode=""></image>
							</view>
							<view v-else-if="editForm.avatarType === 'text'" class="form-text-avatar">
								{{ editForm.name ? getAvatarText(editForm.name) : '请输入姓名' }}
							</view>
							<view v-if="editForm.avatar" class="avatar-clear" @click="clearAvatar">清除</view>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<view class="btn btn-cancel" @click="closeEditModal">取消</view>
					<view class="btn btn-confirm" @click="saveEdit">保存</view>
				</view>
			</view>

			<uni-popup ref="editTimePopup" type="bottom">
				<view class="timeBox">
					<view class="titleBox">
						<view class="title"></view>
						<view class="btns" @click="settmes">确定</view>
					</view>
					<DateTimePicker :defaultDate="editData.startDate" :mode="4" @onChange="onChangeStartDate" />
				</view>
			</uni-popup>
		</view>

		<!-- 添加联系人弹窗 -->
		<view class="modal-mask" v-if="showAddModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">添加联系人</text>
				</view>
				<view class="modal-body">
					<view class="form-item">
						<text class="form-label">姓名</text>
						<input class="form-input" v-model="addForm.name" placeholder="请输入姓名" />
					</view>
					<view class="form-item">
						<text class="form-label">电话 <text>*</text></text>
						<input class="form-input" v-model="addForm.phone" placeholder="请输入电话" />
					</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"
							:clear="false"></uni-data-select>
					</view>
					<view class="form-item">
						<text class="form-label">时间 <text>*</text></text>
						<view class="form-input form-input-time" @click="setAddTimeType">
							{{ addForm.time }}
						</view>
					</view>
					<view class="form-item">
						<text class="form-label">状态 <text>*</text></text>
						<uni-data-select class="form-select" v-model="addForm.status" :localdata="editStatusOptions"
							@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"
							:clear="false"></uni-data-select>
					</view>
					<view class="form-item">
						<text class="form-label">地址</text>
						<input class="form-input" v-model="addForm.address" placeholder="请输入地址" />
					</view>
					<view class="form-item">
						<text class="form-label">备注</text>
						<input class="form-input" v-model="addForm.notes" placeholder="请输入备注" />
					</view>
					<view class="form-item">
						<text class="form-label">电话备注</text>
						<input class="form-input" v-model="addForm.phoneNotes" placeholder="请输入电话备注" />
					</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>
					</view>
					<view class="form-item">
						<text class="form-label">头像</text>
						<view class="form-avatar-container">
							<view v-if="addForm.avatarType === 'image'" class="form-avatar" @click="choose()">
								<image :src="addForm.avatar||'/static/image/call/iosAvatar.png'" mode=""></image>
							</view>
							<view v-else-if="addForm.avatarType === 'text'" class="form-text-avatar">
								{{ addForm.name ? getAvatarText(addForm.name) : '请输入姓名' }}
							</view>
							<view v-if="addForm.avatar" class="avatar-clear" @click="clearAvatar">清除</view>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<view class="btn btn-cancel" @click="closeAddModal">取消</view>
					<view class="btn btn-confirm" @click="saveAdd">保存</view>
				</view>
			</view>
		</view>
	</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,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onReady,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	const {
		proxy
	} = getCurrentInstance();
	let recordPopup = ref()
	let timePickerPopup = ref()
	let editTimePopup = ref()
	let statusOptions = ref(['播出-未接', '播出-已接', '播出-拒接', '来电-未接', '来电-已接', '来电-拒接']);
	const tempList = ref([])
	const currentTimeIndex = ref(0)
	const currentTimeType = ref(0)
	const currentTimeValue = ref('')

	// 编辑弹窗相关
	const showEditModal = ref(false);
	const editForm = reactive({
		avatar: '',
		avatarType: 'image',
		name: '',
		phone: '',
		phoneNotes: '',
		yys: '',
		yysIndex: 0,
		kj: '1',
		address: '',
		time: '',
		status: 0,
		notes: ''
	});

	// 添加联系人相关
	const showAddModal = ref(false);
	const addForm = reactive({
		avatar: '',
		avatarType: 'image',
		name: '',
		phone: '',
		phoneNotes: '',
		yys: '',
		kj: '1',
		address: '',
		time: '',
		status: 0,
		notes: ''
	});

	// 编辑弹窗使用的选项
	const kjOptions = ref([{
			value: '1',
			text: '卡1'
		},
		{
			value: '2',
			text: '卡2'
		},
	]);
	const editStatusOptions = ref([{
			value: 0,
			text: '播出-未接'
		},
		{
			value: 1,
			text: '播出-已接'
		},
		{
			value: 2,
			text: '播出-拒接'
		},
		{
			value: 3,
			text: '来电-未接'
		},
		{
			value: 4,
			text: '来电-已接'
		},
		{
			value: 5,
			text: '来电-拒接'
		}
	]);
	const yysOptions = ref([{
			value: '移动',
			text: '移动'
		},
		{
			value: '联通',
			text: '联通'
		},
		{
			value: '电信',
			text: '电信'
		},
		{
			value: '广电',
			text: '广电'
		}
	]);
	const avatarTypeOptions = ref([{
			value: 'image',
			text: '图片'
		},
		{
			value: 'text',
			text: '文字'
		}
	]);

	// 编辑时间选择数据
	const editData = reactive({
		startDate: ''
	})
	const data = reactive({
		scale:1,
		avatarScale:1,
		textScale:1,
		contentY:0,
		avatarY:0,
		text2Y:0,
		headerHeight:0,
		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: "",
		},
		header:{
			
		}
	})
	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.info.avatar='/static/logo.png'
		data.list = data.info.list || data.list
		console.log(data.info)
		data.headerHeight=data.info.avatar?519:325
	})
	onReady(() => {

	})
	onShow(() => {

	})
	onPageScroll((e) => {
		if (data.type == 'ios') {
			const y = e.scrollTop;
			const max = 200;
			let p = Math.min(y / max, 1);
			data.contentY = -p * (data.info.avatar ? 65 : 90);
			data.avatarY = -p * 0;
			data.text2Y = -p * (data.info.avatar ? 75 : 130);
			data.avatarScale = 1 - p * 0.55; // 1 → 0.6 textScale
			data.textScale = 1 - p * 0.5; // 1 → 0.6
			
			data.scale = 1 - p * 1; // 1 → 0.6
			data.headerHeight = Math.max(206, (data.info.avatar ? 519 : 325) - y);
			console.log(data.headerHeight)
		} else {
			// 其他类型的处理
		}
	})
	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 = () => {
		let isChecked = false
		tempList.value.forEach(item => {
			if (item.start_time == '' || item.end_time == '') {
				isChecked = true
			}
		})
		if (isChecked) {
			uni.showToast({
				title: '请选择时间',
				icon: 'none'
			})
			return
		}
		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()
	}

	// ============ 编辑弹窗方法 ============
	// 打开编辑弹窗
	const openEditModalDetail = () => {
		editForm.avatar = data.info.avatar || '';
		editForm.avatarType = data.info.avatarType || 'image';
		editForm.name = data.info.name || '';
		editForm.phone = data.info.phone || '';
		editForm.phoneNotes = data.info.phoneNotes || '';
		editForm.yys = data.info.yys || '';
		editForm.yysIndex = yysOptions.value.findIndex(item => item.value === (data.info.yys || '移动'));
		editForm.kj = data.info.kj || '1';
		editForm.address = data.info.address || '';
		editForm.time = data.info.time || '';
		editForm.status = data.info.status || 0;
		editForm.notes = data.info.notes || '';
		showEditModal.value = true;
	};

	// 设置编辑时间
	function setTimeType() {
		editData.startDate = editForm.time
		editTimePopup.value.open()
	}

	// 编辑时间变化
	function onChangeStartDate(date) {
		editData.startDate = date
	}

	// 确认编辑时间
	function settmes() {
		editTimePopup.value.close()
		if (showEditModal.value) {
			editForm.time = editData.startDate
		} else if (showAddModal.value) {
			addForm.time = editData.startDate
		}
	}

	// 运营商选择变化
	const onYysChange = (e) => {
		const index = e.detail.value;
		editForm.yys = yysOptions.value[index].value;
	};

	// 关闭编辑弹窗
	const closeEditModal = () => {
		showEditModal.value = false;
	};

	// 状态选择变化
	const onStatusChange = (e) => {
		const index = e.detail.value;
		editForm.status = editStatusOptions.value[index].value;
	};

	// 卡几选择变化
	const onKjChange = (e) => {
		const index = e.detail.value;
		editForm.kj = kjOptions.value[index].value;
	};

	// 头像类型选择变化
	const onAvatarTypeChange = (e) => {
		editForm.avatarType = e.detail.value;
	};

	// 保存编辑
	const saveEdit = () => {
		if (!editForm.name && !editForm.phone) {
			uni.showToast({
				title: '请填写姓名或电话',
				icon: 'none'
			});
			return;
		}
		data.info.avatar = editForm.avatar;
		data.info.avatarType = editForm.avatarType;
		data.info.name = editForm.name;
		data.info.phone = editForm.phone;
		data.info.phoneNotes = editForm.phoneNotes;
		data.info.yys = editForm.yys;
		data.info.kj = editForm.kj;
		data.info.address = editForm.address;
		data.info.time = editForm.time;
		data.info.status = editForm.status;
		data.info.notes = editForm.notes;

		let listArr = uni.getStorageSync('callLog')
		listArr[data.index] = data.info
		uni.setStorageSync('callLog', listArr)

		closeEditModal();
		uni.showToast({
			title: '保存成功',
			icon: 'success'
		});
	};

	// ============ 添加联系人方法 ============
	// 打开添加弹窗
	const openAddModal = () => {
		const now = new Date();
		const currentYear = now.getFullYear();
		const currentMonth = now.getMonth();
		const currentDay = now.getDate();

		addForm.avatar = '';
		addForm.avatarType = 'image';
		addForm.name = '';
		addForm.phone = '';
		addForm.phoneNotes = '电话';
		addForm.yys = '';
		addForm.kj = '1';
		addForm.address = '';
		addForm.time =
			`${currentYear}-${currentMonth + 1}-${currentDay} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
		addForm.status = 0;
		addForm.notes = '';
		showAddModal.value = true;
	};

	// 关闭添加弹窗
	const closeAddModal = () => {
		showAddModal.value = false;
	};

	// 设置添加时间
	function setAddTimeType() {
		editData.startDate = addForm.time
		editTimePopup.value.open()
	}

	// 添加时运营商选择变化
	const onAddYysChange = (e) => {
		const index = e.detail.value;
		addForm.yys = yysOptions.value[index].value;
	};

	// 添加时状态选择变化
	const onAddStatusChange = (e) => {
		const index = e.detail.value;
		addForm.status = editStatusOptions.value[index].value;
	};

	// 添加时卡几选择变化
	const onAddKjChange = (e) => {
		const index = e.detail.value;
		addForm.kj = kjOptions.value[index].value;
	};

	// 添加时头像类型选择变化
	const onAddAvatarTypeChange = (e) => {
		addForm.avatarType = e.detail.value;
	};

	// 保存添加
	const saveAdd = () => {
		if (!addForm.phone) {
			uni.showToast({
				title: '请输入电话',
				icon: 'none'
			});
			return;
		}
		if (!addForm.yys) {
			uni.showToast({
				title: '请选择运营商',
				icon: 'none'
			});
			return;
		}
		if (!addForm.time) {
			uni.showToast({
				title: '请输入时间',
				icon: 'none'
			});
			return;
		}

		const newItem = {
			avatar: addForm.avatar || '',
			avatarType: addForm.avatarType || 'image',
			title: addForm.name || addForm.phone,
			name: addForm.name || '',
			phone: addForm.phone,
			phoneNotes: addForm.phoneNotes || '电话',
			yys: addForm.yys,
			kj: addForm.kj,
			address: addForm.address || '',
			time: addForm.time,
			status: addForm.status,
			notes: addForm.notes || '',
			list: []
		};

		let listArr = uni.getStorageSync('callLog') || []
		listArr.unshift(newItem)
		uni.setStorageSync('callLog', listArr)

		closeAddModal();
		uni.showToast({
			title: '添加成功',
			icon: 'success'
		});
	};

	// ============ 头像相关方法 ============
	// 获取头像文字
	const getAvatarText = (name) => {
		if (!name) return '';
		return name.charAt(0);
	};

	// 选择头像
	const choose = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: function(res) {
				const tempFilePath = res.tempFilePaths[0];
				uni.saveFile({
					tempFilePath: tempFilePath,
					success: function(ress) {
						const localPath = ress.savedFilePath;
						if (showEditModal.value) {
							editForm.avatar = localPath;
						} else if (showAddModal.value) {
							addForm.avatar = localPath;
						}
					},
					fail: function(err) {
						if (showEditModal.value) {
							editForm.avatar = tempFilePath;
						} else if (showAddModal.value) {
							addForm.avatar = tempFilePath;
						}
					}
				});
			}
		});
	};

	// 清除头像
	const clearAvatar = () => {
		if (showEditModal.value) {
			editForm.avatar = '';
		} else if (showAddModal.value) {
			addForm.avatar = '';
		}
	};

	/**
	 * 计算两个时间间隔
	 * @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;

		.text-avatar {
			width: 168rpx;
			height: 168rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			font-size: 76rpx;
			font-weight: bold;
			background: linear-gradient(180deg, #A1A8B8 0%, #878B94 100%);
			margin: 52rpx auto 0;
		}

		.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;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			overflow: hidden;

			.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: fixed;
					left: 0;
					top: 0;
				}

				.group_47577 {
					width: 168rpx;
					height: 168rpx;
					border-radius: 84rpx;
					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;
				position: sticky;
				top: 0;
				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: rgba(128,131,146,0.5);
					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;

			.infoBox2 {
				width: 720rpx;
				margin-top: 32rpx;
				margin-left: 16rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				position: relative;
				isolation: isolate;
				padding: 20rpx 30rpx;

				.title {
					font-weight: 400;
					font-size: 14px;
					color: #1A1A1A;
				}

				.dec {
					font-weight: 400;
					font-size: 16px;
					color: #007AD8;
				}

				.dec2 {
					font-weight: 400;
					font-size: 16px;
					color: #1A1A1A;
				}
			}

			.infoBox {
				display: flex;
				align-items: center;
				width: 720rpx;
				margin-top: 32rpx;
				margin-left: 16rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				position: relative;
				isolation: isolate;
				padding: 20rpx 30rpx;

				.group_475772 {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
				}

				.text-avatar2 {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: white;
					font-size: 38rpx;
					font-weight: bold;
					background: linear-gradient(180deg, #A1A8B8 0%, #878B94 100%);
				}

				.dec {
					margin-left: 16rpx;
					font-weight: 400;
					font-size: 16px;
					color: #1A1A1A;
				}
			}

			.group_48128 {
				position: relative;
				width: 720rpx;
				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;
					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: 60rpx;
						// 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%;
				height: 80rpx;
			.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;
				border-radius: 50%;
			}
		}

		.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 {
			position: relative;
			padding: 32rpx 28rpx ;
			// padding-bottom: 32rpx;
		}

		.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: calc(100% - 104rpx);
			height: 1rpx;
			background: #dfdfdf;
			position: absolute;
			bottom: 0;
			right:32rpx;
		}

		.no-border {

			.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: #1a1a1a;
				white-space: pre;
				height: 48rpx;
				margin-top: -8rpx;
				margin-bottom: -8rpx;
				right: 0;
				// width: max-content;
			}

			/* 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: #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: 532rpx;
				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: #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: 9;
			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;
			border-radius: 50%;
		}

		.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;

			border-radius: 50%;

			image {
				width: 232rpx;
				height: 232rpx;
				border-radius: 50%;
			}

			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;
	}

	/* 编辑弹窗样式 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.modal-content {
		width: 600rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		max-height: 80vh;
		overflow-y: auto;
	}

	.modal-header {
		padding: 40rpx;
		text-align: center;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.modal-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-body {
		padding: 40rpx;
		height: calc(80vh - 260rpx);
		overflow-x: scroll;
	}

	.form-item {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.form-label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;

		text {
			color: red;
		}
	}

	.form-input {
		width: 364rpx;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		color: #1A1A1A;
	}

	.form-select {
		width: 364rpx !important;
		flex: none;
	}

	.form-avatar-container {
		display: flex;
		align-items: center;
	}

	.form-avatar {
		width: 80px;
		height: 80px;
		border: 1px dashed #666;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.form-text-avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 40rpx;
		font-weight: bold;
		background: linear-gradient(180deg, #A1A8B8 0%, #878B94 100%);
		border: 1px dashed #666;
	}

	.avatar-clear {
		margin-left: 20rpx;
		color: #007AFF;
		font-size: 28rpx;
		cursor: pointer;
	}

	.form-input-time {
		line-height: 40px;
	}

	.modal-footer {
		display: flex;
		border-top: 1rpx solid #f0f0f0;
		height: 120rpx;
	}

	.btn {
		flex: 1;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		background: #F1F1F1;
		margin: 10rpx;
		border-radius: 6px;
	}

	.btn-cancel {
		border-right: 1rpx solid #f0f0f0;
		color: #666;
	}

	.btn-confirm {
		color: #fff;
		background: #007AFF;
	}

	/* 编辑时间选择弹窗样式 */
	.timeBox {
		background-color: #fff;

		.titleBox {
			padding: 10px;
			display: flex;
			justify-content: flex-end;

			.btns {
				font-size: 12px;
				color: #007AFF;
			}
		}
	}
	.ios-edit{
		width: 50px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		background: rgba(0,0,0,0.1);
		border-radius: 15px 15px 15px 15px;	
		font-weight: 400;
font-size: 16px;
color: #FFFFFF;
	}
</style>