<!-- 全局样式和脚本 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//vr-static.he29.com/public/static/packet/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="//vr-static.he29.com/public/static/packet/animate.css/index.min.css">
<script defer src="//async.he29.com/public/static/js/tailwind/tailwind.min.js"></script>
<script src="//async.he29.com/public/static/js/jquery.min.js"></script>
<style>
    :root {
        --primary-color: #7259fc;
        --primary-light: #9b8afc;
        --secondary-color: #55a3ff;
    }
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-clamp: 3;
    }
</style>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>全国5A景点VR全景_中国景区360度全景导览_芊云全景</title>
    <meta name="keywords" content="5A景点,景区全景,VR旅游,360度全景,云旅游,景点VR,全景景区">
    <meta name="description" content="芊云全景收录全国28583个景区VR全景，足不出户云游中国名胜古迹，沉浸式体验祖国大好河山。">
    <link rel="canonical" href="https://vr.he29.com/index/area/village.html?id=">
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
<style>
    .top-nav {
        position: sticky;
        top: 0;
        width: 100%;
        height: 60px;
        z-index: 99999;
        background: linear-gradient(to right, #22242e, #2c2d40);
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    }
    .top-nav::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(114, 89, 252, 0.5), transparent);
    }
    .top-nav .nav-container {
        max-width: 1400px;
        height: 100%;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .top-nav .nav-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    .top-nav .nav-logo:hover {
        transform: translateY(-2px);
    }
    .top-nav .nav-logo .logo-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease;
        overflow: hidden;
    }
    .top-nav .nav-logo:hover .logo-icon {
        transform: scale(1.1) rotate(5deg);
    }
    .top-nav .nav-logo .logo-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .top-nav .nav-logo .logo-text {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(114, 89, 252, 0.5);
    }
    .top-nav .nav-menu {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .top-nav .nav-menu a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        padding: 0 16px;
        height: 60px;
        line-height: 60px;
        font-size: 14px;
        transition: all 0.2s ease;
        position: relative;
    }
    .top-nav .nav-menu a:hover {
        color: #fff;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(114, 89, 252, 0.7);
    }
    .top-nav .nav-menu a::after {
        content: '';
        position: absolute;
        bottom: 8px;
        left: 25%;
        width: 50%;
        height: 3px;
        background: linear-gradient(to right, rgba(114, 89, 252, 0.5), #7259fc, rgba(114, 89, 252, 0.5));
        border-radius: 10px;
        box-shadow: 0 0 8px rgba(114, 89, 252, 0.7);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }
    .top-nav .nav-menu a:hover::after,
    .top-nav .nav-menu a.active::after {
        transform: scaleX(1);
    }
    .top-nav .nav-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .top-nav .nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 16px;
        height: 34px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 3px 8px rgba(114, 89, 252, 0.3);
    }
    .top-nav .nav-btn-primary {
        background: linear-gradient(135deg, #6045e0, #8567ff);
        color: #fff;
    }
    .top-nav .nav-btn-primary:hover {
        background: linear-gradient(135deg, #7259fc, #9073ff);
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(114, 89, 252, 0.5);
    }
    .top-nav .nav-btn-green {
        background: linear-gradient(135deg, #10b981, #059669);
    }
    .top-nav .nav-btn-green:hover {
        background: linear-gradient(135deg, #059669, #047857);
    }
    .qrcode-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 999999;
    }
    .qrcode-modal-content {
        background: #fff;
        border-radius: 16px;
        padding: 24px;
        text-align: center;
        width: 320px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .qrcode-modal-close {
        position: absolute;
        top: 12px;
        right: 12px;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #999;
        line-height: 1;
    }
    .qrcode-modal-close:hover {
        color: #333;
    }
    .qrcode-modal-title {
        margin: 0 0 8px;
        font-size: 18px;
        color: #333;
    }
    .qrcode-modal-desc {
        margin: 0 0 16px;
        font-size: 14px;
        color: #666;
    }
    .qrcode-modal-img {
        width: 200px;
        height: 200px;
        border-radius: 8px;
        display: block;
        margin: 0 auto;
    }
    @media screen and (max-width: 768px) {
        .top-nav .nav-menu {
            display: none;
        }
    }
</style>
<nav class="top-nav">
    <div class="nav-container">
        <a href="/" class="nav-logo">
            <div class="logo-icon">
                <img src="https://vr-static.he29.com/logo.png" alt="芊云VR全景Logo">
            </div>
            <span class="logo-text">芊云全景</span>
        </a>
        <div class="nav-menu">
            <a href="/">首页</a>
            <a href="/index/area/index.html">地区全景</a>
            <a href="/index/scenic/index.html">景点全景</a>
            <a href="/index/circle/list.html">全景圈子</a>
            <a href="/index/course/index.html">视频教程</a>
            <a href="https://9kvr.cn/tour/service/square">全景广场</a>
            <a href="https://9kvr.cn/tour/workbench/welcome">创作中心</a>
        </div>
        <div class="nav-actions">
            <a href="javascript:;" class="nav-btn nav-btn-primary nav-btn-green" onclick="showMobileQrcode()">
                手机创作
            </a>
            <a href="https://9kvr.cn/tour/workbench/work" class="nav-btn nav-btn-primary">
                开始创作
            </a>
        </div>
    </div>
</nav>
<!-- 手机创作二维码弹窗 -->
<div id="mobileQrcodeModal" class="qrcode-modal">
    <div class="qrcode-modal-content">
        <button onclick="hideMobileQrcode()" class="qrcode-modal-close">&times;</button>
        <h3 class="qrcode-modal-title">手机扫码创作</h3>
        <p class="qrcode-modal-desc">使用微信扫描二维码，手机也能轻松创作全景</p>
        <img src="https://img.he29.com/api/jpg/fbabfac5c04b2e065b3cd395beaca7b1.jpg" alt="手机创作二维码" class="qrcode-modal-img">
    </div>
</div>
<script>
function showMobileQrcode() {
    document.getElementById('mobileQrcodeModal').style.display = 'flex';
}
function hideMobileQrcode() {
    document.getElementById('mobileQrcodeModal').style.display = 'none';
}
document.getElementById('mobileQrcodeModal').addEventListener('click', function(e) {
    if (e.target === this) hideMobileQrcode();
});
$(function() {
    var path = window.location.pathname;
    $('.top-nav .nav-menu a').each(function() {
        var href = $(this).attr('href');
        if (href && path.indexOf(href) !== -1 && href !== '/') {
            $(this).addClass('active');
        }
    });
});
</script>


    <!-- 面包屑 -->
    <nav class="bg-white border-b">
        <div class="max-w-6xl mx-auto px-4 py-3">
            <ol class="flex items-center gap-2 text-sm text-gray-600 flex-wrap">
                <li><a href="/" class="hover:text-blue-600">首页</a></li>
                <li class="text-gray-400">/</li>
                <li><a href="/index/area/index.html" class="hover:text-blue-600">地区</a></li>
                <li class="text-gray-400">/</li>
                <li><a href="/index/area/province.html?id=" class="hover:text-blue-600"></a></li>
                <li class="text-gray-400">/</li>
                <li><a href="/index/area/city.html?id=" class="hover:text-blue-600"></a></li>
                <li class="text-gray-400">/</li>
                <li><a href="/index/area/district.html?id=" class="hover:text-blue-600"></a></li>
                <li class="text-gray-400">/</li>
                <li><a href="/index/area/town.html?id=" class="hover:text-blue-600"></a></li>
                <li class="text-gray-400">/</li>
                <li class="text-gray-900 font-medium"></li>
            </ol>
        </div>
    </nav>

    <div class="max-w-6xl mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <header class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-2"> VR全景</h1>
            <p class="text-gray-600">共  个全景作品</p>
        </header>

        <!-- 热门景点 -->
                <section class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold text-gray-900"><i class="fa fa-picture-o text-green-500 mr-2"></i>热门景点</h2>
                <a href="/index/scenic/list.html?pid=" class="text-sm text-blue-600 hover:underline">
                    查看更多 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
            <div class="grid grid-cols-3 md:grid-cols-6 gap-4">
                                <a href="/index/scenic/detail.html?id=770" class="block group">
                    <article class="relative h-24 rounded-xl overflow-hidden shadow-sm">
                        <img src="/index/proxy/img?url=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Flvpics%2Fpic%2Fitem%2F960a304e251f95ca76c0b768c8177f3e67095232.jpg" alt="护王府遗址" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-2">
                            <h4 class="text-white text-xs font-medium truncate">护王府遗址</h4>
                            <span class="text-xs text-yellow-300"></span>
                        </div>
                    </article>
                </a>
                                <a href="/index/scenic/detail.html?id=1027" class="block group">
                    <article class="relative h-24 rounded-xl overflow-hidden shadow-sm">
                        <img src="/index/proxy/img?url=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Flvpics%2Fpic%2Fitem%2F7aec54e736d12f2eed1fb6bb4ec2d562843568d6.jpg" alt="仪征鼓楼" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-2">
                            <h4 class="text-white text-xs font-medium truncate">仪征鼓楼</h4>
                            <span class="text-xs text-yellow-300"></span>
                        </div>
                    </article>
                </a>
                                <a href="/index/scenic/detail.html?id=7683" class="block group">
                    <article class="relative h-24 rounded-xl overflow-hidden shadow-sm">
                        <img src="/index/proxy/img?url=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Flvpics%2Fpic%2Fitem%2F3b292df5e0fe99258ff9398e35a85edf8cb17172.jpg" alt="吴待秋故居" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-2">
                            <h4 class="text-white text-xs font-medium truncate">吴待秋故居</h4>
                            <span class="text-xs text-yellow-300"></span>
                        </div>
                    </article>
                </a>
                                <a href="/index/scenic/detail.html?id=516" class="block group">
                    <article class="relative h-24 rounded-xl overflow-hidden shadow-sm">
                        <img src="/index/proxy/img?url=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Flvpics%2Fpic%2Fitem%2F48540923dd54564eca0a9be7b2de9c82d0584f84.jpg" alt="文渊坊" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-2">
                            <h4 class="text-white text-xs font-medium truncate">文渊坊</h4>
                            <span class="text-xs text-yellow-300"></span>
                        </div>
                    </article>
                </a>
                                <a href="/index/scenic/detail.html?id=773" class="block group">
                    <article class="relative h-24 rounded-xl overflow-hidden shadow-sm">
                        <img src="/index/proxy/img?url=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Flvpics%2Fpic%2Fitem%2F1f178a82b9014a904db3348cab773912b31bee76.jpg" alt="金坛愚池公园" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-2">
                            <h4 class="text-white text-xs font-medium truncate">金坛愚池公园</h4>
                            <span class="text-xs text-yellow-300"></span>
                        </div>
                    </article>
                </a>
                                <a href="/index/scenic/detail.html?id=6405" class="block group">
                    <article class="relative h-24 rounded-xl overflow-hidden shadow-sm">
                        <img src="/index/proxy/img?url=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Flvpics%2Fpic%2Fitem%2Faec379310a55b319e9e5426347a98226cffc1783.jpg" alt="地铁文化公园" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-2">
                            <h4 class="text-white text-xs font-medium truncate">地铁文化公园</h4>
                            <span class="text-xs text-yellow-300"></span>
                        </div>
                    </article>
                </a>
                                <a href="/index/scenic/detail.html?id=5895" class="block group">
                    <article class="relative h-24 rounded-xl overflow-hidden shadow-sm">
                        <img src="/index/proxy/img?url=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Flvpics%2Fpic%2Fitem%2F3ac79f3df8dcd1001d8ed6f8738b4710b8122fdc.jpg" alt="演武厅" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-2">
                            <h4 class="text-white text-xs font-medium truncate">演武厅</h4>
                            <span class="text-xs text-yellow-300"></span>
                        </div>
                    </article>
                </a>
                                <a href="/index/scenic/detail.html?id=525" class="block group">
                    <article class="relative h-24 rounded-xl overflow-hidden shadow-sm">
                        <img src="/index/proxy/img?url=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Flvpics%2Fpic%2Fitem%2F6c224f4a20a446232d7486bc9922720e0df3d7b5.jpg" alt="吟苑公园" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-2">
                            <h4 class="text-white text-xs font-medium truncate">吟苑公园</h4>
                            <span class="text-xs text-yellow-300"></span>
                        </div>
                    </article>
                </a>
                                <a href="/index/scenic/detail.html?id=537" class="block group">
                    <article class="relative h-24 rounded-xl overflow-hidden shadow-sm">
                        <img src="/index/proxy/img?url=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Flvpics%2Fpic%2Fitem%2F9825bc315c6034a8d4239c4dca1349540823763c.jpg" alt="兴望文化园" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-2">
                            <h4 class="text-white text-xs font-medium truncate">兴望文化园</h4>
                            <span class="text-xs text-yellow-300"></span>
                        </div>
                    </article>
                </a>
                                <a href="/index/scenic/detail.html?id=793" class="block group">
                    <article class="relative h-24 rounded-xl overflow-hidden shadow-sm">
                        <img src="/index/proxy/img?url=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Flvpics%2Fpic%2Fitem%2F5243fbf2b2119313c41a3a7d64380cd790238da6.jpg" alt="太平天国戴王府" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-2">
                            <h4 class="text-white text-xs font-medium truncate">太平天国戴王府</h4>
                            <span class="text-xs text-yellow-300"></span>
                        </div>
                    </article>
                </a>
                                <a href="/index/scenic/detail.html?id=794" class="block group">
                    <article class="relative h-24 rounded-xl overflow-hidden shadow-sm">
                        <img src="/index/proxy/img?url=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Flvpics%2Fpic%2Fitem%2Fd52a2834349b033bfd4864ed17ce36d3d439bdc1.jpg" alt="江南美术馆" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-2">
                            <h4 class="text-white text-xs font-medium truncate">江南美术馆</h4>
                            <span class="text-xs text-yellow-300"></span>
                        </div>
                    </article>
                </a>
                                <a href="/index/scenic/detail.html?id=796" class="block group">
                    <article class="relative h-24 rounded-xl overflow-hidden shadow-sm">
                        <img src="/index/proxy/img?url=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Flvpics%2Fpic%2Fitem%2F9f510fb30f2442a75114977ed043ad4bd01302d6.jpg" alt="五星公园" class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                        <div class="absolute bottom-0 left-0 right-0 p-2">
                            <h4 class="text-white text-xs font-medium truncate">五星公园</h4>
                            <span class="text-xs text-yellow-300"></span>
                        </div>
                    </article>
                </a>
                            </div>
        </section>
        
        <!-- 全景作品列表 -->
        {"code":0,"msg":"系统显示异常，请刷新重试","info":null,"time":1782619371.373061}