github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复关于页面中地图圆角问题

This commit is contained in:
liuxuewen 2024-01-03 14:20:13 +08:00
parent 8423a75d1e
commit 5e849f8885
1 changed files with 104 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
templates/modules/widgets/about-widgets/statistics-map.html
View File

@ -1,16 +1,20 @@
<!-- 数据统计&作者相关信息 --> <!-- 数据统计&作者相关信息 -->
<div class="author-content" > <div class="author-content">
<div class="about-statistic author-content-item" <div class="about-statistic author-content-item"
style="background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp);"> style="background: url(https://bu.dusays.com/2023/03/12/640dc8c72f623.webp);">
<div class="card-content"> <div class="card-content">
<div class="author-content-item-tips">数据</div> <div class="author-content-item-tips">数据</div>
<span class="author-content-item-title">访问统计</span> <span class="author-content-item-title">访问统计</span>
<div id="statistic"></div> <div id="statistic"></div>
<div class="post-tips">统计信息来自 <a href="https://invite.51.la/1NzKqTeb?target=V6" rel="noopener nofollow" <div class="post-tips">统计信息来自 <a href="https://invite.51.la/1NzKqTeb?target=V6"
rel="noopener nofollow"
target="_blank">51la网站统计</a></div> target="_blank">51la网站统计</a></div>
<div class="banner-button-group"><a class="banner-button" onclick="pjax.loadUrl('/archives')" <div class="banner-button-group">
data-pjax-state=""><i class="haofont hao-icon-circle-arrow-up-right-1"></i><span <a class="banner-button" onclick="pjax.loadUrl('/archives')" data-pjax-state="">
class="banner-button-text">文章隧道</span></a></div> <i class="haofont hao-icon-circle-arrow-up-right-1"></i>
<span class="banner-button-text">文章隧道</span>
</a>
</div>
</div> </div>
</div> </div>
@ -18,23 +22,30 @@
<div class="author-content-item-group column mapAndInfo"> <div class="author-content-item-group column mapAndInfo">
<div class="author-content-item map single"> <div class="author-content-item map single">
<span class="map-title">我现在住在 <span class="map-title">我现在住在
<b>[[${theme.config.about.map.StrengthenTitle}]]</b></span> <b>[[${theme.config.about.map.StrengthenTitle}]]</b>
</span>
</div> </div>
<div class="author-content-item selfInfo single" <div class="author-content-item selfInfo single"
th:if="${not #lists.isEmpty(theme.config.about.map.authorInfo)}" th:if="${not #lists.isEmpty(theme.config.about.map.authorInfo)}"
th:with="texts = ${theme.config.about.map.authorInfo}"> th:with="texts = ${theme.config.about.map.authorInfo}">
<div th:if="${theme.config.about.map.authorInfo.size()}>'0'"><span class="selfInfo-title" <div th:if="${theme.config.about.map.authorInfo.size()}>'0'">
th:text="${texts[0].authorInfoTitle}">生于</span><span class="selfInfo-content" <span class="selfInfo-title"
th:text="${texts[0].authorInfoTitle}">生于</span><span
class="selfInfo-content"
id="selfInfo-content-year" th:style="'color:' + ${texts[0].authorInfoColor}" id="selfInfo-content-year" th:style="'color:' + ${texts[0].authorInfoColor}"
th:text="${texts[0].authorInfoContent}">2000</span> th:text="${texts[0].authorInfoContent}">2000</span>
</div> </div>
<div th:if="${theme.config.about.map.authorInfo.size()}>'1'"><span class="selfInfo-title" <div th:if="${theme.config.about.map.authorInfo.size()}>'1'">
th:text="${texts[1].authorInfoTitle}">太原理工大学</span><span class="selfInfo-content" <span class="selfInfo-title"
th:text="${texts[1].authorInfoTitle}">太原理工大学</span><span
class="selfInfo-content"
th:style="'color:' + ${texts[1].authorInfoColor}" th:style="'color:' + ${texts[1].authorInfoColor}"
th:text="${texts[1].authorInfoContent}">计算机科学</span> th:text="${texts[1].authorInfoContent}">计算机科学</span>
</div> </div>
<div th:if="${theme.config.about.map.authorInfo.size()}>'2'"><span class="selfInfo-title" <div th:if="${theme.config.about.map.authorInfo.size()}>'2'">
th:text="${texts[2].authorInfoTitle}">现在职业</span><span class="selfInfo-content" <span class="selfInfo-title"
th:text="${texts[2].authorInfoTitle}">现在职业</span><span
class="selfInfo-content"
th:style="'color:' + ${texts[2].authorInfoColor}" th:style="'color:' + ${texts[2].authorInfoColor}"
th:text="${texts[2].authorInfoContent}">BI工程师</span> th:text="${texts[2].authorInfoContent}">BI工程师</span>
</div> </div>
@ -57,6 +68,7 @@
background: url([[${theme.config.about.map.backgroundDark}]]) no-repeat center; background: url([[${theme.config.about.map.backgroundDark}]]) no-repeat center;
background-size: 100%; background-size: 100%;
} }
.author-content-item.map:hover { .author-content-item.map:hover {
background-size: 120%; background-size: 120%;
transition: 4s ease-in-out; transition: 4s ease-in-out;
@ -75,6 +87,7 @@
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
transition: 1s ease-in-out; transition: 1s ease-in-out;
font-size: 20px; font-size: 20px;
border-radius: 0 0 1rem 1rem;
} }
.author-content-item.map:hover .map-title { .author-content-item.map:hover .map-title {
@ -136,6 +149,7 @@
} }
let statisticElement = document.querySelector(".about-statistic.author-content-item"); let statisticElement = document.querySelector(".about-statistic.author-content-item");
function statisticUP() { function statisticUP() {
if (!statisticElement) return; if (!statisticElement) return;
@ -161,9 +175,11 @@
const observer = new IntersectionObserver(callback, options); const observer = new IntersectionObserver(callback, options);
observer.observe(statisticElement); observer.observe(statisticElement);
} }
statisticUP() statisticUP()
}); });
} }
initAboutPage(); initAboutPage();
</script> </script>