feat(admin): 新增用户端答题流程页面与相关功能模块
- 新增用户端答题流程主页面，包含封面、介绍、答题、答题图解四个状态 - 新增用户端组件：封面、介绍页、答题页、答题图解页、题目渲染器及通用布局组件 - 新增用户端类型定义、模拟数据及业务常量 - 新增用户路由及类型声明，包含组别和队伍选择页面 - 新增管理端首页模块：数据卡片、头部横幅、折线图、饼图、创意横幅和项目新闻 - 新增富文本编辑器组件，支持图片和视频上传至OSS - 优化题库分类树，改为扁平化列表结构 - 完善比赛创建功能，增加轮次类型、题目分数类型及关联AP字段 - 修复模板删除函数调用参数错误 - 添加 pinyin-pro 依赖以支持拼音处理功能
This commit is contained in:
219
apps/admin/src/views/groups/index.vue
Normal file
219
apps/admin/src/views/groups/index.vue
Normal file
@ -0,0 +1,219 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
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() {
|
||||
router.push('/home')
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
router.push('/teams')
|
||||
}
|
||||
|
||||
function selectGroup(_id: number) {
|
||||
// 选择组别逻辑
|
||||
router.push('/teams')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
showContent.value = true
|
||||
}, 100)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CompetitionLayout
|
||||
:show-back="true"
|
||||
:show-next="false"
|
||||
@back="handleBack"
|
||||
@next="handleNext"
|
||||
>
|
||||
<!-- Title Section -->
|
||||
<Transition name="fade-slide-down" appear>
|
||||
<div v-if="showContent" class="title-section">
|
||||
<div class="scroll-bg">
|
||||
<h1 class="main-title">
|
||||
展示组别
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- 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/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>
|
||||
$text-color: #5d4037;
|
||||
$tag-bg: #d7ccc8;
|
||||
|
||||
.title-section {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.scroll-bg {
|
||||
padding: 12px 50px;
|
||||
background: url('@/assets/imgs/title-bg.svg') no-repeat center center;
|
||||
background-size: cover;
|
||||
|
||||
.main-title {
|
||||
font-size: 2.2rem;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: #5d4037;
|
||||
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