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.
1035 lines
24 KiB
1035 lines
24 KiB
<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">{{ currentPageTitle }}</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-for="(item, index) in page" :key="index">
|
|
<view v-if="item.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="item.image" mode="aspectFill"></image>
|
|
<text class="english-text" user-select @longpress="showWordMeaning(item.wordMeaning)">{{ item.englishText }}</text>
|
|
<text class="chinese-text" user-select>{{ item.chineseText }}</text>
|
|
</view>
|
|
|
|
<!-- 文本页面 -->
|
|
<view v-else-if="item.type === 'text'" class="text-content">
|
|
<text class="content-text" user-select>{{ item.content }}</text>
|
|
</view>
|
|
|
|
<!-- 文本页面 -->
|
|
<view v-else-if="item.type === 'image'" class="image-container">
|
|
<image class="content-image" :src="item.imageUrl" mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<!-- 视频页面 -->
|
|
<view v-else-if="item.type === 'video'" class="video-content">
|
|
<video :src="item.video" class="video-player" controls :poster="item.poster"></video>
|
|
</view>
|
|
|
|
<!-- 会员限制页面 -->
|
|
<view v-else-if="item.type === 'member'" class="member-content">
|
|
<text class="member-title">{{ item.title }}</text>
|
|
<view class="member-button" @click="unlockBook">
|
|
<text class="member-button-text">{{ item.buttonText }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
|
|
<!-- 自定义底部控制栏 -->
|
|
<view class="custom-tabbar" :class="{ 'tabbar-hidden': !showNavbar }">
|
|
<!-- 音频控制栏 -->
|
|
<view class="audio-controls" :class="{ 'audio-hidden': !isTextPage }">
|
|
<view class="audio-time">
|
|
<text class="time-text">{{ formatTime(currentTime) }}</text>
|
|
<view class="progress-container">
|
|
<view class="progress-bar">
|
|
<view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
|
|
<view class="progress-thumb" :style="{ left: progressPercent + '%' }"></view>
|
|
</view>
|
|
</view>
|
|
<text class="time-text">{{ formatTime(totalTime) }}</text>
|
|
</view>
|
|
|
|
<view class="audio-controls-row">
|
|
<view class="control-btn" @click="toggleLoop">
|
|
<uv-icon name="reload" size="20" :color="isLoop ? '#06DADC' : '#999'"></uv-icon>
|
|
<text class="control-text">循环</text>
|
|
</view>
|
|
|
|
<view class="control-btn" @click="previousPage">
|
|
<text class="control-text">上一页</text>
|
|
</view>
|
|
|
|
<view class="play-btn" @click="togglePlay">
|
|
<uv-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="40" color="#666"></uv-icon>
|
|
</view>
|
|
|
|
<view class="control-btn" @click="nextPage">
|
|
<text class="control-text">下一页</text>
|
|
</view>
|
|
|
|
<view class="control-btn" @click="toggleSpeed">
|
|
<text class="control-text">{{ playSpeed }}x</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view style="background-color: #fff;position: relative;z-index: 100" >
|
|
<view class="tabbar-content">
|
|
<view class="tabbar-left">
|
|
<view class="tab-button" @click="toggleCoursePopup">
|
|
<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>
|
|
|
|
<!-- 课程选择弹出窗 -->
|
|
<uv-popup
|
|
mode="bottom"
|
|
ref="coursePopup"
|
|
round="32rpx"
|
|
bg-color="#f8f8f8"
|
|
>
|
|
<view class="course-popup">
|
|
<view class="popup-header">
|
|
<view>
|
|
<uv-icon name="arrow-down" color="black" size="20"></uv-icon>
|
|
</view>
|
|
<view class="popup-title">课程</view>
|
|
<view class="popup-title" @click="toggleSort">
|
|
倒序
|
|
</view>
|
|
</view>
|
|
<view class="course-list">
|
|
<view
|
|
v-for="(course, index) in displayCourseList"
|
|
:key="course.id"
|
|
class="course-item"
|
|
:class="{ 'active': course.id === currentCourse }"
|
|
@click="selectCourse(course.id)"
|
|
>
|
|
<view class="course-number " :class="{ 'highlight': course.id === currentCourse }">{{ String(course.index).padStart(2, '0') }}</view>
|
|
<view class="course-content">
|
|
<view class="course-english" :class="{ 'highlight': course.id === currentCourse }">{{ course.english }}</view>
|
|
<view class="course-chinese" :class="{ 'highlight': course.id === currentCourse }">{{ course.chinese }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
|
|
<!-- 释义弹出窗 -->
|
|
<uv-popup
|
|
mode="bottom"
|
|
ref="meaningPopup"
|
|
round="32rpx"
|
|
bg-color="#FFFFFF"
|
|
:overlay="true"
|
|
>
|
|
<view class="meaning-popup" v-if="currentWordMeaning">
|
|
<view class="meaning-header">
|
|
<view class="close-btn" @click="closeMeaningPopup">
|
|
<text class="close-text">关闭</text>
|
|
</view>
|
|
<view class="meaning-title">释义</view>
|
|
<view style="width: 80rpx;"></view>
|
|
</view>
|
|
|
|
<view class="meaning-content">
|
|
<image class="meaning-image" src="/static/默认图片.png" mode="aspectFill"></image>
|
|
|
|
<view class="word-info">
|
|
<view class="word-main">
|
|
<text class="word-text">{{ currentWordMeaning.word }}</text>
|
|
</view>
|
|
<view class="phonetic-container">
|
|
<uv-icon name="volume-fill" size="16" color="#000"></uv-icon>
|
|
<text class="phonetic-text">{{ currentWordMeaning.phonetic }}</text>
|
|
</view>
|
|
<view class="word-meaning">
|
|
<text class="part-of-speech">{{ currentWordMeaning.partOfSpeech }}</text>
|
|
<text class="meaning-text">{{ currentWordMeaning.meaning }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="knowledge-gain">
|
|
<view class="knowledge-header">
|
|
<image src="/static/知识收获图标.png" class="knowledge-icon" mode="aspectFill" />
|
|
<text class="knowledge-title">知识收获</text>
|
|
</view>
|
|
<text class="knowledge-content">{{ currentWordMeaning.knowledgeGain }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
courseId: '',
|
|
showNavbar: true,
|
|
currentPage: 1,
|
|
currentCourse: 1, // 当前课程索引
|
|
currentWordMeaning: null, // 当前显示的单词释义
|
|
isReversed: false, // 是否倒序显示
|
|
// 音频控制相关数据
|
|
isPlaying: false,
|
|
currentTime: 0,
|
|
totalTime: 317, // 5:17 = 317秒
|
|
isLoop: false,
|
|
playSpeed: 1.0,
|
|
speedOptions: [1.0, 1.25, 1.5, 2.0],
|
|
courseIdList: [],
|
|
bookTitle: '',
|
|
courseList: [
|
|
|
|
],
|
|
|
|
// 二维数组 代表每个页面
|
|
bookPages: [
|
|
|
|
],
|
|
// 存储每个页面的标题
|
|
pageTitles: [],
|
|
}
|
|
},
|
|
computed: {
|
|
displayCourseList() {
|
|
return this.isReversed ? [...this.courseList].reverse() : this.courseList;
|
|
},
|
|
// 判断当前页面是否为文字类型
|
|
isTextPage() {
|
|
const currentPageData = this.bookPages[this.currentPage - 1];
|
|
// currentPageData是一个数组 其中的一个元素的type是text就会返回true
|
|
return currentPageData && currentPageData.some(item => item.type === 'text');
|
|
},
|
|
// 计算音频播放进度百分比
|
|
progressPercent() {
|
|
return this.totalTime > 0 ? (this.currentTime / this.totalTime) * 100 : 0;
|
|
},
|
|
// 动态页面标题
|
|
currentPageTitle() {
|
|
return this.pageTitles[this.currentPage - 1] || this.bookTitle;
|
|
}
|
|
},
|
|
methods: {
|
|
toggleNavbar() {
|
|
this.showNavbar = !this.showNavbar
|
|
},
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
toggleCoursePopup() {
|
|
if (this.$refs.coursePopup) {
|
|
this.$refs.coursePopup.open()
|
|
}
|
|
// console.log('123123123');
|
|
|
|
},
|
|
toggleSort() {
|
|
this.isReversed = !this.isReversed
|
|
},
|
|
selectCourse(courseId) {
|
|
this.currentCourse = courseId
|
|
if (this.$refs.coursePopup) {
|
|
this.$refs.coursePopup.close()
|
|
}
|
|
// 这里可以添加切换课程的逻辑
|
|
// console.log('选择课程:', courseId)
|
|
this.getCourseList(courseId)
|
|
},
|
|
showWordMeaning(wordMeaning) {
|
|
if (wordMeaning) {
|
|
this.currentWordMeaning = wordMeaning
|
|
if (this.$refs.meaningPopup) {
|
|
this.$refs.meaningPopup.open()
|
|
}
|
|
}
|
|
},
|
|
closeMeaningPopup() {
|
|
if (this.$refs.meaningPopup) {
|
|
this.$refs.meaningPopup.close()
|
|
}
|
|
this.currentWordMeaning = null
|
|
},
|
|
// 音频控制方法
|
|
togglePlay() {
|
|
this.isPlaying = !this.isPlaying;
|
|
// 这里可以添加实际的音频播放/暂停逻辑
|
|
},
|
|
toggleLoop() {
|
|
this.isLoop = !this.isLoop;
|
|
},
|
|
toggleSpeed() {
|
|
const currentIndex = this.speedOptions.indexOf(this.playSpeed);
|
|
const nextIndex = (currentIndex + 1) % this.speedOptions.length;
|
|
this.playSpeed = this.speedOptions[nextIndex];
|
|
},
|
|
async previousPage() {
|
|
if (this.currentPage > 1) {
|
|
this.currentPage--;
|
|
// 获取对应页面的数据（如果还没有获取过）
|
|
if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
|
|
await this.getBookPages(this.courseIdList[this.currentPage - 1]);
|
|
}
|
|
}
|
|
},
|
|
async nextPage() {
|
|
if (this.currentPage < this.bookPages.length) {
|
|
this.currentPage++;
|
|
// 获取对应页面的数据（如果还没有获取过）
|
|
if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
|
|
await this.getBookPages(this.courseIdList[this.currentPage - 1]);
|
|
}
|
|
}
|
|
},
|
|
formatTime(seconds) {
|
|
const mins = Math.floor(seconds / 60);
|
|
const secs = Math.floor(seconds % 60);
|
|
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
|
},
|
|
toggleSound() {
|
|
console.log('音色切换')
|
|
uni.navigateTo({
|
|
url: '/subPages/home/music'
|
|
})
|
|
},
|
|
unlockBook() {
|
|
console.log('解锁全书')
|
|
// 这里可以跳转到会员页面或者调用解锁接口
|
|
uni.navigateTo({
|
|
url: '/pages/index/member'
|
|
})
|
|
},
|
|
async goToPage(page) {
|
|
this.currentPage = page
|
|
console.log('跳转到页面:', page)
|
|
// 获取对应页面的数据（如果还没有获取过）
|
|
if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
|
|
await this.getBookPages(this.courseIdList[this.currentPage - 1]);
|
|
}
|
|
},
|
|
async onSwiperChange(e) {
|
|
this.currentPage = e.detail.current + 1
|
|
// 获取对应页面的数据（如果还没有获取过）
|
|
if (this.courseIdList[this.currentPage - 1] && this.bookPages[this.currentPage - 1].length === 0) {
|
|
await this.getBookPages(this.courseIdList[this.currentPage - 1]);
|
|
}
|
|
},
|
|
async getCourseList(id) {
|
|
const res = await this.$api.book.coursePage({
|
|
id: id
|
|
})
|
|
if (res.code === 200) {
|
|
this.courseIdList = res.result.map(item => item.id)
|
|
// 初始化二维数组 换一种方式
|
|
this.bookPages = this.courseIdList.map(() => [])
|
|
// 初始化标题数组
|
|
this.pageTitles = this.courseIdList.map(() => '')
|
|
// 初始化第一页
|
|
if (this.courseIdList.length > 0) {
|
|
await this.getBookPages(this.courseIdList[0])
|
|
}
|
|
}
|
|
},
|
|
async getBookPages(id) {
|
|
const res = await this.$api.book.coursesPageDetail({
|
|
id: id
|
|
})
|
|
if (res.code === 200) {
|
|
// 使用$set确保响应式更新
|
|
// 确保当前页面存在
|
|
if (this.currentPage - 1 < this.bookPages.length) {
|
|
this.$set(this.bookPages, this.currentPage - 1, JSON.parse(res.result.content))
|
|
// 保存页面标题
|
|
this.$set(this.pageTitles, this.currentPage - 1, res.result.title || '')
|
|
}
|
|
}
|
|
},
|
|
// 获取课程列表
|
|
async getCoursePageList (bookId) {
|
|
const res = await this.$api.book.course({
|
|
id: bookId
|
|
})
|
|
if (res.code === 200) {
|
|
this.courseList = res.result.records
|
|
// 打上序列号
|
|
this.courseList = this.courseList.map((item, index) => ({
|
|
...item,
|
|
index,
|
|
}))
|
|
}
|
|
}
|
|
},
|
|
async onLoad(args) {
|
|
this.courseId = args.courseId
|
|
// 先获取点进来的课程的页面列表
|
|
await Promise.all([this.getCourseList(this.courseId), this.getCoursePageList(args.bookId)])
|
|
|
|
}
|
|
}
|
|
</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;
|
|
flex: 1;
|
|
}
|
|
|
|
.navbar-title {
|
|
transform: translateX(-50rpx);
|
|
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 - 100rpx);
|
|
// margin-top: 100rpx;
|
|
margin-bottom: 100rpx;
|
|
}
|
|
|
|
.swiper-item {
|
|
height: 100%;
|
|
}
|
|
|
|
.content-area {
|
|
flex: 1;
|
|
padding: 0 40rpx;
|
|
padding-top: 100rpx;
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
/* 会员限制页面样式 */
|
|
.member-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 90%;
|
|
background-color: #F8F8F8;
|
|
padding: 40rpx;
|
|
margin: -40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.member-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 40rpx;
|
|
line-height: 1;
|
|
color: #6f6f6f;
|
|
text-align: center;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.member-button {
|
|
width: 670rpx;
|
|
height: 72rpx;
|
|
background: #06DADC;
|
|
border-radius: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.member-button-text {
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.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;
|
|
.video-player{
|
|
width: 670rpx;
|
|
margin: 0 auto;
|
|
height: 376rpx;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
// z-index: 100;
|
|
// position: relative;
|
|
// background-color: #fff;
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
/* 课程弹出窗样式 */
|
|
.course-popup {
|
|
padding: 0 32rpx;
|
|
max-height: 80vh;
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
border-bottom: 2rpx solid #EEEEEE
|
|
// margin-bottom: 40rpx;
|
|
}
|
|
|
|
.popup-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #181818;
|
|
}
|
|
|
|
|
|
.course-list {
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.course-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
padding-top: 24rpx;
|
|
padding-right: 8rpx;
|
|
padding-bottom: 24rpx;
|
|
padding-left: 8rpx;
|
|
|
|
border-bottom: 1px solid #EEEEEE;
|
|
cursor: pointer;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.course-number {
|
|
width: 80rpx;
|
|
font-family: PingFang SC;
|
|
// font-weight: 400;
|
|
font-size: 36rpx;
|
|
color: #999;
|
|
&.highlight {
|
|
color: $primary-color;
|
|
}
|
|
// margin-right: 24rpx;
|
|
}
|
|
|
|
.course-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.course-english {
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
line-height: 44rpx;
|
|
color: #252545;
|
|
margin-bottom: 8rpx;
|
|
|
|
&.highlight {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
.course-chinese {
|
|
font-size: 28rpx;
|
|
line-height: 48rpx;
|
|
color: #3B3D3D;
|
|
&.highlight {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
/* 释义弹窗样式 */
|
|
.meaning-popup {
|
|
// width: 670rpx;
|
|
background-color: #FFFFFF;
|
|
// border-radius: 32rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.meaning-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx;
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 80rpx;
|
|
}
|
|
|
|
.close-text {
|
|
font-family: PingFang SC;
|
|
font-size: 32rpx;
|
|
color: #8b8b8b;
|
|
}
|
|
|
|
.meaning-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #181818;
|
|
}
|
|
|
|
.meaning-content {
|
|
padding: 32rpx;
|
|
}
|
|
|
|
.meaning-image {
|
|
width: 670rpx;
|
|
height: 268rpx;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.word-info {
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.word-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.word-text {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 40rpx;
|
|
color: #181818;
|
|
}
|
|
|
|
.phonetic-container{
|
|
display: flex;
|
|
gap: 24rpx;
|
|
.phonetic-text {
|
|
font-family: PingFang SC;
|
|
font-size: 28rpx;
|
|
color: #262626;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
}
|
|
|
|
.word-meaning {
|
|
display: flex;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.part-of-speech {
|
|
font-family: PingFang SC;
|
|
font-size: 28rpx;
|
|
color: #262626;
|
|
}
|
|
|
|
.meaning-text {
|
|
font-family: PingFang SC;
|
|
font-size: 28rpx;
|
|
color: #181818;
|
|
flex: 1;
|
|
}
|
|
|
|
.knowledge-gain {
|
|
background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
|
|
border-radius: 24rpx;
|
|
padding: 32rpx 40rpx;
|
|
}
|
|
|
|
.knowledge-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.knowledge-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.knowledge-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #3B3D3D;
|
|
}
|
|
|
|
.knowledge-content {
|
|
font-family: PingFang SC;
|
|
font-size: 28rpx;
|
|
color: #4f4f4f;
|
|
line-height: 48rpx;
|
|
}
|
|
|
|
/* 音频控制栏样式 */
|
|
.audio-controls {
|
|
background: #fff;
|
|
padding: 20rpx 40rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
transition: transform 0.3s ease;
|
|
position: relative;
|
|
z-index: 10;
|
|
&.audio-hidden {
|
|
transform: translateY(100%);
|
|
|
|
}
|
|
}
|
|
|
|
.audio-time {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.time-text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
min-width: 80rpx;
|
|
}
|
|
|
|
.progress-container {
|
|
flex: 1;
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
.progress-bar {
|
|
position: relative;
|
|
height: 6rpx;
|
|
background: #f0f0f0;
|
|
border-radius: 3rpx;
|
|
}
|
|
|
|
.progress-fill {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
background: #06DADC;
|
|
border-radius: 3rpx;
|
|
transition: width 0.1s ease;
|
|
}
|
|
|
|
.progress-thumb {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
background: #06DADC;
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transition: left 0.1s ease;
|
|
}
|
|
|
|
.audio-controls-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.control-btn {
|
|
display: flex;
|
|
// flex-direction: column;
|
|
align-items: center;
|
|
|
|
padding: 10rpx;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.control-text {
|
|
font-size: 28rpx;
|
|
color: #4A4A4A;
|
|
// margin-top: 8rpx;
|
|
}
|
|
|
|
.play-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 10rpx;
|
|
}
|
|
</style>
|