在侧栏添加一个人生倒计时(水个贴)
侧边栏壁纸
  • 累计撰写 28 篇文章
  • 累计收到 505 条评论

在侧栏添加一个人生倒计时(水个贴)

Quite
2020-12-22 / 11 评论 / 570 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2020年12月22日,已超过272天没有更新,若内容或图片失效,请留言反馈。

效果图

QQ截图20201222193924.png

简单的一匹

来了来了!

[card title="教程" color="success"]
先找到路径 /usr/themes/Cuteen/base/sidebar.php文件下-最新回复的上方
QQ截图20201222194239.png
添加如下代码

 <div class="sidebar-box classListBox">
         <div class="aside aside-count">
            <div class="p-3">人生倒计时</div>
            <div class="content">
                <div class="item" id="dayProgress">
                    <div class="title">今日已经过去<span></span>小时</div>
                    <div class="progress">
                        <div class="progress-bar">
                            <div class="progress-inner progress-inner-1"></div>
                        </div>
                        <div class="progress-percentage"></div>
                    </div>
                </div>
                <div class="item" id="weekProgress">
                    <div class="title">这周已经过去<span></span>天</div>
                    <div class="progress">
                        <div class="progress-bar">
                            <div class="progress-inner progress-inner-2"></div>
                        </div>
                        <div class="progress-percentage"></div>
                    </div>
                </div>
                <div class="item" id="monthProgress">
                    <div class="title">本月已经过去<span></span>天</div>
                    <div class="progress">
                        <div class="progress-bar">
                            <div class="progress-inner progress-inner-3"></div>
                        </div>
                        <div class="progress-percentage"></div>
                    </div>
                </div>
                <div class="item" id="yearProgress">
                    <div class="title">今年已经过去<span></span>个月</div>
                    <div class="progress">
                        <div class="progress-bar">
                            <div class="progress-inner progress-inner-4"></div>
                        </div>
                        <div class="progress-percentage"></div>
                    </div>
                </div>
            </div>
        </div>
     </div>

添加完成后,在主题后台自定义css里添加如下代码

.aside-count .content {
    padding: 15px
}

.aside-count .content .item {
    margin-bottom: 15px
}

.aside-count .content .item:last-child {
    margin-bottom: 0
}

.aside-count .content .item .title {
    font-size: 12px;
    color: var(--minor);
    margin-bottom: 5px;
    display: flex;
    align-items: center
}

.aside-count .content .item .title span {
    color: var(--theme);
    font-weight: 500;
    font-size: 14px;
    margin: 0 5px
}

.aside-count .content .item .progress {
    display: flex;
    align-items: center
}

.aside-count .content .item .progress .progress-bar {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--classC);
    width: 0;
    min-width: 0;
    flex: 1;
    margin-right: 5px
}
@keyframes progress {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 30px 0
    }
}
.aside-count .content .item .progress .progress-bar .progress-inner {
    width: 0;
    height: 100%;
    border-radius: 5px;
    transition: width 0.35s;
    -webkit-animation: progress 750ms linear infinite;
    animation: progress 750ms linear infinite
}

.aside-count .content .item .progress .progress-bar .progress-inner-1 {
    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
}

.aside-count .content .item .progress .progress-bar .progress-inner-2 {
    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
}

.aside-count .content .item .progress .progress-bar .progress-inner-3 {
    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
}

.aside-count .content .item .progress .progress-bar .progress-inner-4 {
    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
}

.aside-count .content .item .progress .progress-percentage {
    color: var(--info)
}

添加完成后,自己扒一下https://www.txmmp.cn/usr/themes/Cuteen/static/js/timeinfo.js ,丢到自己本地然后顶部引入这个js即可.
[/card]

5

评论 (11)

取消
  1. 头像
    Anyi
    Windows 10 · Google Chrome

    啊....JS引入不生效怎么回事吖 直接引用你的JS连接也是不生效滴

    回复
    1. 头像
      Quite 作者
      Windows 10 · Google Chrome
      @ Anyi

      需要转码utf8

      回复
      1. 头像
        Anyi
        Windows 7 · Google Chrome
        @ Quite

        emmm 试过了转码 压缩转码 能试过的都试了还是不行.. 表情

        回复
        1. 头像
          兔子先生
          Windows 10 · Google Chrome
          @ Anyi

          中文乱码删掉即可

          回复
  2. 头像
    xx
    Windows 7 · Google Chrome

    按照这个方法,没有成功啊,
    不显示时间

    回复
    1. 头像
      Quite 作者
      Windows 10 · Google Chrome
      @ xx

      js代码没引入 或者引入的js代码编码问题

      回复
      1. 头像
        xx
        Windows 10 · Google Chrome
        @ Quite

        js代码格式是utf-8吗

        回复
        1. 头像
          Quite 作者
          Windows 10 · Google Chrome
          @ xx

          我记得是gb2312格式

          回复
  3. 头像
    萌宇
    Windows 10 · Google Chrome

    水的定义 表情

    回复
  4. 头像
    Veen
    Windows 10 · Google Chrome

    牛逼!萌新来学习学习 表情

    回复
  5. 头像
    Veen
    Windows 10 · Google Chrome

    牛逼,萌新来学习学习 表情

    回复