feat(admin): 优化用户界面动画与交互体验
- 调整倒计时音效触发时机为剩余5秒并添加新音频文件 - 为SvgIcon组件增加size属性以支持自定义图标尺寸 - 优化ActionButton组件的动画效果和视觉反馈 - 修复游戏页面组件卸载时未停止计时器的问题 - 重构音频控制器，改进音频预加载和播放逻辑 - 优化团队选择页面的卷轴动画和布局跳转逻辑 - 改进小组选择页面的视觉样式和响应式布局 - 增强CompetitionLayout组件的标题动画和内容显示逻辑
This commit is contained in:
@ -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
|
||||
|
||||
@ -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">
|
||||
<span class="sun-icon">☀️</span>
|
||||
<div
|
||||
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;
|
||||
background: #e0f2f1;
|
||||
padding: 4px 16px;
|
||||
border-radius: 16px;
|
||||
font-size: 1rem;
|
||||
color: $group-text-color;
|
||||
margin-top: 5px; // 减小顶部间距
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
width: 180px; // 稍微缩小标签宽度
|
||||
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: 2px solid #fff;
|
||||
// border: 1px solid #5d4037;
|
||||
|
||||
.sun-icon {
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
font-size: 1rem;
|
||||
&.type-moon {
|
||||
padding-left: 27px; // 按比例调整 padding
|
||||
padding-top: 8px;
|
||||
margin-top: -5px; // 调整错落位置
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '🌸';
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
bottom: -4px;
|
||||
font-size: 0.9rem;
|
||||
&.type-sun {
|
||||
padding-left: 40px; // 按比例调整 padding
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
// .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;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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 : []"
|
||||
:key="item.id"
|
||||
class="team-item"
|
||||
:style="{ '--delay': `${index * 0.8}s` }"
|
||||
@click="selectTeam(item.id)"
|
||||
v-for="(item, index) in showList ? teams : []" :key="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;
|
||||
opacity: 0;
|
||||
transform: scaleX(0.9); // 稍微调整初始缩放
|
||||
clip-path: inset(0 50% 0 50%);
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
Reference in New Issue
Block a user