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

修复关于页面中赞赏名单在移动端下头像错位的问题

Browse Source
This commit is contained in:
UPToZ 2024-06-01 14:49:11 +08:00
parent 45e93608ab
commit 236e0d6547
2 changed files with 117 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
templates/assets/zhheo/zhheoblog.css
View File

@ -16337,7 +16337,7 @@ span.hexo-douban-pagenum {
padding: 1rem; padding: 1rem;
border-radius: 12px; border-radius: 12px;
border: var(--style-border-always); border: var(--style-border-always);
width: calc((100% / 6) - 0.5rem); width: calc((100% / 4) - 0.5rem);
margin: 0rem 0.25rem 0.5rem 0.25rem; margin: 0rem 0.25rem 0.5rem 0.25rem;
box-shadow: var(--heo-shadow-border); box-shadow: var(--heo-shadow-border);
} }
@ -16349,11 +16349,12 @@ span.hexo-douban-pagenum {
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
.author-content-item.single.reward .reward-list-all .reward-list-item { .author-content-item.single.reward .reward-list-all .reward-list-item {
width: calc((100% / 4) - 0.5rem); width: calc((100% / 3) - 0.5rem);
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar { .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar {
width: 32%; /* display: none; */
/* width: 32%; */
} }
} }
@ -16362,19 +16363,19 @@ span.hexo-douban-pagenum {
width: calc((100% / 2) - 0.5rem); width: calc((100% / 2) - 0.5rem);
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar { /* .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar {
width: 20%; width: 20%;
} } */
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.author-content-item.single.reward .reward-list-all .reward-list-item { .author-content-item.single.reward .reward-list-all .reward-list-item {
width: 100%; width: calc((100% / 2) - 0.5rem);
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar { /* .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar {
width: 9%; width: 9%;
} } */
} }
@media screen and (max-width: 520px) { @media screen and (max-width: 520px) {
@ -16382,9 +16383,9 @@ span.hexo-douban-pagenum {
width: 100%; width: 100%;
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar { /* .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar {
width: 20%; width: 20%;
} } */
} }
.author-content-item.single.reward .author-content-item-description { .author-content-item.single.reward .author-content-item-description {
@ -16407,19 +16408,34 @@ span.hexo-douban-pagenum {
width: 100%; width: 100%;
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-container {
display: flex;
justify-content: flex-start;
justify-content: space-between;
height: auto;
}
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-container .reward-list-item-content {
flex: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 15px;
}
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar { .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar {
width: 32%; width: 80px;
float: left; float: left;
z-index: 10; z-index: 10;
position: static; position: static;
height: 40px; height: 80px;
transform: translateY(-40%); /* transform: translateY(-40%); */
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar img { .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar img {
border-radius: 50%; border-radius: 50%;
width: 80%; width: 80px;
margin-top: 0.2rem; /* margin-top: 0.4rem; */
} }
.author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar-group { .author-content-item.single.reward .reward-list-all .reward-list-item .reward-list-item-avatar-group {

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

@ -1,84 +1,90 @@
<div class="author-content" th:if="${theme.config.aboutReward.aboutRewardEnable}" <div class="author-content" th:if="${theme.config.aboutReward.aboutRewardEnable}"
xmlns:th="http://www.w3.org/1999/xhtml"> xmlns:th="http://www.w3.org/1999/xhtml">
<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>
<div th:if="${theme.config.aboutReward.reward.enable_reward}" class="about-reward"> <div th:if="${theme.config.aboutReward.reward.enable_reward}" class="about-reward">
<div id="con"></div> <div id="con"></div>
<div id="TA-con" onclick="heo.rewardShowConsole()"> <div id="TA-con" onclick="heo.rewardShowConsole()">
<div id="text-con"> <div id="text-con">
<div id="linght"></div> <div id="linght"></div>
<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"> <div id="tube-con">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20"></path> <path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20"></path>
<path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20"></path> <path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20"></path>
<path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20"></path> <path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20"></path> <path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20"></path>
<rect y="186" width="236" height="24" fill="#e5e9ef"></rect> <rect y="186" width="236" height="24" fill="#e5e9ef"></rect>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse> <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef"></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="#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> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
</svg> </svg>
<div id="mask"> <div id="mask">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg"> <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="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="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="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" 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> <rect y="186" width="236" height="24" fill="#f25d8e"></rect>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse> <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="#f25d8e"></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> </svg>
</div> </div>
<div id="orange-mask"> <div id="orange-mask">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg"> <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="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="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="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20"></path>
<path d="M0 305H233.035L329.72 375H1028" 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> <rect y="186" width="236" height="24" fill="#ffd52b"></rect>
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse> <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> <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> <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> <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
</svg> </svg>
</div> </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>
<div class="reward-list-all" th:if="${not #lists.isEmpty(theme.config.aboutReward.reward_list)}" <div class="reward-list-all" th:if="${not #lists.isEmpty(theme.config.aboutReward.reward_list)}"
th:with="authorRewardList = ${theme.config.aboutReward.reward_list}"> th:with="authorRewardList = ${theme.config.aboutReward.reward_list}">
<div class="reward-list-item" th:each="authorReward : ${authorRewardList}"> <div class="reward-list-item" th:each="authorReward : ${authorRewardList}">
<div th:if="${not #strings.isEmpty(authorReward.avatar)}"> <div th:if="${not #strings.isEmpty(authorReward.avatar)}">
<div> <div class="reward-list-item-container">
<div class="reward-list-item-avatar"> <!-- 头像 -->
<img th:src="${authorReward.avatar}" th:alt="${authorReward.name}"> <div class="reward-list-item-avatar">
</div> <img th:src="${authorReward.avatar}" th:alt="${authorReward.name}">
<div style="z-index:20;float: left;" class="reward-list-item-avatar-group"> </div>
<div class="reward-list-item-name">[[${authorReward.name}]]</div> <div class="reward-list-item-content">
</div> <!-- 名称 -->
</div> <div style="z-index:20;float: left;" class="reward-list-item-avatar-group">
<div class="reward-list-bottom-group"> <div class="reward-list-item-name">[[${authorReward.name}]]</div>
<div th:if="${#conversions.convert(authorReward.amount, 'java.math.BigDecimal') < #conversions.convert(theme.config.aboutReward.rewardNumber, 'java.math.BigDecimal')}" class="reward-list-item-money">¥ </div>
[[${authorReward.amount}]] <!-- 金额及时间 -->
</div> <div class="reward-list-bottom-group">
<div th:if="${#conversions.convert(authorReward.amount, 'java.math.BigDecimal') >= #conversions.convert(theme.config.aboutReward.rewardNumber, 'java.math.BigDecimal')}" class="reward-list-item-money" <div th:if="${#conversions.convert(authorReward.amount, 'java.math.BigDecimal') < #conversions.convert(theme.config.aboutReward.rewardNumber, 'java.math.BigDecimal')}" class="reward-list-item-money">¥
style="background: var(--heo-vip);">¥ [[${authorReward.amount}]] [[${authorReward.amount}]]
</div> </div>
<time class="datatime reward-list-item-time">[[${authorReward.datatime}]]</time> <div th:if="${#conversions.convert(authorReward.amount, 'java.math.BigDecimal') >= #conversions.convert(theme.config.aboutReward.rewardNumber, 'java.math.BigDecimal')}" class="reward-list-item-money"
</div> style="background: var(--heo-vip);">¥ [[${authorReward.amount}]]
</div>
<time class="datatime reward-list-item-time">[[${authorReward.datatime}]]</time>
</div>
</div>
</div>
</div> </div>
<div th:if="${#strings.isEmpty(authorReward.avatar)}"> <div th:if="${#strings.isEmpty(authorReward.avatar)}">
<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">
@ -96,4 +102,4 @@
</div> </div>
</div> </div>
</div> </div>