<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>全景看房 - 未来城楼盘
</title><style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}
body {
background: #0a0f1d;
color: #fff;
overflow: hidden;
height: 100vh;
}
/* 全景容器 */
#vr-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* 导航控制栏 */
.nav-bar {
position: fixed;
bottom: 20px;
left: 0;
width: 100%;
display: flex;
justify-content: space-around;
padding: 0 15px;
z-index: 100;
}
.nav-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(30, 35, 50, 0.7);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-btn i {
font-size: 24px;
color: #fff;
}
/* 信息面板 */
.info-panel {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(12, 18, 35, 0.9);
backdrop-filter: blur(20px);
border-radius: 0 0 20px 20px;
padding: 15px;
transform: translateY(-100%);
transition: transform 0.4s ease;
z-index: 50;
}
.info-panel.active {
transform: translateY(0);
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.panel-title {
font-size: 18px;
font-weight: 600;
}
.close-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
/* 户型选择 */
.layout-selector {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 10px 0;
}
.layout-option {
min-width: 100px;
height: 80px;
border-radius: 10px;
overflow: hidden;
position: relative;
border: 2px solid transparent;
}
.layout-option.active {
border-color: #3a8bff;
}
.layout-option img {
width: 100%;
height: 100%;
object-fit: cover;
}
.layout-name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.6);
padding: 5px;
font-size: 12px;
text-align: center;
}
/* VR控制提示 */
.vr-hint {
position: fixed;
top: 30px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6);
padding: 8px 20px;
border-radius: 30px;
font-size: 14px;
z-index: 10;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
/* 快速导航点 */
.hotspot {
position: absolute;
width: 24px;
height: 24px;
background: rgba(58, 139, 255, 0.3);
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
z-index: 20;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.hotspot::after {
content: "";
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
}
/* 预约按钮 */
.appointment-btn {
position: fixed;
bottom: 100px;
right: 20px;
background: linear-gradient(135deg, #3a8bff, #6a5af9);
color: white;
padding: 12px 25px;
border-radius: 30px;
font-weight: 600;
box-shadow: 0 6px 16px rgba(58, 139, 255, 0.4);
z-index: 100;
border: none;
font-size: 16px;
}
/* 加载状态 */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0a0f1d;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1000;
}
.progress-bar {
width: 80%;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
margin-top: 20px;
overflow: hidden;
}
.progress {
height: 100%;
background: #3a8bff;
width: 0%;
transition: width 0.3s ease;
}
/* 响应式调整 */
@media (max-width: 480px) {
.nav-btn {
width: 50px;
height: 50px;
}
.appointment-btn {
bottom: 90px;
padding: 10px 20px;
font-size: 14px;
}
}
</style></head><body><divclass="loading-overlay"><divclass="loading-text">加载全景场景中...
</div><divclass="progress-bar"><divclass="progress"id="progress"></div></div></div><divid="vr-container"></div><divclass="vr-hint">拖动屏幕或移动手机查看全景
</div><divclass="info-panel"id="infoPanel"><divclass="panel-header"><divclass="panel-title">户型选择
</div><divclass="close-btn"id="closePanel"><i>×
</i></div></div><divclass="layout-selector"><divclass="layout-option active"><imgsrc="https://example.com/layout1-thumb.jpg"alt="A户型"><divclass="layout-name">A户型 | 89㎡
</div></div><divclass="layout-option"><imgsrc="https://example.com/layout2-thumb.jpg"alt="B户型"><divclass="layout-name">B户型 | 112㎡
</div></div><divclass="layout-option"><imgsrc="https://example.com/layout3-thumb.jpg"alt="C户型"><divclass="layout-name">C户型 | 136㎡
</div></div><divclass="layout-option"><imgsrc="https://example.com/layout4-thumb.jpg"alt="D户型"><divclass="layout-name">D户型 | 185㎡
</div></div></div></div><divclass="nav-bar"><divclass="nav-btn"id="btnLayout"><i></i></div><divclass="nav-btn"id="btnVR"><i></i></div><divclass="nav-btn"id="btnMeasure"><i></i></div><divclass="nav-btn"id="btnInfo"><i>ℹ️
</i></div><divclass="nav-btn"id="btnShare"><i>↗️
</i></div></div><buttonclass="appointment-btn">预约线下看房
</button><divclass="hotspot"style="top: 45%; left: 65%;"data-target="kitchen"></div><divclass="hotspot"style="top: 60%; left: 30%;"data-target="balcony"></div><script>
// 模拟全景加载过程
const progressBar = document.getElementById('progress');
let progress = 0;
const loadingInterval = setInterval(() => {
progress += 5;
progressBar.style.width = `${progress}%`;
if (progress >= 100) {
clearInterval(loadingInterval);
document.querySelector('.loading-overlay').style.display = 'none';
// 初始化全景查看器
initPanoramaViewer();
}
}, 200);
// 初始化全景查看器
function initPanoramaViewer() {
console.log("全景查看器初始化...");
// 实际项目中会使用如PhotoSphereViewer、Marzipano等库
// 这里仅做模拟实现
// 添加全景图
const vrContainer = document.getElementById('vr-container');
vrContainer.style.background = "url('https://example.com/panorama1.jpg') center center / cover no-repeat";
}
// 切换户型功能
document.getElementById('btnLayout').addEventListener('click', function() {
document.getElementById('infoPanel').classList.add('active');
});
// 关闭信息面板
document.getElementById('closePanel').addEventListener('click', function() {
document.getElementById('infoPanel').classList.remove('active');
});
// VR模式切换
document.getElementById('btnVR').addEventListener('click', function() {
alert("VR眼镜模式已激活，请使用VR设备观看");
// 实际项目中会调用WebVR API
});
// 测量功能
document.getElementById('btnMeasure').addEventListener('click', function() {
alert("测量功能已激活，点击两点可测量距离");
// 实际项目中会实现空间测量功能
});
// 热点点击处理
document.querySelectorAll('.hotspot').forEach(hotspot => {
hotspot.addEventListener('click', function() {
const target = this.getAttribute('data-target');
alert(`切换到${target === 'kitchen' ? '厨房' : '阳台'}视角`);
// 实际项目中会切换到对应的全景位置
});
});
// 分享功能
document.getElementById('btnShare').addEventListener('click', function() {
alert("生成分享海报，可发送给好友");
// 实际项目中会调用微信分享API
});
// 预约看房
document.querySelector('.appointment-btn').addEventListener('click', function() {
alert("跳转到预约看房页面");
// 实际项目中会导航到预约页面
});
</script></body></html>