<template>
    <div class="home-container">
        <!-- 顶部导航 -->
        <div class="van-nav-bar__content" style="background-color: #000; height: 50px;">
            <div class="van-nav-bar__title van-ellipsis">
                <div class="menu-item-icon van-image" style="height: 40px; margin: 10px 0 0;">
                    <img src="https://admin.xianyuxx.motorcycles/upload/80dc096a3a8977cd/0cf63ef072b934bc.png"
                        class="van-image__img" />
                </div>
            </div>
            <div class="van-nav-bar__right">
                <i class="van-icon van-icon-chat-o" 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 class="middelTit">
            <span class="middelTit-left">High-end Zone</span>
            <div class="middelTit-right">Enjoy the ultimate luxury experience</div>
        </div>
        <div class="middleImg">
            <div v-for="value in gridItems" class="grid-item" :key="value.src">
                <img style="width: 200px; height: 200px;border-radius: 10px;" :src="value.src" alt="">
                <div class="gridItemTag">
                    <span class="textTag">Yes</span>
                </div>
            </div>
        </div>
        <div style="font-size: 26px;">Recommended connections</div>
    </div>
</template>

<script>
import img1 from '@/assets/user/1.jpg'
import img2 from '@/assets/user/2.jpg'
import img3 from '@/assets/user/3.jpg'
import img4 from '@/assets/user/4.jpg'
import img5 from '@/assets/user/5.jpg'
import img6 from '@/assets/user/6.jpg'
import img7 from '@/assets/user/7.jpg'
import img8 from '@/assets/user/8.jpg'
import img9 from '@/assets/user/9.jpg'
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: "",
            gridItems: [
                { src: img1 },
                { src: img2 },
                { src: img3 },
                { src: img4 },
                { src: img5 },
                { src: img6 },
                { src: img7 },
                { src: img8 },
                { src: img9 },
                { src: img1 },
                { src: img2 },
                { src: img3 },
                { src: img4 },
                { src: img5 },
                { src: img6 },
                { src: img7 },
                { src: img8 },
                { src: img9 },
            ]
        }
    },
    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="scss" 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: "#fff"
}

.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;
}


.middleImg{
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2,200px);
    grid-auto-columns: 200px;
    gap: 20px;
    overflow-x: auto;
    padding: 10px;
}
.grid-item {
  background-color: #4ade80;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* X偏移 Y偏移 模糊 半透明黑色 */
  .gridItemTag{
        position: absolute;
        top: -30px;
        right: -70px; /* 根据旋转角度调整位置 */
        background-color: #000; /* 黑底 */
        color: #fff;            /* 白字 */
        width: 200px;
        height: 100px;
        // font-size: 18px;
        font-weight: bold;
        align-items: center;
        transform: rotate(45deg); /* 旋转 45° */   
        .textTag{
            position: absolute;
            bottom: 5px;
            left: 80px;
            font-size: 30px;
        }     
    }
}
.middelTit{
    display: flex;
    flex-direction: row;
    padding: 10px;
    align-items: center;
    font-weight: 500;
    &-left{
        font-size: 26px;
    }
    &-right{
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        background-color: #000;
        color: #fff;
        font-size: 20px;
        padding: 5px;
        margin-left: 10px;
    }
}

</style>