时间轴垂直

/** 时间轴垂直 **/
.timeline {
    position: relative;
    display: grid;
    gap: 20px;
    padding: 0;
    max-width: 600px;
    font-size: 12px;
    line-height: 1;
    list-style-type: none;
}

.timeline.displayNone {
    display: none;
}

.timeline h4 {
    font-size: 12px;
}

.timeline .timeline__line {
    position: absolute;
    top: 0;
    left: 7px;
    width: 2px;
    height: 100%;
    background: #ccc;
}

.timeline .timeline__item .info {
    display: grid;
    grid-template-columns: repeat(3, auto) 1fr;
    align-items: center;
    gap: 0.3rem;
}

.timeline .timeline__item .info h4 {
    margin: 0;
}

.timeline .timeline__item .info a {
    text-decoration: none;
    color: #3498db;
}

.timeline .timeline__item .info .dot {
    position: relative;
    width: 16px;
    height: 16px;
    background: #999;
    border-radius: 50%;
}

.timeline .timeline__item .info .dot::before {
    position: absolute;
    content: '';
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
}

.timeline .timeline__item .info .dot::after {
    position: absolute;
    content: '';
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border: 4px solid #fff;
    border-radius: inherit;
}

.timeline .timeline__item .info .title {
    color: #999;
    margin-left: 5px;
}

.timeline .timeline__item .info .time {
    margin-right: 8px;
}

.timeline .timeline__item .content {
    margin: 10px 0 0 3em;
    line-height: 1.5;
}

                <ul class="timeline">
                    <li class='timeline__line'></li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>创建离职单</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>人事管理完成</h4>
                        </div>
                        <div class='content text-gray'>在人事管理模块创建离职单，并复制链接给离职员工</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>离职申请单填写</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>离职人完成</h4>
                        </div>
                        <div class='content text-gray'>离职人完成离职原因等信息填写，并完成申请人签字，系统通知部门负责人签字</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>部门负责人签字</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>人事组织构架设置部门负责人完成</h4>
                        </div>
                        <div class='content text-gray'>由人事组织构架中设置的部门负责人完成对接后签字确认，系统通知财务负责人签字</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>财务签字确认</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>设置确认人：</h4>
                        </div>
                        <div class='content text-gray'>财务完成相关手续、并签字确认，系统通知人事负责人签字</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>人事签字确认</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>设置确认人：</h4>
                        </div>
                        <div class='content text-gray'>人事完成离职单相关信息填写、并签字确认，系统通知离职人签字确认</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>本人签字确认</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>离职人完成</h4>
                        </div>
                        <div class='content text-gray'>离职人完成签字确认</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>流程完成</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'></h4>
                        </div>
                        <div class='content text-gray'></div>
                    </li>
                </ul>

横向流程步骤样式

