generated from dellevin/template
新增照片
This commit is contained in:
@@ -25,7 +25,7 @@
|
|||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
<!-- umami统计 -->
|
<!-- 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 库 -->
|
<!-- ECharts 库 -->
|
||||||
<script src="./static/js/echarts/echarts.min.js"></script>
|
<script src="./static/js/echarts/echarts.min.js"></script>
|
||||||
<!-- 多语言 -->
|
<!-- 多语言 -->
|
||||||
|
|||||||
@@ -92,5 +92,7 @@
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- 新增的闲言碎语样式 END --- */
|
/* --- 新增的闲言碎语样式 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",
|
"./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: {
|
6: {
|
||||||
id: "",
|
id: "",
|
||||||
rank: "<strong>历史最高段位:</strong>传奇车神",
|
rank: "<strong>历史最高段位:</strong>传奇车神",
|
||||||
@@ -145,6 +165,15 @@ const gameDetailData = {
|
|||||||
"./static/img/game/qqspead/qqspead2.jpg",
|
"./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;
|
let currentlyOpenTooltip = null;
|
||||||
|
|||||||
@@ -54,7 +54,7 @@ const translationsZH = {
|
|||||||
loading_memos: "正在加载闲言碎语...",
|
loading_memos: "正在加载闲言碎语...",
|
||||||
loading_website:"正在加载网站...",
|
loading_website:"正在加载网站...",
|
||||||
// 底部
|
// 底部
|
||||||
footer_text: "我虽然是个废物,但我仍然选择用自己喜欢的方式度过自己的余生",
|
footer_text: "我虽然是个废物,但我仍然选择用自己喜欢的方式度过自己的余生",
|
||||||
visitor_count_label: "本站访客数 :",
|
visitor_count_label: "本站访客数 :",
|
||||||
visit_count_label: "本站总访问量 :",
|
visit_count_label: "本站总访问量 :",
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -193,7 +193,7 @@ const MapFootprintModule = (() => {
|
|||||||
// 如果还需要显示其他描述信息(例如可以从 params.data 中获取),可以在此处添加
|
// 如果还需要显示其他描述信息(例如可以从 params.data 中获取),可以在此处添加
|
||||||
const description = params.data.desc || "博主也不知道说啥了。。。";
|
const description = params.data.desc || "博主也不知道说啥了。。。";
|
||||||
if (description) {
|
if (description) {
|
||||||
tooltipHtml += `<strong>描述:</strong>${description}<br/>`;
|
tooltipHtml += `<strong>描述: </strong>${description}<br/>`;
|
||||||
}
|
}
|
||||||
// 获取图片列表
|
// 获取图片列表
|
||||||
const imageList = params.data.imgList; // 直接从数据对象获取 imgList
|
const imageList = params.data.imgList; // 直接从数据对象获取 imgList
|
||||||
@@ -201,14 +201,14 @@ const MapFootprintModule = (() => {
|
|||||||
// 检查是否有图片列表且不为空
|
// 检查是否有图片列表且不为空
|
||||||
if (Array.isArray(imageList) && imageList.length > 0) {
|
if (Array.isArray(imageList) && imageList.length > 0) {
|
||||||
// 添加标题
|
// 添加标题
|
||||||
tooltipHtml += "<strong>照片:</strong><br/>";
|
tooltipHtml += "<strong>照片: </strong><br/>";
|
||||||
// 遍历图片列表,生成 HTML 图像标签
|
// 遍历图片列表,生成 HTML 图像标签
|
||||||
imageList.forEach((imgSrc) => {
|
imageList.forEach((imgSrc) => {
|
||||||
tooltipHtml += `<img src="${imgSrc}" alt="${name} 图片" style="max-width: 150px; max-height: 100px; margin: 5px; border-radius: 4px;" onerror="this.style.display='none';"/>`;
|
tooltipHtml += `<img src="${imgSrc}" alt="${name} 图片" style="max-width: 150px; max-height: 100px; margin: 5px; border-radius: 4px;" onerror="this.style.display='none';"/>`;
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// 如果没有图片或 imgList 不存在/为空,则显示提示
|
// 如果没有图片或 imgList 不存在/为空,则显示提示
|
||||||
tooltipHtml += "<strong>照片:</strong>看来博主不是很爱拍照~";
|
tooltipHtml += "<strong>照片: </strong>看来博主不是很爱拍照~";
|
||||||
}
|
}
|
||||||
|
|
||||||
return tooltipHtml; // 返回构建好的 HTML 字符串
|
return tooltipHtml; // 返回构建好的 HTML 字符串
|
||||||
@@ -253,11 +253,11 @@ const MapFootprintModule = (() => {
|
|||||||
// 为了实现高亮,我们只需要列出访问过的城市即可,未访问的城市会使用默认颜色
|
// 为了实现高亮,我们只需要列出访问过的城市即可,未访问的城市会使用默认颜色
|
||||||
const provinceMapData = filteredVisitedPlaces.map((city) => ({
|
const provinceMapData = filteredVisitedPlaces.map((city) => ({
|
||||||
name: city.name,
|
name: city.name,
|
||||||
desc:city.desc || "",
|
desc: city.desc || "",
|
||||||
imgList:city.imgList || [],
|
imgList: city.imgList || [],
|
||||||
value: 1, // 值为 1 表示访问过,用于 visualMap 区分
|
value: 1, // 值为 1 表示访问过,用于 visualMap 区分
|
||||||
}));
|
}));
|
||||||
// console.log(provinceMapData)
|
|
||||||
// --- 配置 visualMap ---
|
// --- 配置 visualMap ---
|
||||||
visualMapConfig = {
|
visualMapConfig = {
|
||||||
show: false, // 通常不显示 visualMap 组件条
|
show: false, // 通常不显示 visualMap 组件条
|
||||||
@@ -270,7 +270,6 @@ const MapFootprintModule = (() => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// --- 创建省份地图系列 (用于高亮城市) ---
|
// --- 创建省份地图系列 (用于高亮城市) ---
|
||||||
// 关键修改:将 map 系列的 clickHandler 禁用,让 geo 组件处理点击
|
|
||||||
const provinceMapSeries = {
|
const provinceMapSeries = {
|
||||||
// name: "访问过的城市",
|
// name: "访问过的城市",
|
||||||
type: "map",
|
type: "map",
|
||||||
@@ -278,7 +277,7 @@ const MapFootprintModule = (() => {
|
|||||||
roam: roamSetting,
|
roam: roamSetting,
|
||||||
zoom: zoomLevel,
|
zoom: zoomLevel,
|
||||||
center: centerCoord,
|
center: centerCoord,
|
||||||
silent: true, // 设置为 true,使 map 系列不响应鼠标事件,避免干扰 geo 的点击返回
|
silent: false, // 设置为 false,允许响应鼠标事件以显示 tooltip
|
||||||
label: {
|
label: {
|
||||||
show: true, // 可以选择是否显示城市名称标签
|
show: true, // 可以选择是否显示城市名称标签
|
||||||
color: "#000", // 标签颜色
|
color: "#000", // 标签颜色
|
||||||
@@ -305,6 +304,43 @@ const MapFootprintModule = (() => {
|
|||||||
borderColor: "#333",
|
borderColor: "#333",
|
||||||
borderWidth: 0.5,
|
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 组件添加到配置中
|
// 将省份地图系列和 geo 组件添加到配置中
|
||||||
@@ -332,7 +368,14 @@ const MapFootprintModule = (() => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
tooltip: {
|
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 组件配置
|
||||||
geo:
|
geo:
|
||||||
|
|||||||
@@ -192,8 +192,72 @@
|
|||||||
|
|
||||||
// 为加载更多按钮绑定事件 (使用全局函数)
|
// 为加载更多按钮绑定事件 (使用全局函数)
|
||||||
window.loadMemos = loadMemos;
|
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 () {
|
memosTab.addEventListener("click", function () {
|
||||||
// 只有在内容是空的或者首次加载时才调用
|
// 只有在内容是空的或者首次加载时才调用
|
||||||
if (memoData.length === 0) {
|
if (memoData.length === 0) {
|
||||||
|
|||||||
Reference in New Issue
Block a user