felix/miniprogram-1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add microphone bar

Browse Source
This commit is contained in:
Felix
2026-01-27 11:25:10 +08:00
parent dc65893293
commit 2a3d47e3c9
2 changed files with 77 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
miniprogram/pages/qa_exercise/qa_exercise.wxml
View File

@@ -313,6 +313,21 @@
</scroll-view>
</t-drawer>
<view wx:if="{{isRecording}}" class="microphone-mask">
<view class="microphone-bars">
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
<view class="microphone-bar"></view>
</view>
</view>
<view class="chat-sender-wrapper {{isChatInputVisible ? 'show' : ''}}" style="bottom: {{inputBottom}}px" wx:if="{{questionMode === 'conversation' && conversationViewMode === 'chat'}}">
<view class="suggestion-bar {{showChatSuggestions ? 'show' : ''}}"
wx:if="{{chatSuggestions.length > 0}}"

64
miniprogram/pages/qa_exercise/qa_exercise.wxss
View File

@@ -6,7 +6,31 @@
overflow: hidden;
}
.status-text { font-size: 28rpx; color: #666666; }
.page-loading-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 1000; }
.page-loading-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.microphone-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 99;
background: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
}
.loading-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 16rpx; }
.container {
width: 100%;
@@ -864,4 +888,40 @@
.trans-button.trans-deactive {
color: #666;
}
}
.microphone-bars {
display: flex;
justify-content: center;
align-items: center;
}
.microphone-bar {
background: #0096fa;
bottom: 2rpx;
height: 60rpx;
width: 20rpx;
margin: 0px 8rpx;
border-radius: 10rpx;
animation: sound 0ms -600ms linear infinite alternate;
}
@keyframes sound {
0% {
opacity: .35;
height: 40rpx;
}
100% {
opacity: 1;
height: 140rpx;
}
}
.microphone-bar:nth-child(1) { left: 2rpx; animation-duration: 474ms; }
.microphone-bar:nth-child(2) { left: 30rpx; animation-duration: 433ms; }
.microphone-bar:nth-child(3) { left: 58rpx; animation-duration: 407ms; }
.microphone-bar:nth-child(4) { left: 86rpx; animation-duration: 458ms; }
.microphone-bar:nth-child(5) { left: 114rpx; animation-duration: 400ms; }
.microphone-bar:nth-child(6) { left: 142rpx; animation-duration: 427ms; }
.microphone-bar:nth-child(7) { left: 170rpx; animation-duration: 441ms; }
.microphone-bar:nth-child(8) { left: 198rpx; animation-duration: 419ms; }
.microphone-bar:nth-child(9) { left: 226rpx; animation-duration: 487ms; }
.microphone-bar:nth-child(10) { left: 254rpx; animation-duration: 442ms; }