BigScreen/src/views/home/middleBottomBox/index.vue

<template>
  <div class="bottom-box">
    <div class="button-part flex flex-col items-center justify-center relative">
      <div
        :class="[
          'transition-all absolute top--10 mb-2',
          show ? 'transform-rotate-z-0' : 'transform-rotate-z-180'
        ]"
      >
        <img
          :class="[
            'cursor-pointer relative animate__animated animate__bounce animate__slow animate__slideInUp'
          ]"
          src="@/assets/images/up-icon.png"
          @click="handleClick"
        />
      </div>
      <transition name="scaleHide" @after-enter="onAfterEnter">
        <div v-if="show" :class="['part-plan w-full flex justify-between']">
          <div
            class="w-50% first:mr-2 relative flex flex-col bg-#00000080 overflow-hidden"
            v-for="(part, i) in partList"
            :key="i"
          >
            <UWindow :currentActive="i"></UWindow>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup>
  import { $mitt } from '@/utils'
  import { useOutsideHomeStore } from '@/stores/modules/home'

  const useHomeStore = useOutsideHomeStore()

  const route = useRoute()
  const show = ref(false)
  const partList = ref([
    {
      class: 'part-plan1'
    },
    {
      class: 'part-plan2'
    }
  ])

  const handleClick = () => {
    show.value = !show.value
    $mitt.emit('onVideoShow', show.value)
  }
  const onAfterEnter = (el) => {
    el.style.height = '267px'
  }
  watch(
    () => useHomeStore.temp,
    (newV) => {
      if (newV === 'video') {
        show.value = true
      } else {
        show.value = false
      }
    },
    { immediate: true }
  )
</script>

<style lang="scss">
  .scaleHide-enter-active {
    animation: bounce-in 0.5s;
  }
  .scaleHide-leave-active {
    animation: bounce-in 0.5s reverse;
  }
  @keyframes bounce-in {
    0% {
      height: 0;
    }
    100% {
      height: 267px;
    }
  }
</style>