reader-star/apps/admin/src/views/user/teams/index.vue

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
import { useRouterPush } from '@/hooks/common/router'
import { fetchGetTeamListByGroupId } from '@/service/api/competition'

const { routerPushByKey, routerBack } = useRouterPush()
const route = useRoute()

interface TeamItem {
  id: number
  name: string
  icon: string
}

const teams = ref<TeamItem[]>([])
const loading = ref(false)
const activityId = (route.query?.activityId) as string || ''
const groupsId = (route.query?.groupsId) as string || ''
const teamIds = ref<number[]>([])

async function getTeams() {
  if (!groupsId)
    return

  loading.value = true
  try {
    const { data, error } = await fetchGetTeamListByGroupId(Number(groupsId))
    if (error) {
      window?.$message?.error(error.message)
      return
    }
    const list = data?.data || []
    if (list && Array.isArray(list)) {
      teams.value = list.map((item: any) => ({
        id: item.Id,
        name: item.Name,
        icon: 'star', // Default icon
      }))
      teamIds.value = list.map((item: any) => item.Id)
    }
  }
  finally {
    loading.value = false
  }
}

const showContent = ref(false)

function handleBack() {
  routerBack()
}

function handleNext() {
  // 进入规则页面
  routerPushByKey('user_rules')
}

function selectTeam(_id: number) {
  // 选择队伍逻辑
  routerPushByKey('user_cover', { query: { activityId, groupsId, teamId: _id, teamIds: teamIds.value.join(',') } })
}

onMounted(() => {
  setTimeout(() => {
    showContent.value = true
    getTeams()
  }, 100)
})
</script>

<template>
  <CompetitionLayout :show-back="true" :show-next="false" :show-title="false" @back="handleBack" @next="handleNext">
    <!-- Scroll Content -->
    <div class="scroll-container">
      <div class="scroll-body">
        <!-- Title Section inside Scroll -->
        <Transition name="fade-slide-down" appear>
          <div v-if="showContent" class="title-section">
            <div class="scroll-bg">
              <span class="main-title text-4xl text-#22685a">
                队伍名单
              </span>
            </div>
          </div>
        </Transition>

        <div class="scroll-content">
          <TransitionGroup name="list-anim" tag="div" class="teams-grid">
            <div
              v-for="(item, index) in teams" v-show="showContent" :key="item.id" class="team-item"
              :style="{ '--delay': `${index * 0.1}s` }" @click="selectTeam(item.id)"
            >
              <div class="icon-wrapper">
                <img src="@/assets/imgs/user/star-icon.svg" alt="team-icon" class="h-full w-full object-cover">
              </div>
              <div class="team-name">
                {{ item.name }}
              </div>
            </div>
          </TransitionGroup>
        </div>
        <div class="scroll-right-decor" />
      </div>
    </div>
  </CompetitionLayout>
</template>

<style lang="scss" scoped>
.title-section {
  position: absolute;
  top: 18%; // 使用百分比定位，适应不同比例
  left: 7%; // 微调位置，根据 1920x1080 下的视觉效果调整
  z-index: 10;

  .scroll-bg {
    .main-title {
      margin: 0;
      writing-mode: vertical-rl; // 竖排文字
      letter-spacing: 20px;
      text-align: center;
      font-weight: 900;
      font-family: 'KaiTi', 'STKaiti', serif; // 尝试使用楷体增加古风感
    }
  }
}

// 覆盖默认样式，因为这个页面设计比较特殊（卷轴）
.competition-layout :deep(.main-content) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.scroll-container {
  width: 80%;
  height: 70%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  // border: 1px solid red;
}

.scroll-body {
  width: 100%;
  height: 781px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/imgs/user/team-bg.svg') no-repeat center center;
  background-size: 100% 100%;

  &::before {
    left: -15px;
  }

  &::after {
    right: -15px;
  }
}

.scroll-content {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teams-grid {
  display: flex;
  gap: 60px;
  justify-content: center;
}

.team-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  .icon-wrapper {
    width: 140px;
    height: 140px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    // background: url('@/assets/imgs/team-icon-bg.svg') no-repeat center center;
    background-size: contain;
    margin-bottom: 20px;
  }

  .team-name {
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
  }
}

// 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: translateX(-70px); // 竖排标题从左侧进入
}

.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: translateY(30px);
}
</style>