<template>
|
<div class="call-container" :class="{'incoming-call': state === 'ringing'} ">
|
<div class="content-wrapper">
|
<div class="button-group" v-if="false">
|
<button @click="connectWS" :disabled="connected" class="btn btn-connect">连接WS</button>
|
</div>
|
<!-- 头像-->
|
<div class="contactAvatar">
|
<img :src="defaultAvatar" alt=""></img>
|
</div>
|
|
<!-- 联系人名称-->
|
<div class="contactName">
|
{{ contactName }}
|
</div>
|
|
<div class="status-group">
|
<strong v-if="state==='ringing'" class="status-text incoming-status">来电中...</strong>
|
<strong v-if="state==='calling'" class="status-text calling-status">呼叫中...</strong>
|
<strong v-if="state==='in-call'" class="status-text">通话时长：{{ durationText }}</strong>
|
<!-- 通话结束提示-->
|
<strong v-if="callEnded" class="status-text ended-status">{{ endMessage }}</strong>
|
</div>
|
<div class="button-group">
|
<!-- <button v-if="state === 'idle' && !receiveParameters && !callEnded" @click="requestCall" :disabled="!connected" class="btn btn-call">呼叫</button> -->
|
|
<button v-if="state==='ringing'" @click="acceptCall" class="btn btn-accept incoming-accept">接听</button>
|
<button v-if="state==='ringing'" @click="rejectCall" class="btn btn-reject incoming-reject">拒绝</button>
|
|
<button v-if="state==='calling' || state==='in-call'" @click="hangup" class="btn btn-hangup">挂断</button>
|
</div>
|
|
|
</div>
|
<audio ref="remoteAudio" autoplay class="hidden-audio"></audio>
|
</div>
|
</template>
|
|
<script setup>
|
import { useRoute } from 'vue-router'
|
import defaultAvatar from '@/appDataSource/appwork/defaultAvatar.svg'
|
import { showToast } from 'vant'
|
const route = useRoute()
|
/** ✅ 你的 WS 地址前缀（后面拼 userId） */
|
// const WS_BASE = 'ws://218.202.104.82:38201/ws/chat?userId='
|
// const WS_BASE = 'ws://218.202.104.82:38201/ws/chat'
|
const WS_BASE = 'ws://220.177.172.27:8100/webrtc/ws/chat'
|
const newUserInfo = ref(null)
|
const uid = ref('')
|
const peerUid = ref('')
|
// 联系人名称
|
const contactName = ref('')
|
|
const connected = ref(false)
|
const state = ref('idle') // idle | calling | ringing | in-call
|
const logText = ref('')
|
const remoteAudio = ref(null)
|
// 通话结束相关
|
const callEnded = ref(false)
|
const endMessage = ref('对方已挂断')
|
const endTimer = ref(null)
|
// token 存储
|
const accessToken = ref('')
|
|
let ws = null
|
let pc = null
|
let localStream = null
|
const pendingCandidates = []
|
|
// 来电暂存
|
let incomingFrom = null
|
let acceptedByMe = false // 我是否已经点了接听
|
let offeredByPeer = false // 是否已收到对方 offer（用于流程判断）
|
|
// 计时
|
let timer = null
|
const seconds = ref(0)
|
const durationText = computed(() => {
|
const m = String(Math.floor(seconds.value / 60)).padStart(2, '0')
|
const s = String(seconds.value % 60).padStart(2, '0')
|
return `${m}:${s}`
|
})
|
function startTimer() {
|
stopTimer()
|
seconds.value = 0
|
timer = setInterval(() => seconds.value++, 1000)
|
}
|
function stopTimer() {
|
if (timer) clearInterval(timer)
|
timer = null
|
}
|
// 解析URL参数
|
const parseUrlParams = () => {
|
// 1. 优先从route.query.voiceparams获取参数
|
if (route.query && route.query.voiceparams) {
|
try {
|
// 解码并解析voiceparams参数
|
const params = JSON.parse(decodeURIComponent(route.query.voiceparams));
|
peerUid.value = String(params.peerUid);
|
contactName.value = params.callerName || '未知联系人'
|
// 如果是来电类型，直接触发来电状态
|
if (params.type === 'incoming') {
|
log('📞 voiceparams检测到来电，直接进入来电状态');
|
incomingFrom = String(params.from);
|
peerUid.value = incomingFrom;
|
acceptedByMe = false;
|
offeredByPeer = false;
|
|
state.value = 'ringing';
|
log('📞 收到来电 call，来自', incomingFrom);
|
|
|
}
|
} catch (e) {
|
log('❌ 解析voiceparams参数失败:', String(e));
|
}
|
}
|
|
// 2. 同时保留原有的URL参数解析逻辑，作为备选
|
// const url = new URL(window.location.href);
|
// const paramsStr = url.searchParams.get('params');
|
// if (paramsStr) {
|
// try {
|
// const params = JSON.parse(decodeURIComponent(paramsStr));
|
// if (params.peerUid) {
|
// peerUid.value = String(params.peerUid);
|
// log('🔗 从URL参数获取peerUid:', params.peerUid);
|
// }
|
// } catch (e) {
|
// log('❌ 解析URL参数失败:', String(e));
|
// }
|
// }
|
}
|
|
// 从URL参数或本地存储获取用户ID
|
const getUserIdFromStorage = () => {
|
const userId = '2021474815063486465'
|
try {
|
const params = JSON.parse(decodeURIComponent(route.query.params));
|
newUserInfo.value = params.new_userInfo
|
const userIdFromParams = params.new_userInfo?.userId
|
console.log('从url获取用户id', userIdFromParams)
|
return userIdFromParams || userId
|
} catch (error) {
|
return userId
|
}
|
}
|
|
// 心跳
|
let pingTimer = null
|
// function startPing() {
|
// stopPing()
|
// // 每 25 秒发一次 ping（你后端有 PING/PONG）
|
// pingTimer = setInterval(() => {
|
// if (connected.value) send('ping', 'system', null)
|
// }, 25000)
|
// }
|
|
function stopPing() {
|
if (pingTimer) clearInterval(pingTimer)
|
pingTimer = null
|
}
|
|
function log(...args) {
|
const line = args.map(v => (typeof v === 'string' ? v : JSON.stringify(v))).join(' ')
|
logText.value += `[${new Date().toLocaleTimeString()}] ${line}\n`
|
console.log(...args)
|
}
|
|
/**
|
* ✅ 严格按后端 ChatMessage 字段发：
|
* { type, from, to, payload, timestamp }
|
* 注意：后端会用 session 的 userId 覆盖 from，但我们带上也没坏处
|
*/
|
function send(type, to, payload) {
|
if (!type) return
|
if (!ws || ws.readyState !== WebSocket.OPEN) return
|
|
const msg = {
|
type, // "call/accept/busy/offer/answer/candidate/hangup/ping"
|
from: String(uid.value),
|
to: String(to),
|
payload: payload ?? null,
|
timestamp: Date.now(),
|
}
|
ws.send(JSON.stringify(msg))
|
}
|
|
/* ---------------- WebRTC ---------------- */
|
|
function createPC() {
|
pc = new RTCPeerConnection({
|
iceServers: [{ urls: 'stun:stun.l.google.com:19302' },
|
{ urls: 'stun:stun.l.google.com:19302' },
|
{ urls: 'stun:stun1.l.google.com:19302' },
|
{ urls: 'stun:stun.stunprotocol.org:3478' },
|
// 添加多个公共TURN服务器以提高跨网络连接成功率
|
{ urls: ['turn:freeturn.net:80', 'turn:freeturn.net:443'], username: 'free', credential: 'free' },
|
// 备用TURN服务器
|
{ urls: 'turn:turn.cloudlifter.io:443', username: 'webrtc', credential: 'webrtc' }],
|
})
|
|
pc.onicecandidate = (e) => {
|
if (e.candidate) {
|
send('candidate', peerUid.value, { candidate: e.candidate.toJSON ? e.candidate.toJSON() : e.candidate })
|
}
|
}
|
// 步骤七：建立连接
|
pc.ontrack = (e) => {
|
log('✅ 收到远端音频流')
|
const stream = e.streams[0]
|
if (remoteAudio.value) {
|
remoteAudio.value.srcObject = stream
|
remoteAudio.value.play().catch(() => {
|
})
|
}
|
}
|
|
pc.onconnectionstatechange = () => {
|
log('pc.connectionState =', pc.connectionState)
|
}
|
}
|
// 步骤六：连接音频
|
async function getLocalAudio() {
|
if (localStream) return localStream
|
|
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
log('❌ 当前环境不支持 getUserMedia：请使用 https 或 localhost 打开页面')
|
throw new Error('getUserMedia not available')
|
}
|
|
try {
|
// 尝试使用完整约束
|
try {
|
localStream = await navigator.mediaDevices.getUserMedia({
|
audio: {
|
echoCancellation: true,
|
noiseSuppression: true,
|
autoGainControl: true,
|
channelCount: 1,
|
sampleRate: 16000,
|
sampleSize: 16
|
}
|
})
|
log('✅ 已获取本地麦克风（标准约束）')
|
} catch (strictError) {
|
// 如果标准约束失败，尝试最简单的约束
|
log('⚠️ 标准约束失败，尝试简化约束:', String(strictError))
|
localStream = await navigator.mediaDevices.getUserMedia({
|
audio: true
|
})
|
log('✅ 已获取本地麦克风（简化约束）')
|
}
|
return localStream
|
} catch (e) {
|
log('❌ 获取麦克风失败：', String(e))
|
|
// 提供更详细的错误信息
|
if (e.name === 'NotReadableError') {
|
log('❌ NotReadableError: 麦克风可能被其他应用占用，或权限未正确配置')
|
showToast('麦克风被占用或权限未授予')
|
} else if (e.name === 'NotAllowedError') {
|
log('❌ NotAllowedError: 用户拒绝了麦克风权限')
|
showToast('请授予麦克风权限')
|
} else if (e.name === 'NotFoundError') {
|
log('❌ NotFoundError: 未找到麦克风设备')
|
showToast('未找到麦克风设备')
|
}
|
|
throw e
|
}
|
}
|
// 步骤5 确保本地音频流已添加
|
/** ✅ 关键：只 addTrack 一次，避免 “sender already exists” */
|
async function ensureLocalTracksAdded() {
|
if (!pc) createPC()
|
const stream = await getLocalAudio()
|
|
const existingTrackIds = new Set(
|
pc.getSenders().map(s => (s.track ? s.track.id : null)).filter(Boolean)
|
)
|
|
stream.getTracks().forEach(track => {
|
if (!existingTrackIds.has(track.id)) {
|
pc.addTrack(track, stream)
|
log('addTrack ok:', track.id)
|
} else {
|
// log('skip addTrack:', track.id)
|
}
|
})
|
|
return stream
|
}
|
// 步骤4 发送本地音频流
|
async function flushCandidates() {
|
if (!pc || !pc.remoteDescription) return
|
while (pendingCandidates.length) {
|
const c = pendingCandidates.shift()
|
try {
|
await pc.addIceCandidate(new RTCIceCandidate(c))
|
} catch (e) {
|
log('addIceCandidate failed:', String(e))
|
}
|
}
|
}
|
|
/* ---------------- 信令处理 ---------------- */
|
|
async function onSignal(msg) {
|
if (!msg) return
|
const t = (msg.type || '').toString()
|
|
// ✅ 忽略后端回显给自己的消息（你的后端会回显 sender）
|
if (msg.from && String(msg.from) === String(uid.value)) {
|
return
|
}
|
|
// system 消息：login/pong/busy 仅记录
|
if (msg.from === 'system') {
|
log('system msg:', msg)
|
return
|
}
|
|
if (!t) return
|
|
if (t === 'call') {
|
// 收到来电：弹接听按钮
|
incomingFrom = String(msg.from)
|
peerUid.value = incomingFrom
|
acceptedByMe = false
|
offeredByPeer = false
|
|
state.value = 'ringing'
|
log('📞 收到来电 call，来自', incomingFrom)
|
return
|
}
|
|
if (t === 'accept') {
|
// 主叫收到 accept：开始 offer
|
log('✅ 对方接听 accept，开始建立连接（offer）')
|
await startOffer()
|
return
|
}
|
|
if (t === 'busy') {
|
log('❌ 对方忙线/拒绝')
|
cleanup(false)
|
return
|
}
|
|
if (t === 'offer') {
|
// 被叫收到 offer：只有点击接听后才真正应答（你要求“先点接听”）
|
offeredByPeer = true
|
incomingFrom = String(msg.from)
|
peerUid.value = incomingFrom
|
|
if (!acceptedByMe) {
|
state.value = 'ringing'
|
log('📩 收到 offer（但未接听），已等待用户点击接听')
|
// 暂存 offer 到一个变量
|
lastOfferSdp = msg.payload?.sdp
|
return
|
}
|
// 步骤2
|
// 已接听：直接 answer
|
await answerOffer(msg.payload?.sdp, incomingFrom)
|
return
|
}
|
// 步骤3 接收 answer
|
if (t === 'answer') {
|
log('✅ 收到 answer，通话建立')
|
if (!pc) createPC()
|
await pc.setRemoteDescription(new RTCSessionDescription(msg.payload?.sdp))
|
await flushCandidates()
|
|
state.value = 'in-call'
|
startTimer()
|
return
|
}
|
|
if (t === 'candidate') {
|
const c = msg.payload?.candidate
|
if (!c) return
|
if (pc && pc.remoteDescription) {
|
await pc.addIceCandidate(new RTCIceCandidate(c))
|
} else {
|
pendingCandidates.push(c)
|
}
|
return
|
}
|
|
if (t === 'hangup') {
|
log('📴 对方挂断')
|
cleanup(false)
|
return
|
}
|
|
if (t === 'pong') {
|
// 心跳响应
|
// log('pong')
|
return
|
}
|
}
|
|
// 暂存 offer（用于“先点接听再 answer”）
|
let lastOfferSdp = null
|
|
/* ---------------- 业务操作 ---------------- */
|
|
function connectWS() {
|
// 确保获取最新的用户ID
|
uid.value = getUserIdFromStorage()
|
|
if (ws) ws.close()
|
|
// 使用从参数中获取的token或默认token
|
const token = accessToken.value
|
// ws = new WebSocket(WS_BASE + encodeURIComponent(uid.value))
|
ws = new WebSocket(WS_BASE, token)
|
ws.onopen = () => {
|
connected.value = true
|
log('WS 已连接 userId=', uid.value)
|
// startPing()
|
}
|
|
ws.onclose = () => {
|
connected.value = false
|
log('WS 已关闭')
|
stopPing()
|
}
|
|
ws.onerror = (e) => log('WS error', e)
|
|
ws.onmessage = (e) => {
|
const msg = JSON.parse(e.data)
|
log('收到信令', msg)
|
onSignal(msg)
|
}
|
}
|
// 发送呼叫信息
|
function requestCall() {
|
state.value = 'calling'
|
incomingFrom = null
|
acceptedByMe = false
|
offeredByPeer = false
|
lastOfferSdp = null
|
|
send('call', peerUid.value, null)
|
log('➡️ 发起呼叫 call 给', peerUid.value)
|
}
|
// 接收信息
|
function acceptCall() {
|
if (!incomingFrom) return
|
acceptedByMe = true
|
|
// 先告诉对方我接听了（后端会把双方置忙）
|
send('accept', incomingFrom, null)
|
log('✅ 已点击接听，发送 accept 给', incomingFrom)
|
|
|
state.value = 'calling'
|
|
// 如果 offer 已经提前到达（我们暂存了），立刻 answer
|
if (lastOfferSdp) {
|
answerOffer(lastOfferSdp, incomingFrom)
|
lastOfferSdp = null
|
}
|
// 停止
|
const transmitData = { data: { sign:'closeBox' } }
|
uni.postMessage(transmitData)
|
}
|
|
function rejectCall() {
|
if (!incomingFrom) return
|
|
// 你后端没有 reject，用 busy 表示拒绝/不可接听
|
send('busy', incomingFrom, null)
|
log('❌ 已拒绝来电，发送 busy 给', incomingFrom)
|
const transmitData = { data: { type: 'hangupVoice',sign:'closeBox' } }
|
uni.postMessage(transmitData)
|
|
incomingFrom = null
|
acceptedByMe = false
|
offeredByPeer = false
|
lastOfferSdp = null
|
state.value = 'idle'
|
|
// 返回上一页（uni-app的语音通话列表页面）
|
if (window.uni) {
|
window.uni.navigateBack()
|
} else {
|
log('❌ uni对象不存在，无法返回上一页')
|
}
|
}
|
|
async function startOffer() {
|
if (!pc) createPC()
|
|
// ✅ 不会重复 addTrack
|
await ensureLocalTracksAdded()
|
// 步骤1：创建 offer
|
const offer = await pc.createOffer()
|
await pc.setLocalDescription(offer)
|
|
send('offer', peerUid.value, { sdp: pc.localDescription })
|
log('➡️ 已发送 offer 给', peerUid.value)
|
}
|
// 步骤2：等待 answer
|
async function answerOffer(offerSdp, from) {
|
if (!offerSdp) {
|
log('❌ offer sdp 为空，无法接听')
|
return
|
}
|
if (!pc) createPC()
|
|
await pc.setRemoteDescription(new RTCSessionDescription(offerSdp))
|
await flushCandidates()
|
|
await ensureLocalTracksAdded()
|
|
const answer = await pc.createAnswer()
|
await pc.setLocalDescription(answer)
|
|
send('answer', from, { sdp: pc.localDescription })
|
log('⬅️ 已发送 answer 给', from)
|
|
state.value = 'in-call'
|
startTimer()
|
}
|
|
function hangup() {
|
// 停止铃声
|
// const transmitData = { data: { type: 'stopVoice' } }
|
// uni.postMessage(transmitData)
|
cleanup(true)
|
}
|
|
/* ---------------- 清理 ---------------- */
|
|
function cleanup(sendToPeer) {
|
try {
|
if (sendToPeer) send('hangup', peerUid.value, null)
|
} catch {}
|
|
stopTimer()
|
|
if (pc) {
|
pc.getSenders().forEach(s => s.track && s.track.stop())
|
pc.close()
|
}
|
if (localStream) {
|
localStream.getTracks().forEach(t => t.stop())
|
}
|
|
pc = null
|
localStream = null
|
pendingCandidates.length = 0
|
|
incomingFrom = null
|
acceptedByMe = false
|
offeredByPeer = false
|
lastOfferSdp = null
|
|
state.value = 'idle'
|
|
// 清除之前的定时器
|
if (endTimer.value) {
|
clearTimeout(endTimer.value)
|
endTimer.value = null
|
}
|
|
// 根据是谁发起的挂断决定不同的行为
|
if (sendToPeer) {
|
// 自己主动挂断：不提示，不延迟，直接跳转
|
log('⏰ 自己主动挂断，直接返回')
|
callEnded.value = false
|
// 返回上一页（uni-app的语音通话列表页面）
|
if (window.uni) {
|
window.uni.navigateBack()
|
} else {
|
log('❌ uni对象不存在，无法返回上一页')
|
}
|
const transmitData = { data: { type: 'hangupVoice' } }
|
uni.postMessage(transmitData)
|
} else {
|
// 对方挂断：显示提示，延迟10秒跳转
|
callEnded.value = true
|
endMessage.value = '对方已挂断'
|
const transmitData = { data: { type: 'hangupVoice',sign:'closeBox' } }
|
uni.postMessage(transmitData)
|
// 延迟5秒后跳转页面
|
endTimer.value = setTimeout(() => {
|
// 返回上一页（uni-app的语音通话列表页面）
|
if (window.uni) {
|
window.uni.navigateBack()
|
} else {
|
log('❌ uni对象不存在，无法返回上一页')
|
}
|
|
// 重置通话结束状态
|
callEnded.value = false
|
}, 2000)
|
}
|
}
|
|
// 定义receiveParameters变量，用于模板中判断是否显示呼叫按钮
|
const receiveParameters = ref(route.query.contact || null);
|
|
onMounted(() => {
|
console.log('对方打给我的',route.query.voiceparams);
|
console.log('接收拨打电话：对方参数', receiveParameters)
|
if (route.query && route.query.params) {
|
try {
|
const params = JSON.parse(decodeURIComponent(route.query.params));
|
// 获取token
|
if (params.access_token) {
|
accessToken.value = params.access_token;
|
}
|
} catch (e) {
|
log('❌ 解析params参数失败:', String(e));
|
}
|
}
|
// 解析并使用contact参数
|
if (receiveParameters.value) {
|
try {
|
const contact = JSON.parse(decodeURIComponent(receiveParameters.value))
|
if (contact.userId) {
|
peerUid.value = contact.userId
|
contactName.value = contact.nickName || '未知联系人'
|
}
|
} catch (e) {
|
log('❌ 解析contact参数失败:', String(e))
|
}
|
}
|
|
// 解析URL参数
|
parseUrlParams()
|
// 自动连接WebSocket
|
connectWS()
|
});
|
|
// 监听连接状态，当connected变为true且有receiveParameters时自动呼叫
|
watch(() => connected.value, (newVal) => {
|
if (newVal && state.value === 'idle' && receiveParameters.value) {
|
log('📞 连接成功且有contact参数，自动发起呼叫');
|
requestCall();
|
}
|
});
|
|
|
onBeforeUnmount(() => {
|
cleanup(false)
|
stopPing()
|
if (ws) ws.close()
|
})
|
</script>
|
<style scoped lang="scss">
|
.call-container {
|
padding: 20px;
|
min-height: 100vh;
|
font-family: Arial, sans-serif;
|
background-color: #f5f5f5;
|
transition: all 0.3s ease;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
/* 来电时的全屏样式 */
|
.call-container.incoming-call {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 99999;
|
background-color: #ffffff;
|
padding: 0;
|
}
|
|
/* 通话结束状态样式 */
|
.status-text.ended-status {
|
color: #e74c3c;
|
font-size: 18px;
|
font-weight: bold;
|
margin-top: 10px;
|
text-align: center;
|
}
|
|
.content-wrapper {
|
display: flex;
|
flex-direction: column;
|
gap: 30px;
|
max-width: 600px;
|
width: 100%;
|
align-items: center;
|
padding: 20px;
|
}
|
|
.input-group {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.input-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.input-label {
|
font-weight: bold;
|
color: #333;
|
}
|
|
.input-field {
|
width: 120px;
|
padding: 8px;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
font-size: 14px;
|
}
|
|
.button-group {
|
display: flex;
|
gap: 50px;
|
flex-wrap: wrap;
|
justify-content: center;
|
margin-top: 40px;
|
}
|
|
.btn {
|
padding: 15px 30px;
|
color: white;
|
border: none;
|
border-radius: 8px;
|
cursor: pointer;
|
font-size: 16px;
|
font-weight: bold;
|
transition: all 0.3s ease;
|
min-width: 120px;
|
|
&:disabled {
|
opacity: 0.6;
|
cursor: not-allowed;
|
}
|
}
|
|
/* 来电时的接听和拒绝按钮样式 */
|
.btn.incoming-accept, .btn.incoming-reject {
|
width: 80px;
|
height: 80px;
|
border-radius: 50%;
|
padding: 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
}
|
|
.btn.incoming-accept {
|
background-color: #4CAF50;
|
transform: scale(1.1);
|
}
|
|
.btn.incoming-reject {
|
background-color: #f44336;
|
}
|
|
.btn.incoming-accept:active {
|
transform: scale(0.95);
|
}
|
|
.btn.incoming-reject:active {
|
transform: scale(0.95);
|
}
|
|
.btn-connect {
|
background-color: #4CAF50;
|
}
|
|
.btn-call {
|
background-color: #2196F3;
|
}
|
|
.btn-accept {
|
background-color: #4CAF50;
|
}
|
|
.btn-reject {
|
background-color: #f44336;
|
}
|
|
.btn-hangup {
|
background-color: #9E9E9E;
|
padding: 15px 40px;
|
min-width: 150px;
|
}
|
|
.status-group {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
align-items: center;
|
}
|
|
.status-text {
|
font-size: 18px;
|
color: #333;
|
text-align: center;
|
margin-bottom: 10px;
|
}
|
|
/* 联系人名称样式 */
|
.contactName {
|
font-size: 20px;
|
font-weight: bold;
|
color: #333;
|
text-align: center;
|
margin: 15px 0;
|
}
|
|
/* 来电状态样式 */
|
.status-text.incoming-status {
|
font-size: 24px;
|
color: #333;
|
font-weight: bold;
|
animation: pulse 1.5s infinite;
|
}
|
|
.status-text.calling-status {
|
font-size: 20px;
|
color: #666;
|
}
|
|
/* 呼吸灯动画 */
|
@keyframes pulse {
|
0% {
|
opacity: 1;
|
transform: scale(1);
|
}
|
50% {
|
opacity: 0.7;
|
transform: scale(1.05);
|
}
|
100% {
|
opacity: 1;
|
transform: scale(1);
|
}
|
}
|
|
.tip-message {
|
margin-top: 15px;
|
color: #666;
|
text-align: center;
|
}
|
|
.log-container {
|
margin-top: 20px;
|
max-width: 600px;
|
margin-left: auto;
|
margin-right: auto;
|
}
|
|
.log-box {
|
background-color: white;
|
border: 1px solid #ddd;
|
border-radius: 8px;
|
padding: 10px;
|
}
|
|
.log-title {
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 8px;
|
}
|
|
.log-content {
|
max-height: 200px;
|
overflow: auto;
|
background-color: #fafafa;
|
padding: 10px;
|
border-radius: 4px;
|
font-size: 12px;
|
line-height: 1.4;
|
}
|
|
.hidden-audio {
|
display: none;
|
}
|
|
/* 头像样式 */
|
.contactAvatar {
|
width: 180px;
|
height: 180px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50%;
|
background-color: #f0f0f0;
|
overflow: hidden;
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
}
|
|
/* 来电时的头像样式 */
|
.call-container.incoming-call .contactAvatar {
|
width: 180px;
|
height: 180px;
|
}
|
</style>
|
