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

settings.yaml

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

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 {

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(

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>