优化UI：播放按钮等
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 2m54s
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 2m54s
This commit is contained in:
Song367
parent
efbced3a63
commit
d293077833
@ -188,11 +188,21 @@
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* 确保移动端也保持同一行 */
|
||||
@media (max-width: 768px) {
|
||||
.controls {
|
||||
flex-direction: row !important;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
#startButton {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
@ -291,10 +301,32 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#stopButton {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: rgba(220, 53, 69, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
|
||||
padding: 0; /* 确保没有内边距影响居中 */
|
||||
}
|
||||
|
||||
#stopButton:hover:not(:disabled) {
|
||||
background: rgba(200, 35, 51, 0.95);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
#stopButton svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
fill: white;
|
||||
display: block; /* 确保SVG作为块级元素 */
|
||||
margin: auto; /* 额外的居中保证 */
|
||||
}
|
||||
|
||||
#stopButton:disabled {
|
||||
@ -312,8 +344,8 @@
|
||||
</header>
|
||||
|
||||
<div class="main-content">
|
||||
<!-- 音频状态显示 - 显示状态文本 -->
|
||||
<div class="audio-status">
|
||||
<!-- 音频状态显示 - 完全隐藏 -->
|
||||
<div class="audio-status" style="display: none;">
|
||||
<div class="status-indicator">
|
||||
<span id="audioStatus" style="display: none;">未连接</span>
|
||||
</div>
|
||||
@ -353,18 +385,8 @@
|
||||
<svg id="callIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="white"/>
|
||||
</svg>
|
||||
<!-- 通话中图标（初始隐藏） -->
|
||||
<svg id="callingIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<circle cx="12" cy="12" r="3" fill="white">
|
||||
<animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="1;0.5;1" dur="1.5s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<circle cx="12" cy="12" r="8" stroke="white" stroke-width="2" fill="none" opacity="0.6">
|
||||
<animate attributeName="r" values="8;12;8" dur="2s" repeatCount="indefinite"/>
|
||||
<animate attributeName="opacity" values="0.6;0.2;0.6" dur="2s" repeatCount="indefinite"/>
|
||||
</circle>
|
||||
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="white" opacity="0.8"/>
|
||||
</svg>
|
||||
<!-- 通话中文字显示（初始隐藏） -->
|
||||
<span id="callingText" style="display: none; color: white; font-size: 14px;">正在通话中</span>
|
||||
</button>
|
||||
<button id="stopButton" class="btn btn-danger" disabled title="结束通话" style="display: none;">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
14
src/index.js
14
src/index.js
@ -832,7 +832,7 @@ class WebRTCChat {
|
||||
this.startButton.disabled = true;
|
||||
this.stopButton.disabled = false;
|
||||
|
||||
// 显示结束通话按钮
|
||||
// 显示停止按钮，确保在同一行
|
||||
this.stopButton.style.display = 'block';
|
||||
|
||||
this.updateAudioStatus('正在通话中', 'connected');
|
||||
@ -1231,12 +1231,12 @@ class WebRTCChat {
|
||||
// 添加图标切换方法
|
||||
switchToCallingIcon() {
|
||||
const callIcon = document.getElementById('callIcon');
|
||||
const callingIcon = document.getElementById('callingIcon');
|
||||
const callingText = document.getElementById('callingText');
|
||||
const startButton = this.startButton;
|
||||
|
||||
if (callIcon && callingIcon && startButton) {
|
||||
if (callIcon && callingText && startButton) {
|
||||
callIcon.style.display = 'none';
|
||||
callingIcon.style.display = 'block';
|
||||
callingText.style.display = 'block';
|
||||
startButton.classList.add('calling');
|
||||
startButton.title = '通话中...';
|
||||
}
|
||||
@ -1244,12 +1244,12 @@ class WebRTCChat {
|
||||
|
||||
switchToDefaultIcon() {
|
||||
const callIcon = document.getElementById('callIcon');
|
||||
const callingIcon = document.getElementById('callingIcon');
|
||||
const callingText = document.getElementById('callingText');
|
||||
const startButton = this.startButton;
|
||||
|
||||
if (callIcon && callingIcon && startButton) {
|
||||
if (callIcon && callingText && startButton) {
|
||||
callIcon.style.display = 'block';
|
||||
callingIcon.style.display = 'none';
|
||||
callingText.style.display = 'none';
|
||||
startButton.classList.remove('calling');
|
||||
startButton.title = '开始通话';
|
||||
startButton.disabled = false;
|
||||
|
||||
@ -423,8 +423,10 @@ header p {
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.text-input-group {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user