<!DOCTYPE html>
<html lang="zh-CN">
<head> <meta name="keywords" content="keywords_temp" />
<meta name="description" content="description_temp" />

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海上丝绸之路世界商埠胜概长卷 · 典藏卷轴</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "PingFang SC", "Microsoft YaHei", "STSong", "SimSun", serif;
            background-color: #f5f0e8;
            color: #3a2a1a;
            overflow-x: hidden;
            padding-bottom: 196px;
        }

        .page-section {
            width: 100%;
            max-width: 750px;
            margin: 0 auto;
            position: relative;
        }

        .page-section img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* 顶部装饰 */
        .top-decoration {
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, #c8a96e, #8b6914, #c8a96e, #8b6914, #c8a96e);
        }

        /* 底部装饰 */
        .bottom-decoration {
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, #c8a96e, #8b6914, #c8a96e, #8b6914, #c8a96e);
        }

        /* 图片无间距 */
        .page-section + .page-section {
            margin-top: 0;
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .page-section {
                max-width: 100%;
            }
        }

        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }

        /* 导航点 */
        .nav-dots {
            position: fixed;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .nav-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(139, 105, 20, 0.3);
            border: 1px solid rgba(139, 105, 20, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-dot:hover,
        .nav-dot.active {
            background: rgba(139, 105, 20, 0.8);
            transform: scale(1.3);
        }

        /* 淡入动画 */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* 底部产品导航 */
        .bottom-nav {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 200;
            display: flex;
            justify-content: center;
            padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
            background: rgba(245, 240, 232, 0.96);
            border-top: 1px solid rgba(139, 105, 20, 0.25);
            box-shadow: 0 -4px 16px rgba(58, 42, 26, 0.08);
        }

        .bottom-nav-panel {
            display: flex;
            flex-direction: column;
            gap: 14px;
            width: 100%;
            max-width: 750px;
            margin: 0 auto;
        }

        .bottom-nav-title {
            margin: 0;
            text-align: center;
            font-size: 18px;
            font-weight: 900;
            color: #5a4220;
            letter-spacing: 4px;
            line-height: 1.5;
            -webkit-text-stroke: 0.4px currentColor;
        }

        .bottom-nav-inner {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            width: 100%;
        }

        .bottom-nav-btn {
            padding: 10px 8px;
            border: 1px solid rgba(139, 105, 20, 0.45);
            border-radius: 6px;
            background: linear-gradient(180deg, #f8f1e3 0%, #ebe0cb 100%);
            color: #5a4220;
            font-family: inherit;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1px;
            line-height: 1.2;
            white-space: nowrap;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }

        .bottom-nav-btn:hover,
        .bottom-nav-btn:active {
            background: linear-gradient(180deg, #8b6914 0%, #6e5210 100%);
            border-color: #8b6914;
            color: #fff8e8;
        }

        @media (max-width: 480px) {
            .bottom-nav-title {
                font-size: 17px;
                letter-spacing: 3.5px;
            }

            .bottom-nav-btn {
                font-size: 13px;
                letter-spacing: 0.8px;
                padding: 9px 4px;
            }
        }
    </style>
</head>
<body>

    
    <div class="nav-dots" id="navDots"></div>

    
    <div class="top-decoration"></div>

    
    <div class="page-section fade-in" id="section-1">
        <img src="static/index/1.png" alt="海上丝绸之路世界商埠胜概长卷·典藏卷轴 封面">
    </div>


    <div class="page-section fade-in" id="section-2">
        <img src="static/index/2-1.jpg" alt="山海匠心 绘就海丝全景长卷">
    </div>


    <div class="page-section fade-in" id="section-3">
        <img src="static/index/2-2.png" alt="山海匠心 全景叙事 破界融合 精工传世">
    </div>


    <div class="page-section fade-in" id="section-4">
        <img src="static/index/3-1.png" alt="匠心历程 四大团队聚力 共筑文化工程">
    </div>


    <div class="page-section fade-in" id="section-5">
        <img src="static/index/3-2.jpg" alt="荣誉履迹 走向世界的文化名片">
    </div>

    <div class="page-section fade-in" id="section-5">
        <img src="static/index/4.jpg" alt="荣誉履迹 走向世界的文化名片">
    </div>

    <div class="page-section fade-in" id="section-5">
        <img src="static/index/5.jpg" alt="荣誉履迹 走向世界的文化名片">
    </div>


    

    
    <div class="bottom-decoration"></div>

    
    <nav class="bottom-nav" aria-label="产品分类">
        <div class="bottom-nav-panel">
            <p class="bottom-nav-title">探索海丝长卷衍生好物</p>
            <div class="bottom-nav-inner">
                <a class="bottom-nav-btn" href="next.html#sijin" data-product="sijin">丝 巾</a>
                <a class="bottom-nav-btn" href="next.html#chaxi" data-product="chaxi">茶 席</a>
                <a class="bottom-nav-btn" href="next.html#chaye" data-product="chaye">茶 叶</a>
                <a class="bottom-nav-btn" href="next.html#guahua" data-product="guahua">挂 画</a>
                <a class="bottom-nav-btn" href="next.html#baodai" data-product="baodai">包 袋</a>
                <a class="bottom-nav-btn" href="next.html#juanzhou" data-product="juanzhou">卷 轴</a>
                <a class="bottom-nav-btn" href="next.html#minxinpian" data-product="minxinpian">明 信 片</a>
                <a class="bottom-nav-btn" href="next.html#bingxiangtie" data-product="bingxiangtie">冰 箱 贴</a>
                <a class="bottom-nav-btn" href="next.html#kafeibei" data-product="kafeibei">咖 啡 杯</a>
            </div>
        </div>
    </nav>

    <script>
        document.querySelectorAll('.bottom-nav-btn').forEach((btn) => {
            btn.addEventListener('click', () => {
                const key = btn.getAttribute('data-product');
                if (key) {
                    try {
                        sessionStorage.setItem('saixiong_product', key);
                    } catch (e) {}
                }
            });
        });

        // 创建导航点
        const navDotsContainer = document.getElementById('navDots');
        const sections = document.querySelectorAll('.page-section');
        const totalSections = sections.length;

        sections.forEach((section, index) => {
            const dot = document.createElement('div');
            dot.className = 'nav-dot';
            dot.title = `第${index + 1}页`;
            dot.addEventListener('click', () => {
                section.scrollIntoView({ behavior: 'smooth' });
            });
            navDotsContainer.appendChild(dot);
        });

        // 滚动监听 - 淡入效果
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, {
            threshold: 0.1
        });

        document.querySelectorAll('.fade-in').forEach(el => {
            observer.observe(el);
        });

        // 滚动监听 - 导航点高亮
        const navDots = document.querySelectorAll('.nav-dot');
        const sectionObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const id = entry.target.id;
                    const index = parseInt(id.split('-')[1]) - 1;
                    navDots.forEach((dot, i) => {
                        dot.classList.toggle('active', i === index);
                    });
                }
            });
        }, {
            threshold: 0.5
        });

        sections.forEach(section => {
            sectionObserver.observe(section);
        });
    </script>
</body>
</html>
