fix:优化整个项目
This commit is contained in:
Daniel
79
index.html
79
index.html
@@ -85,6 +85,7 @@
|
||||
}
|
||||
.bottom_right .CustomButton:hover { background: rgba(0,0,0,.5); }
|
||||
.bottom_right .CustomButton.selected { border-color: #fa6400; }
|
||||
.CustomButton .btn-icon { width: 22px; height: 22px; margin-bottom: 2px; flex-shrink: 0; }
|
||||
.CustomButton .btn-label { display: block; }
|
||||
.safeHeight { height: env(safe-area-inset-bottom, 0); }
|
||||
|
||||
@@ -113,9 +114,16 @@
|
||||
.modal-box .btns .btn-ok { background: #fa6400; color: #fff; }
|
||||
.modal-box .btns .btn-cancel { background: #555; color: #fff; }
|
||||
|
||||
/* 隐藏 Pannellum 左侧控件及左下角标志 */
|
||||
/* 拖拽顺滑：渲染层走 GPU 合成，减少卡顿 */
|
||||
#panorama .pnlm-render-container { transform: translateZ(0); backface-visibility: hidden; }
|
||||
#panorama .pnlm-container { transform: translateZ(0); }
|
||||
/* 隐藏 Pannellum 左侧控件及左下角标志；左下角标题块保留原样式，仅做排版对齐（与顶部作者左侧对齐、不贴边） */
|
||||
#panorama .pnlm-controls-container { display: none !important; }
|
||||
#panorama .pnlm-about-msg { display: none !important; }
|
||||
#panorama .pnlm-panorama-info {
|
||||
left: max(12px, env(safe-area-inset-left)) !important;
|
||||
padding-left: 12px !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -153,10 +161,22 @@
|
||||
<div class="bottom">
|
||||
<div class="bottomWp">
|
||||
<div class="bottom_right">
|
||||
<div class="CustomButton" id="btnIntro" title="简介"><span class="btn-label">简介</span></div>
|
||||
<div class="CustomButton" id="btnShare" title="分享"><span class="btn-label">分享</span></div>
|
||||
<div class="CustomButton" id="btnLike" title="赞"><span class="btn-label">赞</span></div>
|
||||
<div class="CustomButton" id="btnComment" title="留言"><span class="btn-label">留言</span></div>
|
||||
<div class="CustomButton" id="btnIntro" title="简介">
|
||||
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/><line x1="8" y1="7" x2="16" y2="7"/><line x1="8" y1="11" x2="16" y2="11"/></svg>
|
||||
<span class="btn-label">简介</span>
|
||||
</div>
|
||||
<div class="CustomButton" id="btnShare" title="分享">
|
||||
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
|
||||
<span class="btn-label">分享</span>
|
||||
</div>
|
||||
<div class="CustomButton" id="btnLike" title="赞">
|
||||
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
||||
<span class="btn-label">赞</span>
|
||||
</div>
|
||||
<div class="CustomButton" id="btnComment" title="留言">
|
||||
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||
<span class="btn-label">留言</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="safeHeight"></div>
|
||||
@@ -198,6 +218,7 @@
|
||||
var viewerId = null;
|
||||
var statsInterval = null;
|
||||
var danmakuLastId = 0;
|
||||
var lastStats = { viewCount: 0, likeCount: 0, shareCount: 0, commentCount: 0, watchingNow: 0 };
|
||||
|
||||
function uuid() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
@@ -229,22 +250,49 @@
|
||||
if (container) container.innerHTML = '';
|
||||
}
|
||||
|
||||
function isMobileView() {
|
||||
return (typeof window.matchMedia !== 'undefined' && window.matchMedia('(max-width: 768px)').matches) ||
|
||||
(typeof window.orientation !== 'undefined') || ('ontouchstart' in window && window.innerWidth <= 1024);
|
||||
}
|
||||
function buildViewer(config) {
|
||||
destroyViewer();
|
||||
hideError();
|
||||
if (container) container.style.display = 'block';
|
||||
config.autoLoad = config.autoLoad !== false;
|
||||
config.hfov = config.hfov || 100;
|
||||
config.minHfov = config.minHfov != null ? config.minHfov : 50;
|
||||
config.maxHfov = config.maxHfov != null ? config.maxHfov : 120;
|
||||
var mobile = isMobileView();
|
||||
var targetHfov;
|
||||
if (mobile) {
|
||||
targetHfov = config.hfov != null ? Math.min(config.hfov, 82) : 78;
|
||||
config.minHfov = config.minHfov != null ? config.minHfov : 55;
|
||||
config.maxHfov = config.maxHfov != null ? Math.min(config.maxHfov, 108) : 105;
|
||||
config.hfov = config.maxHfov;
|
||||
} else {
|
||||
targetHfov = config.hfov || 100;
|
||||
config.minHfov = config.minHfov != null ? config.minHfov : 50;
|
||||
config.maxHfov = config.maxHfov != null ? config.maxHfov : 120;
|
||||
config.hfov = config.maxHfov;
|
||||
}
|
||||
config.showZoomCtrl = false;
|
||||
config.compass = false;
|
||||
config.showFullscreenCtrl = false;
|
||||
config.draggable = true;
|
||||
config.friction = 0.06;
|
||||
config.touchPanSpeedCoeffFactor = 1.2;
|
||||
try {
|
||||
currentViewer = pannellum.viewer('panorama', config);
|
||||
var fisheyeDone = false;
|
||||
function runFisheyeEnter() {
|
||||
if (fisheyeDone || !currentViewer) return;
|
||||
fisheyeDone = true;
|
||||
if (currentViewer.getHfov && currentViewer.getHfov() === config.maxHfov) {
|
||||
currentViewer.setHfov(targetHfov, 1500);
|
||||
}
|
||||
}
|
||||
currentViewer.on('error', function(err) {
|
||||
showError('全景图加载失败：' + (err && err.message ? err.message : '未知错误'));
|
||||
});
|
||||
currentViewer.on('load', runFisheyeEnter);
|
||||
setTimeout(runFisheyeEnter, 500);
|
||||
} catch (e) {
|
||||
showError('创建查看器失败：' + (e.message || e));
|
||||
}
|
||||
@@ -252,16 +300,19 @@
|
||||
|
||||
function updateStatsUI(stats) {
|
||||
if (!stats) return;
|
||||
var keys = ['viewCount', 'likeCount', 'shareCount', 'commentCount', 'watchingNow'];
|
||||
keys.forEach(function(k) { if (stats[k] !== undefined) lastStats[k] = stats[k]; });
|
||||
var s = lastStats;
|
||||
var w = document.getElementById('watchingNow');
|
||||
if (w) w.textContent = (stats.watchingNow || 0) + ' 人在看';
|
||||
if (w) w.textContent = (s.watchingNow || 0) + ' 人在看';
|
||||
var v = document.getElementById('viewCount');
|
||||
if (v) v.textContent = '共 ' + formatNum(stats.viewCount || 0) + ' 次播放';
|
||||
if (v) v.textContent = '共 ' + formatNum(s.viewCount || 0) + ' 次播放';
|
||||
var l = document.getElementById('likeCount');
|
||||
if (l) l.textContent = formatNum(stats.likeCount || 0);
|
||||
var s = document.getElementById('shareCount');
|
||||
if (s) s.textContent = formatNum(stats.shareCount || 0);
|
||||
if (l) l.textContent = formatNum(s.likeCount || 0);
|
||||
var shareEl = document.getElementById('shareCount');
|
||||
if (shareEl) shareEl.textContent = formatNum(s.shareCount || 0);
|
||||
var c = document.getElementById('commentCount');
|
||||
if (c) c.textContent = formatNum(stats.commentCount || 0);
|
||||
if (c) c.textContent = formatNum(s.commentCount || 0);
|
||||
}
|
||||
function formatNum(n) {
|
||||
n = Number(n);
|
||||
|
||||
Reference in New Issue
Block a user