<template>
    <div class="page">
        <el-carousel :height="bannerHeight" :interval="5000" arrow="hover">
            <el-carousel-item>
                <img class="banner-img" src="@/assets/banner1.png" alt="" />
            </el-carousel-item>
            <el-carousel-item>
                <img class="banner-img" src="@/assets/banner2.png" alt="" />
            </el-carousel-item>
            <el-carousel-item>
                <img class="banner-img" src="@/assets/banner3.png" alt="" />
            </el-carousel-item>
            <el-carousel-item>
                <img class="banner-img" src="@/assets/banner4.png" alt="" />
            </el-carousel-item>
        </el-carousel>

        <page-title>
            合作商
            <template #sub> Partners </template>
        </page-title>

        <div class="logo-list">
            <img src="@/assets/img1.png" alt="" class="logo-img" />
            <img src="@/assets/img2.png" alt="" class="logo-img" />
            <img src="@/assets/img3.png" alt="" class="logo-img" />
            <img src="@/assets/img4.png" alt="" class="logo-img" />
            <img src="@/assets/img5.png" alt="" class="logo-img" />
            <img src="@/assets/img6.png" alt="" class="logo-img" />
            <img src="@/assets/img7.png" alt="" class="logo-img" />
            <img src="@/assets/img8.png" alt="" class="logo-img" />
            <img src="@/assets/img9.png" alt="" class="logo-img" />
            <img src="@/assets/img10.png" alt="" class="logo-img" />
            <img src="@/assets/img11.png" alt="" class="logo-img" />
            <img src="@/assets/img12.png" alt="" class="logo-img" />
            <img src="@/assets/img13.png" alt="" class="logo-img" />
            <img src="@/assets/img14.png" alt="" class="logo-img" />
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()

const bannerHeight = computed(() => {
    return width.value > 1600 ? '42.6vw' : '681.6px'
})
</script>

<style lang="less" scoped>
.banner-img {
    width: 100%;
    height: 100%;
    display: block;
}

.el-carousel {
    --el-carousel-arrow-size: 50px;
    --el-carousel-arrow-font-size: 36px;
}

.logo-list {
    .f();
    flex-wrap: wrap;
    padding: 0 50px 100px;
    justify-content: center;
    .logo-img {
        width: 10.8vw;
        max-width: 209px;
        display: block;
        margin-bottom: 4vw;
        margin-right: 2vw;
    }
}

@media screen and(max-width:1600px) {
    .logo-list {
        .logo-img {
            width: 155px;
            margin-right: 28px;
            margin-bottom: 40px;
        }
    }
}
</style>
