|
|
|
@ -0,0 +1,475 @@ |
|
|
|
<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; |
|
|
|
|
|
|
|
} |
|
|
|
.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> |
hflllll
1 month ago
