manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/test/index.vue

<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 bg-red-700 text-white hover:size-20;
}
</style>