You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
451 lines
18 KiB
451 lines
18 KiB
<template>
|
|
<!-- 小说文本页面 -->
|
|
<view class="reader-container" @click.native="toggleFullScreen">
|
|
<uv-navbar title="这游戏也太真实了" :autoBack="true" fixed placeholder titleStyle="color: #333; font-weight: 700;" :border="false">
|
|
<template #left>
|
|
<BackArrow :size="56" color="#333" @back="$emit('back')" />
|
|
</template>
|
|
</uv-navbar>
|
|
<view class="chapter-title">第1章 2004</view>
|
|
<scroll-view scroll-y class="chapter-content" style="height: 70vh;" @touchend="handleTouchEnd" @scroll="handleScroll" @tap="handleContentClick">
|
|
<text>
|
|
华星，华东地区某个省市区，不知名街后居民……
|
|
读朱自清的荷塘月色，品读鲁迅的从百草园到三味书屋，看梁实秋的雅舍!一篇篇经典散文，想起来就像藏在脑海里的动画，优雅唯美的画面，好像夜晚的微风，轻抚着凝望远方的脸颊!美文入心!感慨万千!下面是100篇名家经典散文摘抄，敬请你的欣赏!
|
|
|
|
100篇名家经典散文摘抄
|
|
《叶圣陶散文》为"名家经典珍藏"丛书之一，收录了叶圣陶先生的散文精品数十篇。这些作品内容丰富，题材各异，构思精巧，文笔精巧、语言幽默、内蕴深厚、风格恬淡，充分显示了叶圣陶先生的文学功底及丰富的人生阅历，从一个侧面反映了作者的思想感情及创作风格，非常值得一读。叶圣陶是20世纪中国一位杰出的作家、教育家和出版家，又是中国现代儿童文学创作的先行者。作为散文家，他早期和周作人、朱自清共同成为文学研究会散文创作的中坚，后来又成为开明派散文的代表，其散文被一九三五年出版的《中国新文学大系》选录的篇数仅次于周作人、鲁迅和朱自清。
|
|
1、朱自清《荷塘月色》片段
|
|
路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常旳自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫旳月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
|
|
|
|
曲曲折折的荷塘上面，弥望旳是田田的叶子。叶子出水很高，像亭亭旳舞女旳裙。层层的叶子中间，零星地点缀着些白花，有袅娜(niǎo,nuó)地开着旳，有羞涩地打着朵儿旳;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉(mò)的流水，遮住了，不能见一些颜色;而叶子却更见风致了。
|
|
|
|
月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照;但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般;弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀;但光与影有着和谐的旋律，如梵婀(ē)玲(英语violin小提琴的译音)上奏着的名曲。
|
|
|
|
荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住;只在小路一旁，漏着几段空隙，像是特为月光留下的。树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声;但热闹是它们的，我什么也没有。
|
|
2、鲁迅《从百草园到三味书屋》片段
|
|
100篇名家经典散文摘抄
|
|
《叶圣陶散文》为"名家经典珍藏"丛书之一，收录了叶圣陶先生的散文精品数十篇。这些作品内容丰富，题材各异，构思精巧，文笔精巧、语言幽默、内蕴深厚、风格恬淡，充分显示了叶圣陶先生的文学功底及丰富的人生阅历，从一个侧面反映了作者的思想感情及创作风格，非常值得一读。叶圣陶是20世纪中国一位杰出的作家、教育家和出版家，又是中国现代儿童文学创作的先行者。作为散文家，他早期和周作人、朱自清共同成为文学研究会散文创作的中坚，后来又成为开明派散文的代表，其散文被一九三五年出版的《中国新文学大系》选录的篇数仅次于周作人、鲁迅和朱自清。
|
|
1、朱自清《荷塘月色》片段
|
|
路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常旳自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫旳月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。
|
|
|
|
曲曲折折的荷塘上面，弥望旳是田田的叶子。叶子出水很高，像亭亭旳舞女旳裙。层层的叶子中间，零星地点缀着些白花，有袅娜(niǎo,nuó)地开着旳，有羞涩地打着朵儿旳;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉(mò)的流水，遮住了，不能见一些颜色;而叶子却更见风致了。
|
|
|
|
月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照;但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般;弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀;但光与影有着和谐的旋律，如梵婀(ē)玲(英语violin小提琴的译音)上奏着的名曲。
|
|
|
|
荷塘的四面，远远近近，高高低低都是树，而杨柳最多。这些树将一片荷塘重重围住;只在小路一旁，漏着几段空隙，像是特为月光留下的。树色一例是阴阴的，乍看像一团烟雾;但杨柳的丰姿，便在烟雾里也辨得出。树梢上隐隐约约的是一带远山，只有些大意罢了。树缝里也漏着一两点路灯光，没精打采的，是渴睡人的眼。这时候最热闹的，要数树上的蝉声与水里的蛙声;但热闹是它们的，我什么也没有。
|
|
2、鲁迅《从百草园到三味书屋》片段
|
|
100篇名家经典散文摘抄
|
|
<!-- 这里填充章节内容，后续可通过props或API获取 -->
|
|
</text>
|
|
</scroll-view>
|
|
<view class="bottom-bar" v-if="!isFullScreen">
|
|
<view class="bottom-left">
|
|
<view class="bar-item">
|
|
<view class="bar-icon"> <uv-icon name="plus"></uv-icon> </view>
|
|
<text class="bar-label">加入书架</text>
|
|
</view>
|
|
<view class="bar-item">
|
|
<view class="bar-icon"> <uv-icon name="eye-fill"></uv-icon> </view>
|
|
<text class="bar-label">夜间</text>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-right">
|
|
<button class="outline-btn"><text class="btn-text">上一章</text></button>
|
|
<button class="outline-btn" @click="showCatalog = true"><text class="btn-text">目录</text></button>
|
|
<button class="outline-btn"><text class="btn-text">下一章</text></button>
|
|
</view>
|
|
</view>
|
|
<uv-popup v-model="showPopup" mode="center" :closeOnClickOverlay="true">
|
|
<view style="padding: 48rpx 32rpx; text-align: center; background: #fff; border-radius: 24rpx; min-width: 500rpx;">
|
|
<view style="font-size: 32rpx; font-weight: bold; color: #222; margin-bottom: 24rpx;">这是付费章节 需要订阅后才能阅读</view>
|
|
<view style="font-size: 26rpx; color: #999; margin-bottom: 40rpx;">订阅后可继续阅读本章内容</view>
|
|
<view style="display: flex; justify-content: center; gap: 24rpx;">
|
|
<button style="background: #ff9800; color: #fff; border-radius: 32rpx; font-size: 28rpx; padding: 0 32rpx; border: none;" @click="goToSubscription">订阅本章</button>
|
|
<button style="background: #fff3e0; color: #ff9800; border-radius: 32rpx; font-size: 28rpx; padding: 0 32rpx; border: 1px solid #ff9800;">观看视频解锁</button>
|
|
<button style="background: #fff; color: #ff9800; border-radius: 32rpx; font-size: 28rpx; padding: 0 32rpx; border: 1px solid #ff9800;">批量订阅</button>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
<!-- 目录弹窗（顶部196px边距，底部无边距，宽度100vw，高度自适应，顶部圆角，底部无圆角） -->
|
|
<view v-if="showCatalog" class="catalog-popup-fullscreen" style="top:196px;bottom:0;height:auto;min-height:calc(100vh - 196px);">
|
|
<view class="catalog-header">
|
|
<view class="header-left" @click="showCatalog = false">
|
|
<uv-icon name="arrow-down" size="46" color="#333" @click="goBack" />
|
|
</view>
|
|
<view class="header-title">目录</view>
|
|
<view class="header-right" @click="reverseOrder">倒序</view>
|
|
</view>
|
|
<scroll-view scroll-y class="catalog-list" style="padding-bottom:0;margin-bottom:0;">
|
|
<view v-for="(item, idx) in displayList" :key="item.id" @click="selectChapter(idx)"
|
|
:class="['catalog-item', {active: idx === currentIndex}]">
|
|
<view class="item-main">
|
|
<text class="item-title">{{ item.title }}</text>
|
|
<text v-if="item.vip" class="vip-tag" @click.stop="showPayPopup = true">付费</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view v-if="showPayPopup" class="pay-popup-mask" @click="showPayPopup = false">
|
|
<view class="pay-popup" @click.stop>
|
|
<view class="pay-title">这是付费章节 需要订阅后才能阅读</view>
|
|
<view class="pay-desc">订阅后可继续阅读本章内容</view>
|
|
<view class="pay-btns">
|
|
<button class="pay-btn" @click="goToSubscription">订阅本章</button>
|
|
<button class="pay-btn pay-btn-video">观看视频解锁</button>
|
|
<button class="pay-btn pay-btn-batch">批量订阅</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import BackArrow from './components/BackArrow.vue';
|
|
|
|
export default {
|
|
components: {
|
|
BackArrow,
|
|
'uv-popup': () => import('@/uni_modules/uv-popup/components/uv-popup/uv-popup.vue')
|
|
},
|
|
data() {
|
|
return {
|
|
isFullScreen: false,
|
|
lastTap: 0,
|
|
showPopup: false,
|
|
popupShown: false, // 只弹一次
|
|
showCatalog: false,
|
|
orderAsc: true,
|
|
currentIndex: 0,
|
|
chapterList: [
|
|
{ id: 1, title: '第一章 重回2004', vip: false },
|
|
{ id: 2, title: '第二章 陈年旧恨', vip: false },
|
|
{ id: 3, title: '第三章 再相见', vip: false },
|
|
{ id: 4, title: '第四章 李东的邀请', vip: false },
|
|
{ id: 5, title: '第五章 小气的男', vip: false },
|
|
{ id: 6, title: '第六章 先送谁?', vip: false },
|
|
{ id: 7, title: '第七章 打听行情', vip: false },
|
|
{ id: 8, title: '第八章 省城探路', vip: false },
|
|
{ id: 9, title: '第九章 订货', vip: false },
|
|
{ id: 10, title: '第十章 第一桶金', vip: true },
|
|
{ id: 11, title: '第十一章 高富帅来袭', vip: true },
|
|
{ id: 12, title: '第十二章 故学后，挥场见！', vip: true },
|
|
{ id: 13, title: '第十三章 你来我往', vip: true },
|
|
{ id: 14, title: '第十四章 你来我往', vip: true },
|
|
{ id: 15, title: '第十五章 你来我往', vip: true },
|
|
{ id: 16, title: '第十六章 你来我往', vip: true },
|
|
{ id: 17, title: '第十七章 你来我往', vip: true },
|
|
{ id: 18, title: '第十八章 你来我往', vip: true },
|
|
|
|
],
|
|
showPayPopup: false
|
|
}
|
|
},
|
|
computed: {
|
|
displayList() {
|
|
return this.orderAsc ? this.chapterList : [...this.chapterList].reverse()
|
|
}
|
|
},
|
|
methods: {
|
|
handleContentClick() {
|
|
this.toggleFullScreen();
|
|
},
|
|
handleTouchEnd(e) {
|
|
this.toggleFullScreen();
|
|
},
|
|
handleScroll(e) {
|
|
// 获取滚动位置
|
|
const scrollTop = e.detail.scrollTop;
|
|
console.log('scrollTop:', scrollTop);
|
|
|
|
// 当滚动超过50且弹窗未显示过时，显示弹窗
|
|
if (scrollTop > 50 && !this.popupShown) {
|
|
this.showPopup = true;
|
|
this.popupShown = true;
|
|
}
|
|
},
|
|
toggleFullScreen() {
|
|
this.isFullScreen = !this.isFullScreen
|
|
},
|
|
reverseOrder() {
|
|
this.orderAsc = !this.orderAsc
|
|
},
|
|
selectChapter(idx) {
|
|
this.currentIndex = this.orderAsc ? idx : this.chapterList.length - 1 - idx
|
|
this.showCatalog = false
|
|
// TODO: 跳转到对应章节内容
|
|
},
|
|
goToSubscription() {
|
|
uni.navigateTo({
|
|
url: '/pages_order/novel/SubscriptionInformation'
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
// #ifdef H5
|
|
if (typeof window !== 'undefined') {
|
|
window.onscroll = () => {
|
|
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
|
if (scrollTop > 50 && !this.popupShown) {
|
|
this.showPopup = true;
|
|
this.popupShown = true;
|
|
}
|
|
};
|
|
}
|
|
// #endif
|
|
},
|
|
beforeDestroy() {
|
|
// #ifdef H5
|
|
if (typeof window !== 'undefined') {
|
|
window.onscroll = null;
|
|
}
|
|
// #endif
|
|
},
|
|
onLoad(options) {
|
|
// 可接收小说id、章节id等参数
|
|
// this.novelId = options.id
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.reader-container {
|
|
min-height: 100vh;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.chapter-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin: 40rpx 32rpx 24rpx 32rpx;
|
|
}
|
|
.chapter-content {
|
|
flex: 1;
|
|
padding: 0 32rpx;
|
|
font-size: 28rpx;
|
|
color: #222;
|
|
line-height: 2.2;
|
|
margin-bottom: 120rpx;
|
|
}
|
|
.bottom-bar {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 180rpx;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
|
|
z-index: 10;
|
|
padding: 0 40rpx 10rpx 40rpx;
|
|
}
|
|
.bottom-left {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 48rpx;
|
|
|
|
}
|
|
.bar-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
.bar-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-bottom: 4rpx;
|
|
margin-right: 1rpx;
|
|
}
|
|
.bar-label {
|
|
font-size: 22rpx;
|
|
color: #b3b3b3;
|
|
margin-top: 2rpx;
|
|
}
|
|
.bottom-right {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 32rpx;
|
|
margin-left: 40rpx;
|
|
}
|
|
.outline-btn {
|
|
min-width: 110rpx;
|
|
padding: 0 28rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background: #fff;
|
|
color: #223a7a;
|
|
border: 2rpx solid #223a7a;
|
|
border-radius: 32rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.btn-text {
|
|
font-weight: bold;
|
|
color: #223a7a;
|
|
font-size: 28rpx;
|
|
border-bottom: 2rpx solid #223a7a;
|
|
padding-bottom: 2rpx;
|
|
}
|
|
.catalog-popup-fullscreen {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #fff;
|
|
z-index: 9999;
|
|
border-top-left-radius: 32rpx;
|
|
border-top-right-radius: 32rpx;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 8rpx 48rpx rgba(0,0,0,0.18);
|
|
overflow: hidden;
|
|
}
|
|
.catalog-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24rpx;
|
|
height: 96rpx;
|
|
border-bottom: 1px solid #eee;
|
|
position: sticky;
|
|
top: 0;
|
|
background: #fff;
|
|
z-index: 2;
|
|
}
|
|
.header-left {
|
|
width: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
.header-title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #222;
|
|
}
|
|
.header-right {
|
|
color: #223a7a;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
min-width: 80rpx;
|
|
text-align: right;
|
|
}
|
|
.catalog-list {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
.catalog-item {
|
|
padding: 0 32rpx;
|
|
min-height: 80rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
background: #fff;
|
|
color: #222;
|
|
font-size: 30rpx;
|
|
position: relative;
|
|
}
|
|
.catalog-item.active {
|
|
color: #ff5a5f;
|
|
background: #fff7f7;
|
|
}
|
|
.item-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
.item-title {
|
|
font-size: 30rpx;
|
|
}
|
|
.vip-tag {
|
|
background: #ffe1b2;
|
|
color: #ff9900;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
padding: 2rpx 18rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
.pay-popup-mask {
|
|
position: fixed;
|
|
left: 0; top: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 10000;
|
|
}
|
|
.pay-popup {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #232323;
|
|
border-top-left-radius: 24rpx;
|
|
border-top-right-radius: 24rpx;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
min-width: 500rpx;
|
|
width: 100%;
|
|
padding: 48rpx 32rpx 32rpx 32rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
.pay-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
margin-bottom: 24rpx;
|
|
margin-right: 50rpx;
|
|
}
|
|
.pay-desc {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
margin-bottom: 40rpx;
|
|
margin-right: 50rpx;
|
|
}
|
|
.pay-btns {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 24rpx;
|
|
margin-right: 50rpx;
|
|
|
|
}
|
|
.pay-btn {
|
|
background: #ff9800;
|
|
color: #fff;
|
|
border-radius: 32rpx;
|
|
font-size: 28rpx;
|
|
padding: 0 32rpx;
|
|
border: none;
|
|
|
|
}
|
|
.pay-btn-video {
|
|
background: #ff9800;
|
|
color: #fff;
|
|
border-radius: 32rpx;
|
|
font-size: 28rpx;
|
|
padding: 0 32rpx;
|
|
border: none;
|
|
|
|
}
|
|
.pay-btn-batch {
|
|
background: #ff9800;
|
|
color: #fff;
|
|
border-radius: 32rpx;
|
|
font-size: 28rpx;
|
|
padding: 0 32rpx;
|
|
border: none;
|
|
|
|
}
|
|
</style>
|