reader-star/apps/admin/src/views/groups/index.vue

<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>