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 += ` +