<template>
  <div class="banner m-auto sm:pt-[60px] pt-[47px] relative">
    <template v-if="data">
      <el-image :src="data.design?.photo || config.subpageBanner" class="sm:h-auto"></el-image>
      <div class="banner-bar absolute top-0 w-full mt-[60px]">
        <div class="banner-text py-12 md:w-3/4 m-auto opacity-90 flex flex-col justify-center">
          <div class="keywords my-4 text-5xl">{{ data.design?.name }}</div>
          <div class="description my-4 text-2xl max-w-3xl text-gray-600">{{ data.design?.description }}</div>
<!--          <div class="description text-sm max-w-xl text-gray-600">{{ data.design?.keywords }}</div>-->
          <div class="buy-btn" v-if="data?.design?.buyUrl">
            <el-button @click="navigateTo(data.design.buyUrl)" type="primary">立即购买</el-button>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import type {Navigation} from "~/api/cms/navigation/model";
import {useConfigInfo} from "~/composables/configState";

  withDefaults(
    defineProps<{
      // 选中的角色
      data?: Navigation;
    }>(),
    {}
);
const config = useConfigInfo();
</script>
