<template>
    <div id="section1" class="section root">
        <div class="videocontainer">
            <video class="fullscreenvideo" playsinline="" autoplay="" muted="" loop=""
                src="//xxoo365.top/background.webm" type="video/mp4" />
            <div class="overlay" />
        </div>
        <Header color="white" />
        <Center />

        <a-button shape="circle" class="floating-button" size="large" @click="scrollToSection('section2')">
            <IconDown />
        </a-button>
    </div>

    <div id="section2" class="section">
        <Section2 />
    </div>
    <div class="footer">
        <span>© {{ new Date().getFullYear() }} 哪吒乐跑 - 智能校园乐跑平台</span>
    </div>

</template>

<script setup>
import Header from '@/components/Header/index.vue'
import Center from './components/center.vue'
import Section2 from './components/section2.vue'

const scrollToSection = (sectionId) => {
    const section = document.getElementById(sectionId);
    if (section) {
        section.scrollIntoView({ behavior: 'smooth' });
    }
};

</script>

<style lang="less" scoped>
.section {
    padding: 0;
    margin: 0;
    min-width: 1280px;
    width: 100%;
    min-height: 100vh;
    scroll-snap-align: start;
    position: relative;
}

.root {
    text-align: center;
}

.fullscreenvideo {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    left: 50%;
    transform: translateX(-50%);
}

.videocontainer {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -100;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -99;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 300px;
    z-index: 2;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    /* center 可以接收鼠标事件 */
}

.button {
    position: absolute;
    z-index: 101;
}

.floating-button {
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    border: none;
    padding: 10px;
    transition: background-color 0.3s;
}

.footer {
    cursor: pointer;
    position: relative;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: #777;
    font-size: 12px;
    display: flex;
    min-width: 300px;
    justify-content: center;
    gap: 10px;


    a {
        color: #777;
    }
}
</style>
