mirror of
https://ghfast.top/https://github.com/zsjy/halo-theme-dream2.0-plus.git
synced 2025-03-15 11:59:40 +08:00
优化:新增侧边栏-人生倒计时
This commit is contained in:
parent
a6093ce9e7
commit
76cf7053f9
@ -642,6 +642,8 @@ spec:
|
||||
label: 文章标签模块
|
||||
- value: 'tagcloud'
|
||||
label: 文章标签云模块
|
||||
- value: 'timelife'
|
||||
label: 人生倒计时
|
||||
- $formkit: select
|
||||
name: position
|
||||
label: 模块位置
|
||||
|
@ -3195,6 +3195,114 @@ button.swiper-pagination-bullet {
|
||||
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 {
|
||||
|
@ -425,6 +425,94 @@ const commonContext = {
|
||||
|
||||
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() {
|
||||
if (!window.CommentWidget) {
|
||||
@ -472,7 +560,7 @@ const commonContext = {
|
||||
window.commonContext = commonContext
|
||||
|
||||
!(function () {
|
||||
const loads = ['initCarousel', 'sparkInput', 'websiteTime', 'initComment', 'webCopyright']
|
||||
const loads = ['initCarousel', 'sparkInput', 'websiteTime', 'initComment', 'webCopyright', 'initTimeCount']
|
||||
const omits = ['initEffects', 'loadMaintain', 'showThemeVersion']
|
||||
|
||||
Object.keys(commonContext).forEach(
|
||||
|
10
templates/widget/timelife.html
Normal file
10
templates/widget/timelife.html
Normal 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>
|
Loading…
x
Reference in New Issue
Block a user