englishread-front/subPages/home/book.vue

<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>