2689 lines
57 KiB
Vue
2689 lines
57 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 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 = () => {
|
||
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()
|
||
}
|
||
/**
|
||
* 计算两个时间间隔
|
||
* @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: #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: 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: 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;
|
||
}
|
||
|
||
.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> |