生命原来如此脆弱

    周日,跟一位兄弟约了另外一个同学出来吹水。上次见这兄弟已经是一年前的事了。想起中专时代跟他一起躺在宿舍吹水,几个人一起在大梅沙通宵游荡,还有失恋时跟他诉苦。没想到十几年就这样过去了。

    那天他开车过来接我一起出去。路上,我问起他的身体情况,他说他去年又住了半年医院。那一下,我心里一沉。记得他结婚那天晚上,我去做兄弟。他喝得烂醉,我还以为他是太高兴了。但是,当我带他到洗手间后,他竟然哭了起了。他告诉我一个感觉像受了一闷棒的消息——他得了癌症。我是第二个人知道这个消息的,第一个是医生。连他的新娘也不知道。他不断地哭着说对不起他老婆,一直停不下来。我简直傻了,完全不知道说什么。

    其实在今年过年的时候,某一天我突然觉得一惊,似乎这位兄弟已经离开了这个世界。而后通了短信,确认他没事,我们又各自忙自己的事去了。周日那天是特意找他出来,看看他情况怎么样的。

    1996年,我们一起进同一所中专。我也不知道为什么慢慢地跟他关系好了起来。然后无所不聊。虽然我不住校,但是我还不时会特意在学校过夜,跟他吹吹水。那时的他非常的乐观和开朗,只要有他在,那周围必然有笑声。当时他的妹妹才一两岁,家时父亲开车还赚了不少钱。一家四口生活过得很快乐。可是两年后,他母亲得病了,家里花了很多钱去治疗,但是最后还是没有留住她。那一次,我也是同学中第一个人知道这个坏消息的。从那以后,他就不再是以前的他了,他变得比以前沉默。1999年,我们开始各自走进社会。他父亲的开车不再能赚到钱了。家里的担子开始由他挑了起来。妹妹还小,父亲没有太多收入了,然后加上他的新妈妈。一家人生活费大部分由他负担。11年了,他是做得不错,还自己创业了。可是可能是太劳累了,竟然得了癌症。我觉得上天真是太不公平了,他受的苦已经够多的了,为什么要在他结婚生子的时候,以为好日子来临的时候给他这样的打击?!

    周日那天,他在车上告诉我,医生说他只有两三年了。我叫他,那就放掉生意,好好休息,可能会好起来的。他说他也想,一年没生意了,住院又用了十几万。再说现在以他的身体,也没有公司会请他的。他说要尽量看能赚多少钱就赚多少,他女儿还只有两岁呀。我知道他是想尽量多留一些东西给他的妻子和女儿。我也不知道说什么好了。

    生命为什么会这么脆弱呢?我只希望奇迹会发生在他身上,我只想六七十岁还能约他出来吹水,像周日那天一样。

