diff --git a/src/assets/css/style.less b/src/assets/css/style.less index c8f3003..c4ff8a9 100644 --- a/src/assets/css/style.less +++ b/src/assets/css/style.less @@ -46,4 +46,11 @@ html:root { --van-dialog-button-height: 9rem; --van-dialog-message-padding: 3rem 2.5rem; --van-dialog-has-title-message-padding-top: 2.5rem; +} + +.van-toast__text { + font-size: 4rem; + height: 5rem; + line-height: 5rem; + padding: 0 2rem; } \ No newline at end of file diff --git a/src/views/asistant/components/AudioVisualizer.vue b/src/views/asistant/components/AudioVisualizer.vue index f235b98..e3b3de4 100644 --- a/src/views/asistant/components/AudioVisualizer.vue +++ b/src/views/asistant/components/AudioVisualizer.vue @@ -30,10 +30,11 @@ const calculateLines = (): Line[] => { const lineWidthPx = lineWidth * remToPx const gapPx = gap * remToPx - // 计算能容纳多少条线 + // 为了创建无缝滚动效果,我们需要生成两倍的内容 + // 这样当滚动到50%时,内容看起来和开始一样 const availableWidth = containerWidth const lineWithGap = lineWidthPx + gapPx - const maxLines = Math.floor(availableWidth / lineWithGap) + const linesNeeded = Math.ceil(availableWidth / lineWithGap) const generatedLines: Line[] = [] @@ -62,25 +63,29 @@ const calculateLines = (): Line[] => { { type: 1 } // 4条1号线 ] - // 先添加基础模式 - generatedLines.push(...basePattern) - - // 然后重复添加模式直到填满容器 + // 生成一个完整周期的内容 + const oneCycle: Line[] = [] + oneCycle.push(...basePattern) + + // 添加重复模式直到填满一个周期 let currentIndex = basePattern.length - while (currentIndex < maxLines) { - const remainingSpace = maxLines - currentIndex + while (currentIndex < linesNeeded) { + const remainingSpace = linesNeeded - currentIndex if (remainingSpace >= repeatPattern.length) { - generatedLines.push(...repeatPattern) + oneCycle.push(...repeatPattern) currentIndex += repeatPattern.length } else { - // 如果剩余空间不够一个完整模式,就用1号线填充 + // 如果剩余空间不够一个完整模式,就添加部分模式 for (let i = 0; i < remainingSpace; i++) { - generatedLines.push({ type: 1 }) + oneCycle.push(repeatPattern[i % repeatPattern.length]) } break } } + // 复制内容,创建两倍的内容用于无缝循环 + generatedLines.push(...oneCycle, ...oneCycle) + return generatedLines } @@ -124,6 +129,18 @@ onUnmounted(() => { gap: 0.96rem; height: 120px; flex-wrap: nowrap; + animation: scrollLeft 3.75s linear infinite; + overflow: hidden; + white-space: nowrap; +} + +@keyframes scrollLeft { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } } .line { diff --git a/src/views/asistant/components/InputArea.vue b/src/views/asistant/components/InputArea.vue index bde800c..a04ffdc 100644 --- a/src/views/asistant/components/InputArea.vue +++ b/src/views/asistant/components/InputArea.vue @@ -22,6 +22,7 @@