feat(admin): 优化用户界面动画与交互体验

- 调整倒计时音效触发时机为剩余5秒并添加新音频文件
- 为SvgIcon组件增加size属性以支持自定义图标尺寸
- 优化ActionButton组件的动画效果和视觉反馈
- 修复游戏页面组件卸载时未停止计时器的问题
- 重构音频控制器，改进音频预加载和播放逻辑
- 优化团队选择页面的卷轴动画和布局跳转逻辑
- 改进小组选择页面的视觉样式和响应式布局
- 增强CompetitionLayout组件的标题动画和内容显示逻辑

apps/admin/src/components/custom/svg-icon.vue

@@ -17,6 +17,8 @@ interface Props {
   icon?: string
   /** 本地 svg 图标名称 */
   localIcon?: string
+  /** 图标大小 */
+  size?: string | number
 }
 
 const attrs = useAttrs()
@@ -44,13 +46,13 @@ const renderLocalIcon = computed(() => props.localIcon || !props.icon)
 <template>
   <!-- 渲染本地 svg 图标 -->
   <template v-if="renderLocalIcon">
-    <svg aria-hidden="true" width="1em" height="1em" v-bind="bindAttrs">
+    <svg aria-hidden="true" :width="size || '1em'" :height="size || '1em'" v-bind="bindAttrs">
       <use :xlink:href="symbolId" fill="currentColor" />
     </svg>
   </template>
   <template v-else>
     <!-- 渲染 iconify 图标 -->
-    <Icon v-if="icon" :icon="icon" v-bind="bindAttrs" />
+    <Icon v-if="icon" :icon="icon" :width="size" :height="size" v-bind="bindAttrs" />
   </template>
 </template>
 

apps/admin/src/components/custom/user/ActionButton.vue

