优化:新增侧边栏-人生倒计时

This commit is contained in:
mjsoftware 2024-02-18 17:11:58 +08:00
parent a6093ce9e7
commit 76cf7053f9
4 changed files with 209 additions and 1 deletions

View File

@ -642,6 +642,8 @@ spec:
label: 文章标签模块 label: 文章标签模块
- value: 'tagcloud' - value: 'tagcloud'
label: 文章标签云模块 label: 文章标签云模块
- value: 'timelife'
label: 人生倒计时
- $formkit: select - $formkit: select
name: position name: position
label: 模块位置 label: 模块位置

View File

@ -3195,6 +3195,114 @@ button.swiper-pagination-bullet {
line-height: 1.4em; line-height: 1.4em;
} }
} }
/*人生计时器*/
&.timelife {
.item {
margin-bottom: 15px;
&:last-child {
margin-bottom: 0;
}
.title {
font-size: 12px;
color: var(--main);
margin-bottom: 5px;
display: flex;
align-items: center;
.text {
color: var(--theme);
font-weight: 500;
font-size: 14px;
margin: 0 5px;
}
}
.progress {
display: flex;
align-items: center;
&-bar {
height: 10px;
border-radius: 5px;
overflow: hidden;
background: var(--dark-b);
width: 0;
min-width: 0;
flex: 1;
margin-right: 5px;
&-inner {
width: 0;
height: 100%;
border-radius: 5px;
transition: width 0.35s;
animation: progress 750ms linear infinite;
&-0 {
background: #bde6ff;
background-image: linear-gradient(135deg,
#50bfff 25%,
transparent 25%,
transparent 50%,
#50bfff 50%,
#50bfff 75%,
transparent 75%,
transparent 100%);
background-size: 30px 30px;
}
&-1 {
background: #ffd980;
background-image: linear-gradient(135deg,
#f7ba2a 25%,
transparent 25%,
transparent 50%,
#f7ba2a 50%,
#f7ba2a 75%,
transparent 75%,
transparent 100%);
background-size: 30px 30px;
}
&-2 {
background: #ffa9a9;
background-image: linear-gradient(135deg,
#ff4949 25%,
transparent 25%,
transparent 50%,
#ff4949 50%,
#ff4949 75%,
transparent 75%,
transparent 100%);
background-size: 30px 30px;
}
&-3 {
background: #67c23a;
background-image: linear-gradient(135deg,
#4f9e28 25%,
transparent 25%,
transparent 50%,
#4f9e28 50%,
#4f9e28 75%,
transparent 75%,
transparent 100%);
background-size: 30px 30px;
}
}
}
&-percentage {
width: 38px;
color: var(--main);
}
}
}
}
} }
.main-content { .main-content {

View File

@ -425,6 +425,94 @@ const commonContext = {
webCopyright.innerText = '© '+getYear + '-'+nowYear+' '+ DreamConfig.site_title webCopyright.innerText = '© '+getYear + '-'+nowYear+' '+ DreamConfig.site_title
}, },
/* 激活侧边栏人生倒计时 */
initTimeCount() {
if (!$('.card.widget.timelife').length) {
return
}
let timelife = [
{
title: '今日已经过去',
endTitle: '小时',
num: 0,
percent: '0%',
},
{
title: '这周已经过去',
endTitle: '天',
num: 0,
percent: '0%',
},
{
title: '本月已经过去',
endTitle: '天',
num: 0,
percent: '0%',
},
{
title: '今年已经过去',
endTitle: '个月',
num: 0,
percent: '0%',
},
]
{
let nowDate = +new Date()
let todayStartDate = new Date(new Date().toLocaleDateString()).getTime()
let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60
let todayPassHoursPercent = (todayPassHours / 24) * 100
timelife[0].num = parseInt(todayPassHours)
timelife[0].percent = parseInt(todayPassHoursPercent) + '%'
}
{
let weeks = {
0: 7,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6,
}
let weekDay = weeks[new Date().getDay()]
let weekDayPassPercent = (weekDay / 7) * 100
timelife[1].num = parseInt(weekDay)
timelife[1].percent = parseInt(weekDayPassPercent) + '%'
}
{
let year = new Date().getFullYear()
let date = new Date().getDate()
let month = new Date().getMonth() + 1
let monthAll = new Date(year, month, 0).getDate()
let monthPassPercent = (date / monthAll) * 100
timelife[2].num = date
timelife[2].percent = parseInt(monthPassPercent) + '%'
}
{
let month = new Date().getMonth() + 1
let yearPass = (month / 12) * 100
timelife[3].num = month
timelife[3].percent = parseInt(yearPass) + '%'
}
let htmlStr = ''
timelife.forEach((item, index) => {
htmlStr += `
<div class="item">
<div class="title">
${item.title}
<span class="text">${item.num}</span>
${item.endTitle}
</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-bar-inner progress-bar-inner-${index}" style="width: ${item.percent}"></div>
</div>
<div class="progress-percentage">${item.percent}</div>
</div>
</div>`
})
$('.aside-timelife').html(htmlStr)
},
/* 初始化评论区 */ /* 初始化评论区 */
initComment() { initComment() {
if (!window.CommentWidget) { if (!window.CommentWidget) {
@ -472,7 +560,7 @@ const commonContext = {
window.commonContext = commonContext window.commonContext = commonContext
!(function () { !(function () {
const loads = ['initCarousel', 'sparkInput', 'websiteTime', 'initComment', 'webCopyright'] const loads = ['initCarousel', 'sparkInput', 'websiteTime', 'initComment', 'webCopyright', 'initTimeCount']
const omits = ['initEffects', 'loadMaintain', 'showThemeVersion'] const omits = ['initEffects', 'loadMaintain', 'showThemeVersion']
Object.keys(commonContext).forEach( Object.keys(commonContext).forEach(

View File

@ -0,0 +1,10 @@
<div xmlns:th="https://www.thymeleaf.org"
th:fragment="widget (hide)"
th:class="'card widget timelife ' + ${hide}">
<div class="card-title">
<i class="ri-hourglass-line card-title-label"></i>
<span>人生倒计时</span>
</div>
<div class="card-content aside-timelife"></div>
</div>