75 lines
2.4 KiB
Vue
75 lines
2.4 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div
|
|
class="fixed z-[9999] top-8 right-8 w-80 bg-[#1e1e24] border border-gray-700 rounded-2xl shadow-2xl overflow-hidden animate-slide-in"
|
|
>
|
|
<div class="p-6 flex flex-col items-center">
|
|
<!-- 头像区 -->
|
|
<div class="relative mb-4">
|
|
<Avatar
|
|
:name="callState.inviterName"
|
|
size="xl"
|
|
class="ring-4 ring-gray-800 shadow-lg"
|
|
/>
|
|
<div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-4 border-gray-800 flex items-center justify-center">
|
|
<i class="fas fa-video text-white text-[10px]"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-white font-bold text-lg mb-1">{{ callState.inviterName }}</h3>
|
|
<p class="text-gray-400 text-sm mb-6">邀请你进行群视频通话...</p>
|
|
|
|
<!-- 按钮区 -->
|
|
<div class="flex gap-4 w-full">
|
|
<button
|
|
class="flex-1 py-2.5 bg-red-500/10 hover:bg-red-500/20 text-red-500 rounded-xl font-medium transition flex items-center justify-center gap-2"
|
|
@click="groupWebRTC.rejectInvite()"
|
|
>
|
|
<i class="fas fa-times"></i>
|
|
拒绝
|
|
</button>
|
|
|
|
<button
|
|
class="flex-1 py-2.5 bg-green-500 hover:bg-green-600 text-white rounded-xl font-medium transition shadow-lg shadow-green-500/20 flex items-center justify-center gap-2"
|
|
@click="groupWebRTC.acceptInvite()"
|
|
>
|
|
<i class="fas fa-video"></i>
|
|
接听
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 进度条倒计时 -->
|
|
<div class="h-1 bg-gray-800 w-full">
|
|
<div class="h-full bg-green-500 animate-progress origin-left"></div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useGroupWebRTC } from '@/composables/useGroupWebRTC'
|
|
import Avatar from '@/components/common/Avatar.vue'
|
|
|
|
const groupWebRTC = useGroupWebRTC()
|
|
const { callState } = groupWebRTC
|
|
</script>
|
|
|
|
<style scoped>
|
|
@keyframes slideIn {
|
|
from { transform: translateX(100%); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
.animate-slide-in {
|
|
animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
@keyframes progress {
|
|
from { transform: scaleX(1); }
|
|
to { transform: scaleX(0); }
|
|
}
|
|
.animate-progress {
|
|
animation: progress 30s linear forwards;
|
|
}
|
|
</style>
|