@@ -51,7 +51,7 @@ function handleClick() {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: all 0.1s ease;
+  transition: all 0.2s ease;
   background: #eb5e55;
   box-shadow: 0 8px 0 #fcc64f;
 
@@ -62,6 +62,7 @@ function handleClick() {
   &:hover {
     transform: translateY(-2px);
     filter: brightness(1.05);
+    box-shadow: 0 10px 0 #fcc64f;
   }
 
   &:active {
@@ -76,7 +77,7 @@ function handleClick() {
     border-radius: 40px;
 
     .btn-text {
-      font-size: 24px;
+      font-size: 30px;
       font-weight: bold;
       letter-spacing: 2px;
     }
@@ -103,7 +104,8 @@ function handleClick() {
 
   &:hover {
     background-color: #fff;
-    transform: translateY(-2px);
+    transform: translateY(-3px);
+    box-shadow: 0 10px 0 #fcc64f;
   }
 
   &:active {

apps/admin/src/components/custom/user/CompetitionLayout.vue

@@ -87,6 +87,7 @@ async function fetchSystemConfig() {
 }
 
 const showContent = ref(false)
+const showSlotContent = ref(false)
 
 function handleBack() {
   emit('back')
@@ -112,6 +113,12 @@ onMounted(() => {
   setTimeout(() => {
     showContent.value = true
   }, 100)
+
+  // 延迟显示内容，等待标题卷轴展开
+  const delay = props.showTitle ? 800 : 100
+  setTimeout(() => {
+    showSlotContent.value = true
+  }, delay)
 })
 </script>
 
@@ -131,12 +138,14 @@ onMounted(() => {
         <div class="glass-overlay">
           <!-- title -->
           <section v-if="showTitle" class="title-section">
-            <Transition name="fade-slide-down" appear>
+            <Transition name="scroll-unfold" appear>
-              <div v-if="showContent" class="title-section">
+              <div v-if="showContent" class="title-wrapper">
                 <div class="scroll-bg" :style="{ backgroundImage: `url(${titleBgUrl})` }">
-                  <h1 class="main-title">
+                  <Transition name="fade-in-delay" appear>
+                    <h1 v-if="showContent" class="main-title">
                       {{ title }}
                     </h1>
+                  </Transition>
                 </div>
               </div>
             </Transition>
@@ -144,7 +153,9 @@ onMounted(() => {
 
           <!-- Main Content Slot -->
           <main class="main-content">
+            <div v-if="showSlotContent" class="h-full w-full flex flex-col items-center justify-center">
               <slot />
+            </div>
           </main>
 
           <!-- Footer Action -->
@@ -157,7 +168,7 @@ onMounted(() => {
                 class="back-btn" :style="{ visibility: showBack ? 'visible' : 'hidden' }"
                 :type="backBtnText ? 'text' : 'button'" :text="backBtnText || ''" :theme="btnTheme" @click="handleBack"
               >
-                <SvgIcon v-if="!backBtnText" icon="mdi:arrow-left" class="arrow-icon" />
+                <SvgIcon v-if="!backBtnText" icon="mdi:arrow-left" size="40" class="arrow-icon" />
               </ActionButton>
             </div>
 
@@ -166,14 +177,14 @@ onMounted(() => {
                 v-if="showNext" :type="nextBtnText ? 'text' : 'button'" :text="nextBtnText || '下一步'"
                 :theme="btnTheme" :disabled="nextDisabled" @click="handleNext"
               >
-                <SvgIcon v-if="!nextBtnText" icon="mdi:arrow-right" class="arrow-icon" />
+                <SvgIcon v-if="!nextBtnText" icon="mdi:arrow-right" class="arrow-icon" size="40" />
               </ActionButton>
 
               <ActionButton
                 v-if="showNextBtn2" :type="nextBtnText2 ? 'text' : 'button'" :text="nextBtnText2 || '下一步'"
                 :theme="btnTheme" :disabled="nextDisabled" @click="handleNext2"
               >
-                <SvgIcon v-if="!nextBtnText2" icon="mdi:arrow-right" class="arrow-icon" />
+                <SvgIcon v-if="!nextBtnText2" icon="mdi:arrow-right" class="arrow-icon" size="40" />
               </ActionButton>
             </div>
           </footer>
@@ -188,24 +199,36 @@ onMounted(() => {
   margin: 10px auto;
   width: 412px;
   height: 165px;
+  display: flex;
+  justify-content: center; /* Ensure wrapper stays centered during expansion */
 
-  .scroll-bg {
+  .title-wrapper {
     width: 100%;
     height: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: center; /* Keep the background image centered */
+  }
+
+  .scroll-bg {
+    width: 412px !important; /* Fixed width to prevent squishing during animation */
+    height: 165px !important;
     position: relative;
     background: no-repeat center center;
     background-size: 100% 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding-bottom: 10px; // 微调垂直位置，因为卷轴可能有视觉重心偏移
+    padding-bottom: 10px;
+    flex-shrink: 0; /* Prevent shrinking */
 
     .main-title {
-      font-size: 2.6rem;
+      font-size: 2.5rem;
       color: $text-color;
       margin: 0;
       letter-spacing: 4px;
       text-align: center;
+      white-space: nowrap; /* Prevent text wrapping */
     }
   }
 }
@@ -320,6 +343,23 @@ onMounted(() => {
 }
 
 // Transitions
+.scroll-unfold-enter-active {
+  transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.scroll-unfold-enter-from {
+  width: 0 !important;
+}
+
+.fade-in-delay-enter-active {
+  transition: opacity 0.8s ease;
+  transition-delay: 1s; /* Wait for scroll to unfold */
+}
+
+.fade-in-delay-enter-from {
+  opacity: 0;
+}
+
 .fade-slide-down-enter-active,
 .fade-slide-down-leave-active {
   transition: all 0.8s ease;

apps/admin/src/store/modules/competition/index.ts

@@ -93,9 +93,9 @@ export const useCompetitionStore = defineStore('competition', () => {
     timerInterval.value = window.setInterval(() => {
       if (timeLeft.value > 0) {
         timeLeft.value--
-        // 剩余10秒播放倒计时音效
+        // 5秒内播放倒计时音效
-        if (timeLeft.value <= 10) {
+        if (timeLeft.value === 5) {
-          audioController.play('tick10')
+          audioController.play('boy5')
         }
       }
       else {

apps/admin/src/utils/audio.ts

@@ -1,28 +1,58 @@
+import boy5 from '@/assets/audio/boy-5s.mp3'
 import system10 from '@/assets/audio/boy-10s.mp3'
 
+export type AudioType = 'start' | 'tick10' | 'flip' | 'boy5'
+
 export class AudioController {
-  private audioContext: AudioContext | null = null
+  private static audioContext: AudioContext | null = null
   private soundFiles: Record<string, string> = {}
   private audioCache: Record<string, HTMLAudioElement> = {}
 
   constructor(soundFiles: Record<string, string> = {}) {
     this.soundFiles = {
       tick10: system10,
+      boy5,
       ...soundFiles,
     }
+    // 预加载关键音频
+    this.preload(['tick10', 'boy5'])
   }
 
   private initAudioContext() {
-    if (!this.audioContext) {
+    if (!AudioController.audioContext) {
-      this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+      const AudioContextClass = window.AudioContext || (window as any).webkitAudioContext
+      if (AudioContextClass) {
+        AudioController.audioContext = new AudioContextClass()
       }
     }
+    // 尝试恢复上下文（如果被挂起）
+    if (AudioController.audioContext?.state === 'suspended') {
+      AudioController.audioContext.resume().catch(() => {})
+    }
+  }
+
+  /**
+   * 预加载音频文件
+   */
+  preload(types: AudioType[]) {
+    types.forEach((type) => {
+      const url = this.soundFiles[type]
+      if (url && !this.audioCache[type]) {
+        const audio = new Audio(url)
+        audio.preload = 'auto'
+        this.audioCache[type] = audio
+      }
+    })
+  }
 
   /**
    * 播放指定类型的音效
    * 优先使用预设的音频文件，如果没有配置或加载失败，则使用 Web Audio API 合成音效
    */
-  async play(type: 'start' | 'tick10' | 'flip') {
+  async play(type: AudioType) {
+    // 确保音频上下文已初始化
+    this.initAudioContext()
+
     // 尝试播放音频文件
     if (this.soundFiles[type]) {
       try {
@@ -59,42 +89,58 @@ export class AudioController {
     })
   }
 
-  private playSynth(type: 'start' | 'tick10' | 'flip') {
+  private playSynth(type: AudioType) {
-    this.initAudioContext()
+    if (!AudioController.audioContext)
-    if (!this.audioContext)
       return
 
-    const ctxTime = this.audioContext.currentTime
+    const ctx = AudioController.audioContext
-    const gain = this.audioContext.createGain()
+    const ctxTime = ctx.currentTime
-    gain.connect(this.audioContext.destination)
+    const gain = ctx.createGain()
+    gain.connect(ctx.destination)
 
-    if (type === 'start') {
+    switch (type) {
-      const osc = this.audioContext.createOscillator()
+      case 'start':
+        this.playStartSound(ctx, gain, ctxTime)
+        break
+      case 'tick10':
+      case 'boy5':
+        this.playTickSound(ctx, gain, ctxTime)
+        break
+      case 'flip':
+        this.playFlipSound(ctx, gain, ctxTime)
+        break
+    }
+  }
+
+  private playStartSound(ctx: AudioContext, gain: GainNode, time: number) {
+    const osc = ctx.createOscillator()
     osc.connect(gain)
     // 开始音效：高音短促提示
     osc.type = 'sine'
-      osc.frequency.setValueAtTime(880, ctxTime)
+    osc.frequency.setValueAtTime(880, time)
-      osc.frequency.exponentialRampToValueAtTime(440, ctxTime + 0.3)
+    osc.frequency.exponentialRampToValueAtTime(440, time + 0.3)
-      gain.gain.setValueAtTime(0.5, ctxTime)
+    gain.gain.setValueAtTime(0.5, time)
-      gain.gain.exponentialRampToValueAtTime(0.01, ctxTime + 0.3)
+    gain.gain.exponentialRampToValueAtTime(0.01, time + 0.3)
-      osc.start(ctxTime)
+    osc.start(time)
-      osc.stop(ctxTime + 0.3)
+    osc.stop(time + 0.3)
   }
-    else if (type === 'tick10') {
+
-      const osc = this.audioContext.createOscillator()
+  private playTickSound(ctx: AudioContext, gain: GainNode, time: number) {
+    const osc = ctx.createOscillator()
     osc.connect(gain)
     // 倒计时音效：急促的滴答声
     osc.type = 'triangle'
-      osc.frequency.setValueAtTime(600, ctxTime)
+    osc.frequency.setValueAtTime(600, time)
-      gain.gain.setValueAtTime(0.3, ctxTime)
+    gain.gain.setValueAtTime(0.3, time)
-      gain.gain.exponentialRampToValueAtTime(0.01, ctxTime + 0.1)
+    gain.gain.exponentialRampToValueAtTime(0.01, time + 0.1)
-      osc.start(ctxTime)
+    osc.start(time)
-      osc.stop(ctxTime + 0.1)
+    osc.stop(time + 0.1)
   }
-    else if (type === 'flip') {
+
+  private playFlipSound(ctx: AudioContext, gain: GainNode, time: number) {
     // 翻书音效：使用白噪声模拟纸张摩擦
-      const bufferSize = this.audioContext.sampleRate * 0.5 // 0.5秒缓冲
+    const bufferSize = ctx.sampleRate * 0.5 // 0.5秒缓冲
-      const buffer = this.audioContext.createBuffer(1, bufferSize, this.audioContext.sampleRate)
+    const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate)
     const data = buffer.getChannelData(0)
 
     // 生成白噪声
@@ -102,25 +148,24 @@ export class AudioController {
       data[i] = Math.random() * 2 - 1
     }
 
-      const noise = this.audioContext.createBufferSource()
+    const noise = ctx.createBufferSource()
     noise.buffer = buffer
 
     // 滤波器：低通滤波器，模拟纸张的闷声
-      const filter = this.audioContext.createBiquadFilter()
+    const filter = ctx.createBiquadFilter()
     filter.type = 'lowpass'
-      filter.frequency.setValueAtTime(400, ctxTime)
+    filter.frequency.setValueAtTime(400, time)
-      filter.frequency.exponentialRampToValueAtTime(3000, ctxTime + 0.1) // 频率快速扫过，模拟快速翻动
+    filter.frequency.exponentialRampToValueAtTime(3000, time + 0.1) // 频率快速扫过，模拟快速翻动
 
     noise.connect(filter)
     filter.connect(gain)
 
     // 音量包络：快速淡入淡出
-      gain.gain.setValueAtTime(0, ctxTime)
+    gain.gain.setValueAtTime(0, time)
-      gain.gain.linearRampToValueAtTime(0.8, ctxTime + 0.05)
+    gain.gain.linearRampToValueAtTime(0.8, time + 0.05)
-      gain.gain.exponentialRampToValueAtTime(0.01, ctxTime + 0.3)
+    gain.gain.exponentialRampToValueAtTime(0.01, time + 0.3)
 
-      noise.start(ctxTime)
+    noise.start(time)
-      noise.stop(ctxTime + 0.3)
+    noise.stop(time + 0.3)
-    }
   }
 }

apps/admin/src/views/user/game/index.vue

@@ -41,6 +41,7 @@ onMounted(async () => {
 })
 
 onUnmounted(() => {
+  store.stopTimer()
   stopPolling()
 })
 
@@ -135,7 +136,7 @@ async function handleNext() {
     // 并在获取失败时尝试从 detail 获取（如果后端在详情接口也返回了时间）
     const infoTime = store.currentQuestionInfo?.QuestionTime || (store.currentQuestionInfo as any)?.questionTime
     const detailTime = (store.currentQuestionDetail as any)?.QuestionTime || (store.currentQuestionDetail as any)?.questionTime
-    const duration = Number(infoTime || detailTime || 120) // 默认值改为 120s 或者保持 10s，用户说是 120s
+    const duration = Number(infoTime || detailTime || 120)
 
     console.log('开始倒计时，时长:', duration, 'InfoTime:', infoTime, 'DetailTime:', detailTime)
     store.startTimer(duration)
@@ -199,19 +200,8 @@ async function fetchGetGameStatisticsData(_params: Api.Competition.QuestionAddPa
       const { data } = await fetchGetGameStatistics(_params)
       // console.log(data, 'data')
       // 更新图表数据
-      // 假设接口返回格式为: [{ TeamName: '组1', Points: 10, ResultPotins: 5 }, ...]
-      // 需要根据实际接口返回结构调整映射逻辑
       const list = (data?.data || []) as any[]
       if (list && Array.isArray(list)) {
-        // 根据 TeamName 分组并去重（如果是同一个小组多条记录，可能需要合并，这里假设直接展示返回列表）
-        // 如果后端返回的就是每个小组一条汇总数据，直接映射即可
-        // 根据需求描述，返回的数据可能有多条同名小组记录，或者就是每个小组一条
-        // 鉴于示例数据中有重复的 TeamName (第一小队, 第二小队)，这里做一个简单的去重或聚合
-        // 实际上 fetchGetGameStatistics 应该是返回统计数据，如果返回了明细，前端需要聚合
-        // 但看字段 Points 和 ResultPotins 像是统计值，这里直接映射展示，如果有重复名，ECharts category 会自动处理或需要前端聚合
-        // 为了稳妥，这里按 TeamId 或 TeamName 聚合一下，取最新或求和？
-        // 假设返回的是当前所有小组的状态，直接映射即可
-
         // 使用 Map 去重，以 TeamId 为准，保留最新的状态
         const teamMap = new Map()
         list.forEach((item) => {
@@ -220,13 +210,6 @@ async function fetchGetGameStatisticsData(_params: Api.Competition.QuestionAddPa
             if (item.UserAnswerFont) {
               const parsed = JSON.parse(item.UserAnswerFont)
               if (Array.isArray(parsed) && parsed.length > 0) {
-                // 如果 AnswerText 存在，取其长度；否则（如选择题）如果对象存在则算 1 个
-                // 逻辑：如果是填空/听写类，AnswerText 是字符串，取长度？
-                // 根据需求：答题数量用 UserAnswerFont 里面 AnswerText 字段的 length 长度
-                // 注意：AnswerText 可能是 "B" (选择题) 或 "汉字" (听写)
-                // 如果是数组，是否需要累加所有项的 AnswerText 长度？
-                // 假设 UserAnswerFont 是一个数组 [{"AnswerText": "..."}]
-                // 这里我们遍历数组累加长度
                 parsed.forEach((p: any) => {
                   if (p.AnswerText) {
                     answerCount += String(p.AnswerText).length

apps/admin/src/views/user/groups/index.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import groupType1 from '@/assets/imgs/user/group-type-1.svg'
+import groupType2 from '@/assets/imgs/user/group-type-2.svg'
 import startIcon from '@/assets/imgs/user/star-icon.svg'
 import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
 import { useRouterPush } from '@/hooks/common/router'
@@ -98,8 +100,11 @@ onMounted(() => {
               <NImage :src="startIcon" alt="star" class="star-img" width="180" height="187" :preview-disabled="true" object-fit="contain" />
             </div>
           </div>
-          <div class="group-name-tag">
+          <div
-            <span class="sun-icon">☀️</span>
+            class="group-name-tag"
+            :class="index % 2 === 0 ? 'type-moon' : 'type-sun'"
+            :style="{ backgroundImage: `url(${index % 2 === 0 ? groupType2 : groupType1})` }"
+          >
             {{ item.Name }}
           </div>
         </div>
@@ -124,9 +129,9 @@ onMounted(() => {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 20px;
+  gap: 15px; // 减小间距
   width: 100%;
-  max-width: 1200px;
+  max-width: 1400px; // 增加最大宽度限制，允许在一行放下更多
 }
 
 .group-item {
@@ -135,7 +140,28 @@ onMounted(() => {
   align-items: center;
   cursor: pointer;
   transition: transform 0.3s ease;
-  width: calc(20% - 16px);
+  // 适配不同屏幕宽度
+  width: calc(20% - 16px); // 默认一行5个 (100% / 5 ≈ 20%)
+
+  // 当总数大于10时，启用紧凑模式（一行6个）
+  .grid-dense & {
+    width: calc(16.66% - 16px);
+  }
+
+  // 大屏下如果没启用紧凑模式，依然保持一行5个，或者根据需要调整
+  // @media (min-width: 1440px) {
+  //   width: calc(16.66% - 16px); // 大屏一行6个
+  // }
+
+  // 小屏适配
+  @media (max-width: 1200px) {
+    width: calc(25% - 16px); // 中屏一行4个
+
+    .grid-dense & {
+      width: calc(20% - 16px); // 紧凑模式下中屏一行5个
+    }
+  }
+
   margin: 0;
   margin-bottom: 30px;
 
@@ -154,8 +180,8 @@ onMounted(() => {
   }
 
   .icon-wrapper {
-    // width: 100px;
+    // 稍微缩小图标区域以适配更密集的布局
-    // height: 100px;
+    transform: scale(0.9);
     position: relative;
     display: flex;
     align-items: center;
@@ -170,31 +196,47 @@ onMounted(() => {
   }
 
   .group-name-tag {
-    margin-top: 10px;
+    margin-top: 5px; // 减小顶部间距
-    background: #e0f2f1;
+    background-repeat: no-repeat;
-    padding: 4px 16px;
+    background-position: center;
-    border-radius: 16px;
+    background-size: 100% 100%;
-    font-size: 1rem;
+    width: 180px; // 稍微缩小标签宽度
-    color: $group-text-color;
+    height: 72px; // 按比例缩小高度
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem; // 稍微缩小字号
+    color: #5d4037;
     font-weight: bold;
     position: relative;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    // border: 1px solid #5d4037;
-    border: 2px solid #fff;
 
-    .sun-icon {
+    &.type-moon {
-      position: absolute;
+      padding-left: 27px; // 按比例调整 padding
-      right: -8px;
+      padding-top: 8px;
-      top: -8px;
+      margin-top: -5px; // 调整错落位置
-      font-size: 1rem;
     }
 
-    &::before {
+    &.type-sun {
-      content: '🌸';
+      padding-left: 40px; // 按比例调整 padding
-      position: absolute;
+      margin-top: 5px;
-      left: -12px;
-      bottom: -4px;
-      font-size: 0.9rem;
     }
+
+    // .sun-icon {
+    //   position: absolute;
+    //   right: 20px;
+    //   top: 10px;
+    //   font-size: 1rem;
+    //   z-index: 2;
+    // }
+
+    // &::before {
+    //   content: '🌸';
+    //   position: absolute;
+    //   left: -12px;
+    //   bottom: -4px;
+    //   font-size: 0.9rem;
+    // }
   }
 }
 

apps/admin/src/views/user/teams/index.vue

@@ -58,7 +58,8 @@ function handleBack() {
 
 function handleNext() {
   // 进入规则页面
-  routerPushByKey('user_rules')
+  // routerPushByKey('user_rules')
+  routerPushByKey('user_cover', { query: { activityId, groupsId, teamIds: teamIds.value.join(','), RoundType: RoundType.value } })
 }
 
 function selectTeam(_id: number) {
@@ -73,20 +74,20 @@ onMounted(() => {
     showBackground.value = true
   }, 300)
 
-  // 2. 标题浮现 - 等卷轴展开一大半再出来 (卷轴动画约 1.5s，这里设为 1200ms)
+  // 2. 标题浮现 - 等卷轴展开一大半再出来 (卷轴动画约 3s，这里设为 2000ms)
   setTimeout(() => {
     showTitle.value = true
-  }, 1200)
+  }, 2000)
 
-  // 3. 列表出现 - 等卷轴完全展开并定住后再出 (卷轴动画结束需 1.5s，这里给 1600ms)
+  // 3. 列表出现 - 等卷轴完全展开并定住后再出 (卷轴动画结束需 3s，这里给 3200ms)
   setTimeout(() => {
     showList.value = true
-  }, 1600)
+  }, 2500)
 })
 </script>
 
 <template>
-  <CompetitionLayout :show-back="true" :show-next="false" :show-title="false" @back="handleBack" @next="handleNext">
+  <CompetitionLayout :show-back="true" :show-next="true" next-btn-text="下一步" :show-title="false" @next="handleNext" @back="handleBack">
     <!-- Scroll Content -->
     <div class="scroll-container">
       <!-- 卷轴背景动画容器 -->
@@ -106,11 +107,8 @@ onMounted(() => {
           <div class="scroll-content">
             <TransitionGroup name="list-anim" tag="div" class="teams-grid">
               <div
-                v-for="(item, index) in showList ? teams : []"
+                v-for="(item, index) in showList ? teams : []" :key="item.id" class="team-item"
-                :key="item.id"
+                :style="{ '--delay': `${index * 0.8}s` }" @click="selectTeam(item.id)"
-                class="team-item"
-                :style="{ '--delay': `${index * 0.8}s` }"
-                @click="selectTeam(item.id)"
               >
                 <div class="icon-wrapper">
                   <img src="@/assets/imgs/user/team-title-icon.svg" alt="team-icon" class="h-full w-full object-cover">
@@ -131,19 +129,22 @@ onMounted(() => {
 <style lang="scss" scoped>
 // 卷轴展开动画 - 变得更慢更优雅
 .scroll-expand-enter-active {
-  transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1); // 持续时间加长到 1.5s，曲线更平滑
+  transition: clip-path 3s cubic-bezier(0.25, 1, 0.5, 1);
   overflow: hidden;
 }
 
 .scroll-expand-leave-active {
-  transition: all 0.8s ease;
+  transition: clip-path 1.5s ease;
 }
 
 .scroll-expand-enter-from,
 .scroll-expand-leave-to {
-  width: 0 !important;
+  clip-path: inset(0 50% 0 50%);
-  opacity: 0;
+}
-  transform: scaleX(0.9); // 稍微调整初始缩放
+
+.scroll-expand-enter-to,
+.scroll-expand-leave-from {
+  clip-path: inset(0 0 0 0);
 }
 
 // 标题进场动画 - 更加缓慢浮现
@@ -158,7 +159,7 @@ onMounted(() => {
 
 // 列表进场动画 (使用 keyframes 实现更丝滑的渐入)
 .list-anim-enter-active {
-  animation: list-enter 2s cubic-bezier(0.23, 1, 0.32, 1) both; // both 模式确保动画前后状态保留
+  animation: list-enter 1s cubic-bezier(0.23, 1, 0.32, 1) both; // both 模式确保动画前后状态保留
   animation-delay: var(--delay);
 }
 
@@ -167,6 +168,7 @@ onMounted(() => {
     opacity: 0;
     transform: translateY(80px) scale(0.9);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -191,7 +193,6 @@ onMounted(() => {
   }
 }
 
-// 覆盖默认样式，因为这个页面设计比较特殊（卷轴）
 .competition-layout :deep(.main-content) {
   display: flex;
   align-items: center;
@@ -216,9 +217,10 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: url('@/assets/imgs/user/team-bg.svg') no-repeat center center;
+  background: url('@/assets/imgs/user/team-bg-animation.svg') no-repeat center center;
   background-size: 100% 100%;
   transform-origin: center; // 确保从中心展开
+  will-change: clip-path; // 优化性能
 
   &::before {
     left: -15px;