3540 lines
79 KiB
Vue
3540 lines
79 KiB
Vue
<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?`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" :src="data.info.avatar" mode="aspectFill"
|
||
style="width:100%;position: absolute;bottom: 0;left: 0;z-index:0;" :style="{height:data.headerHeight+'rpx'}"></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?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,
|
||
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 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.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 * 90;
|
||
data.avatarY = -p * 0;
|
||
data.text2Y = -p * 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
|
||
console.log(data.avatarScale )
|
||
data.headerHeight=Math.max(206,(data.info.avatar?519:325) - y);
|
||
}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> |