|
|
|
@ -0,0 +1,404 @@ |
|
|
|
<template> |
|
|
|
<view class="book-container"> |
|
|
|
<!-- 自定义顶部导航栏 --> |
|
|
|
<uv-status-bar></uv-status-bar> |
|
|
|
<view class="custom-navbar" :class="{ 'navbar-hidden': !showNavbar }"> |
|
|
|
<uv-status-bar></uv-status-bar> |
|
|
|
<view class="navbar-content"> |
|
|
|
<view class="navbar-left" @click="goBack"> |
|
|
|
<uv-icon name="arrow-left" size="20" color="#262626"></uv-icon> |
|
|
|
</view> |
|
|
|
<view class="navbar-title">{{ bookTitle }}</view> |
|
|
|
<view class="navbar-right" @click="showMenu"> |
|
|
|
<uv-icon name="more-dot-fill" size="20" color="#262626"></uv-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- Swiper内容区域 --> |
|
|
|
<swiper |
|
|
|
class="content-swiper" |
|
|
|
:current="currentPage - 1" |
|
|
|
@change="onSwiperChange" |
|
|
|
|
|
|
|
> |
|
|
|
<swiper-item |
|
|
|
v-for="(page, index) in bookPages" |
|
|
|
:key="index" |
|
|
|
class="swiper-item" |
|
|
|
> |
|
|
|
<view class="content-area" @click="toggleNavbar"> |
|
|
|
<!-- 图片卡片页面 --> |
|
|
|
<view v-if="page.type === 'card'" class="card-content"> |
|
|
|
<view class="card-line"> |
|
|
|
<image src="/static/划重点图标.png" class="card-line-image" mode="aspectFill" /> |
|
|
|
<text class="card-line-text">划线重点</text> |
|
|
|
</view> |
|
|
|
<image class="card-image" :src="page.image" mode="aspectFill"></image> |
|
|
|
<text class="english-text">{{ page.englishText }}</text> |
|
|
|
<text class="chinese-text">{{ page.chineseText }}</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 文本页面 --> |
|
|
|
<view v-else-if="page.type === 'text'" class="text-content"> |
|
|
|
<text class="content-text">{{ page.content }}</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 视频页面 --> |
|
|
|
<view v-else-if="page.type === 'video'" class="video-content"> |
|
|
|
<video :src="page.video" class="video-player" controls></video> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
|
|
|
|
<!-- 自定义底部控制栏 --> |
|
|
|
<view class="custom-tabbar" :class="{ 'tabbar-hidden': !showNavbar }"> |
|
|
|
<view class="tabbar-content"> |
|
|
|
<view class="tabbar-left"> |
|
|
|
<view class="tab-button" @click="toggleSound"> |
|
|
|
<image src="/static/课程图标.png" class="tab-icon" /> |
|
|
|
<text class="tab-text">课程</text> |
|
|
|
</view> |
|
|
|
<view class="tab-button" @click="toggleSound"> |
|
|
|
<image src="/static/音色切换图标.png" class="tab-icon" /> |
|
|
|
<text class="tab-text">音色切换</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="tabbar-right"> |
|
|
|
<view class="page-controls"> |
|
|
|
<view class="page-numbers"> |
|
|
|
<view |
|
|
|
v-for="(page, index) in bookPages" |
|
|
|
:key="index" |
|
|
|
class="page-number" |
|
|
|
:class="{ 'active': (index + 1) === currentPage }" |
|
|
|
@click="goToPage(index + 1)" |
|
|
|
> |
|
|
|
{{ index + 1 }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<uv-safe-bottom></uv-safe-bottom> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
showNavbar: true, |
|
|
|
currentPage: 1, |
|
|
|
bookTitle: '看，乔治！', |
|
|
|
bookPages: [ |
|
|
|
{ |
|
|
|
type: 'card', |
|
|
|
englishText: 'I ought to have judged by deeds and not by words.', |
|
|
|
chineseText: '要对一个人下定论，不应听其言，而应观其行。', |
|
|
|
image: '/static/画重点图片.png' |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'video', |
|
|
|
video: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4' |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'text', |
|
|
|
content: '索菲达以南几英里处，萨利和斯坦对着近旁河岸的斜坡流淌，水深且绿意盎然。水也很温暖，因为它在阳光下闪烁着，清澈黄色的沙子，才到达深深的池塘。河的一侧，金色的山丘斜坡向上蜿蜒，通往坚固多岩石的加比亚山脉，但在山谷一侧，水边排列着树木——柳树在春天新鲜而翠绿，它们的低垂接触处充满着各天的冰水残留物；还有枫树，它们现实的，白色的横枝条和树枝；吉他也是绿色的地塘，在河下游的河岸上，叶子能发出很大的啪啪声。傍晚时分，兔子们从灌木中出现，坐在沙子上，湖泊的平地上覆盖着沉重的夜晚迹，还有来自农场的狗的散布的垫子，以及前来暗黑中饮水的鹿的分裂形足迹。' |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'text', |
|
|
|
content: '有一条穿过柳树和榆树之间的路，这条路从农场下来的男孩们踏得又硬又深；他们来深池游泳，也被那些上游运送货物公路上下来的流浪汉使得又硬又深。他们在水边停歇，在一棵巨大的榆树低垂的水平树枝前，有一个由许多火堆形成的灰烬堆，核桃被坐在上面的人留下光滑。' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
toggleNavbar() { |
|
|
|
this.showNavbar = !this.showNavbar |
|
|
|
|
|
|
|
}, |
|
|
|
goBack() { |
|
|
|
uni.navigateBack() |
|
|
|
}, |
|
|
|
showMenu() { |
|
|
|
console.log('显示菜单') |
|
|
|
}, |
|
|
|
toggleSound() { |
|
|
|
console.log('音色切换') |
|
|
|
}, |
|
|
|
goToPage(page) { |
|
|
|
this.currentPage = page |
|
|
|
console.log('跳转到页面:', page) |
|
|
|
}, |
|
|
|
onSwiperChange(e) { |
|
|
|
this.currentPage = e.detail.current + 1 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.book-container { |
|
|
|
width: 100%; |
|
|
|
height: 100vh; |
|
|
|
background-color: #F8F8F8; |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.custom-navbar { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
background-color: #F8F8F8; |
|
|
|
z-index: 1000; |
|
|
|
transition: transform 0.3s ease; |
|
|
|
|
|
|
|
&.navbar-hidden { |
|
|
|
transform: translateY(-100%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-content { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 20rpx 32rpx; |
|
|
|
// padding-top: calc(20rpx + var(--status-bar-height, 0)); |
|
|
|
height: 60rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-left, |
|
|
|
.navbar-right { |
|
|
|
width: 80rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-right { |
|
|
|
justify-content: flex-end; |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-title { |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 32rpx; |
|
|
|
color: #262626; |
|
|
|
line-height: 48rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.content-swiper { |
|
|
|
flex: 1; |
|
|
|
height: calc(100vh - 200rpx); |
|
|
|
margin-top: 100rpx; |
|
|
|
margin-bottom: 100rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.swiper-item { |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.content-area { |
|
|
|
flex: 1; |
|
|
|
padding: 0 40rpx; |
|
|
|
// background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%); |
|
|
|
height: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.card-content { |
|
|
|
background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%); |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 32rpx; |
|
|
|
height: 1172rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
border-radius: 32rpx; |
|
|
|
// height: 100%; |
|
|
|
padding: 40rpx; |
|
|
|
// margin: 0 |
|
|
|
border: 1px solid #FFFFFF; |
|
|
|
box-sizing: border-box; |
|
|
|
.card-line { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
// margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.card-line-image { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
margin-right: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.card-line-text { |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 600; |
|
|
|
font-size: 30rpx; |
|
|
|
line-height: 48rpx; |
|
|
|
color: #3B3D3D; |
|
|
|
} |
|
|
|
|
|
|
|
.card-image { |
|
|
|
width: 590rpx; |
|
|
|
height: 268rpx; |
|
|
|
border-radius: 24rpx; |
|
|
|
// margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
.english-text { |
|
|
|
display: block; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 600; |
|
|
|
font-size: 32rpx; |
|
|
|
line-height: 48rpx; |
|
|
|
color: #3B3D3D; |
|
|
|
// margin-bottom: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.chinese-text { |
|
|
|
display: block; |
|
|
|
font-family: PingFang SC; |
|
|
|
// font-weight: 400; |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 48rpx; |
|
|
|
color: #4F4F4F; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.video-content { |
|
|
|
width: 100vw; |
|
|
|
margin: 200rpx -40rpx 0; |
|
|
|
height: 500rpx; |
|
|
|
background-color: #FFFFFF; |
|
|
|
padding: 40rpx; |
|
|
|
border-radius: 24rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.text-content { |
|
|
|
width: 100vw; |
|
|
|
background-color: #F6F6F6; |
|
|
|
height: 100%; |
|
|
|
padding: 40rpx; |
|
|
|
margin: -40rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.content-text { |
|
|
|
font-family: PingFang SC; |
|
|
|
// font-weight: 400; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #3B3D3D; |
|
|
|
line-height: 48rpx; |
|
|
|
letter-spacing: 0; |
|
|
|
text-align: justify; |
|
|
|
word-break: break-all; |
|
|
|
} |
|
|
|
|
|
|
|
.custom-tabbar { |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
background-color: #fff; |
|
|
|
border-top: 1rpx solid #EEEEEE; |
|
|
|
z-index: 1000; |
|
|
|
transition: transform 0.3s ease; |
|
|
|
|
|
|
|
&.tabbar-hidden { |
|
|
|
transform: translateY(100%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tabbar-content { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 24rpx 62rpx; |
|
|
|
// padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); |
|
|
|
height: 88rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tabbar-left { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 35rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-button { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-direction: column; |
|
|
|
gap: 8rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-icon { |
|
|
|
width: 52rpx; |
|
|
|
height: 52rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tab-text { |
|
|
|
font-family: PingFang SC; |
|
|
|
// font-weight: 400; |
|
|
|
font-size: 22rpx; |
|
|
|
color: #999; |
|
|
|
line-height: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tabbar-right { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
} |
|
|
|
|
|
|
|
.page-controls { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.page-numbers { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 8rpx; |
|
|
|
overflow-x: auto; |
|
|
|
max-width: 400rpx; |
|
|
|
|
|
|
|
&::-webkit-scrollbar { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.page-number { |
|
|
|
min-width: 84rpx; |
|
|
|
height: 58rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
border-radius: 100rpx; |
|
|
|
font-family: PingFang SC; |
|
|
|
// font-weight: 400; |
|
|
|
font-size: 30rpx; |
|
|
|
color: #3B3D3D; |
|
|
|
background-color: transparent; |
|
|
|
border: 1px solid #3B3D3D; |
|
|
|
transition: all 0.3s ease; |
|
|
|
|
|
|
|
&.active { |
|
|
|
border: 1px solid $primary-color; |
|
|
|
color: $primary-color; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
hflllll
1 month ago
