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