slibra-official-web/components/BaseBanner.vue

<script setup lang="ts">
import "animate.css";

 defineProps<{
  type?: string;
  bannerTitle: string;
  bannerTitleLangKey: string;
  btnLangKey:string;
  imgTitleUrl: string;
  videoUrl?: string;
  btnVal?: string;
  href?: string;
  tabsData?: object[];
  subTitleList?: {val: string, langKey: string}[];
}>();

const handleClickTab = (tab: any) => {
  console.log(tab);
};

</script>

<template>
  <div :class='["banner-wrapper", type]'>
    <div class="video-content">
      <video autoplay loop muted playsinline preload="auto" :src="videoUrl"
        class="video" v-if="videoUrl">
      </video>
    </div>
    <!-- sm:items-start -->
    <div class="banner-content flex flex-col items-center justify-center ">
      <p class="banner-text animate__animated animate__fadeInUp animate__slow animate__repeat-1">{{ $t(bannerTitleLangKey) }}</p>
      <p
        class="
          text-[16px]
          md:text-[24px]
          animate__animated animate__fadeInUp animate__delay-1s animate__slow animate__repeat-1
        "
        v-for="item, index in subTitleList"
        :key="index"
      >
        {{ $t(item.langKey) }}
      </p>
      <div class="btn animate__animated animate__fadeInUp animate__delay-1s animate__slow animate__repeat-1"
        v-if="btnVal">
        <NuxtLink :to="href" target="_blank"><span>{{ $t(btnLangKey) }}</span></NuxtLink>
      </div>
    </div>
    <div class="tabs-wrapper">
      <slot></slot>

    </div>
  </div>
</template>

<style scoped lang="scss">
.banner-wrapper {
  position: relative;
  height: 586px;
  // background: #4a4a4a;

  .video-content {
    position: absolute;
    width: 100%;
    height: 100%;

    .video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      outline: none;
      mix-blend-mode: darken;
    }
  }

  .banner-content {
    position: relative;
    max-width: 1080px;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 24px;
    line-height: 34px;
    color: #fff;
    z-index: 1;

    .banner-text {
      margin-bottom: 20px;
      line-height: 50px;
      font-family: AlimamaShuHeiTi;
      font-size: 40px;
      color: #fff;
    }
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 144px;
    height: 48px;
    margin-top: 20px;
    border-radius: 8px;
    background: linear-gradient(81.92deg, #3996FF 3.18%, #384CFF 22.8%, #2A68FF 51.16%, #227EFF 76.22%, #41BDFF 97.59%);
    font-size: 18px;
    text-align: center;
    line-height: 48px;
    color: #fff;
    cursor: pointer;
    a {
      width: 100%;
      height: 100%;
      text-decoration: none;
    }
  }

  .tabs-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
  }
}


.deal {
  background: url("@/assets/image/banner/bg-banner-deal.png") center center no-repeat;
  background-size: cover;

  .banner-img-text {
    width: 120px;
  }

}
@media  screen and (max-width: 932px) {
	.en{
		.banner-wrapper{
			height: 786px;
			.banner-content{
				height: 88%;
			}
		}
	}
}

</style>