generated from dellevin/template
新增照片
This commit is contained in:
@@ -25,7 +25,7 @@
|
||||
})();
|
||||
</script>
|
||||
<!-- umami统计 -->
|
||||
<script defer src="https://umami.iletter.top/anyjs" data-website-id="ae6cd64c-5900-49c9-9c22-95cedc24a508"></script>
|
||||
<!-- <script defer src="https://umami.iletter.top/anyjs" data-website-id="ae6cd64c-5900-49c9-9c22-95cedc24a508"></script> -->
|
||||
<!-- ECharts 库 -->
|
||||
<script src="./static/js/echarts/echarts.min.js"></script>
|
||||
<!-- 多语言 -->
|
||||
|
||||
@@ -92,5 +92,7 @@
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* --- 新增的闲言碎语样式 END --- */
|
||||
BIN
static/img/game/jiangchengchuangyeji/1.png
Normal file
BIN
static/img/game/jiangchengchuangyeji/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
BIN
static/img/game/jiangchengchuangyeji/2.png
Normal file
BIN
static/img/game/jiangchengchuangyeji/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
BIN
static/img/game/longzuhuanxiang/longzuhuanxiang1.jpg
Normal file
BIN
static/img/game/longzuhuanxiang/longzuhuanxiang1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 353 KiB |
BIN
static/img/game/wangzherongyao/wangzherongyao1.jpg
Normal file
BIN
static/img/game/wangzherongyao/wangzherongyao1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
BIN
static/img/game/wangzherongyao/wangzherongyao2.jpg
Normal file
BIN
static/img/game/wangzherongyao/wangzherongyao2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
@@ -135,6 +135,26 @@ const gameDetailData = {
|
||||
"./static/img/game/guigubahuang/3.jpg",
|
||||
],
|
||||
},
|
||||
3: {
|
||||
id: "",
|
||||
rank: "",
|
||||
detailDesc_zh: "游戏玩法大杂烩,好玩,爱玩!",
|
||||
detailDesc_en: "Fun! Love playing! The game is very nice!",
|
||||
images: [
|
||||
"./static/img/game/jiangchengchuangyeji/1.png",
|
||||
"./static/img/game/jiangchengchuangyeji/2.png",
|
||||
],
|
||||
},
|
||||
5: {
|
||||
id: "游戏id:一口氰化物",
|
||||
rank: "<strong>历史最高段位:</strong>星耀",
|
||||
detailDesc_zh: "有你们,才是真正的荣耀",
|
||||
detailDesc_en: "",
|
||||
images: [
|
||||
"./static/img/game/wangzherongyao/wangzherongyao1.jpg",
|
||||
"./static/img/game/wangzherongyao/wangzherongyao2.jpg",
|
||||
],
|
||||
},
|
||||
6: {
|
||||
id: "",
|
||||
rank: "<strong>历史最高段位:</strong>传奇车神",
|
||||
@@ -145,6 +165,15 @@ const gameDetailData = {
|
||||
"./static/img/game/qqspead/qqspead2.jpg",
|
||||
],
|
||||
},
|
||||
7: {
|
||||
id: "游戏id:chisty",
|
||||
rank: "",
|
||||
detailDesc_zh: "不好玩,但是满足了我的剧情幻想。",
|
||||
detailDesc_en: "",
|
||||
images: [
|
||||
"./static/img/game/longzuhuanxiang/longzuhuanxiang1.jpg",
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
let currentlyOpenTooltip = null;
|
||||
|
||||
@@ -54,7 +54,7 @@ const translationsZH = {
|
||||
loading_memos: "正在加载闲言碎语...",
|
||||
loading_website:"正在加载网站...",
|
||||
// 底部
|
||||
footer_text: "我虽然是个废物,但我仍然选择用自己喜欢的方式度过自己的余生",
|
||||
footer_text: "我虽然是个废物,但我仍然选择用自己喜欢的方式度过自己的余生",
|
||||
visitor_count_label: "本站访客数 :",
|
||||
visit_count_label: "本站总访问量 :",
|
||||
};
|
||||
|
||||
@@ -257,7 +257,7 @@ const MapFootprintModule = (() => {
|
||||
imgList: city.imgList || [],
|
||||
value: 1, // 值为 1 表示访问过,用于 visualMap 区分
|
||||
}));
|
||||
// console.log(provinceMapData)
|
||||
|
||||
// --- 配置 visualMap ---
|
||||
visualMapConfig = {
|
||||
show: false, // 通常不显示 visualMap 组件条
|
||||
@@ -270,7 +270,6 @@ const MapFootprintModule = (() => {
|
||||
};
|
||||
|
||||
// --- 创建省份地图系列 (用于高亮城市) ---
|
||||
// 关键修改:将 map 系列的 clickHandler 禁用,让 geo 组件处理点击
|
||||
const provinceMapSeries = {
|
||||
// name: "访问过的城市",
|
||||
type: "map",
|
||||
@@ -278,7 +277,7 @@ const MapFootprintModule = (() => {
|
||||
roam: roamSetting,
|
||||
zoom: zoomLevel,
|
||||
center: centerCoord,
|
||||
silent: true, // 设置为 true,使 map 系列不响应鼠标事件,避免干扰 geo 的点击返回
|
||||
silent: false, // 设置为 false,允许响应鼠标事件以显示 tooltip
|
||||
label: {
|
||||
show: true, // 可以选择是否显示城市名称标签
|
||||
color: "#000", // 标签颜色
|
||||
@@ -305,6 +304,43 @@ const MapFootprintModule = (() => {
|
||||
borderColor: "#333",
|
||||
borderWidth: 0.5,
|
||||
},
|
||||
// 添加 tooltip 配置到 series 级别
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function(params) {
|
||||
// 检查是否有数据
|
||||
if (!params.data) {
|
||||
return params.name || "未知城市";
|
||||
}
|
||||
|
||||
const cityName = params.data.name || params.name || "未知城市";
|
||||
let tooltipHtml = `<div style="font-weight: bold; font-size: 14px; margin-bottom: 8px;">${cityName}</div>`;
|
||||
|
||||
// 如果这个城市在 visitedPlaces 中有记录
|
||||
const placeData = visitedPlaces.find(p => p.name === cityName && p.province === provinceCode);
|
||||
if (placeData) {
|
||||
// 显示描述
|
||||
const description = placeData.desc || "暂无描述";
|
||||
tooltipHtml += `<div style="margin-bottom: 8px; color: #666; font-size: 12px;">${description}</div>`;
|
||||
|
||||
// 显示图片
|
||||
if (placeData.imgList && placeData.imgList.length > 0) {
|
||||
tooltipHtml += `<div style="display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px;">`;
|
||||
placeData.imgList.forEach((imgSrc) => {
|
||||
tooltipHtml += `
|
||||
<img src="${imgSrc}"
|
||||
alt="${cityName}"
|
||||
style="width: 60px; height: 60px; object-fit: cover;
|
||||
border-radius: 4px; border: 1px solid #ddd;" />
|
||||
`;
|
||||
});
|
||||
tooltipHtml += `</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
return tooltipHtml;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 将省份地图系列和 geo 组件添加到配置中
|
||||
@@ -332,7 +368,14 @@ const MapFootprintModule = (() => {
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
|
||||
trigger: 'item',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
borderColor: '#ddd',
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
},
|
||||
extraCssText: 'box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 6px;'
|
||||
},
|
||||
// geo 组件配置
|
||||
geo:
|
||||
|
||||
@@ -193,7 +193,71 @@
|
||||
// 为加载更多按钮绑定事件 (使用全局函数)
|
||||
window.loadMemos = loadMemos;
|
||||
|
||||
// 当“闲言碎语”标签被点击时加载数据
|
||||
// 图片点击放大功能
|
||||
function initImageZoom() {
|
||||
// 使用事件委托,监听整个容器
|
||||
memosContainer.addEventListener('click', function (e) {
|
||||
// 检查是否点击到了图片
|
||||
if (e.target.classList.contains('memo-attachment-image')) {
|
||||
const fullUrl = e.target.getAttribute('data-full-url');
|
||||
if (fullUrl) {
|
||||
showImageModal(fullUrl);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 显示图片放大模态框
|
||||
function showImageModal(imageUrl) {
|
||||
// 创建模态框
|
||||
const modal = document.createElement('div');
|
||||
modal.id = 'image-zoom-modal';
|
||||
modal.style.cssText = `
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
z-index: 10000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: zoom-out;
|
||||
`;
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = imageUrl;
|
||||
img.style.cssText = `
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
object-fit: contain;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
||||
`;
|
||||
|
||||
modal.appendChild(img);
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// 点击关闭
|
||||
modal.addEventListener('click', function () {
|
||||
modal.remove();
|
||||
});
|
||||
|
||||
// ESC 键关闭
|
||||
function handleEsc(e) {
|
||||
if (e.key === 'Escape') {
|
||||
modal.remove();
|
||||
document.removeEventListener('keydown', handleEsc);
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', handleEsc);
|
||||
}
|
||||
|
||||
// 初始化图片放大功能
|
||||
initImageZoom();
|
||||
|
||||
// 当"闲言碎语"标签被点击时加载数据
|
||||
memosTab.addEventListener("click", function () {
|
||||
// 只有在内容是空的或者首次加载时才调用
|
||||
if (memoData.length === 0) {
|
||||
|
||||
Reference in New Issue
Block a user