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

Merge pull request #598 from carolcoral/main 

修复“关于”页面中“地图”中的圆角问题
This commit is contained in:
Carol 2024-01-03 14:27:40 +08:00 committed by GitHub
parent 2ea4afce64 5e849f8885
commit bea783323a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 148 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
templates/modules/widgets/about-widgets/about-reward.html
View File

@ -1,8 +1,8 @@
<div class="author-content" th:if="${theme.config.aboutReward.aboutRewardEnable}"> <div class="author-content" th:if="${theme.config.aboutReward.aboutRewardEnable}">
<div class="author-content-item single reward" id="about-reward"> <div class="author-content-item single reward" id="about-reward">
<div class="author-content-item-tips">致谢</div> <div class="author-content-item-tips">致谢</div>
<span class="author-content-item-title" >[[${theme.config.aboutReward.title}]]</span> <span class="author-content-item-title">[[${theme.config.aboutReward.title}]]</span>
<div class="author-content-item-description" > <div class="author-content-item-description">
[[${theme.config.aboutReward.content}]] [[${theme.config.aboutReward.content}]]
</div> </div>
@ -14,39 +14,44 @@
<div id="TA">[[${theme.config.aboutReward.reward.name}]]</div> <div id="TA">[[${theme.config.aboutReward.reward.name}]]</div>
</div> </div>
</div> </div>
<div id="tube-con"><svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg"> <div id="tube-con">
<path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20"></path> <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20"></path> <path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20"></path>
<path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20"></path> <path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20"></path> <path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20"></path>
<rect y="186" width="236" height="24" fill="#e5e9ef"></rect> <path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20"></path>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse> <rect y="186" width="236" height="24" fill="#e5e9ef"></rect>
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle> <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
</svg>
<div id="mask"><svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20"></path>
<path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20"></path>
<path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20"></path>
<rect y="186" width="236" height="24" fill="#f25d8e"></rect>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse> <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
</svg></div> </svg>
<div id="orange-mask"><svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg"> <div id="mask">
<path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20"></path> <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20"></path> <path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20"></path>
<path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20"></path> <path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20"></path> <path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20"></path>
<rect y="186" width="236" height="24" fill="#ffd52b"></rect> <path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20"></path>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse> <rect y="186" width="236" height="24" fill="#f25d8e"></rect>
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle> <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse> <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle> <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse>
</svg></div> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
</svg>
</div>
<div id="orange-mask">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20"></path>
<path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20"></path>
<path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20"></path>
<rect y="186" width="236" height="24" fill="#ffd52b"></rect>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse>
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
</svg>
</div>
<p id="people">共<b>[[${theme.config.aboutReward.reward_list.size()}]]</b>人</p> <p id="people">共<b>[[${theme.config.aboutReward.reward_list.size()}]]</b>人</p>
</div> </div>
</div> </div>
@ -57,7 +62,8 @@
<div class="reward-list-item-name">[[${authorReward.name}]]</div> <div class="reward-list-item-name">[[${authorReward.name}]]</div>
<div class="reward-list-bottom-group"> <div class="reward-list-bottom-group">
<div th:if="${authorReward.sign == 'N'}" class="reward-list-item-money">¥ <div th:if="${authorReward.sign == 'N'}" class="reward-list-item-money">¥
[[${authorReward.amount}]]</div> [[${authorReward.amount}]]
</div>
<div th:if="${authorReward.sign == 'Y'}" class="reward-list-item-money" <div th:if="${authorReward.sign == 'Y'}" class="reward-list-item-money"
style="background: var(--heo-vip);">¥ [[${authorReward.amount}]] style="background: var(--heo-vip);">¥ [[${authorReward.amount}]]
</div> </div>

