<template>
  <div class="banner m-auto relative sm:flex mt-[60px] hidden-sm-and-down">
    <template v-if="layout && layout.showBanner">
      <el-image :src="layout?.banner" :class="layout?.style" class="sm:h-auto"></el-image>
      <div class="banner-bar absolute top-0 w-full sm:flex hidden">
        <div class="banner-text py-12 md:w-screen-xl m-auto opacity-90 flex flex-col justify-center">
          <div class="keywords my-4 text-3xl">{{ layout?.name }}</div>
          <div class="description mb-4 mt-1 text-xl max-w-3xl text-gray-600">{{ layout?.description }}</div>
        </div>
      </div>
    </template>
  </div>
  <div class="banner m-auto relative sm:flex mt-[48px] hidden-sm-and-up">
    <template v-if="layout && layout.showBanner">
      <el-image :src="layout?.banner" :class="layout?.style" class="sm:h-auto"></el-image>
      <div class="banner-bar absolute top-0 w-full sm:flex hidden">
        <div class="banner-text py-12 md:w-screen-xl m-auto opacity-90 flex flex-col justify-center">
          <div class="keywords my-4 text-3xl">{{ layout?.name }}</div>
          <div class="description mb-4 mt-1 text-xl max-w-3xl text-gray-600">{{ layout?.description }}</div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import {useConfigInfo} from "~/composables/configState";
import {openSpmUrl} from "~/utils/common";

const token = useToken();
const sysDomain = useSysDomain();

  withDefaults(
    defineProps<{
      layout?: any;
    }>(),
    {}
);

const config = useConfigInfo();

</script>
