123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- <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>
|