feat(user): 重构用户端竞赛流程并添加新页面
- 将原单页竞赛流程拆分为独立路由页面（首页、封面、规则、抽题、答题、图解、组别、队伍） - 新增 Pinia store 管理竞赛状态、计时器和音频控制 - 添加 SCSS 变量文件定义主题色 - 更新路由配置和类型定义以支持新页面结构 - 重构 QuestionRenderer 组件优化样式 - 添加图标依赖并更新国际化配置 - 移动图片资源到用户目录并清理旧文件
This commit is contained in:
191
apps/admin/src/views/user/groups/index.vue
Normal file
191
apps/admin/src/views/user/groups/index.vue
Normal file
@ -0,0 +1,191 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
|
||||
import { useRouterPush } from '@/hooks/common/router'
|
||||
|
||||
const { routerPushByKey } = useRouterPush()
|
||||
|
||||
interface GroupItem {
|
||||
id: number
|
||||
name: string
|
||||
icon: string
|
||||
}
|
||||
|
||||
const groups = ref<GroupItem[]>([
|
||||
{ id: 1, name: '初赛一组', icon: 'activity' },
|
||||
{ id: 2, name: '初赛七组', icon: 'cast' },
|
||||
{ id: 3, name: '初赛八组', icon: 'chrome' },
|
||||
{ id: 4, name: '初赛九组', icon: 'heart' },
|
||||
{ id: 5, name: '初赛十组', icon: 'activity' },
|
||||
{ id: 6, name: '初赛六组', icon: 'cast' },
|
||||
{ id: 7, name: '初赛七组', icon: 'chrome' },
|
||||
{ id: 8, name: '初赛八组', icon: 'heart' },
|
||||
{ id: 9, name: '初赛九组', icon: 'activity' },
|
||||
{ id: 10, name: '初赛十组', icon: 'cast' },
|
||||
])
|
||||
|
||||
const showContent = ref(false)
|
||||
|
||||
function handleBack() {
|
||||
routerPushByKey('user_home')
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
routerPushByKey('user_teams')
|
||||
}
|
||||
|
||||
function selectGroup(_id: number) {
|
||||
// 选择组别逻辑
|
||||
routerPushByKey('user_teams', { query: { id: _id.toString() } })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
showContent.value = true
|
||||
}, 100)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CompetitionLayout
|
||||
:show-back="true"
|
||||
:show-next="false"
|
||||
title="展示组别"
|
||||
@back="handleBack"
|
||||
@next="handleNext"
|
||||
>
|
||||
<!-- Groups Grid -->
|
||||
<div class="groups-container">
|
||||
<TransitionGroup name="list-anim" tag="div" class="groups-grid">
|
||||
<div
|
||||
v-for="(item, index) in groups"
|
||||
v-show="showContent"
|
||||
:key="item.id"
|
||||
class="group-item"
|
||||
:style="{ '--delay': `${index * 0.05}s` }"
|
||||
@click="selectGroup(item.id)"
|
||||
>
|
||||
<div class="icon-wrapper">
|
||||
<div class="flower-bg" />
|
||||
<div class="inner-icon">
|
||||
<img src="@/assets/imgs/user/star-icon.svg" alt="star" class="star-img">
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-name-tag">
|
||||
<span class="sun-icon">☀️</span>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</CompetitionLayout>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/scss/variables.scss';
|
||||
|
||||
.groups-container {
|
||||
width: 100%;
|
||||
padding: 0 60px;
|
||||
margin-top: 60px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.groups-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.group-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
width: calc(20% - 16px);
|
||||
margin: 0;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: contain;
|
||||
|
||||
.star-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.group-name-tag {
|
||||
margin-top: 10px;
|
||||
background: #e0f2f1;
|
||||
padding: 4px 16px;
|
||||
border-radius: 16px;
|
||||
font-size: 1rem;
|
||||
color: $group-text-color;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border: 2px solid #fff;
|
||||
|
||||
.sun-icon {
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: -8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '🌸';
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
bottom: -4px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Transitions
|
||||
.fade-slide-down-enter-active,
|
||||
.fade-slide-down-leave-active {
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
.fade-slide-down-enter-from,
|
||||
.fade-slide-down-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
|
||||
.list-anim-enter-active,
|
||||
.list-anim-leave-active {
|
||||
transition: all 0.5s cubic-bezier(0.5, 0, 0.25, 1);
|
||||
transition-delay: var(--delay);
|
||||
}
|
||||
|
||||
.list-anim-enter-from,
|
||||
.list-anim-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
/* Responsive styles auto-handled by flex-wrap */
|
||||
</style>
|
||||
Reference in New Issue
Block a user