SOURCE

console 命令行工具 X clear

                    
>
console
v<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>浙江绿城大白乌球迷会 | 心向绿城 永不独行</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f9fafb;
            color: #1e293b;
            line-height: 1.5;
            scroll-behavior: smooth;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* 导航栏 - 全新设计带滑动横线效果 */
        .navbar {
            background: #0a2f2c;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .nav-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 0.9rem 1.5rem;
            max-width: 1280px;
            margin: 0 auto;
            position: relative;
        }

        .logo-area h1 {
            font-size: 1.4rem;
            font-weight: 700;
            color: white;
            letter-spacing: -0.3px;
        }
        .logo-area p {
            font-size: 0.7rem;
            color: #b9e6e1;
            letter-spacing: 0.5px;
        }

        /* 滑动横线导航专用结构 */
        .nav-wrapper {
            position: relative;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
            flex-wrap: wrap;
            position: relative;
        }

        .nav-links li {
            position: relative;
        }

        .nav-links a {
            text-decoration: none;
            color: #f1f5f9;
            font-weight: 500;
            font-size: 1rem;
            transition: color 0.2s ease;
            padding: 0.5rem 0;
            display: inline-block;
            background: transparent;
            border: none;
        }

        .nav-links a:hover {
            color: #facc15;
        }

        /* 滑动横线 (动态下划线) */
        .nav-slider {
            position: absolute;
            bottom: -2px;
            height: 3px;
            background: #facc15;
            border-radius: 3px;
            transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            width: 0;
            left: 0;
            z-index: 10;
            box-shadow: 0 0 4px rgba(250, 204, 21, 0.5);
        }

        /* 高亮时的文字颜色变化由JS配合active类 */
        .nav-links a.active-nav-link {
            color: #facc15 !important;
        }

        @media (max-width: 700px) {
            .nav-container {
                flex-direction: column;
                gap: 0.8rem;
            }
            .nav-links {
                gap: 1.2rem;
                justify-content: center;
            }
            .nav-slider {
                bottom: -4px;
            }
        }

        /* 首页大图标语区 - 大白乌主题 */
        .hero {
            background: linear-gradient(107deg, #0e3b34 0%, #05201c 100%), url('https://placehold.co/1600x600/0a2f2c/DA+BAI+WU?text=DA+BAI+WU') center/cover no-repeat;
            background-blend-mode: overlay;
            background-size: cover;
            background-position: center 30%;
            min-height: 85vh;
            display: flex;
            align-items: center;
            text-align: center;
            position: relative;
        }

        .hero-content {
            width: 100%;
            padding: 2rem;
            color: white;
            text-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }

        .hero-content h2 {
            font-size: 3.5rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #FFF, #facc15);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            text-shadow: none;
        }

        .hero-content p {
            font-size: 1.8rem;
            font-weight: 600;
            margin-top: 0.5rem;
        }
        
        .hero-sub {
            font-size: 1.2rem;
            font-weight: 500;
            margin-top: 0.75rem;
            letter-spacing: 1px;
            background: rgba(0,0,0,0.4);
            display: inline-block;
            padding: 0.3rem 1.2rem;
            border-radius: 40px;
            backdrop-filter: blur(4px);
        }

        .btn-join-hero {
            display: inline-block;
            background: #facc15;
            color: #0a2f2c;
            padding: 0.8rem 2rem;
            border-radius: 40px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 1.5rem;
            transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1), box-shadow 0.3s ease, background 0.2s;
            box-shadow: 0 8px 18px rgba(0,0,0,0.2);
        }

        .btn-join-hero:hover {
            transform: scale(1.05) translateY(-3px);
            background: #ffdd55;
            box-shadow: 0 15px 28px rgba(0,0,0,0.25);
        }

        .btn-join-hero:active {
            transform: scale(0.98);
        }

        @media (max-width: 700px) {
            .hero-content h2 {
                font-size: 2.4rem;
            }
            .hero-content p {
                font-size: 1.3rem;
            }
            .hero-sub {
                font-size: 0.95rem;
            }
            .hero {
                min-height: 65vh;
            }
        }

        /* 通用区块样式 */
        .section {
            padding: 5rem 0;
            border-bottom: 1px solid #e2e8f0;
        }
        .section:last-child {
            border-bottom: none;
        }
        .section-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 2rem;
            position: relative;
            display: inline-block;
            color: #0f3b35;
        }
        .section-title:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 4px;
            background: #facc15;
            border-radius: 2px;
        }

        .about-text {
            background: white;
            padding: 2rem;
            border-radius: 1.5rem;
            box-shadow: 0 8px 20px rgba(0,0,0,0.03);
            font-size: 1.2rem;
            line-height: 1.7;
            border-left: 5px solid #facc15;
        }

        .founder-note {
            margin-top: 1.2rem;
            background: #fef9e6;
            padding: 0.8rem 1.2rem;
            border-radius: 2rem;
            display: inline-block;
            font-weight: 500;
            color: #b45309;
            font-size: 1rem;
        }

        /* 新闻卡片 */
        .news-card {
            background: white;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            border: 1px solid #eef2f6;
        }
        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 30px -12px rgba(0,0,0,0.1);
        }
        .news-img {
            background: #1e4a44;
            height: 180px;
            background-image: linear-gradient(120deg, #1c6e5e, #0f4c41);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.3rem;
        }
        .news-content {
            padding: 1.5rem;
        }
        .news-date {
            color: #facc15;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            margin-bottom: 0.5rem;
        }
        .news-title {
            font-size: 1.35rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }
        .news-desc {
            color: #475569;
            margin-bottom: 1rem;
        }
        .btn-ghost {
            display: inline-block;
            background: transparent;
            border: 1px solid #1e4a44;
            color: #1e4a44;
            padding: 0.4rem 1rem;
            border-radius: 30px;
            font-weight: 500;
            text-decoration: none;
            transition: 0.2s;
        }
        .btn-ghost:hover {
            background: #1e4a44;
            color: white;
        }

        /* 加入我们部分 */
        .join-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            margin-top: 1.5rem;
        }
        .join-card {
            background: white;
            flex: 1;
            min-width: 240px;
            border-radius: 1.5rem;
            padding: 2rem 1.8rem;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            text-align: center;
            transition: all 0.2s;
            border: 1px solid #e2edec;
        }
        .join-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        .join-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #0f3b35;
        }
        .join-step {
            background: #f1f5f9;
            border-radius: 40px;
            padding: 0.3rem 0.8rem;
            display: inline-block;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .step-desc {
            color: #334155;
            line-height: 1.5;
            font-size: 1rem;
        }
        .wechat-highlight {
            background: #0f3b35;
            color: white;
            padding: 0.2rem 0.6rem;
            border-radius: 30px;
            font-weight: 500;
            display: inline-block;
            margin: 0.5rem 0;
        }

        .join-detail {
            margin-top: 2rem;
            background: #eefaf8;
            padding: 1.8rem;
            border-radius: 1.2rem;
            border-left: 6px solid #facc15;
        }
        .join-detail p {
            margin: 0.5rem 0;
        }

        .contact-info {
            background: white;
            padding: 2rem;
            border-radius: 1.5rem;
            text-align: center;
            max-width: 600px;
            margin: 0 auto;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }
        .contact-email {
            font-size: 1.5rem;
            font-weight: 600;
            background: #f1f5f9;
            padding: 1rem;
            border-radius: 60px;
            display: inline-block;
            margin-top: 1rem;
            word-break: break-all;
        }

        footer {
            background: #0a2f2c;
            color: #cbd5e1;
            text-align: center;
            padding: 2rem 1rem;
            font-size: 0.85rem;
        }
        
        .news-footer-note {
            margin-top: 2rem;
            text-align: right;
            font-size: 0.9rem;
            color: #2c6e5e;
            font-weight: 500;
            background: #eef2f0;
            display: inline-block;
            padding: 0.5rem 1.2rem;
            border-radius: 30px;
            width: auto;
        }
    </style>
</head>
<body>

<nav class="navbar">
    <div class="nav-container">
        <div class="logo-area">
            <h1>⚽ 浙江绿城大白乌球迷会</h1>
            <p>GREEN TOWN · 台州临海青年阵营</p>
        </div>
        <div class="nav-wrapper">
            <ul class="nav-links" id="navLinks">
                <li><a href="#home" data-nav="home">首页</a></li>
                <li><a href="#about" data-nav="about">关于我们</a></li>
                <li><a href="#news" data-nav="news">新闻动态</a></li>
                <li><a href="#join" data-nav="join">加入我们</a></li>
                <li><a href="#contact" data-nav="contact">联系我们</a></li>
            </ul>
            <!-- 滑动横线指示器 -->
            <div class="nav-slider" id="navSlider"></div>
        </div>
    </div>
</nav>

<main>
    <!-- 首页区域 大图文字 -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h2>心向绿城,永不独行</h2>
            <p>青春主场,为浙江而战</p>
            <div class="hero-sub">�� 台州临海首个浙江绿城球迷会 ��</div>
            <a href="#join" class="btn-join-hero" id="joinHeroBtn">⚡ 即可加入</a>
        </div>
    </section>

    <!-- 关于我们 - 由5名初中生共同组成 -->
    <section id="about" class="section">
        <div class="container">
            <h2 class="section-title">关于我们</h2>
            <div class="about-text">
                <p style="font-size:1.25rem; font-weight:500;">这里是浙江绿城青年球迷会,<br>
                由热爱足球、热爱绿城的年轻人组成。<br>
                我们看球、聊球、相聚、助威,<br>
                做最纯粹、最热血、最团结的球迷团体。</p>
                <div class="founder-note">
                    �� - 由5名初中生共同组成的球迷会 ��
                </div>
                <div style="margin-top: 1.2rem; display: flex; gap: 1rem; flex-wrap: wrap;">
                    <span style="background:#eef2ff; padding:0.3rem 1rem; border-radius:30px;">�� 纯粹热爱</span>
                    <span style="background:#eef2ff; padding:0.3rem 1rem; border-radius:30px;">�� 热血助威</span>
                    <span style="background:#eef2ff; padding:0.3rem 1rem; border-radius:30px;">�� 团结文明</span>
                </div>
            </div>
        </div>
    </section>

    <!-- 新闻动态 -->
    <section id="news" class="section">
        <div class="container">
            <h2 class="section-title">新闻动态 · 最新战报</h2>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 1rem;">
                <div class="news-card">
                    <div class="news-img">⚽ 中甲第8轮</div>
                    <div class="news-content">
                        <div class="news-date">2025年4月12日</div>
                        <div class="news-title">浙江绿城 3:1 南京城市</div>
                        <div class="news-desc">主场黄龙体育中心,绿城青年军多点开花,王钰栋梅开二度,全场球迷战歌嘹亮,拿下关键三分!</div>
                        <a href="#" class="btn-ghost">查看详情 →</a>
                    </div>
                </div>
                <div class="news-card">
                    <div class="news-img">�� 足协杯晋级</div>
                    <div class="news-content">
                        <div class="news-date">2025年4月5日</div>
                        <div class="news-title">客场点球大战淘汰重庆铜梁龙</div>
                        <div class="news-desc">绿城将士顽强防守,点球5-4取胜,大白乌远征军呐喊声响彻客场,下一轮迎战中超劲旅。</div>
                        <a href="#" class="btn-ghost">查看详情 →</a>
                    </div>
                </div>
                <div class="news-card">
                    <div class="news-img">�� 青年军动态</div>
                    <div class="news-content">
                        <div class="news-date">2025年3月28日</div>
                        <div class="news-title">预备队小将入选国青集训名单</div>
                        <div class="news-desc">青训再结硕果,绿城04年龄段刘浩帆、叶道鑫获得国青队征召,未来可期!</div>
                        <a href="#" class="btn-ghost">查看详情 →</a>
                    </div>
                </div>
            </div>
            <div style="margin-top: 2rem; text-align: right;">
                <span class="news-footer-note">�� 关注公众号实时推送更多内容</span>
            </div>
        </div>
    </section>

    <!-- 加入我们 -->
    <section id="join" class="section">
        <div class="container">
            <h2 class="section-title">加入我们</h2>
            <div class="join-grid">
                <div class="join-card">
                    <div class="join-icon">��</div>
                    <h3>热爱足球</h3>
                    <div class="join-step">基本要求</div>
                    <div class="step-desc">年龄12周岁以上<br>热爱浙江绿城,团结文明理性</div>
                </div>
                <div class="join-card">
                    <div class="join-icon">��</div>
                    <h3>官方通道</h3>
                    <div class="join-step">加入方式</div>
                    <div class="step-desc">
                        关注微信公众号<br>
                        <strong class="wechat-highlight">“浙江绿城大白乌球迷会”</strong><br>
                        发送数字 <strong>“1”</strong>
                    </div>
                </div>
                <div class="join-card">
                    <div class="join-icon">✅</div>
                    <h3>审核流程</h3>
                    <div class="join-step">三步入会</div>
                    <div class="step-desc">发送“1” → 等待审核 → 成为正式成员<br>(无需在意AI自动回复)</div>
                </div>
            </div>
            <div class="join-detail">
                <p>�� <strong>如果你也喜欢浙江绿城,欢迎加入我们!</strong></p>
                <p>✔ 年龄12周岁以上,热爱即可,团结、文明、理性是咱们的底色。</p>
                <p>�� 具体步骤:</p>
                <p>1️⃣ 打开微信,搜索公众号 <strong>“浙江绿城大白乌球迷会”</strong> 并关注;<br>
                2️⃣ 进入公众号对话框,发送数字 <strong>“1”</strong> (系统回复不用在意,只需发送一次);<br>
                3️⃣ 等待后台审核(通常1-3个工作日),审核通过后即可加入球迷大家庭,一起远征/看台战斗!</p>
                <p style="margin-top: 0.8rem;">�� 心向绿城,期待你的到来,让我们并肩站在看台,为浙江而战!</p>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="section">
        <div class="container">
            <h2 class="section-title">联系我们</h2>
            <div class="contact-info">
                <div style="font-size: 2rem; margin-bottom: 0.5rem;">��</div>
                <p style="font-size: 1.2rem; margin-bottom: 1rem;">官方邮箱</p>
                <div class="contact-email">
                    flight.jiba.photo@qq.com
                </div>
                <p style="margin-top: 1.8rem; color:#4b5563;">也可以通过微信公众号后台留言,我们将尽快回复您。</p>
                <p style="margin-top: 1rem; font-size: 0.9rem;">浙江绿城大白乌 · 年轻且炽热</p>
            </div>
        </div>
    </section>
</main>

<footer>
    <div class="container">
        <p>© 2025 浙江绿城大白乌球迷会 | 心向绿城,永不独行 | 为浙江而战 为热爱相聚</p>
        <p style="margin-top: 0.5rem; font-size:0.75rem;">本球迷会由5名初中生发起,非营利性组织,致力于营造文明观赛、热情助威的球迷文化。</p>
    </div>
</footer>

<script>
    // ---------- 滑动横线 + 高亮控制 (核心交互) ----------
    const navSlider = document.getElementById('navSlider');
    const navItems = document.querySelectorAll('.nav-links li a');
    const navContainer = document.querySelector('.nav-links');
    
    // 更新滑动横线位置及宽度
    function updateSlider(activeLink) {
        if (!activeLink || !navSlider) return;
        const linkRect = activeLink.getBoundingClientRect();
        const containerRect = navContainer.getBoundingClientRect();
        // 相对于父容器的偏移
        let leftOffset = linkRect.left - containerRect.left;
        const width = linkRect.width;
        navSlider.style.width = `${width}px`;
        navSlider.style.left = `${leftOffset}px`;
    }
    
    // 移除所有链接的高亮class,然后给当前添加高亮样式
    function setActiveLink(activeLinkElement) {
        navItems.forEach(link => {
            link.classList.remove('active-nav-link');
        });
        if (activeLinkElement) {
            activeLinkElement.classList.add('active-nav-link');
            updateSlider(activeLinkElement);
        }
    }
    
    // 根据当前滚动位置高亮对应菜单并滑动横线
    const sectionsMap = {
        home: document.getElementById('home'),
        about: document.getElementById('about'),
        news: document.getElementById('news'),
        join: document.getElementById('join'),
        contact: document.getElementById('contact')
    };
    
    function highlightByScroll() {
        const scrollPos = window.scrollY + 150; // 偏移避免顶部卡线
        let currentSectionId = 'home';
        for (const [id, section] of Object.entries(sectionsMap)) {
            if (section) {
                const offsetTop = section.offsetTop;
                const offsetBottom = offsetTop + section.offsetHeight;
                if (scrollPos >= offsetTop && scrollPos < offsetBottom) {
                    currentSectionId = id;
                    break;
                }
            }
        }
        // 滚动到底部特殊处理
        if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight - 50) {
            currentSectionId = 'contact';
        }
        // 选中对应的导航链接
        const targetLink = Array.from(navItems).find(link => link.getAttribute('data-nav') === currentSectionId);
        if (targetLink) {
            setActiveLink(targetLink);
        } else {
            // fallback 首页
            const homeLink = Array.from(navItems).find(link => link.getAttribute('data-nav') === 'home');
            if(homeLink) setActiveLink(homeLink);
        }
    }
    
    // 手动点击菜单,更新横线滑动 + 平滑滚动
    function initNavClickEvents() {
        navItems.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const targetId = link.getAttribute('data-nav');
                const targetSection = sectionsMap[targetId];
                if (targetSection) {
                    targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    // 高亮当前点击菜单并移动横线
                    setActiveLink(link);
                    // 更新url hash (可选)
                    history.pushState(null, null, `#${targetId}`);
                }
            });
        });
    }
    
    // 监听滚动事件来更新横线滑动
    window.addEventListener('scroll', () => {
        highlightByScroll();
    });
    
    // 窗口resize时重新校正横线位置(基于当前激活菜单)
    window.addEventListener('resize', () => {
        const currentActive = document.querySelector('.nav-links a.active-nav-link');
        if (currentActive) {
            updateSlider(currentActive);
        } else {
            // 如果没有激活项,默认高亮首页
            const homeLink = Array.from(navItems).find(link => link.getAttribute('data-nav') === 'home');
            if(homeLink) {
                setActiveLink(homeLink);
            }
        }
    });
    
    // 初始化横线位置:默认首页高亮并设置横线位置
    function initSliderDefault() {
        const defaultLink = Array.from(navItems).find(link => link.getAttribute('data-nav') === 'home');
        if (defaultLink) {
            setActiveLink(defaultLink);
        }
        // 额外确保如果有hash则跳转高亮
        if (window.location.hash) {
            const hash = window.location.hash.substring(1);
            const hashLink = Array.from(navItems).find(link => link.getAttribute('data-nav') === hash);
            if (hashLink && sectionsMap[hash]) {
                setTimeout(() => {
                    setActiveLink(hashLink);
                    sectionsMap[hash].scrollIntoView({ behavior: 'smooth', block: 'start' });
                }, 100);
            }
        } else {
            // 保证第一次加载时横线位置准确
            setTimeout(() => {
                const activeNow = document.querySelector('.nav-links a.active-nav-link');
                if(activeNow) updateSlider(activeNow);
            }, 80);
        }
    }
    
    // 加入按钮平滑跳转 + 横线联动 (针对“即可加入”)
    const joinHeroBtn = document.getElementById('joinHeroBtn');
    if (joinHeroBtn) {
        joinHeroBtn.addEventListener('click', (e) => {
            e.preventDefault();
            const joinSection = document.getElementById('join');
            if (joinSection) {
                joinSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                const joinLink = Array.from(navItems).find(link => link.getAttribute('data-nav') === 'join');
                if (joinLink) setActiveLink(joinLink);
            }
        });
    }
    
    // 新闻按钮模拟提示(保持原有交互)
    const newsBtns = document.querySelectorAll('.btn-ghost');
    newsBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.preventDefault();
            alert('更多赛事资讯与深度报道,请关注微信公众号“浙江绿城大白乌球迷会”获取完整版战报!');
        });
    });
    
    // 启动所有初始化
    initNavClickEvents();
    window.addEventListener('load', () => {
        initSliderDefault();
        highlightByScroll();
    });
    
    // 额外添加:滑动结束后确保横线精准(防止某些滚动事件丢帧)
    let scrollTimer;
    window.addEventListener('scroll', () => {
        if (scrollTimer) clearTimeout(scrollTimer);
        scrollTimer = setTimeout(() => {
            const currentActiveLink = document.querySelector('.nav-links a.active-nav-link');
            if (currentActiveLink) updateSlider(currentActiveLink);
        }, 100);
    });
</script>
</body>
</html>