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.
476 lines
12 KiB
476 lines
12 KiB
<template>
|
|
<view class="directory-container">
|
|
<view class="book-container">
|
|
<view class="book-info">
|
|
<view class="book-cover">
|
|
<image :src="bookInfo.cover" mode="aspectFill" :style="{width: '100%', height: '100%'}"></image>
|
|
</view>
|
|
<view class="book-details">
|
|
<view class="book-title">{{ bookInfo.title }}</view>
|
|
<view class="book-subtitle">{{ bookInfo.subtitle }}</view>
|
|
<view class="book-author">{{ bookInfo.author }}</view>
|
|
<view class="book-level" :class="classMap[bookInfo.level]">{{ bookInfo.level }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="book-knowledge">
|
|
<view class="book-knowledge-title">
|
|
<text>
|
|
适合词汇量
|
|
</text>
|
|
<text class="book-knowledge-vocabulary">
|
|
{{ bookInfo.vocabularyRange }}
|
|
</text>
|
|
</view>
|
|
<view class="border" />
|
|
<view class="book-knowledge-detail">
|
|
<view class="book-knowledge-detail-title">
|
|
知识收获
|
|
</view>
|
|
<rich-text :nodes="bookInfo.knowledgePoints">
|
|
</rich-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 课程和简介容器 -->
|
|
<view class="content-container">
|
|
<!-- 课程部分 -->
|
|
<view class="course-section">
|
|
<view class="course-header">
|
|
<view class="course-title">课程</view>
|
|
</view>
|
|
<view class="course-list">
|
|
<view
|
|
v-for="(course, index) in courseList"
|
|
:key="index"
|
|
class="course-item"
|
|
>
|
|
<view class="course-number">{{ String(index + 1).padStart(2, '0') }}</view>
|
|
<view class="course-content">
|
|
<view class="course-name">{{ course.name }}</view>
|
|
<view class="course-subtitle">{{ course.subtitle }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="course-footer">
|
|
<view class="course-total">全部课程 · {{ courseList.length }}节</view>
|
|
<uv-icon name="arrow-right" size="24rpx" color="#999"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 简介部分 -->
|
|
<view class="intro-section">
|
|
<view class="intro-title">简介</view>
|
|
<view class="intro-content">
|
|
{{ bookInfo.introduction }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 作者部分 -->
|
|
<view class="author-section">
|
|
<view class="author-title">作者</view>
|
|
<view class="author-info">
|
|
<view class="author-avatar">
|
|
<image src="/static/默认头像.png" mode="aspectFill"></image>
|
|
<view>
|
|
<view class="author-name">John Steinbeck</view>
|
|
<view class="author-subtitle">约翰·斯坦贝克</view>
|
|
</view>
|
|
</view>
|
|
<view class="author-details">
|
|
<view class="author-description">
|
|
约翰·斯坦贝克（1902 — 1968）是美国现代小说家，1962 年荣获诺贝尔文学奖。斯坦贝克一生创作出了 27 部作品，它们大多着眼于美国底层人民的生活，对贫穷而善良的劳苦大众展现出了强烈的同情心。不仅为被压迫者申辩，而且还歌颂了他们在困境中生存的勇气和斗志。斯坦贝克最为优秀的几部作品都发表于 20世纪30年代之后，例如荣获美国国家图书奖、普利策奖的长篇小说《愤怒的葡萄》，具有浓厚乡土气息的短篇集《小红马》和中篇小说《人鼠之间》，以反法西斯战争为题材的中篇小说《月亮下去了》等。斯坦贝克既是地位崇高的文学大师，也是深受美国民众爱戴的畅销作家，他的作品不仅深刻影响了美国文学的发展，也启发了人们对社会、人性、生死等话题的思考。
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部固定操作栏 -->
|
|
<view class="bottom-action-bar">
|
|
<view class="bottom-action-container">
|
|
<view class="action-button secondary">
|
|
<image src="/static/课程图标.png" class="button-icon" mode="aspectFill"></image>
|
|
<text>加入课程</text>
|
|
</view>
|
|
<view class="action-button primary">
|
|
<image src="/static/内容图标.png" class="button-icon" ></image>
|
|
<text>内容朗读</text>
|
|
</view>
|
|
<uv-button type="primary" :custom-style="{
|
|
width: '400rpx',
|
|
height: '80rpx',
|
|
borderRadius: '198rpx',
|
|
background: '#06DADC',
|
|
fontSize: '28rpx',
|
|
fontWeight: '600'
|
|
}" >开始学习</uv-button>
|
|
</view>
|
|
<uv-safe-bottom></uv-safe-bottom>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
classMap: {
|
|
'朵蕾会员': 'book-level-1',
|
|
'萌芽会员': 'book-level-2',
|
|
'盛放会员': 'book-level-3',
|
|
},
|
|
bookInfo: {
|
|
cover: '/static/默认图片.png',
|
|
title: 'The Little Prince',
|
|
subtitle: '小王子',
|
|
author: '圣-埃克苏佩里',
|
|
level: '朵蕾会员',
|
|
vocabularyRange: '1.6K~2.5K',
|
|
// 我是富文本字符串
|
|
knowledgePoints: '<div>1. 41天读完法国作家圣埃克苏佩里文学作品</div><div>2. 掌握400+单词英文文本，收获对于法语的</div><div>3. 感受英文文学作品的魅力，在阅读中提升英语语感和文学素养</div><div>4. 通过英文原著，在生活中，对语言使用的文学性</div><div>5. 名作阅读</div>',
|
|
introduction: '在阿尔卑斯山上住着一个可爱的女孩小海蒂。她自幼失去父母，同性格倔强但心地善良的爷爷一起生活。后来，因为姨妈介绍的一个机会，海蒂去到了法兰克福，和一个叫克拉拉的女孩儿作伴。克拉拉自小患病无法行走，虽然两个孩子感情很好，但海蒂却因为想家患上了梦游症。最终海蒂回到了阿尔卑斯山，同山里的亲友们找回了幸福的生活。随后，克拉拉也如约前来拜访，在海蒂和爷爷的悉心照料下，奇迹发生了...'
|
|
},
|
|
courseList: [
|
|
{
|
|
name: 'Look, George!',
|
|
subtitle: '你瞧，乔治'
|
|
},
|
|
{
|
|
name: 'A Live Mouse?',
|
|
subtitle: '活老鼠？'
|
|
},
|
|
{
|
|
name: 'Beans with Ketchup',
|
|
subtitle: '豆子配番茄酱'
|
|
},
|
|
{
|
|
name: 'Aunt Clara',
|
|
subtitle: '卡莉拉姑姑'
|
|
},
|
|
{
|
|
name: 'No Ketchup',
|
|
subtitle: '无番茄酱'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.directory-container {
|
|
min-height: 100vh;
|
|
background-color: #264C8F;
|
|
padding-bottom: 200rpx;
|
|
|
|
}
|
|
.book-container{
|
|
padding: 30rpx;
|
|
}
|
|
.book-info {
|
|
display: flex;
|
|
align-items: start;
|
|
|
|
gap: 32rpx;
|
|
.book-cover {
|
|
width: 208rpx;
|
|
height: 292rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
.book-details{
|
|
color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
.book-title{
|
|
font-weight: 500;
|
|
font-size: 40rpx;
|
|
}
|
|
.book-subtitle{
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
}
|
|
.book-author{
|
|
font-size: 24rpx;
|
|
}
|
|
.book-level{
|
|
font-size: 24rpx;
|
|
width: 124rpx;
|
|
height: 38rpx;
|
|
border-radius: 8rpx;
|
|
text-align: center;
|
|
line-height: 38rpx;
|
|
color: #080D21;
|
|
}
|
|
.book-level-1{
|
|
background: #E9F1FF;
|
|
border: 2rpx solid #C4DAFF
|
|
}
|
|
.book-level-2{
|
|
background: #FFE9E9;
|
|
border: 2rpx solid #FFDBC4
|
|
}
|
|
.book-level-3{
|
|
background: #FFF4E9;
|
|
border: 2rpx solid #FFE2C4
|
|
}
|
|
}
|
|
}
|
|
.book-knowledge{
|
|
box-shadow: 0px 1px 5px 0px #103577;
|
|
background: #234684;
|
|
color: #fff;
|
|
margin-top: 32rpx;
|
|
border: 2rpx solid #FFFFFF3B;
|
|
border-radius: 32rpx;
|
|
padding-top: 32rpx;
|
|
padding-right: 40rpx;
|
|
padding-bottom: 32rpx;
|
|
padding-left: 40rpx;
|
|
gap: 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 22rpx;
|
|
.book-knowledge-title{
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.book-knowledge-vocabulary{
|
|
font-size: 40rpx;
|
|
color: #06DADC;
|
|
}
|
|
}
|
|
|
|
.border {
|
|
width: 100%;
|
|
border: 2rpx solid;
|
|
border-image-source: linear-gradient(90deg, rgba(233, 181, 123, 0) 0%, rgba(255, 255, 255, 0.79) 50.48%, rgba(233, 181, 123, 0) 100%);
|
|
border-image-slice: 1;
|
|
}
|
|
|
|
.book-knowledge-detail-title{
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
}
|
|
|
|
/* 课程和简介容器 */
|
|
.content-container {
|
|
padding: 40rpx 32rpx;
|
|
border-radius: 40rpx 40rpx 0 0;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
display: flex;
|
|
gap: 24rpx;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 课程部分 */
|
|
.course-section {
|
|
background: #F8F8F8;
|
|
border-radius: 32rpx;
|
|
border-radius: 32rpx;
|
|
padding-top: 36rpx;
|
|
padding-right: 32rpx;
|
|
padding-bottom: 36rpx;
|
|
padding-left: 32rpx;
|
|
gap: 36rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
|
|
|
|
.course-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #3B3D3D;
|
|
}
|
|
|
|
.course-list {
|
|
// margin-bottom: 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.course-item {
|
|
display: flex;
|
|
align-items: center;
|
|
// background: red;
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|
padding-bottom: 20rpx;
|
|
gap: 36rpx;
|
|
}
|
|
|
|
.course-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.course-number {
|
|
font-size: 36rpx;
|
|
color: #999;
|
|
|
|
|
|
}
|
|
|
|
.course-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.course-name {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #3B3D3D;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.course-subtitle {
|
|
font-size: 28rpx;
|
|
color: #3B3D3D;
|
|
}
|
|
|
|
.course-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: space-between;
|
|
}
|
|
|
|
.course-total {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
/* 简介部分 */
|
|
.intro-section {
|
|
background: #F8F8F8;
|
|
|
|
border-radius: 32rpx;
|
|
padding: 32rpx;
|
|
|
|
}
|
|
|
|
.intro-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #3B3D3D;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.intro-content {
|
|
font-size: 28rpx;
|
|
line-height: 48rpx;
|
|
color: #4F4F4F;
|
|
}
|
|
|
|
/* 作者部分 */
|
|
.author-section {
|
|
background: #F8F8F8;
|
|
border-radius: 32rpx;
|
|
padding: 32rpx;
|
|
|
|
.author-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #3B3D3D;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.author-info {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
.author-avatar {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
.author-name {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #252545;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.author-subtitle {
|
|
font-size: 28rpx;
|
|
color: #3B3D3D;
|
|
// margin-bottom: 16rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.author-details {
|
|
flex: 1;
|
|
|
|
|
|
.author-description {
|
|
font-size: 28rpx;
|
|
line-height: 48rpx;
|
|
color: #4F4F4F;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 底部固定操作栏 */
|
|
.bottom-action-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
padding: 24rpx 32rpx 0;
|
|
box-shadow: 0rpx -2rpx 0rpx 0rpx #0000001A;
|
|
z-index: 999;
|
|
|
|
.bottom-action-container{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
|
|
.action-button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16rpx 0rpx;
|
|
border-radius: 16rpx;
|
|
min-width: 120rpx;
|
|
gap: 8rpx;
|
|
|
|
.button-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|