弃用关于的动态地图改成静态图片
This commit is contained in:
1152958806@qq.com
parent
cbb49baf73
commit
5e23b49423
|
|
@ -2040,18 +2040,22 @@ spec:
|
|||
label: 地图相关配置
|
||||
value:
|
||||
StrengthenTitle:
|
||||
mapLocation: 22.582401,113.215456
|
||||
background:
|
||||
backgroundDark:
|
||||
authorInfo:
|
||||
children:
|
||||
- $formkit: text
|
||||
name: StrengthenTitle
|
||||
label: 居住地
|
||||
placeholder: 请输入内容
|
||||
- $formkit: text
|
||||
name: mapLocation
|
||||
label: 居住地经纬度坐标
|
||||
help: 可访问 https://lbs.qq.com/getPoint 拾取坐标，示例：22.582401,113.215456
|
||||
placeholder: 请输入经纬度坐标
|
||||
- $formkit: attachment
|
||||
name: background
|
||||
label: 地图亮色模式背景
|
||||
placeholder: 请输入内容
|
||||
- $formkit: attachment
|
||||
name: backgroundDark
|
||||
label: 地图暗色模式背景
|
||||
placeholder: 请输入内容
|
||||
- $formkit: repeater
|
||||
name: authorInfo
|
||||
label: 个人信息
|
||||
|
|
|
|||
|
|
@ -15509,65 +15509,7 @@ span.hexo-douban-pagenum {
|
|||
width: 59%;
|
||||
}
|
||||
|
||||
/* 关于页面地图 */
|
||||
|
||||
.author-content-item.map {
|
||||
background: url(https://img.zhheo.com/i/2022/08/31/630ef8e827401.webp) no-repeat center;
|
||||
min-height: 160px;
|
||||
max-height: 400px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.5rem;
|
||||
height: 60%;
|
||||
background-size: 100%;
|
||||
transition: 1s ease-in-out;
|
||||
}
|
||||
|
||||
[data-theme=dark] .author-content-item.map {
|
||||
background: url(https://img.zhheo.com/i/2022/08/31/630ef8db0fefe.webp) no-repeat center;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.author-content-item.map:hover {
|
||||
background-size: 120%;
|
||||
transition: 4s ease-in-out;
|
||||
background-position-x: 0;
|
||||
background-position-y: 36%;
|
||||
}
|
||||
|
||||
.author-content-item.map .map-title {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
background: var(--heo-maskbg);
|
||||
padding: 0.5rem 2rem;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transition: 1s ease-in-out;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.author-content-item.map:hover .map-title {
|
||||
bottom: -100%;
|
||||
}
|
||||
|
||||
.author-content-item.map .map-title b {
|
||||
color: var(--heo-fontcolor);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.author-content-item.map.myphoto {
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
.author-content-item.map .map-title {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 关于页面自我信息 */
|
||||
|
||||
.author-content-item.selfInfo {
|
||||
display: flex;
|
||||
min-height: 100px;
|
||||
|
|
|
|||
|
|
@ -169,9 +169,6 @@
|
|||
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js"></script>
|
||||
<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.css">
|
||||
|
||||
<!-- 关于地图-->
|
||||
<script src="https://map.qq.com/api/gljs?v=1.exp&key=YZOBZ-34HLF-K3OJV-JV6IN-OALJ5-7MBAC"></script>
|
||||
|
||||
<!-- 关于统计-->
|
||||
<script th:src="${assets_link + '/libs/countup/countup.js'}"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,8 +18,7 @@
|
|||
|
||||
|
||||
<div class="author-content-item-group column mapAndInfo">
|
||||
<div class="author-content-item map single" style="padding: 0;">
|
||||
<div id="mapContainer" style="height: 100%;"></div>
|
||||
<div class="author-content-item map single">
|
||||
<span class="map-title">我现在住在
|
||||
<b>[[${theme.config.about.map.StrengthenTitle}]]</b></span>
|
||||
</div>
|
||||
|
|
@ -45,7 +44,7 @@
|
|||
</div>
|
||||
<style>
|
||||
.author-content-item.map {
|
||||
background: none !important;
|
||||
background: url([[${theme.config.about.map.background}]]) no-repeat center;
|
||||
min-height: 160px;
|
||||
max-height: 400px;
|
||||
position: relative;
|
||||
|
|
@ -57,9 +56,46 @@
|
|||
}
|
||||
|
||||
[data-theme=dark] .author-content-item.map {
|
||||
background: none !important;
|
||||
background: url([[${theme.config.about.map.backgroundDark}]]) no-repeat center;
|
||||
background-size: 100%;
|
||||
}
|
||||
.author-content-item.map:hover {
|
||||
background-size: 120%;
|
||||
transition: 4s ease-in-out;
|
||||
background-position-x: 0;
|
||||
background-position-y: 36%;
|
||||
}
|
||||
|
||||
.author-content-item.map .map-title {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
background: var(--heo-maskbg);
|
||||
padding: 0.5rem 2rem;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
transition: 1s ease-in-out;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.author-content-item.map:hover .map-title {
|
||||
bottom: -100%;
|
||||
}
|
||||
|
||||
.author-content-item.map .map-title b {
|
||||
color: var(--heo-fontcolor);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.author-content-item.map.myphoto {
|
||||
background-size: cover !important;
|
||||
}
|
||||
|
||||
.author-content-item.map .map-title {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// 链接替换即可，不需要后面的参数
|
||||
|
|
@ -128,37 +164,6 @@
|
|||
statisticUP()
|
||||
});
|
||||
</script>
|
||||
<script defer>
|
||||
var t = new TMap.LatLng([[${ theme.config.about.map.mapLocation }]])
|
||||
, n = new TMap.Map(document.getElementById("mapContainer"), {
|
||||
center: t,
|
||||
zoom: 12,
|
||||
});
|
||||
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM),
|
||||
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION),
|
||||
n.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE),
|
||||
new TMap.MultiMarker({
|
||||
map: n,
|
||||
styles: {
|
||||
marker: new TMap.MarkerStyle({
|
||||
width: 20,
|
||||
height: 30,
|
||||
anchor: {
|
||||
x: 10,
|
||||
y: 30
|
||||
}
|
||||
})
|
||||
},
|
||||
geometries: [{
|
||||
id: "marker",
|
||||
position: t
|
||||
}]
|
||||
})
|
||||
|
||||
// 去除logo及水印
|
||||
var a = document.querySelector('canvas+div:last-child')
|
||||
a.style.display = 'none'
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue