feat: 添加HEVC转H.264播放器和打字机效果页面

添加HEVC转H.264播放器功能，包含文件选择、转码进度显示和视频播放新增打字机效果展示页面，使用Vue实现逐字显示效果
2025-07-25 18:49:11 +08:00
parent 15cf9c3041
commit 047ddd57f6
4 changed files with 778 additions and 181 deletions
--- a/2.html
+++ b/2.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+ 
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>打字机效果</title>
+    <style>
+        .flex {
+            display: flex;
+        }
+ 
+        .flex-1 {
+            flex: 1;
+        }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.8/vue.min.js"></script>
+</head>
+ 
+<body>
+ 
+    <div id="app">
+        <div v-for="(item, index) in clientpreferenceVOListCopy">
+            <div class="flex">
+                <div>
+                    {{ item.type }}
+                </div>:
+                <div class="flex-1" v-html="item.summary"></div>
+            </div>
+        </div>
+    </div>
+ 
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                clientpreferenceVOList: [
+                    { "type": "意外", "summary": "虽然客户目前为赋闲大众，但生活中总会有意外发生。根据中国保险监督管理委员会的数据，2019年中国交通事故死亡人数约为3.7万人，平均每天有877人因交通事故而丧生。意外风险不仅包括交通事故，还包括家庭意外、职业意外等。考虑到客户目前为单身贵族，可能需要承担更多的家庭责任，因此意外风险不容忽视。购买意外险可以为客户提供意外伤害的保障，确保在意外发生时能够得到及时的经济支持。" },
+                    { "type": "医疗", "summary": "客户目前无社保，意味着在医疗方面可能会面临较大的经济压力。根据中国保险监督管理委员会的数据，2019年中国医疗费用总支出约为6.5万亿元，其中个人自付比例约为20%，而客户作为单身贵族，可能需要承担更多的自付费用。医疗风险不仅包括治疗费用，还包括药物费用、检查费用、住院费用等。因此，购买医疗保险对于客户来说至关重要，可以有效减轻因疾病带来的经济负担。" },
+                    { "type": "重疾", "summary": "客户目前为36岁-45岁，处于单身贵族阶段，无家庭负担，但关注点为医疗健康。这意味着客户可能面临较高的重疾风险。根据统计数据，中国新发恶性肿瘤的发病数每年都在增加，且发病年龄呈下降趋势，35-44岁组发病人数占全部恶性肿瘤发病人数的40%，且发病与工作压力、生活压力、环境污染、不良生活习惯等密切相关。考虑到客户目前的职业为赋闲大众，生活压力可能较大，因此重疾风险不容忽视。建议客户购买重疾险，以减轻因重疾带来的经济负担，保障自己能够得到及时和有效的治疗。" }
+                ],
+                clientpreferenceVOListCopy: [],
+                index: 0,
+                ind: 0,
+                timer: null
+            },
+            mounted() {
+                this.typeWriter();
+            },
+            methods: {
+                typeWriter() {
+                    const item = this.clientpreferenceVOList[this.ind];
+                    let o = { type: item.type, summary: '' };
+                    this.clientpreferenceVOListCopy.push(o);
+                    console.log('this.clientpreferenceVOListCopy', this.clientpreferenceVOListCopy);
+                    this.timer = setInterval(() => {
+                        this.dealO();
+                    }, 50);
+                },
+                dealO() {
+                    console.log('this.index', this.index, this.clientpreferenceVOList[this.ind].summary.charAt(this.index));
+                    if (this.index < this.clientpreferenceVOList[this.ind].summary.length) {
+                        // 将当前字符添加到文本元素中
+                        this.clientpreferenceVOListCopy[this.ind].summary += this.clientpreferenceVOList[this.ind].summary.charAt(this.index);
+                        this.index++;
+                    } else {
+                        // 设置延迟后继续执行函数
+                        clearInterval(this.timer);
+                        this.timer = null;
+                        this.index = 0;
+                        this.ind++;
+                        if (this.ind <= 2) {
+                            this.typeWriter();
+                        }
+                    }
+                }
+            },
+            beforeDestroy() {
+                // 清除定时器
+                clearInterval(this.timer);
+                this.timer = null;
+            }
+        })
+    </script>
+ 
+</body>
+ 
+</html>