Simon
733 lines
32 KiB
Vue
733 lines
32 KiB
Vue
<!-- =============================================================================
|
||
企微IT智能服务台 — H5用户端「呼叫坐席」动画弹窗
|
||
=============================================================================
|
||
流程（简化版）：
|
||
1. 按钮出现后点击 → 弹出此弹窗
|
||
2. 立即随机播放趣味动画 + 话术，同时发 shake 请求
|
||
3. 发送成功 → 显示成功提示，3秒后自动关闭
|
||
|
||
注意：问题描述已在聊天中完成（AI 实质性回复 >= 3 轮），弹窗不需要再录入。
|
||
|
||
七种动画场景（随机选一种）：
|
||
1. 🙋 招手 — "看这里！看我这里...我有个问题！"
|
||
2. 🪑 拍桌子 — "快快快！我等不及了！"
|
||
3. 💀 劈稻草人 — "这个问题不解决我就要原地爆炸了💥"
|
||
4. 🍉 砍西瓜 — "IT！救我！这个问题卡住了🍉"
|
||
5. 🔔 摇铃铛 — "叮叮叮！有人吗！IT 在线吗！"
|
||
6. 💣 大炮发射 — "开炮！这个问题必须解决了！"
|
||
7. 🚀 导弹发射 — "发射！紧急呼叫 IT 特种部队！"
|
||
============================================================================= -->
|
||
<template>
|
||
<Teleport to="body">
|
||
<Transition name="modal-fade">
|
||
<div v-if="visible" class="call-modal__overlay" @click.self="handleClose">
|
||
<Transition name="modal-zoom" appear>
|
||
<div class="call-modal call-modal--compact" v-if="visible">
|
||
|
||
<!-- ========== 动画场景 + 话术 ========== -->
|
||
<div class="call-modal__step">
|
||
<div class="call-modal__header">
|
||
<span class="call-modal__icon">🔔</span>
|
||
<h3>呼叫人工坐席帮助...</h3>
|
||
</div>
|
||
<div class="call-modal__body call-modal__body--center">
|
||
|
||
<!-- 场景SVG动画区域（根据 selectedScene 渲染对应场景） -->
|
||
|
||
<!-- 场景1：招手 🙋 -->
|
||
<div v-if="selectedScene === 1" class="scene scene--hand">
|
||
<svg viewBox="0 0 200 180" xmlns="http://www.w3.org/2000/svg" class="scene__svg">
|
||
<rect x="0" y="140" width="200" height="40" fill="#E8EAF6"/>
|
||
<rect x="45" y="75" width="110" height="65" rx="10" fill="#ECEFF1"/>
|
||
<rect x="50" y="80" width="100" height="55" rx="8" fill="#CFD8DC"/>
|
||
<rect x="55" y="85" width="40" height="25" rx="3" fill="#90CAF9"/>
|
||
<rect x="100" y="85" width="40" height="25" rx="3" fill="#90CAF9"/>
|
||
<circle cx="135" cy="70" r="16" fill="#F5C6A0"/>
|
||
<circle cx="130" cy="67" r="2" fill="#333"/>
|
||
<circle cx="140" cy="67" r="2" fill="#333"/>
|
||
<path d="M130 75 Q135 79 140 75" stroke="#333" stroke-width="1.5" fill="none"/>
|
||
<rect x="12" y="72" width="30" height="50" rx="8" fill="#F5C6A0"/>
|
||
<g class="hand-arm">
|
||
<line x1="42" y1="80" x2="55" y2="55" stroke="#F5C6A0" stroke-width="8" stroke-linecap="round"/>
|
||
</g>
|
||
<g class="bubble-float">
|
||
<rect x="55" y="36" width="100" height="24" rx="12" fill="#FF9800"/>
|
||
<text x="105" y="52" text-anchor="middle" fill="white" font-size="11" font-weight="bold">看这里！🙋</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 场景2：拍桌子 🪑 -->
|
||
<div v-else-if="selectedScene === 2" class="scene scene--pound">
|
||
<svg viewBox="0 0 200 180" xmlns="http://www.w3.org/2000/svg" class="scene__svg">
|
||
<rect x="0" y="140" width="200" height="40" fill="#D7CCC8"/>
|
||
<rect x="30" y="105" width="140" height="35" rx="6" fill="#8D6E63"/>
|
||
<rect x="35" y="110" width="130" height="25" rx="4" fill="#A1887F"/>
|
||
<rect x="20" y="75" width="35" height="50" rx="8" fill="#795548"/>
|
||
<circle cx="37" cy="60" r="16" fill="#F5C6A0"/>
|
||
<g class="pound-fists">
|
||
<circle cx="75" cy="98" r="9" fill="#F5C6A0"/>
|
||
<circle cx="105" cy="98" r="9" fill="#F5C6A0"/>
|
||
</g>
|
||
<g class="splash-lines">
|
||
<line x1="68" y1="90" x2="62" y2="82" stroke="#FF5722" stroke-width="2"/>
|
||
<line x1="80" y1="88" x2="80" y2="78" stroke="#FF5722" stroke-width="2"/>
|
||
<line x1="90" y1="88" x2="95" y2="78" stroke="#FF5722" stroke-width="2"/>
|
||
<line x1="110" y1="90" x2="110" y2="80" stroke="#FF5722" stroke-width="2"/>
|
||
<line x1="120" y1="90" x2="126" y2="82" stroke="#FF5722" stroke-width="2"/>
|
||
</g>
|
||
<g class="bubble-float">
|
||
<rect x="90" y="36" width="100" height="24" rx="12" fill="#FF5722"/>
|
||
<text x="140" y="52" text-anchor="middle" fill="white" font-size="11" font-weight="bold">快快快！🪑</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 场景3-7略（同原版，保留全部7个场景的SVG） -->
|
||
<!-- 场景3：劈稻草人 💀 -->
|
||
<div v-else-if="selectedScene === 3" class="scene scene--scarecrow">
|
||
<svg viewBox="0 0 200 180" xmlns="http://www.w3.org/2000/svg" class="scene__svg">
|
||
<rect x="0" y="140" width="200" height="40" fill="#C8E6C9"/>
|
||
<rect x="145" y="100" width="6" height="40" fill="#795548"/>
|
||
<rect x="133" y="95" width="30" height="5" rx="2" fill="#795548"/>
|
||
<circle cx="148" cy="85" r="14" fill="#FFE082"/>
|
||
<line x1="148" y1="74" x2="148" y2="70" stroke="#333" stroke-width="1.5"/>
|
||
<rect x="25" y="72" width="30" height="50" rx="8" fill="#1565C0"/>
|
||
<circle cx="40" cy="57" r="16" fill="#F5C6A0"/>
|
||
<g class="slash-blade">
|
||
<rect x="55" y="40" width="6" height="50" rx="2" fill="#B0BEC5"/>
|
||
<rect x="52" y="38" width="12" height="8" rx="2" fill="#90A4AE"/>
|
||
</g>
|
||
<g class="explosion-effect">
|
||
<circle cx="148" cy="85" r="10" fill="#FF5722" opacity="0"/>
|
||
</g>
|
||
<g class="bubble-float">
|
||
<rect x="5" y="5" width="105" height="24" rx="12" fill="#D32F2F"/>
|
||
<text x="57" y="21" text-anchor="middle" fill="white" font-size="10" font-weight="bold">我要爆炸了💥</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 场景4：砍西瓜 🍉 -->
|
||
<div v-else-if="selectedScene === 4" class="scene scene--watermelon">
|
||
<svg viewBox="0 0 200 180" xmlns="http://www.w3.org/2000/svg" class="scene__svg">
|
||
<rect x="0" y="140" width="200" height="40" fill="#C8E6C9"/>
|
||
<g class="melon">
|
||
<ellipse cx="140" cy="125" rx="25" ry="18" fill="#4CAF50"/>
|
||
<ellipse cx="140" cy="122" rx="18" ry="10" fill="#F44336"/>
|
||
</g>
|
||
<rect x="25" y="75" width="30" height="47" rx="8" fill="#1565C0"/>
|
||
<circle cx="40" cy="60" r="16" fill="#F5C6A0"/>
|
||
<g class="knife">
|
||
<rect x="55" y="42" width="6" height="45" rx="2" fill="#B0BEC5"/>
|
||
<rect x="52" y="40" width="12" height="8" rx="2" fill="#90A4AE"/>
|
||
</g>
|
||
<g class="juice-splash">
|
||
<circle cx="130" cy="110" r="2" fill="#F44336" opacity="0"/>
|
||
<circle cx="145" cy="105" r="2.5" fill="#F44336" opacity="0"/>
|
||
<circle cx="155" cy="112" r="1.5" fill="#F44336" opacity="0"/>
|
||
</g>
|
||
<g class="bubble-float">
|
||
<rect x="5" y="5" width="105" height="24" rx="12" fill="#43A047"/>
|
||
<text x="57" y="21" text-anchor="middle" fill="white" font-size="10" font-weight="bold">IT救我！🍉</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 场景5：摇传菜铃 🔔 -->
|
||
<div v-else-if="selectedScene === 5" class="scene scene--bell">
|
||
<svg viewBox="0 0 200 180" xmlns="http://www.w3.org/2000/svg" class="scene__svg">
|
||
<rect x="0" y="140" width="200" height="40" fill="#FFF3E0"/>
|
||
<rect x="25" y="70" width="30" height="52" rx="8" fill="#FF9800"/>
|
||
<circle cx="40" cy="55" r="16" fill="#F5C6A0"/>
|
||
<g class="bell-left">
|
||
<path d="M52 72 Q52 58 60 50 Q68 42 72 50 Q76 58 74 72" fill="#FFD54F" stroke="#FFA000" stroke-width="1.5"/>
|
||
<ellipse cx="63" cy="72" rx="9" ry="3" fill="#FFA000"/>
|
||
</g>
|
||
<g class="bell-right">
|
||
<path d="M92 72 Q92 58 100 50 Q108 42 112 50 Q116 58 114 72" fill="#FFD54F" stroke="#FFA000" stroke-width="1.5"/>
|
||
<ellipse cx="103" cy="72" rx="9" ry="3" fill="#FFA000"/>
|
||
</g>
|
||
<g class="sound-waves">
|
||
<circle cx="160" cy="55" r="10" fill="none" stroke="#FF9800" stroke-width="1.5" opacity="0"/>
|
||
<circle cx="160" cy="55" r="16" fill="none" stroke="#FF9800" stroke-width="1.5" opacity="0"/>
|
||
<circle cx="160" cy="55" r="22" fill="none" stroke="#FF9800" stroke-width="1" opacity="0"/>
|
||
</g>
|
||
<g class="bubble-float">
|
||
<rect x="5" y="5" width="105" height="24" rx="12" fill="#FF9800"/>
|
||
<text x="57" y="21" text-anchor="middle" fill="white" font-size="10" font-weight="bold">叮叮叮！有人吗</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 场景6：大炮发射 💣 -->
|
||
<div v-else-if="selectedScene === 6" class="scene scene--cannon">
|
||
<svg viewBox="0 0 200 180" xmlns="http://www.w3.org/2000/svg" class="scene__svg">
|
||
<rect x="0" y="145" width="200" height="35" fill="#D7CCC8"/>
|
||
<rect x="55" y="132" width="50" height="16" rx="3" fill="#5D4037"/>
|
||
<circle cx="80" cy="138" r="9" fill="#4E342E"/>
|
||
<g class="cannon-barrel">
|
||
<rect x="58" y="110" width="55" height="14" rx="4" fill="#616161"/>
|
||
<rect x="108" y="108" width="12" height="18" rx="3" fill="#757575"/>
|
||
</g>
|
||
<g class="fuse">
|
||
<path d="M58 117 Q52 115 48 118 Q44 121 40 117" stroke="#FF9800" stroke-width="2" fill="none"/>
|
||
<circle cx="38" cy="116" r="3" fill="#FF5722" class="fuse-spark"/>
|
||
</g>
|
||
<g class="cannonball">
|
||
<circle cx="120" cy="105" r="7" fill="#37474F"/>
|
||
</g>
|
||
<g class="explosion">
|
||
<circle cx="170" cy="60" r="18" fill="#FF5722" opacity="0" class="blast-main"/>
|
||
<circle cx="170" cy="60" r="12" fill="#FFC107" opacity="0" class="blast-inner"/>
|
||
<line x1="170" y1="40" x2="170" y2="30" stroke="#FF5722" stroke-width="3" opacity="0" class="blast-ray ray-1"/>
|
||
<line x1="185" y1="48" x2="192" y2="42" stroke="#FF5722" stroke-width="3" opacity="0" class="blast-ray ray-2"/>
|
||
<line x1="188" y1="60" x2="196" y2="60" stroke="#FF5722" stroke-width="3" opacity="0" class="blast-ray ray-3"/>
|
||
<line x1="185" y1="72" x2="192" y2="78" stroke="#FF5722" stroke-width="3" opacity="0" class="blast-ray ray-4"/>
|
||
<line x1="170" y1="80" x2="170" y2="90" stroke="#FF5722" stroke-width="3" opacity="0" class="blast-ray ray-5"/>
|
||
<line x1="155" y1="72" x2="148" y2="78" stroke="#FF5722" stroke-width="3" opacity="0" class="blast-ray ray-6"/>
|
||
<line x1="152" y1="60" x2="144" y2="60" stroke="#FF5722" stroke-width="3" opacity="0" class="blast-ray ray-7"/>
|
||
<line x1="155" y1="48" x2="148" y2="42" stroke="#FF5722" stroke-width="3" opacity="0" class="blast-ray ray-8"/>
|
||
</g>
|
||
<g class="target">
|
||
<circle cx="170" cy="55" r="14" fill="none" stroke="#F44336" stroke-width="2"/>
|
||
<circle cx="170" cy="55" r="8" fill="none" stroke="#F44336" stroke-width="1.5"/>
|
||
<circle cx="170" cy="55" r="2" fill="#F44336"/>
|
||
<text x="170" y="38" text-anchor="middle" fill="#F44336" font-size="9" font-weight="bold">BUG</text>
|
||
</g>
|
||
<rect x="5" y="75" width="30" height="57" rx="7" fill="#795548"/>
|
||
<circle cx="20" cy="60" r="16" fill="#F5C6A0"/>
|
||
<circle cx="15" cy="57" r="2" fill="#333"/>
|
||
<circle cx="25" cy="57" r="2" fill="#333"/>
|
||
<path d="M14 66 Q20 70 26 66" stroke="#333" stroke-width="1.5" fill="none"/>
|
||
<line x1="35" y1="85" x2="48" y2="100" stroke="#F5C6A0" stroke-width="7" stroke-linecap="round" class="gunner-arm"/>
|
||
<g class="bubble-float">
|
||
<rect x="5" y="5" width="95" height="24" rx="12" fill="#FF5722"/>
|
||
<text x="52" y="21" text-anchor="middle" fill="white" font-size="11" font-weight="bold">开炮！💣</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 场景7：导弹发射 🚀 -->
|
||
<div v-else-if="selectedScene === 7" class="scene scene--missile">
|
||
<svg viewBox="0 0 200 180" xmlns="http://www.w3.org/2000/svg" class="scene__svg">
|
||
<rect x="0" y="0" width="200" height="140" fill="#E3F2FD"/>
|
||
<rect x="0" y="140" width="200" height="40" fill="#BDBDBD"/>
|
||
<rect x="85" y="130" width="30" height="12" rx="2" fill="#616161"/>
|
||
<rect x="88" y="142" width="8" height="10" fill="#757575"/>
|
||
<rect x="104" y="142" width="8" height="10" fill="#757575"/>
|
||
<g class="missile-body">
|
||
<rect x="94" y="50" width="12" height="65" rx="4" fill="#E0E0E0"/>
|
||
<path d="M94 50 L100 35 L106 50 Z" fill="#F44336"/>
|
||
<polygon points="94,108 86,115 94,112" fill="#F44336"/>
|
||
<polygon points="106,108 114,115 106,112" fill="#F44336"/>
|
||
</g>
|
||
<g class="rocket-flame">
|
||
<ellipse cx="100" cy="118" rx="4" ry="10" fill="#FF9800" class="flame-outer"/>
|
||
<ellipse cx="100" cy="116" rx="2" ry="6" fill="#FFEB3B" class="flame-inner"/>
|
||
</g>
|
||
<g class="smoke">
|
||
<circle cx="88" cy="145" r="8" fill="#CFD8DC" opacity="0" class="smoke-puff puff-1"/>
|
||
<circle cx="112" cy="145" r="8" fill="#CFD8DC" opacity="0" class="smoke-puff puff-2"/>
|
||
<circle cx="100" cy="155" r="10" fill="#CFD8DC" opacity="0" class="smoke-puff puff-3"/>
|
||
</g>
|
||
<g class="trail">
|
||
<path d="M100 130 L100 145" stroke="#FFC107" stroke-width="2" opacity="0" class="trail-line"/>
|
||
</g>
|
||
<rect x="15" y="80" width="28" height="52" rx="7" fill="#1565C0"/>
|
||
<circle cx="29" cy="65" r="16" fill="#F5C6A0"/>
|
||
<rect x="18" y="58" width="22" height="8" rx="3" fill="#333" opacity="0.7"/>
|
||
<circle cx="24" cy="62" r="1.5" fill="#FFF"/>
|
||
<circle cx="34" cy="62" r="1.5" fill="#FFF"/>
|
||
<ellipse cx="29" cy="72" rx="4" ry="3" fill="#333"/>
|
||
<line x1="43" y1="90" x2="60" y2="100" stroke="#F5C6A0" stroke-width="7" stroke-linecap="round"/>
|
||
<rect x="55" y="105" width="15" height="20" rx="3" fill="#424242"/>
|
||
<circle cx="62.5" cy="112" r="3" fill="#F44336" class="launch-button"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- 话术文字 -->
|
||
<div class="call-modal__speech-text">
|
||
<span class="call-modal__speech-emoji">{{ sceneEmoji }}</span>
|
||
<span class="call-modal__speech-content">{{ sceneText }}</span>
|
||
</div>
|
||
|
||
<!-- 发送状态 -->
|
||
<div v-if="sending" class="call-modal__sending">
|
||
<span class="call-modal__dot-flashing"></span>
|
||
<span>正在通知 IT 坐席...</span>
|
||
</div>
|
||
<div v-if="sendSuccess" class="call-modal__success">
|
||
✅ 呼叫成功！坐席马上就来～
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部：关闭按钮 -->
|
||
<div class="call-modal__footer call-modal__footer--center">
|
||
<button
|
||
v-if="sendSuccess"
|
||
class="call-modal__btn call-modal__btn--primary call-modal__btn--large"
|
||
@click="handleClose"
|
||
>好的，返回聊天</button>
|
||
<button
|
||
v-else
|
||
class="call-modal__btn call-modal__btn--cancel"
|
||
@click="handleClose"
|
||
>取消</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</Transition>
|
||
</div>
|
||
</Transition>
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
/**
|
||
* CallAgentModal — 「呼叫坐席」动画弹窗（简化版）
|
||
*
|
||
* 流程：打开 → 随机播放趣味动画 + 发 shake 请求 → 关闭
|
||
* 前提：用户已在聊天中描述问题，AI 已回复 >= 3 轮
|
||
*/
|
||
import { ref, computed, watch } from 'vue'
|
||
import { useConversationStore } from '@/stores/conversation'
|
||
|
||
const props = defineProps<{
|
||
visible: boolean
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'update:visible', value: boolean): void
|
||
(e: 'call-success'): void
|
||
}>()
|
||
|
||
const store = useConversationStore()
|
||
|
||
// ── 状态 ──
|
||
const selectedScene = ref<number>(1)
|
||
const sending = ref<boolean>(false)
|
||
const sendSuccess = ref<boolean>(false)
|
||
|
||
// ── 场景配置 ──
|
||
const scenes = [
|
||
{ id: 1, emoji: '🙋', text: '看这里！看我这里...我有个问题！', weight: 3 },
|
||
{ id: 2, emoji: '🪑', text: '快快快！我等不及了！', weight: 3 },
|
||
{ id: 3, emoji: '💀', text: '这个问题不解决我就要原地爆炸了💥', weight: 1.5 },
|
||
{ id: 4, emoji: '🍉', text: 'IT！救我！这个问题卡住我了🍉', weight: 1.5 },
|
||
{ id: 5, emoji: '🔔', text: '叮叮叮！有人吗！IT 在线吗！', weight: 1 },
|
||
{ id: 6, emoji: '💣', text: '开炮！💣 这个问题必须解决了！', weight: 1.5 },
|
||
{ id: 7, emoji: '🚀', text: '发射！🚀 紧急呼叫 IT 特种部队！', weight: 1.5 },
|
||
] as const
|
||
|
||
/**
|
||
* 固定使用场景5：摇铃铛 🔔
|
||
* 不再随机选择，回归统一的摇铃呼叫体验
|
||
*/
|
||
function pickScene(): number {
|
||
return 5
|
||
}
|
||
|
||
const sceneText = computed(() => scenes.find(s => s.id === selectedScene.value)?.text ?? '')
|
||
const sceneEmoji = computed(() => scenes.find(s => s.id === selectedScene.value)?.emoji ?? '🙋')
|
||
|
||
// ── 弹窗打开时自动发起呼叫 ──
|
||
watch(() => props.visible, (newVal) => {
|
||
if (newVal) {
|
||
startCall()
|
||
}
|
||
})
|
||
|
||
async function startCall(): Promise<void> {
|
||
selectedScene.value = pickScene()
|
||
sending.value = true
|
||
sendSuccess.value = false
|
||
|
||
try {
|
||
await store.shakeAgent()
|
||
sendSuccess.value = true
|
||
emit('call-success')
|
||
|
||
// 3秒后自动关闭
|
||
setTimeout(() => {
|
||
if (sendSuccess.value) handleClose()
|
||
}, 4000)
|
||
} catch (err) {
|
||
// 发送失败，关闭弹窗
|
||
handleClose()
|
||
} finally {
|
||
sending.value = false
|
||
}
|
||
}
|
||
|
||
function handleClose(): void {
|
||
emit('update:visible', false)
|
||
// 重置状态
|
||
setTimeout(() => {
|
||
sending.value = false
|
||
sendSuccess.value = false
|
||
}, 300)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* ==========================================================================
|
||
弹窗容器
|
||
========================================================================== */
|
||
.call-modal__overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0,0,0,0.5);
|
||
z-index: 9999;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.call-modal {
|
||
background: var(--bg-secondary);
|
||
border-radius: 16px;
|
||
width: 88vw;
|
||
max-width: 360px;
|
||
max-height: 85vh;
|
||
overflow-y: auto;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||
}
|
||
.call-modal--compact {
|
||
max-width: 340px;
|
||
}
|
||
.call-modal__header {
|
||
text-align: center;
|
||
padding: 20px 16px 8px;
|
||
}
|
||
.call-modal__icon { font-size: 32px; }
|
||
.call-modal__header h3 {
|
||
margin: 8px 0 4px;
|
||
font-size: 17px;
|
||
color: var(--text-primary);
|
||
}
|
||
.call-modal__body { padding: 12px 16px; }
|
||
.call-modal__body--center {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.call-modal__footer {
|
||
padding: 12px 16px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
}
|
||
.call-modal__footer--center { justify-content: center; }
|
||
.call-modal__btn {
|
||
border: none;
|
||
border-radius: 10px;
|
||
padding: 10px 24px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.call-modal__btn--cancel { background: var(--bg-tertiary); color: var(--text-secondary); }
|
||
.call-modal__btn--primary { background: var(--color-warning); color: var(--bg-secondary); }
|
||
.call-modal__btn--large { padding: 12px 48px; font-size: 15px; }
|
||
.call-modal__btn:active { transform: scale(0.96); }
|
||
|
||
/* ==========================================================================
|
||
话术文字
|
||
========================================================================== */
|
||
.call-modal__speech-text {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-top: 8px;
|
||
font-size: 15px;
|
||
color: var(--text-primary);
|
||
font-weight: 600;
|
||
text-align: center;
|
||
}
|
||
.call-modal__speech-emoji { font-size: 22px; }
|
||
|
||
/* ==========================================================================
|
||
发送状态
|
||
========================================================================== */
|
||
.call-modal__sending {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13px;
|
||
color: var(--text-tertiary);
|
||
}
|
||
.call-modal__dot-flashing {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--color-warning);
|
||
animation: dot-flash 0.6s infinite alternate;
|
||
}
|
||
@keyframes dot-flash {
|
||
0% { opacity: 0.2; }
|
||
100% { opacity: 1; }
|
||
}
|
||
.call-modal__success {
|
||
margin-top: 12px;
|
||
font-size: 15px;
|
||
color: var(--color-success);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ==========================================================================
|
||
SVG 场景容器
|
||
========================================================================== */
|
||
.scene { margin-bottom: 4px; }
|
||
.scene__svg { width: 180px; height: 150px; display: block; margin: 0 auto; }
|
||
|
||
/* ==========================================================================
|
||
场景1：招手动画
|
||
========================================================================== */
|
||
.hand-arm {
|
||
animation: hand-wave 0.6s ease-in-out infinite;
|
||
transform-origin: 42px 80px;
|
||
}
|
||
@keyframes hand-wave {
|
||
0%, 100% { transform: rotate(-5deg); }
|
||
50% { transform: rotate(-30deg); }
|
||
}
|
||
.bubble-float { animation: bubble-updown 2s ease-in-out infinite; }
|
||
@keyframes bubble-updown {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-6px); }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
场景2：拍桌子动画
|
||
========================================================================== */
|
||
.pound-fists {
|
||
animation: desk-pound 0.4s ease-in-out infinite alternate;
|
||
}
|
||
@keyframes desk-pound {
|
||
0% { transform: translateY(0); }
|
||
100% { transform: translateY(-8px); }
|
||
}
|
||
.scene--pound {
|
||
animation: desk-shake 0.4s ease-in-out infinite alternate;
|
||
transform-origin: center bottom;
|
||
}
|
||
@keyframes desk-shake {
|
||
0%, 100% { transform: translateX(0); }
|
||
25% { transform: translateX(-3px); }
|
||
75% { transform: translateX(3px); }
|
||
}
|
||
.splash-lines line:nth-child(1) { animation: splash 0.6s ease-out infinite; }
|
||
.splash-lines line:nth-child(2) { animation: splash 0.6s ease-out 0.1s infinite; }
|
||
.splash-lines line:nth-child(3) { animation: splash 0.6s ease-out 0.2s infinite; }
|
||
.splash-lines line:nth-child(4) { animation: splash 0.6s ease-out 0.15s infinite; }
|
||
.splash-lines line:nth-child(5) { animation: splash 0.6s ease-out 0.25s infinite; }
|
||
@keyframes splash {
|
||
0% { opacity: 1; transform: translate(0,0); }
|
||
100% { opacity: 0; transform: translate(var(--sx, 0), -12px); }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
场景3：劈稻草人
|
||
========================================================================== */
|
||
.slash-blade {
|
||
animation: blade-slash 1.0s ease-in-out infinite;
|
||
transform-origin: 58px 38px;
|
||
}
|
||
@keyframes blade-slash {
|
||
0%, 15% { transform: rotate(-60deg); }
|
||
30%, 55% { transform: rotate(20deg); }
|
||
70%, 100% { transform: rotate(-60deg); }
|
||
}
|
||
.explosion-effect circle {
|
||
animation: boom-flash 1.0s ease-in-out infinite;
|
||
}
|
||
@keyframes boom-flash {
|
||
0%, 50% { opacity: 0; transform: scale(0.5); }
|
||
55% { opacity: 0.9; transform: scale(2); }
|
||
65% { opacity: 0; transform: scale(3); }
|
||
100% { opacity: 0; }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
场景4：砍西瓜
|
||
========================================================================== */
|
||
.knife {
|
||
animation: knife-chop 0.8s ease-in-out infinite;
|
||
transform-origin: 58px 40px;
|
||
}
|
||
@keyframes knife-chop {
|
||
0%, 20% { transform: rotate(-50deg); }
|
||
40%, 60% { transform: rotate(15deg); }
|
||
80%, 100% { transform: rotate(-50deg); }
|
||
}
|
||
.juice-splash circle:nth-child(1) { animation: juice-splash 0.8s ease-out 0.4s infinite; }
|
||
.juice-splash circle:nth-child(2) { animation: juice-splash 0.8s ease-out 0.45s infinite; }
|
||
.juice-splash circle:nth-child(3) { animation: juice-splash 0.8s ease-out 0.5s infinite; }
|
||
@keyframes juice-splash {
|
||
0% { opacity: 0; transform: translate(0,0) scale(0); }
|
||
50% { opacity: 1; transform: translate(-5px, -10px) scale(1); }
|
||
100% { opacity: 0; transform: translate(-10px, -20px) scale(0.5); }
|
||
}
|
||
.melon {
|
||
animation: melon-shake 0.8s ease-in-out infinite;
|
||
}
|
||
@keyframes melon-shake {
|
||
0%, 37% { transform: translate(0,0); }
|
||
42%, 58% { transform: translate(-3px, 2px); }
|
||
62% { transform: translate(0,0); }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
场景5：摇传菜铃
|
||
========================================================================== */
|
||
.bell-left {
|
||
animation: bell-ring-left 0.5s ease-in-out infinite;
|
||
transform-origin: 63px 58px;
|
||
}
|
||
.bell-right {
|
||
animation: bell-ring-right 0.5s ease-in-out 0.25s infinite;
|
||
transform-origin: 103px 58px;
|
||
}
|
||
@keyframes bell-ring-left {
|
||
0%, 100% { transform: rotate(0); }
|
||
50% { transform: rotate(-12deg); }
|
||
}
|
||
@keyframes bell-ring-right {
|
||
0%, 100% { transform: rotate(0); }
|
||
50% { transform: rotate(12deg); }
|
||
}
|
||
.sound-waves circle:nth-child(1) { animation: wave-expand 1s ease-out infinite; }
|
||
.sound-waves circle:nth-child(2) { animation: wave-expand 1s ease-out 0.3s infinite; }
|
||
.sound-waves circle:nth-child(3) { animation: wave-expand 1s ease-out 0.6s infinite; }
|
||
@keyframes wave-expand {
|
||
0% { opacity: 1; stroke-width: 2; }
|
||
100% { opacity: 0; stroke-width: 0.5; }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
场景6：大炮发射
|
||
========================================================================== */
|
||
.cannon-barrel {
|
||
animation: cannon-recoil 1.2s ease-in-out infinite;
|
||
transform-origin: 80px 117px;
|
||
}
|
||
@keyframes cannon-recoil {
|
||
0%, 15% { transform: translateX(0); }
|
||
20%, 25% { transform: translateX(-8px); }
|
||
30%, 100% { transform: translateX(0); }
|
||
}
|
||
.fuse-spark {
|
||
animation: spark-flicker 0.15s ease-in-out infinite alternate;
|
||
}
|
||
@keyframes spark-flicker {
|
||
0% { r: 2; fill: #FF5722; opacity: 0.6; }
|
||
100% { r: 3.5; fill: #FFEB3B; opacity: 1; }
|
||
}
|
||
.cannonball {
|
||
animation: cannonball-fly 1.2s ease-in-out infinite;
|
||
}
|
||
@keyframes cannonball-fly {
|
||
0%, 25% { transform: translate(0, 0); opacity: 0; }
|
||
28% { transform: translate(15px, -20px); opacity: 1; }
|
||
50% { transform: translate(50px, -48px); opacity: 1; }
|
||
100% { transform: translate(50px, -48px); opacity: 1; }
|
||
}
|
||
.blast-main { animation: blast-appear 1.2s ease-in-out infinite; }
|
||
@keyframes blast-appear {
|
||
0%, 55% { opacity: 0; transform: scale(0); }
|
||
58% { opacity: 1; transform: scale(1.5); }
|
||
65% { opacity: 0.9; transform: scale(1.2); }
|
||
75% { opacity: 0; transform: scale(1.8); }
|
||
100% { opacity: 0; }
|
||
}
|
||
.blast-inner { animation: blast-inner 1.2s ease-in-out infinite; }
|
||
@keyframes blast-inner {
|
||
0%, 58% { opacity: 0; transform: scale(0); }
|
||
62% { opacity: 1; transform: scale(1); }
|
||
68% { opacity: 0.7; transform: scale(1.3); }
|
||
75% { opacity: 0; }
|
||
100% { opacity: 0; }
|
||
}
|
||
.blast-ray { animation: blast-ray 1.2s ease-in-out infinite; }
|
||
.ray-1, .ray-5 { animation-delay: 0.55s; }
|
||
.ray-2, .ray-6 { animation-delay: 0.56s; }
|
||
.ray-3, .ray-7 { animation-delay: 0.57s; }
|
||
.ray-4, .ray-8 { animation-delay: 0.58s; }
|
||
@keyframes blast-ray {
|
||
0%, 60% { opacity: 0; }
|
||
62% { opacity: 1; }
|
||
70% { opacity: 0; }
|
||
100% { opacity: 0; }
|
||
}
|
||
.target { animation: target-shake 1.2s ease-in-out infinite; }
|
||
@keyframes target-shake {
|
||
0%, 56% { transform: translate(0,0) rotate(0); }
|
||
60% { transform: translate(3px,-3px) rotate(5deg); }
|
||
64% { transform: translate(-3px,2px) rotate(-5deg); }
|
||
68% { transform: translate(0,0) rotate(0); }
|
||
100% { transform: translate(0,0) rotate(0); }
|
||
}
|
||
.gunner-arm {
|
||
animation: gunner-arm 1.2s ease-in-out infinite;
|
||
transform-origin: 35px 85px;
|
||
}
|
||
@keyframes gunner-arm {
|
||
0%, 25% { transform: rotate(0deg); }
|
||
28% { transform: rotate(15deg); }
|
||
35% { transform: rotate(0deg); }
|
||
100% { transform: rotate(0deg); }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
场景7：导弹发射
|
||
========================================================================== */
|
||
.missile-body { animation: missile-launch 1.5s ease-in-out infinite; }
|
||
@keyframes missile-launch {
|
||
0%, 10% { transform: translateY(0); }
|
||
15%, 70% { transform: translateY(-80px); }
|
||
80%, 100% { transform: translateY(-80px); }
|
||
}
|
||
.rocket-flame { animation: missile-launch 1.5s ease-in-out infinite; }
|
||
.flame-outer { animation: flame-pulse 0.2s ease-in-out infinite alternate; }
|
||
.flame-inner { animation: flame-pulse 0.15s ease-in-out infinite alternate; }
|
||
@keyframes flame-pulse {
|
||
0% { transform: scaleY(1); opacity: 0.8; }
|
||
100% { transform: scaleY(1.3); opacity: 1; }
|
||
}
|
||
.smoke-puff { animation: smoke-burst 1.5s ease-out infinite; }
|
||
.puff-1 { animation-delay: 0.2s; }
|
||
.puff-2 { animation-delay: 0.3s; }
|
||
.puff-3 { animation-delay: 0.4s; }
|
||
@keyframes smoke-burst {
|
||
0% { opacity: 0; transform: scale(0.5) translateY(0); }
|
||
15% { opacity: 0.7; transform: scale(1) translateY(0); }
|
||
100% { opacity: 0; transform: scale(2.5) translateY(-20px); }
|
||
}
|
||
.trail-line { animation: trail-glow 1.5s ease-out infinite; }
|
||
@keyframes trail-glow {
|
||
0%, 15% { opacity: 0; }
|
||
20% { opacity: 0.8; }
|
||
70% { opacity: 0.6; }
|
||
100% { opacity: 0; }
|
||
}
|
||
.launch-button { animation: button-blink 0.5s ease-in-out infinite alternate; }
|
||
@keyframes button-blink {
|
||
0% { fill: #F44336; }
|
||
100% { fill: #FFEB3B; }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
过渡动画
|
||
========================================================================== */
|
||
.modal-fade-enter-active,
|
||
.modal-fade-leave-active { transition: opacity 0.25s ease; }
|
||
.modal-fade-enter-from,
|
||
.modal-fade-leave-to { opacity: 0; }
|
||
.modal-zoom-enter-active { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
|
||
.modal-zoom-leave-active { transition: all 0.2s ease-in; }
|
||
.modal-zoom-enter-from { opacity: 0; transform: scale(0.8); }
|
||
.modal-zoom-leave-to { opacity: 0; transform: scale(0.9); }
|
||
</style>
|