88 lines
4.5 KiB
HTML
88 lines
4.5 KiB
HTML
<!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> |