<template>
  <div class="flex w-96 justify-around">
    <div class="w-1/6 h-80 bg-cyan-200 line-through">1</div>
    <div class="w-1/6 h-80 bg-cyan-200 leading-normal">2</div>
    <div v-if="config[id].show" class="w-1/6 h-80 bg-cyan-200 hover:translate-y-10 duration-500">3</div>
    <div class="myClass">4</div>
    <div>{{ config[id].num }}</div>
  </div>
</template>
<script lang="ts" setup>
import { config } from "./config"
const id = 2;
</script>
<style lang="scss" scoped>
.myClass {
  @apply w-1/6;
  @apply bg-red-700;
  @apply text-white
}
</style>