reader-star/apps/admin/src/views/teams/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 TeamItem {
  id: number
  name: string
  icon: string
}

const teams = ref<TeamItem[]>([
  { id: 1, name: '1号代表队', icon: 'star' },
  { id: 2, name: '2号代表队', icon: 'star' },
  { id: 3, name: '3号代表队', icon: 'star' },
  { id: 4, name: '4号代表队', icon: 'star' },
])

const showContent = ref(false)

function handleBack() {
  router.push('/groups')
}

function handleNext() {
  // 进入用户主路由
  router.push('/user')
}

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>

    <!-- Scroll Content -->
    <div class="scroll-container">
      <div class="scroll-body">
        <div class="scroll-left-decor" />
        <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` }"
            >
              <div class="icon-wrapper">
                <div class="star-shape">
                  <div class="star-face">
                    <!-- 简单的表情模拟 -->
                    <div class="eyes">
                      <div class="eye" />
                      <div class="eye" />
                    </div>
                    <div class="mouth" />
                  </div>
                </div>
              </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: 100px; // 调整位置，可能是在卷轴上方或者左侧
  left: 50px; // 假设竖排标题
  z-index: 10;

  .scroll-bg {
    width: 60px;
    padding: 20px 10px;
    background: #00695c; // 假设一个深色背景
    border-radius: 4px;
    color: #fff;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

    .main-title {
      font-size: 1.5rem;
      margin: 0;
      writing-mode: vertical-rl; // 竖排文字
      letter-spacing: 4px;
      text-align: center;
    }
  }
}

// 覆盖默认样式，因为这个页面设计比较特殊（卷轴）
.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;
  border-top: 10px solid #d7ccc8;
  border-bottom: 10px solid #d7ccc8;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  background: url('@/assets/imgs/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;

    // 模拟星星形状
    .star-shape {
      width: 100px;
      height: 100px;
      background: linear-gradient(135deg, #42a5f5, #ab47bc);
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

      .star-face {
        width: 60%;
        height: 60%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .eyes {
          display: flex;
          gap: 15px;
          margin-bottom: 5px;

          .eye {
            width: 8px;
            height: 12px;
            background: #fff;
            border-radius: 50%;
          }
        }

        .mouth {
          width: 20px;
          height: 10px;
          border-bottom: 3px solid #fff;
          border-radius: 50%;
        }
      }
    }
  }

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