englishread-front/subPages/home/directory.vue

<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{
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  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 240rpx;
  border-radius: 40rpx 40rpx 0 0;
  overflow: hidden;
  background: #fff;
  display: flex;
  gap: 24rpx;
  flex-direction: column;
  position: relative;
  z-index: 100;
}

/* 课程部分 */
.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>