<template> <div class="scroll-container" ref="container"> <section v-for="(section, index) in sections" :key="index" :class="[{ active: currentIndex === index }, section.bgClass]" > <div class="section section-one" v-if="index === 0"> <div class="title">{{ section.title }}</div> <img src="./img/phone.png" alt="" /> <div class="content">{{ section.content }}</div> </div> <div class="section section-two" v-if="index === 1"> <div class="title">{{ section.title }}</div> <div class="content">{{ section.content }}</div> </div> <div class="section section-three" v-if="index === 2"> <div> <img src="./img/phone3.png" alt="" /> </div> <div> <div class="title">{{ section.title }}</div> <div class="content">{{ section.content }}</div> </div> </div> <div class="section section-four" v-if="index === 3"> <div> <img src="./img/phone4.png" alt="" /> </div> <div> <div class="title">{{ section.title }}</div> <div class="content">{{ section.content }}</div> </div> </div> <div class="section section-five" v-if="index === 4"> <div class="title">{{ section.title }}</div> <img src="./img/phone5.png" alt="" /> <div class="content">{{ section.content }}</div> </div> </section> <!-- 右侧导航圆点 --> <div class="nav-dots"> <div v-for="(dot, index) in sections" :key="index" class="dot" :class="{ active: currentIndex === index }" @click="scrollToSection(index)" ></div> </div> </div> </template> <script setup> import { ref, onMounted, // onUnmounted } from "vue"; // 页面内容数据 const sections = ref([ { title: "土豆星球", content: "现代人的生活压力通常很大,各行各业皆是如此,你的挚爱亲朋不理解你,你的公司领导瞧不上你,也许是你没能遇到一个懂你、理解你的知己,也许是你的脆弱不希望和身边的人去诉说。来T土豆星球,进行一次心灵测试,我们来帮你找到那个懂你,倾听你的他/她,让相似经历的你们,彼此陪伴,伴你走出人生的低谷。", bgClass: "bg1", }, { title: "穿越过去", content: "每个人都曾经历过痛苦的离别,每个人的内心深处都有很多来不及说出的话,时空胶囊能让你和失去/逝去的人隔空对话,任何时间任何地点,点开土豆星球,打开时空胶囊,都能让你回到过去,跟爷爷奶奶说一句:“家里一切都好,你们好吗?” 跟父母说一句:“我爱你们”公司基于强大的技术实力和元宇宙的星现形式,为你补完内心深处的遗憾。", bgClass: "bg2", }, { title: "心灵对话", content: "在遭受困难时,你会不会感叹命运的不公?为什么别人过的那么好,而你却什么也不是?很多人因此失去了人生的目标和对未来的希望。你是否希望未来的自己能穿越回现在给你指引方向?其实每个人都不普通,只是你还没找到自己的闪光点,让我们站在未来的高处,跨域时间和现实的梏,让未来的你,伸手将今天的自己拉出困境与低谷。 ", bgClass: "bg3", }, { title: "匹配社交", content: "现代人的生活压力通常很大,各行各业皆是如此,你的挚爱亲朋不理解你,你的公司领导瞧不上你,也许是你没能遇到一个懂你、理解你的知己,也许是你的脆弱不希望和身边的人去诉说。来T土豆星球,进行一次心灵测试,我们来帮你找到那个懂你,倾听你的他/她,让相似经历的你们,彼此陪伴,伴你走出人生的低谷。", bgClass: "bg4", }, { title: "寻找话题", content: "我们每个人都是不同的个体,有不同的价值观,或许事情没有绝对的对错,只是缺少聊得来的人。网络虽然大,但依旧无法分享你喜欢的聊天话题,那些在你心里积攒了无数个日月的话,想找别人分享,但一直没有找到分享的对象,那么土豆星球是一个你能够展示自己的平台,有一群和你志同道合的小伙伴在等着你!", bgClass: "bg5", }, ]); const container = ref(null); const currentIndex = ref(0); let isScrolling = false; // 处理滚动事件 const handleWheel = (e) => { if (isScrolling) return; isScrolling = true; const direction = e.deltaY > 0 ? 1 : -1; const newIndex = Math.min( Math.max(currentIndex.value + direction, 0), sections.value.length - 1 ); if (newIndex !== currentIndex.value) { currentIndex.value = newIndex; container.value.scrollTo({ top: window.innerHeight * newIndex, behavior: "smooth", }); } setTimeout(() => { isScrolling = false; }, 800); }; // 添加键盘支持 const handleKeyDown = (e) => { if (e.key === "ArrowDown") { currentIndex.value = Math.min( currentIndex.value + 1, sections.value.length - 1 ); } else if (e.key === "ArrowUp") { currentIndex.value = Math.max(currentIndex.value - 1, 0); } container.value.scrollTo({ top: window.innerHeight * currentIndex.value, behavior: "smooth", }); }; // 添加触摸滑动支持 let touchStartY = 0; const handleTouchStart = (e) => { touchStartY = e.touches[0].clientY; }; const handleTouchEnd = (e) => { const touchEndY = e.changedTouches[0].clientY; const diff = touchStartY - touchEndY; if (Math.abs(diff) > 50) { const direction = diff > 0 ? 1 : -1; const newIndex = Math.min( Math.max(currentIndex.value + direction, 0), sections.value.length - 1 ); if (newIndex !== currentIndex.value) { currentIndex.value = newIndex; container.value.scrollTo({ top: window.innerHeight * newIndex, behavior: "smooth", }); } } }; const scrollToSection = (index) => { currentIndex.value = index; container.value.scrollTo({ top: window.innerHeight * index, behavior: "smooth", }); }; // 生命周期钩子 onMounted(() => { window.addEventListener("wheel", handleWheel, { passive: false }); window.addEventListener("keydown", handleKeyDown); container.value.addEventListener("touchstart", handleTouchStart); container.value.addEventListener("touchend", handleTouchEnd); }); // onUnmounted(() => { // window.removeEventListener('wheel', handleWheel) // window.removeEventListener('keydown', handleKeyDown) // container.value.removeEventListener('touchstart', handleTouchStart) // container.value.removeEventListener('touchend', handleTouchEnd) // }) </script> <style scoped lang="scss"> .scroll-container { height: 100vh; overflow-y: hidden; scroll-snap-type: y mandatory; scroll-behavior: smooth; position: relative; } section { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; scroll-snap-align: start; transition: background-color 0.5s ease; position: relative; background-size: 100% 100%; background-repeat: no-repeat; } .bg1 { background-image: url("./img/bg1.png"); } .bg2 { background-image: url("./img/bg2.png"); } .bg3 { background-image: url("./img/bg3.png"); } .bg4 { background-image: url("./img/bg4.png"); } .bg5 { background-image: url("./img/bg5.png"); } .title { font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi; font-weight: 500; font-size: 80px; color: #e1e1e1; text-align: left; font-style: normal; text-transform: none; } .content { font-family: Adobe Heiti Std; font-size: 14px; color: #ffffff; line-height: 30px; text-align: justifyLeft; font-style: normal; text-transform: none; } .section-one { width: 100%; display: flex; justify-content: space-around; align-items: center; .content { width: 25%; } } .section-two { width: 30%; position: absolute; right: 150px; bottom: 180px; .content { margin-top: 60px; } } .section-three { width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-around; align-items: center; .content { width: 600px; margin-top: 50px; } } .section-four { width: 100%; display: flex; justify-content: space-around; .title { font-size: 100px; font-weight: 700; margin-top: 100px; } .content { width: 600px; margin-top: 50px; } } .section-five { width: 100%; display: flex; justify-content: space-around; position: relative; .title { position: relative; margin-top: 500px; } .content { position: relative; margin-bottom: 200px; width: 600px; } } .nav-dots { position: fixed; right:40px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; z-index: 1000; } .dot { width: 8px; height: 8px; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease; } .dot.active { background-color: #363636; transform: scale(1.7) } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } /* 最后一个区块不显示指示器 */ section:last-child .scroll-indicator { display: none; } /* 响应式设计 */ @media (max-width: 768px) { h1 { font-size: 2rem; } p { font-size: 1.2rem; } } </style> 实现图片懒加载
最新发布
07-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

长风Eric(fengcan)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值