From 76cf7053f96d5f69e5f1dee76f304434d13ebdb9 Mon Sep 17 00:00:00 2001
From: mjsoftware <1406993111@qq.com>
Date: Sun, 18 Feb 2024 17:11:58 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E6=96=B0=E5=A2=9E?=
=?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F-=E4=BA=BA=E7=94=9F=E5=80=92?=
=?UTF-8?q?=E8=AE=A1=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
settings.yaml | 2 +
src/css/style.less | 108 +++++++++++++++++++++++++++++++++
src/js/common.js | 90 ++++++++++++++++++++++++++-
templates/widget/timelife.html | 10 +++
4 files changed, 209 insertions(+), 1 deletion(-)
create mode 100644 templates/widget/timelife.html
diff --git a/settings.yaml b/settings.yaml
index 4010805..a735535 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -642,6 +642,8 @@ spec:
label: 文章标签模块
- value: 'tagcloud'
label: 文章标签云模块
+ - value: 'timelife'
+ label: 人生倒计时
- $formkit: select
name: position
label: 模块位置
diff --git a/src/css/style.less b/src/css/style.less
index ff05a6b..fdc0a8c 100644
--- a/src/css/style.less
+++ b/src/css/style.less
@@ -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 {
diff --git a/src/js/common.js b/src/js/common.js
index 4e90a3f..1e82f17 100644
--- a/src/js/common.js
+++ b/src/js/common.js
@@ -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(
diff --git a/templates/widget/timelife.html b/templates/widget/timelife.html
new file mode 100644
index 0000000..c123c5a
--- /dev/null
+++ b/templates/widget/timelife.html
@@ -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>