<template>
    <div class="home-container">
        <!-- 顶部导航 -->
        <div style="background-color: #000; height: 50px;">
            <div class="van-nav-bar__title">
                <div style="height: 40px; margin: 10px 0 0;">
                    <img src="https://admin.xianyuxx.motorcycles/upload/80dc096a3a8977cd/0cf63ef072b934bc.png" />
                </div>
            </div>
            <div>
                <i class="van-icon" style="color:#fff; font-size:24px;"></i>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="banner">
            <van-swipe :autoplay="3000" indicator-color="white" style="height: 200px;">
                <van-swipe-item v-for="(item, index) in banners" :key="index">
                    <van-image :src="item.imgUrl" width="100%" height="200px" fit="cover" />
                </van-swipe-item>
            </van-swipe>
        </div>

        <!-- 公告栏滚动 -->
        <div class="notice-bar">
            <van-notice-bar scrollable speed="50" left-icon="volume-o" :text="currentNotice" color="#000"
                background="#fff" class="notice-swipe" />
            <div class="linear-gradient"></div>
        </div>

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

<script>
export default {
    data() {
        return {
            banners: [
                { imgUrl: "https://admin.xianyuxx.motorcycles/upload/e134baf684543f36/ca40561eb9109659.jpg" },
                { imgUrl: "https://admin.xianyuxx.motorcycles/upload/942fd816c80ca783/f1d4aa380230ca67.jpg" }
            ],
            notices: [
                "Systeminformationen: Danke famp;uuml;r Ihren Beitritt. Schnallen Sie sich an, denn wir sind gleich dabei, in den Orgasmusmodus zuwechseln. Die Terminzeit ist tamp;auml;glich [11:00-23:00]. ",
                "Sollten Sie nach der vereinbarten Zeitanreisen, melden Sie sich bitte am namp;auml;chsten Tag an der Rezeption. Das Personal ist bereit! Verbindungsschritt: Kontaktieren Sie die Rezeption, wamp;auml;hlen Sie eine Frau aus undgenieamp;szlig;en Sie nach Abschluss der Aktivitamp;auml;t ein kostenloses Date in derselben Stadt",
            ],
            currentIndex: 0,
            currentNotice: "",
        }
    },
    mounted() {
        this.currentNotice = this.notices[0];
        setInterval(() => {
            this.currentIndex = (this.currentIndex + 1) % this.notices.length;
            this.currentNotice = this.notices[this.currentIndex];
        }, 5000);
    },
}
</script>



<style lang="less" scoped>
.home-container {
    position: relative;
    min-height: 100vh;
    background-color: #fff;
    font-family: Yu Gothic, Meiryo, sans-serif;

    :deep(.van-nav-bar__title) {
        max-width: 90%;
    }
}

/* 提示条样式 */
.notice-bar {
    position: relative;
    padding: 30px;
    background: #f3f3f5;
}

.notice-swipe {
    background: #fff;
    color: #000;
    font-weight: 500;
}

/* 控制文字部分 */
:deep(.van-notice-bar__wrap) {
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 28px;
    line-height: 26px;
}

/* 左侧图标大小 */
:deep(.van-notice-bar__left-icon .van-icon) {
    font-size: 32px;
    color: #000;
    margin-right: 16px;
}

:deep(.van-notice-bar__left-icon img) {
    width: 32px;
    height: 32px;
    margin-right: 10px;
}

/* 渐变遮罩，可选 */
.linear-gradient {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: calc(100% - 20px);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}

.banner {
    margin-top: 0px;
}
</style>