<template>
  <MainHeader theme="white" :opacity-bg="true">
    <template #logo>
      <img src="@/assets/logoWhite.png" class="w-20 h-6" />
    </template>
  </MainHeader>

  <div class="banner bg-blue-600">
    <div class="w-bodySet mx-auto pt-16 flex">
      <div class="w-1/2 pl-36 pt-12">
        <div class="text-3xl font-semibold text-white">
          构建“区块链+”全领域防伪溯源平台
          <br />打造区块链前沿落地应用。
        </div>
      </div>
      <div class="w-1/2 px-24">
        <img :src="getImgUrl('solutionBanner')" />
      </div>
    </div>
  </div>
  <HoverNav />
  <slot>
    <router-view />
  </slot>
  <MainFooter />
</template>

<script setup lang="ts">
import MainHeader from '../MainPage/Header.vue';
import MainFooter from '../MainPage/Footer.vue';
import HoverNav from './HoverNav.vue';
import { computed } from 'vue';

const getImgUrl = computed(() => {
  return (url: string) => {
    return require(`@/assets/${url}.png`)
  }
})
</script>
