<!--
 * 动画
 * https://www.youtube.com/@OnlineTutorialsYT/playlists
  -->
<script setup lang="ts">
// import { ref } from 'vue';
import LoadingCircle from './element/LoadingCircle.vue';
import ButtonHover from './element/ButtonHover.vue';
import Text3D from './element/Text3D.vue';
// import LightedText from './element/LightedText.vue';
import Rotate3D from './element/Rotate3D.vue';
import TypewritersText from './element/TypewritersText.vue';
import BoderAnimation from './element/BoderAnimation.vue';
import RangeSlider from './element/RangeSlider.vue';
import SearchInput from './element/SearchInput.vue';
import SwiperCard from './element/SwiperCard.vue';
import DropDownMenu from './element/DropDownMenu.vue';
import MagicMenuIndicator from './element/MagicMenuIndicator.vue';
</script>
<template>
  <div class="box">
    <div class="row wrap items-center">
      <div class="my-card">
        <loading-circle />
      </div>
      <div class="my-card">
        <button-hover />
      </div>
      <div class="my-card" style="width: 600px">
        <Text3D />
      </div>

      <div class="column items-center">
        <div class="my-card" style="width: 460px; height: 160px">
          <!-- <lighted-text /> -->
          这个有点儿卡
        </div>
        <div class="my-card" style="height: 140px">
          <typewriters-text />
        </div>
      </div>

      <div class="my-card" style="width: 680px; height: 360px">
        <Rotate3D />
      </div>

      <div class="my-card">
        <boder-animation />
      </div>
      <div class="my-card" style="width: 500px">
        <range-slider />
      </div>
      <div class="my-card" style="width: 480px">
        <search-input />
      </div>
      <div class="my-card" style="width: 540px">
        <magic-menu-indicator />
      </div>
      <div class="row no-wrap">
        <div class="my-card" style="height: 500px">
          <drop-down-menu />
        </div>

        <div class="my-card" style="width: 900px; height: 500px">
          <swiper-card />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  padding: $padding-sm;
}
.my-card {
  margin: $padding-sm;
  width: 380px;
  height: 240px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  scale: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: all 0.5s;
  &:hover {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
    // scale: 1.1;
    z-index: 99;
  }
}
</style>