<?php /*a:1:{s:78:"/www/wwwroot/103.108.66.222_1111/app/frontend/view/index/AnnieBlack/index.html";i:1736759160;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
      <?php echo head(); ?>
    <link rel="stylesheet" href="/template/AnnieBlack/assets/css/index.css">
    <style type="text/css" media="all">
  
        
       ul {
            list-style-type: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
        }

        li {
            box-sizing: border-box;
            width: 25%;
            padding:0 10px 0 10px;
        }

        img {
            width: 100%;
            height: auto;
        }

        p {
            margin-top: 5px;
            text-align: center;
        }
    /*nav {*/
    /*        display: flex;*/
    /*        overflow-x: auto;*/
    /*        white-space: nowrap;*/
    /*    }*/

    /*    nav button {*/
    /*        flex: 0 0 25%;*/
    /*        max-width: 20%;*/
    /*        padding: 25px 0;*/
    /*        border: none;*/
    /*        background-color: #3498db;*/
    /*        color: white;*/
    /*        cursor: pointer;*/
    /*        font-size: 16px;*/
    /*        transition: background-color 0.3s ease;*/
    /*        margin: 0 5px;*/
    /*        border-radius: 10px;*/
    /*    }*/

    /*    nav button:hover {*/
    /*        background-color: #2980b9;*/
    /*    }*/

        /* 隐藏滚动条 */
    /*    nav::-webkit-scrollbar {*/
    /*        width: 0;*/
    /*        height: 0;*/
    /*    }*/

    /*    nav::-webkit-scrollbar-track {*/
    /*        background-color: transparent;*/
    /*    }*/

    /*    nav::-webkit-scrollbar-thumb {*/
    /*        background - color: transparent;*/
    /*    }*/
        
        
           nav {
            display: flex;
            overflow-x: auto;
            white-space: nowrap;
        }

        nav button {
            border-radius: 10px ;
            margin: 0 10px;
            flex: 0 0 auto;
            min-width: 20%;
            padding: 22px 0;
            border: none;
            background-color: #3d3d3d;
            color: #9f9f9f;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
nav button.active {
            background: linear-gradient(90deg, #c69b5f 0%, #ffdea5 100%), linear-gradient(#c50606, #c50606);
            color: #000;
        }
        nav button:hover {
            background: linear-gradient(90deg, #c69b5f 0%, #ffdea5 100%), linear-gradient(#c50606, #c50606);
            color: #000;
        }

        /* 隐藏滚动条 */
        nav::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        nav::-webkit-scrollbar-track {
            background-color: transparent;
        }

        nav::-webkit-scrollbar-thumb {
            background-color: transparent;
        }
    </style>
</head>

<body>
    
    <div id="app" data-v-app="">
 
              <div id="app">
            <div class="header">
                <div class="header_left">
                    <img class="header_logo" src="<?php echo syscfg('site','site_logo'); ?>">
                </div>
                <h1 class="header_title">首页</h1>
                <div class="header_right"></div>
            </div>
            <div class="body accounts-scroll">
                <div class="slideimg">
                    <div class="carousel" id="carousel">
                        <?php foreach($advertise as $k => $v): ?>
                                                    <div class="slide">
                                <a href="<?php echo htmlentities($v['url']); ?>">
                                    <img src="<?php echo htmlentities($v['icon']); ?>" alt="<?php echo htmlentities($v['title']); ?>">
                                </a>
                            </div>
                            <?php endforeach; ?>
                                                   
                                            </div>
                    <div class="dots" id="dots">
                        <?php foreach($advertise as $k => $v): ?>
                                                    <span class="dot <?php if(($k == 0)): ?>active<?php endif; ?>"></span>
                        <?php endforeach; ?>
                                            </div>
                </div>
                <br>
                <div class="marquee-container">
                    <div class="trumpet-icon">
                        <img src="/template/AnnieBlack/assets/img/gundonggonggao.png" alt="" class="noticeimg">
                    </div>
                    <div class="marquee-wrapper">
                        <div class="marquee" style="animation-duration: 10s;"><?php echo syscfg('site','site_seo_desc'); ?></div>
                    </div>
                </div>
                <div class="centerArea">
                    <div class="lbox">
                        <span class="userName"> <?php echo syscfg("site","site_name"); ?></span>

                    </div>
                    <div class="robx">
                        <div class="item">
                            <img src="/template/AnnieBlack/assets/img/yaoqing.png" alt="" class="menuImg" onclick="copyDomain()">
                            <span class="b_Text">邀请</span>
                        </div>
                    </div>
                </div>
                  
                   <nav id="myNav">
        <button class="active">按11111钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
        <button>按钮6</button>
        <button>按钮7</button>
        <button>按钮8</button>
    </nav>
              

           
      <ul>
        <li>
            <a href="">
            <img src="https://kk888666kk.com/c4c842e2f500427b8595d40da01a8b41.png" alt="测试图片">
            <p>测试</p>
            </a>
        </li>
        <li>
            <img src="https://kk888666kk.com/c4c842e2f500427b8595d40da01a8b41.png" alt="测试图片">
            <p>测试</p>
        </li>
        <li>
            <img src="https://kk888666kk.com/c4c842e2f500427b8595d40da01a8b41.png" alt="测试图片">
            <p>测试</p>
        </li>
        <li>
            <img src="https://kk888666kk.com/c4c842e2f500427b8595d40da01a8b41.png" alt="测试图片">
            <p>测试</p>
        </li>
        <li>
            <img src="https://kk888666kk.com/c4c842e2f500427b8595d40da01a8b41.png" alt="测试图片">
            <p>测试</p>
        </li>
            <li>
            <img src="https://kk888666kk.com/c4c842e2f500427b8595d40da01a8b41.png" alt="测试图片">
            <p>测试</p>
        </li>
    </ul>
            </div>
                <div class="bottom-navigation" data-v-1129fe84="">
        <a href="/frontend/index/lianxi" class="nav-item " data-v-1129fe84="">
            <div class="icon icon-contact" data-v-1129fe84=""></div><span data-v-1129fe84="">客服</span>
        </a>
        <a href="" class="nav-item router-link-active router-link-exact-active" data-v-1129fe84="">
            <div class="icon icon-home" data-v-1129fe84=""></div><span data-v-1129fe84="">首页</span>
        </a>
        <a href="/frontend/index/youxi" class="nav-item " data-v-1129fe84="">
            <div class="icon icon-game" data-v-1129fe84=""></div><span data-v-1129fe84="">游戏</span>
        </a>
        <a href="/frontend/index/gongju" class="nav-item " data-v-1129fe84="">
            <div class="icon icon-more" data-v-1129fe84=""></div><span data-v-1129fe84="">工具</span>
        </a>
    </div>
            </div>
    </div>

    <script>
async function copyDomain() {
    try {
        const domainInfo = "\u6211\u53d1\u73b0\u4e00\u4e2a\u597d\u73a9\u7684\u7f51\u7ad9 <?php echo syscfg('site','site_domain'); ?>";
        if (navigator.clipboard && navigator.clipboard.writeText) {
            // 使用 clipboard API 进行复制
            await navigator.clipboard.writeText(domainInfo);
            alert('已复制到剪切板，快去分享给朋友吧！');
        } else {
            // clipboard API 不可用时的备用方案
            const textArea = document.createElement("textarea");
            textArea.value = domainInfo;
            document.body.appendChild(textArea);
            textArea.select();
            document.execCommand('copy');
            document.body.removeChild(textArea);
            alert('已复制到剪切板，快去分享给朋友吧！');
        }
    } catch (err) {
        alert('复制失败: ' + err);
    }
}


        // 自动轮播功能
        let currentIndex = 0;
        const slides = document.querySelectorAll('#carousel .slide');
        const dots = document.querySelectorAll('#dots .dot');
        const intervalTime = 3000; // 轮播间隔时间（毫秒）

        function showSlide(index) {
            slides.forEach((slide, i) => {
                slide.style.opacity = i === index ? 1 : 0;
                slide.style.zIndex = i === index ? 1 : 0;
            });
            dots.forEach((dot, i) => {
                dot.classList.toggle('active', i === index);
            });
        }

        function nextSlide() {
            currentIndex = (currentIndex + 1) % slides.length;
            showSlide(currentIndex);
        }

        setInterval(nextSlide, intervalTime);

        // 支持手动滑动（触摸事件）
        let startX = 0;
        let endX = 0;

        document.querySelector('#carousel').addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
        });

        document.querySelector('#carousel').addEventListener('touchmove', (e) => {
            endX = e.touches[0].clientX;
        });

        document.querySelector('#carousel').addEventListener('touchend', () => {
            if (startX - endX > 50) {
                nextSlide(); // 向左滑动
            } else if (endX - startX > 50) {
                currentIndex = (currentIndex - 1 + slides.length) % slides.length;
                showSlide(currentIndex); // 向右滑动
            }
        });
        
        
      const nav = document.getElementById('myNav');
        const buttons = nav.getElementsByTagName('button');
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener('click', function () {
                // 移除所有按钮的active类
                Array.from(buttons).forEach(btn => btn.classList.remove('active'));
                // 为当前点击的按钮添加active类
                this.classList.add('active');
                this.scrollIntoView({
                    behavior:'smooth',
                    block: 'center',
                    inline: 'center'
                });
            });
        }
        
        
    </script>
</body>
</html>
