<template>
  <div class="promotion-portal">
    <div class="promotion-portal-top" :style="{ backgroundImage: `url(${AiBgImage})` }">
      <div class="promotion-portal-top__wrapper">
        <TopContent></TopContent>
      </div>
    </div>
    <div class="promotion-portal-tab record-tab">
      <RecordHelp></RecordHelp>
    </div>
    <div class="promotion-portal-tab cando-tab">
      <CanDo></CanDo>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue';
import TopContent from '@/components/TopContent.vue';
import RecordHelp from '@/components/RecordHelp.vue';
import CanDo from "@/components/CanDo.vue";
// import { useMainStore } from '../store';

// const mainStore = useMainStore();

const AiBgImage = 'https://assets.njnaexport.com//images/lookeen/ai-bg.png';

onMounted(() => {
  // sessionStorage.removeItem('formData')
});

onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.promotion-portal {
  max-width: 1920px;
  height: 100%;
  overflow: auto;

  &-top,
  &-tab {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* 或 cover，根据你需求 */
    // transition: height 0.1s;
  }

  &-top {
    height: 750px;
    &__wrapper {
      width: 100%;
      height: 100%;
    }
  }

  &-tab.record-tab {
    width: 100%;
    height: 750px;
  }

  &-tab.cando-tab {
    width: 100%;
    height: 750px;
  }
}
</style>