.step-list {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
.step-list .li{
    position: relative;
    text-align: center;
}
.step-list .li:before,.step-list .li:after{
    position: absolute;
    display: block;
    content: '';
    height: 1px;
    width: calc(50% - 20px);
    background-color: #ccc;
    top: 20px;
}
.step-list .li:after{right: 0;}
.step-list .li:first-child:before,.step-list .li:last-child:after{display: none;}
.step-list .li.success:before,.step-list .li.success:after{background-color: #5cb85c;    }
.step-list .li.error:before,.step-list .li.error:after{background-color: #ff423d}
.step-list .li a{color: #02a7f0; text-decoration: none;}
.step-list .li .circle{
    background: linear-gradient( to bottom, #81d9ff, #38bcfa);
    color: #fff;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.step-list .li.success{color: #418841;    }
.step-list .li.success .circle{background: linear-gradient(to bottom, #87d787, #5cb85c); color: #fff;}
.step-list .li .text{padding:6px 0;}
.step-list .li.error{color: #ff423d;    }
.step-list .li.error .circle{background: linear-gradient( to bottom, #ff5d59, #ff423d); color: #fff}
.step-list .li.disabled{color: #ccc}
.step-list .li.disabled .circle{background: linear-gradient( to bottom, #e8e8e8, #e8e8e8); color: #ccc}

<div class="step-list" style="margin-top: 30px;">
                            <div class="li success" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-check"></div><div class="text">已提交需求</div>
                                    </div>
                            <div class="li success" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-check"></div><div class="text">已付定金</div>
                                    </div>
                            <div class="li " style="width: 14.285714285714%;">
                                            <a href="javascript:;" class="" onclick="setPlanStatus('63398','6')" title="标记为已定策划">
                            <div class="circle fa fa-pencil"></div><div class="text">已定策划(进行中)</div>
                        </a>
                                    </div>
                            <div class="li disabled" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-ban"></div><div class="text">已付预付</div>
                                    </div>
                            <div class="li disabled" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-ban"></div><div class="text">准备好求婚</div>
                                    </div>
                            <div class="li disabled" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-ban"></div><div class="text">已付尾款</div>
                                    </div>
                            <div class="li disabled" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-ban"></div><div class="text">已完成</div>
                                    </div>
                    </div>

Certd

Certd 是一款开源、免费、全自动申请和部署更新SSL证书的工具。
后缀d取自linux守护进程的命名风格，意为证书守护进程。

关键字：证书自动申请、证书自动更新、证书自动续期、证书自动续签、证书管理工具

文档：https://certd.docmirror.cn/guide/
开源地址：https://github.com/certd/certd

免费版支持创建10条流水线任务

张鑫旭老师的文章：https://www.zhangxinxu.com/wordpress/2019/08/js-zip-download/

如何实现ZIP打包下载
使用jszip这个项目实现的：https://github.com/Stuk/jszip

压缩和未压缩的JS文件都在dist目录下，大家自行下载。

使用也非常简单：

引入JS

<script src="./jszip.min.js"></script>

执行打包与下载
下面是官方示意代码，我加上了更详细的注释：

// 初始化一个zip打包对象
var zip = new JSZip();
// 创建一个被用来打包的名为Hello.txt的文件
zip.file("Hello.txt", "Hello World\n");
// 创建一个名为images的新的文件目录
var img = zip.folder("images");
// 这个images文件目录中创建一个base64数据为imgData的图像，图像名是smile.gif
img.file("smile.gif", imgData, {base64: true});
// 把打包内容异步转成blob二进制格式
zip.generateAsync({type:"blob"}).then(function(content) {
    // content就是blob数据，这里以example.zip名称下载    
    // 使用了FileSaver.js  
    saveAs(content, "example.zip");
});

/*
最终下载的zip文件包含内容如下：
Hello.txt
images/
    smile.gif
*/

使用非常简单，官方示意也通俗易懂，我直接照着改改效果就出来了。

其中，提到了一个FileSaver.js，这也是非常有名的项目，可以介绍一下。

纯前端下载FileSaver.js
FileSaver.js项目地址是：https://github.com/eligrey/FileSaver.js/

压缩和未压缩的JS文件也是在dist目录下，大家自行下载。

使用示意：

<script src="./FileSaver.min.js"></script>
<script>
var canvas = document.getElementById("zxx-canvas");
canvas.toBlob(function(blob) {
    saveAs(blob, "example.png");
});
</script>

FileSaver.js非常强，不仅兼容到IE10+，而且还支持大文件下载，Chrome浏览器下甚至可以下载2GB大小的文件。

FileSaver.js搭配js-xlsx还可以纯前端下载Excel文件。如果是生成DOC文件，试试这个项目。

由于非本文重点，不展开。

另外，纯前端下载方法还有很多。有兴趣可以参考这篇文章：https://juejin.cn/post/6844903763359039501

转：https://blog.csdn.net/weixin_45320660/article/details/135482861

决一下typora不使用序列号也能激活问题。

1.找到typora的安装目录
右击typora图标，点击属性即可看到

2.按照 Typora路径到 —> resources —> page-dist —> static —> js 这个路径找到这两个文件
LicenseIndex.180dd4c7.xxxxxxx.chunk.js

打开这两个文件分别替换
Ctrl + F 搜索 hasActivated=“true”

hasActivated="true"==e.hasActivated，//并将其替换为  
hasActivated=true,e.hasActivated,

3.此时Typora已经激活，蛋疼的是每次打开都要点那个【未激活】弹框有这个会话框。继续开干。

继续按照 Typora路径到 —> resources —> page-dist 这个路径找到文件
license.html 在浏览器中打开，是熟悉的页面无疑了~~ 淦……

利用文本工具或者vscode打开license.html 文件
添加如下代码可以强制关闭弹出窗口：

<script>    window.close();</script>

原始音频信息，采样率44100 Hz，双声道stereo

  Duration: 00:11:23.60, start: 0.025057, bitrate: 128 kb/s
    Stream #0:0: Audio: mp3, 44100 Hz, stereo, fltp, 128 kb/s

转码命令

ffmpeg -i C:\Users\Administrator\Desktop\materials\蕊希.mp3 -ac 1 -ar 48000 -y test.mp3

其中：

-ac 1 设置声道数为1
-ar 48000 设置采样率为48000Hz

转码后的音频，采样率48000 Hz，单声道mono

  Duration: 00:11:23.59, start: 0.023021, bitrate: 64 kb/s
    Stream #0:0: Audio: mp3, 48000 Hz, mono, fltp, 64 kb/s