166
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,25 +22,32 @@
<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"
id="selfInfo-content-year" th:style="'color:' + ${texts[0].authorInfoColor}" th:text="${texts[0].authorInfoTitle}">生于</span><span
th:text="${texts[0].authorInfoContent}">2000</span> class="selfInfo-content"
id="selfInfo-content-year" th:style="'color:' + ${texts[0].authorInfoColor}"
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:style="'color:' + ${texts[1].authorInfoColor}" th:text="${texts[1].authorInfoTitle}">太原理工大学</span><span
th:text="${texts[1].authorInfoContent}">计算机科学</span> class="selfInfo-content"
th:style="'color:' + ${texts[1].authorInfoColor}"
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:style="'color:' + ${texts[2].authorInfoColor}" th:text="${texts[2].authorInfoTitle}">现在职业</span><span
th:text="${texts[2].authorInfoContent}">BI工程师</span> class="selfInfo-content"
th:style="'color:' + ${texts[2].authorInfoColor}"
th:text="${texts[2].authorInfoContent}">BI工程师</span>
</div> </div>
</div> </div>
</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 {
@ -100,70 +113,73 @@
// 链接替换即可，不需要后面的参数 // 链接替换即可，不需要后面的参数
function initAboutPage() { function initAboutPage() {
fetch("https://v6-widget.51.la/v6/[[${theme.config.about.LingQueMonitorID}]]/quote.js") fetch("https://v6-widget.51.la/v6/[[${theme.config.about.LingQueMonitorID}]]/quote.js")
.then(res => res.text()) .then(res => res.text())
.then(data => { .then(data => {
let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"]; let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
// let num = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g) // let num = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g)
let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g); let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);
num = num.map(el => { num = num.map(el => {
let val = el.replace(/(<\/span><span>)/g, ""); let val = el.replace(/(<\/span><span>)/g, "");
let str = val.replace(/(<\/span><\/p>)/g, ""); let str = val.replace(/(<\/span><\/p>)/g, "");
return str; return str;
});
let statisticEl = document.getElementById("statistic");
// 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量
let statistic = [];
for (let i = 0; i < num.length; i++) {
if (!statisticEl) return;
if (i == 0) continue;
statisticEl.innerHTML +=
"<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
queueMicrotask(() => {
statistic.push(
new CountUp(title[i], 0, num[i], 0, 2, {
useEasing: true,
useGrouping: true,
separator: ",",
decimal: ".",
prefix: "",
suffix: "",
})
);
}); });
}
let statisticElement = document.querySelector(".about-statistic.author-content-item"); let statisticEl = document.getElementById("statistic");
function statisticUP() {
if (!statisticElement) return;
const callback = (entries, observer) => { // 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量
entries.forEach(entry => { let statistic = [];
if (entry.isIntersecting) { for (let i = 0; i < num.length; i++) {
for (let i = 0; i < num.length; i++) { if (!statisticEl) return;
if (i == 0) continue; if (i == 0) continue;
queueMicrotask(() => { statisticEl.innerHTML +=
statistic[i - 1].start(); "<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
}); queueMicrotask(() => {
} statistic.push(
observer.disconnect(); // 停止观察元素，因为不再需要触发此回调 new CountUp(title[i], 0, num[i], 0, 2, {
} useEasing: true,
useGrouping: true,
separator: ",",
decimal: ".",
prefix: "",
suffix: "",
})
);
}); });
}; }
const options = { let statisticElement = document.querySelector(".about-statistic.author-content-item");
root: null,
rootMargin: "0px", function statisticUP() {
threshold: 0 if (!statisticElement) return;
};
const observer = new IntersectionObserver(callback, options); const callback = (entries, observer) => {
observer.observe(statisticElement); entries.forEach(entry => {
} if (entry.isIntersecting) {
statisticUP() for (let i = 0; i < num.length; i++) {
}); if (i == 0) continue;
queueMicrotask(() => {
statistic[i - 1].start();
});
}
observer.disconnect(); // 停止观察元素，因为不再需要触发此回调
}
});
};
const options = {
root: null,
rootMargin: "0px",
threshold: 0
};
const observer = new IntersectionObserver(callback, options);
observer.observe(statisticElement);
}
statisticUP()
});
} }
initAboutPage(); initAboutPage();
</script> </script>