feat: 咨询档案详情页新增咨询人档案信息折叠展示区域
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -1,126 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>视频通话 - 咨询专家</title>
|
||||
<style>
|
||||
/* 公共重置 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #1a1a2e; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
/* 弹窗样式 */
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #ff4d4f; font-weight: 600; }
|
||||
|
||||
/* ===== 视频通话页专属样式 ===== */
|
||||
/* 状态栏（深色背景适配） */
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #fff; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #fff; }
|
||||
|
||||
/* 远端画面区域 */
|
||||
.video-call__remote { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
|
||||
.video-call__remote-avatar { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 40px; font-weight: 600; margin-bottom: 16px; }
|
||||
.video-call__remote-name { font-size: 20px; font-weight: 600; color: #fff; margin-bottom: 6px; }
|
||||
.video-call__remote-status { font-size: 14px; color: rgba(255,255,255,0.6); }
|
||||
|
||||
/* 通话时长 */
|
||||
.video-call__duration { text-align: center; padding: 16px 0; }
|
||||
.video-call__duration-text { font-size: 32px; font-weight: 300; color: #fff; letter-spacing: 4px; font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* 本地小窗（右上角） */
|
||||
.video-call__local { position: absolute; top: 100px; right: 24px; width: 90px; height: 120px; border-radius: 12px; background: linear-gradient(135deg, #2d3436, #636e72); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 10; }
|
||||
.video-call__local-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #00b894, #00cec9); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 600; }
|
||||
|
||||
/* 底部控制栏 */
|
||||
.video-call__controls { padding: 20px 40px 48px; display: flex; align-items: center; justify-content: space-around; flex-shrink: 0; }
|
||||
.video-call__ctrl-btn { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
|
||||
.video-call__ctrl-btn--mic { background: rgba(255,255,255,0.15); }
|
||||
.video-call__ctrl-btn--mic.muted { background: #ff4d4f; }
|
||||
.video-call__ctrl-btn--hangup { background: #ff4d4f; width: 64px; height: 64px; }
|
||||
.video-call__ctrl-btn--cam { background: rgba(255,255,255,0.15); }
|
||||
.video-call__ctrl-btn--cam.off { background: #ff4d4f; }
|
||||
.video-call__ctrl-btn svg { pointer-events: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏（白色文字） -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 本地小窗（右上角） -->
|
||||
<div class="video-call__local">
|
||||
<div class="video-call__local-avatar">我</div>
|
||||
</div>
|
||||
|
||||
<!-- 远端画面区域 -->
|
||||
<div class="video-call__remote">
|
||||
<div class="video-call__remote-avatar">王</div>
|
||||
<div class="video-call__remote-name">王芳</div>
|
||||
<div class="video-call__remote-status">视频通话中</div>
|
||||
</div>
|
||||
|
||||
<!-- 通话时长 -->
|
||||
<div class="video-call__duration">
|
||||
<div class="video-call__duration-text">05:23</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部控制栏 -->
|
||||
<div class="video-call__controls">
|
||||
<!-- 麦克风按钮 -->
|
||||
<button class="video-call__ctrl-btn video-call__ctrl-btn--mic" id="micBtn" onclick="toggleMic()">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
|
||||
</button>
|
||||
<!-- 挂断按钮 -->
|
||||
<button class="video-call__ctrl-btn video-call__ctrl-btn--hangup" onclick="openModal()">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 2.59 3.4z"/></svg>
|
||||
</button>
|
||||
<!-- 摄像头按钮 -->
|
||||
<button class="video-call__ctrl-btn video-call__ctrl-btn--cam" id="camBtn" onclick="toggleCam()">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 挂断确认弹窗 -->
|
||||
<div class="modal-center" id="confirmModal">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">结束通话</div>
|
||||
<div class="modal-body">确认结束当前视频通话？</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal()">取消</button>
|
||||
<button onclick="location.href='./index.html'">结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
/* 打开挂断确认弹窗 */
|
||||
function openModal() {
|
||||
document.getElementById('confirmModal').classList.add('active');
|
||||
}
|
||||
/* 关闭挂断确认弹窗 */
|
||||
function closeModal() {
|
||||
document.getElementById('confirmModal').classList.remove('active');
|
||||
}
|
||||
/* 切换麦克风状态（静音/取消静音） */
|
||||
function toggleMic() {
|
||||
document.getElementById('micBtn').classList.toggle('muted');
|
||||
}
|
||||
/* 切换摄像头状态（开启/关闭） */
|
||||
function toggleCam() {
|
||||
document.getElementById('camBtn').classList.toggle('off');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user