gupiao-system-web/src/views/index.vue

<template>
  <div class="welcome-container">
    <div class="welcome-text">
      <span v-for="(letter, index) in letters" :key="index" :style="getLetterStyle(index)" class="letter">
        {{ letter }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const letters = ref(['W', 'e', 'l', 'c', 'o', 'm', 'e']);

const getLetterStyle = (index: number) => {
  return {
    animationDelay: `${index * 0.1}s`
  };
};
</script>

<style lang="scss" scoped>
.welcome-container {
  width: 100%;
  height: 100vh;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcome-text {
  display: flex;
  gap: 10px;
}

.letter {
  font-size: 80px;
  font-weight: bold;
  background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #4facfe);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: wave 2s ease-in-out infinite, gradient 3s ease infinite;
  display: inline-block;
}

@keyframes wave {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.1);
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>