englishread-front/pages/index/home.vue

<template>
  <view class="home-container">
    <!-- 開動頁面組件 -->
    <SplashScreen @close="onSplashClose" />
    
    <!-- 状态栏安全区域 -->
    <uv-status-bar></uv-status-bar>
    
    <!-- 顶部搜索栏 -->
    <view class="header">
      <view class="search-container" @click="goSearch">
        <uv-search 
          placeholder="请输入要查询的内容" 
          :show-action="false"
          shape="round"
          bg-color="#f5f5f5"
          color="#666"
          height="38"
          margin="0 200rpx 0 0"
          placeholderColor="#c6c6c6"
        ></uv-search>
      </view>

    </view>

    <!-- Tab栏 -->
    <view class="tab-container">
      <scroll-view show-scrollbar="false" class="tab-scroll" scroll-x="true" >
        <view class="tab-list">
          <view 
            v-for="(tab, index) in tabs" 
            :key="index" 
            class="tab-item" 
            :class="{ active: activeTab === index }"
            @click="switchTab(index)"
          >
            {{ tab.title }}
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 轮播图 -->
    <view class="swiper-container" :class="{ 'tablet-swiper': isTablet }">
      <uv-swiper 
        :list="bannerList" 
        keyName="image"
        :height="swiperConfig.height"
        :radius="swiperConfig.radius"
        :previousMargin="swiperConfig.previousMargin"
        :nextMargin="swiperConfig.nextMargin"
        :displayMultipleItems="swiperConfig.displayMultipleItems"
        indicator
        indicatorInactiveColor="#fff"
        :loading="false"
        indicatorMode="dot"
        indicatorActiveColor="#F95A01"
        :autoplay="true"
        :interval="4000"
        :circular="true"
        @click="onBannerClick"
      ></uv-swiper>
    </view>
    
    <!-- 书本列表（当选择非"全部"tab时显示） -->
    <view class="book-list-container" v-if="showBookList">
      <view class="book-list-results">
        <view 
          v-for="(book, index) in bookList" 
          :key="index"
          class="book-list-item"
          @click="goToBookDetail(book)"
        >
          <view class="book-list-cover">
            <image :src="book.booksImg" mode="aspectFill"></image>
          </view>
          <view class="book-list-info">
            <view class="book-list-title">{{ book.booksName }}</view>
            <view class="book-list-author">{{ book.booksAuthor }}</view>
            <view class="book-list-meta">
              <view class="book-list-duration">
                <image src="/static/play-icon.png" mode="aspectFill" class="book-list-icon"></image>
                <text>{{ book.duration }}</text>
              </view>
              <view class="book-list-membership" :class="classMap[book.vipInfo.title]">
                {{ book.vipInfo.title }}
              </view>
            </view>
          </view>
        </view>
        <uv-loading-icon text="加载中" textSize="30rpx" v-if="isLoadingBooks"></uv-loading-icon>
        <uv-empty v-else-if="bookList.length === 0"></uv-empty>
      </view>
    </view>
    
    <!-- 文章列表 -->
    <view class="article-section" v-if="articleList.length > 0 && !showBookList">
        <view class="section-header">
        <text class="section-title">精选文章 </text>
      </view>
      
      <scroll-view 
        show-scrollbar="false" 
        class="article-scroll" 
        scroll-x="true"
      >
        <view class="article-list">
          <view 
            v-for="(article, index) in articleList" 
            :key="article.id" 
            class="article-item"
            @click="goArticleDetail(article)"
          >
            <view class="article-content">
              <view class="article-title">{{ article.title }}</view>
              <view class="article-meta">
                <view class="article-tag">精选</view>
                <text class="article-time">{{ formatTime(article.createTime) }}</text>
              </view>
            </view>
            <view class="article-arrow">
              <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 根据labelBooksData动态渲染书籍区块 -->
    <view 
      v-for="(labelData, labelIndex) in labelBooksData" 
      :key="labelIndex" 
      class="section"
      v-if="!showBookList"
    >
      <view class="section-header" @click="goLabel(labelData.labelInfo)">
        <text class="section-title">{{ labelData.labelInfo.title }}</text>
        <view class="section-more">
          <text>更多</text>
          <uv-icon name="arrow-right" size="14" color="#888"></uv-icon>
        </view>
      </view>
      
      <!-- 第一个label：今日更新样式 -->
      <!--
      <scroll-view 
        v-if="labelIndex === 0" 
        show-scrollbar="false" 
        class="content-scroll" 
        scroll-x="true"
      >
        <view class="content-list">
          <view 
            v-for="(item, index) in labelData.books" 
            :key="index" 
            class="content-item"
            @click="goBook(item)"
          >
            <view class="item-cover">
              <image :src="item.booksImg || '/static/default-image.png'" mode="aspectFill"></image>
            </view>
            <view class="item-info">
              <text class="item-title">{{ item.booksName }}</text>
              <text class="item-author">{{ item.booksAuthor }}</text>
              <view class="item-duration">
                <image src="/static/play-icon.png" class="item-icon" />
                <text>{{ item.duration }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>    -->
      
      
      <!-- 第二个label：推荐书籍样式 -->
      <scroll-view 
        v-if="labelIndex === 0" 
        show-scrollbar="false" 
        class="content-scroll" 
        scroll-x="true"
      >
        <view class="book-list">
          <view 
            v-for="(book, index) in labelData.books" 
            :key="index" 
            class="book-item"
            @click="goBook(book)"
          >
            <view class="book-cover">
              <image :src="book.booksImg || '/static/default-image.png'" mode="aspectFill"></image>
              <view class="book-overlay">
                <view class="book-duration" v-if="book.duration">
                  <image src="/static/alarm-icon.png" class="book-duration-icon" />
                  <text class="book-duration-text">{{ book.duration }}</text>
                </view>
                <view class="book-title">{{ book.booksName }}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      
      <!-- 第三个及以后的label：网格样式 -->
      <view v-else class="book-grid">
        <view 
          v-for="(book, index) in labelData.books" 
          :key="index" 
          class="book-grid-item"
          @click="goBook(book)"
        >
          <view class="book-grid-cover">
            <image :src="book.booksImg || '/static/default-image.png'" mode="aspectFill"></image>
          </view>
          <!-- <view class="book-grid-info">
            <text class="book-grid-title">{{ book.booksName }}</text>
            <view class="book-grid-meta">
              <text class="book-grid-grade">{{ book.categoryName }}/</text>
              <image src="/static/play-icon.png" class="book-grid-duration-icon" />
              <text class="book-grid-duration">{{ book.duration }}</text>
            </view>
          </view> -->
        </view>
      </view>
    </view>

    <!-- 推荐内容列表 -->
    <view class="section" v-if="!showBookList">
      <view class="recommend-list">
        <view 
          @click="goPlan(item.id, item.type)"
          v-for="(item, index) in recommendList" 
          :key="index" 
          class="recommend-item"
        >
          <image :src="item.img" mode="aspectFill" class="recommend-image"></image>
        </view>
      </view>
    </view>
    
    <!-- 视频播放弹窗 -->
    <uv-popup 
      ref="videoModal"
      title="视频播放"
      :show-cancel-button="false"
      :show-confirm-button="false"
      :close-on-click-overlay="true"
	  :safeAreaInsetBottom="false"
      @close="closeVideoModal"
    >
      <template #default>
        <view class="video-container">
          <video 
            v-if="currentVideo"
            :src="currentVideo"
            controls
            autoplay
            :show-fullscreen-btn="true"
            :show-play-btn="true"
            :show-center-play-btn="true"
            style="width: 100%; height: 400rpx; border-radius: 8rpx;"
            @error="onVideoError"
            @play="onVideoPlay"
            @pause="onVideoPause"
          ></video>
          <view v-else class="video-loading">
            <text>视频加载中...</text>
          </view>
        </view>
      </template>
    </uv-popup>
  </view>
</template>

<script>
import SplashScreen from '../components/SplashScreen.vue'

export default {
  components: {
    SplashScreen
  },
  data() {
    return {
      // Tab数据
      tabs: [ ],
      activeTab: 0,
      
      // 轮播图数据
      bannerList: [

      ],

      // 书籍分类
      labels: [
        
      ],
      
      // 根据label获取的书籍数据（二维数组）
      labelBooksData: [],
      
      // 书本列表数据（用于tab切换时显示）
      bookList: [],
      isLoadingBooks: false,
      showBookList: false, // 控制是否显示书本列表
      
      // 类型映射表（从搜索页面复制）
      classMap: {
        '蕾朵会员': 'book-membership-premium',
        '盛放会员': 'book-membership-vip',
        '萌芽会员': 'book-membership-basic',
      },

       
       // 推荐列表数据
       recommendList: [
         
       ],
       
       // 文章列表数据
       articleList: [],
       
       currentVideo: '',
       
       // 设备类型检测
       isTablet: false
    }
  },
  
  computed: {
    // 轮播图配置
    swiperConfig() {
      if (this.isTablet) {
        // 平板设备使用卡片式轮播
        return {
          height: "200",
          radius: "16",
          previousMargin: "60",
          nextMargin: "60",
          displayMultipleItems: 1.5
        }
      } else {
        // 手机设备使用普通轮播
        return {
          height: "121",
          radius: "12",
          previousMargin: "0",
          nextMargin: "0",
          displayMultipleItems: 1
        }
      }
    }
  },
  
  methods: {
    // 检测设备类型
    detectDevice() {
      let screenWidth = 0
      
      // #ifdef H5
      const userAgent = navigator.userAgent
      screenWidth = window.innerWidth || document.documentElement.clientWidth
      const screenHeight = window.innerHeight || document.documentElement.clientHeight
      
      // 判断是否为平板设备
      // 1. 屏幕宽度大于768px
      // 2. 或者是iPad设备
      this.isTablet = screenWidth >= 768 || /iPad|Android.*(?=.*\b(tablet|pad)\b)/i.test(userAgent)
      
      console.log('设备检测结果:', {
        screenWidth,
        screenHeight,
        userAgent,
        isTablet: this.isTablet
      })
      // #endif
      
      // #ifndef H5
      // 非H5环境，通过系统信息判断
      const systemInfo = uni.getSystemInfoSync()
      screenWidth = systemInfo.screenWidth
      this.isTablet = screenWidth >= 768
      // #endif
    },
    // 開動頁面關閉處理
    onSplashClose() {
      console.log('開動頁面已關閉')
      // 可以在這裡添加其他邏輯，比如統計、初始化等
    },
    
    // 切换Tab
    async switchTab(index) {
      this.activeTab = index
      
      if (index === 0) {
        // 第一个tab（全部）显示原有内容
        this.showBookList = false
        await this.getBooksByLabels()
      } else {
        // 其他tab显示书本列表
        await this.getBookList()
      }
    },
    
    // 轮播图点击事件
    onBannerClick(index) {
      console.log('点击轮播图:', index)
      const bannerItem = this.bannerList[index]
      if (!bannerItem) return
      
      // 根据 typ 字段判断跳转类型
      switch(bannerItem.typ) {
        case '1': // 课程详情
          if (bannerItem.bookId) {
            uni.navigateTo({
              url: '/subPages/home/directory?id=' + bannerItem.bookId
            })
          }
          break
        case '2': // 视频播放
          if (bannerItem.video) {
            this.currentVideo = bannerItem.video
            this.$refs.videoModal.open()
          }
          break
        case '0': // 富文本内容
          if (bannerItem.content) {
            uni.navigateTo({
              url: '/subPages/home/richtext?content=' + encodeURIComponent(bannerItem.content)
            })
          }
          break
        default:
          console.log('未知的轮播图类型:', bannerItem.typ)
      }
    },
    // 跳转计划定制
    goPlan(id, type) {
      uni.navigateTo({
        url: '/subPages/home/plan?id=' + id + '&type=' + type
      })
    },
    goSearch() {
      uni.navigateTo({
        url: '/subPages/home/search'
      })
    },
    goBook(book) {
      uni.navigateTo({
        url: '/subPages/home/directory?id=' + book.id
      })
    },
    async getBanner() {
      const bannerRes = await this.$api.home.getBanner()
      if (bannerRes.code === 200){
        this.bannerList = bannerRes.result.map(item => ({
            image: item.img,
            title: item.title,
            typ: item.typ,
            bookId: item.bookId,
            video: item.video,
            content: item.content,
            id: item.id
        }))
      }
    },
    async getSignup() {
      const signupRes = await this.$api.home.getLink()
      if (signupRes.code === 200){
        this.recommendList = signupRes.result.map(item => ({
          img: item.img,
          id: item.id,
          type: item.type
        }))
      }
    },
    
    // 获取文章列表
    async getArticleList() {
      try {
        const articleRes = await this.$api.home.getArticle()
        if (articleRes.code === 200) {
          this.articleList = articleRes.result || []
          console.log('文章列表数据:', this.articleList)
        }
      } catch (error) {
        console.error('获取文章列表失败:', error)
        this.articleList = []
      }
    },
    // 获取书籍分类
    async getCategory() {
      const categoryRes = await this.$api.book.category()
      if (categoryRes.code === 200){
        // 硬编码第一个tab为"全部"
        this.tabs = [
          { title: '全部', id: null },
          ...categoryRes.result.map(item => ({
            title: item.title,
            id: item.id
          }))
        ]
      }
    },
    // 获取书籍标签
    async getLabel() {
      const labelRes = await this.$api.book.label()
      if (labelRes.code === 200){
        this.labels = labelRes.result.map(item => ({
            title:item.lable,
            id: item.id
        }))
      }
    },

    
    // 根据label数组获取书籍数据
    async getBooksByLabels() {
      if (!this.labels || this.labels.length === 0) {
        console.log('labels数据为空，无法获取书籍')
        return
      }
      
      try {
        // 创建请求数组，每个label发起一次请求
        const requests = this.labels.map(label => 
          this.$api.book.list({
            label: label.id,
            pageNo: 1,
            pageSize: 6,
            category: this.tabs[this.activeTab].id
          }, false)
        )
        
        // 并发执行所有请求
        const responses = await Promise.all(requests)
        
        // 创建二维数组存储结果
        this.labelBooksData = responses.map((response, index) => {
          if (response.code === 200) {
            return {
              labelInfo: this.labels[index],
              books: response.result.records || []
            }
          } else {
            console.error(`获取label ${this.labels[index].title} 的书籍失败:`, response)
            return {
              labelInfo: this.labels[index],
              books: []
            }
          }
        })
        
        console.log('根据label获取的书籍数据:', this.labelBooksData)
      } catch (error) {
        console.error('获取书籍数据失败:', error)
        this.labelBooksData = []
      }
    },
    goLabel(label){
      uni.navigateTo({
        url: '/subPages/home/search?label=' + label.id
      })
    },
    
    // 获取书本列表（用于tab切换）
    async getBookList() {
      if (this.activeTab === 0) {
        // 第一个tab（全部）不显示书本列表，显示原有内容
        this.showBookList = false
        return
      }
      
      this.isLoadingBooks = true
      this.showBookList = true
      
      try {
        const params = {
          category: this.tabs[this.activeTab].id,
          pageNo: 1,
          pageSize: 20
        }
        
        const res = await this.$api.book.list(params)
        if (res.code === 200) {
          this.bookList = res.result.records || []
        } else {
          this.bookList = []
          console.error('获取书本列表失败:', res)
        }
      } catch (error) {
        console.error('获取书本列表出错:', error)
        this.bookList = []
      } finally {
        this.isLoadingBooks = false
      }
    },
    
    // 跳转到书本详情（从搜索页面复制）
    goToBookDetail(book) {
      uni.navigateTo({
        url: '/subPages/home/directory?id=' + book.id
      })
    },
    
    // 跳转文章详情
    goArticleDetail(article) {
      console.log('点击文章:', article)
      uni.navigateTo({
        url: `/subPages/home/article?id=${article.id}`
      })
    },
    
    // 跳转更多文章页面
    goMoreArticles() {
      uni.navigateTo({
        url: '/subPages/home/articleList'
      })
    },
    
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      
      try {
        // 处理iOS兼容性问题，将 "2025-10-23 16:36:43" 格式转换为 "2025/10/23 16:36:43"
        let formattedTimeStr = timeStr.replace(/-/g, '/')
        const date = new Date(formattedTimeStr)
        
        // 检查日期是否有效
        if (isNaN(date.getTime())) {
          console.warn('Invalid date format:', timeStr)
          return ''
        }
        const now = new Date()
        const diff = now - date
        
        // 小于1分钟
        if (diff < 60000) {
          return '刚刚'
        }
        // 小于1小时
        if (diff < 3600000) {
          return Math.floor(diff / 60000) + '分钟前'
        }
        // 小于1天
        if (diff < 86400000) {
          return Math.floor(diff / 3600000) + '小时前'
        }
        // 小于7天
        if (diff < 604800000) {
          return Math.floor(diff / 86400000) + '天前'
        }
        
        // 超过7天显示具体日期
        const month = date.getMonth() + 1
        const day = date.getDate()
        return `${month}月${day}日`
      } catch (error) {
        return ''
      }
    },
    
    // 关闭视频弹窗
    closeVideoModal() {
      this.$refs.videoModal.close()
      this.currentVideo = ''
    },
    
    // 视频错误处理
    onVideoError(e) {
      console.error('视频播放错误:', e)
      uni.showToast({
        title: '视频播放失败',
        icon: 'error'
      })
      this.closeVideoModal()
    },
    
    // 视频开始播放
    onVideoPlay() {
      console.log('视频开始播放')
    },
    
    // 视频暂停
    onVideoPause() {
      console.log('视频暂停播放')
    }
  },

  async onShow() {
    // 检测设备类型
    this.detectDevice()
    
    // 先获取基础数据
    await Promise.all([this.getBanner(), this.getSignup(), this.getCategory(), this.getLabel(), this.getArticleList()])
    
    // 根据label数据获取对应的书籍
    await this.getBooksByLabels()
  },
  
  mounted() {
    // 页面挂载时也检测一次设备类型
    this.detectDevice()
    
    // #ifdef H5
    // 监听窗口大小变化
    window.addEventListener('resize', this.detectDevice)
    // #endif
  },
  
  beforeDestroy() {
    // #ifdef H5
    // 移除事件监听
    window.removeEventListener('resize', this.detectDevice)
    // #endif
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 80rpx;
}

// 顶部搜索栏
.header {

  display: flex;
  align-items: center;
  padding: 6rpx 32rpx;
  background: #fff;
  
  .search-container {
    flex: 1;
  }

}

// Tab栏
.tab-container {
  background: #fff;
  // border-bottom: 1px solid #f0f0f0;
  
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  .tab-scroll {
    white-space: nowrap;
    
    .tab-list {
      display: flex;
      padding: 0 20rpx;
      
      .tab-item {
        flex-shrink: 0;
        padding: 20rpx 20rpx;
        font-size: 32rpx;
        color: #666;
        position: relative;
        
        &.active {
          color: $primary-text-color;
          font-weight: 700;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 22rpx;
            height: 4rpx;
            background: $primary-text-color;
            border-radius: 2rpx;
          }
        }
      }
    }
  }
}

// 轮播图容器
.swiper-container {
  margin: 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
  
  // 平板设备的轮播图样式
  &.tablet-swiper {
    margin: 30rpx 0;
    border-radius: 16rpx;
    
    // 卡片式轮播的额外样式
    :deep(.uv-swiper) {
      .swiper-slide {
        transition: all 0.3s ease;
        transform-origin: center;
        
        // 非激活状态的卡片
        &:not(.swiper-slide-active) {
          transform: scale(0.9);
          opacity: 0.7;
        }
        
        // 激活状态的卡片
        &.swiper-slide-active {
          transform: scale(1);
          opacity: 1;
          z-index: 2;
        }
      }
      
      // 调整指示器位置
      .uv-swiper__indicator {
        bottom: -40rpx;
      }
    }
  }
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx ;
  margin-bottom: 24rpx;
  .section-title {
    font-size: 36rpx;
    // font-weight: 600;
    color: $primary-text-color;
  }
  
  .section-more {
    display: flex;
    align-items: center;
    gap: 4rpx;
    
    text {
      font-size: 24rpx;
      color: $secondary-text-color;
    }
  }
}
// 内容区块

.section {
  margin-top: 40rpx;
  
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx ;
    margin-bottom: 24rpx;
    .section-title {
      font-size: 36rpx;
      // font-weight: 600;
      color: $primary-text-color;
    }
    
    .section-more {
      display: flex;
      align-items: center;
      gap: 4rpx;
      
      text {
        font-size: 24rpx;
        color: $secondary-text-color;
      }
    }
  }
  
  .content-scroll {
    white-space: nowrap;
  }
}

// 今日更新列表
.content-list {
  display: flex;
  padding: 0 30rpx;
  gap: 32rpx;
  
  .content-item {
    flex-shrink: 0;
    width: 602rpx;
    height: 212rpx;
    display: flex;
    align-items: center;
    background: #F8F8F8;
    padding: 16rpx;
    border-radius: 16rpx;
    gap: 16rpx;
    .item-cover {
      width: 136rpx;
      height: 200rpx;
      border-radius: 16rpx;
      // overflow: hidden;
      
      image {
        width: 136rpx;
      height: 200rpx;
      }
    }
    
    .item-info {
      // padding-top: 20rpx;
      gap: 16rpx;
      display: flex;
      flex-direction: column;
      .item-title {
        
        font-size: 32rpx;
        font-weight: 700;
        color: $primary-text-color;
        letter-spacing: 0;
        line-height: 48rpx;
        // margin-bottom: 12rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .item-author {
        
        font-size: 24rpx;
        color: $secondary-text-color;
        // margin-bottom: 8rpx;
        letter-spacing: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .item-duration {
        gap: 12rpx;
        display: flex;
        align-items: center;
        font-size: 22rpx;
        letter-spacing: 0;
        color: $secondary-text-color;
        .item-icon{
          width: 22rpx;
          height: 25rpx;
        }
      }
    }
  }
}

// 推荐书籍列表
.book-list {
  display: flex;
  padding: 0 30rpx;
  gap: 32rpx;
  
  .book-item {
    flex-shrink: 0;
    width: 270rpx;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    &:active {
      transform: scale(0.98);
    }
    
    .book-cover {
      width: 100%;
      height: 360rpx;
      border-radius: 16rpx;
      overflow: hidden;
      position: relative;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      
      &:active {
        box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.25);
        transform: translateY(-2rpx);
      }
      
      image {
        width: 100%;
        height: 100%;
        transition: transform 0.3s ease;
      }
      

      .book-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 140rpx;
        padding: 20rpx 16rpx 12rpx;
        box-sizing: border-box;
        
        /* 优化的渐变遮罩效果 */
        background: linear-gradient(
          180deg, 
          rgba(0, 0, 0, 0) 0%, 
          rgba(0, 0, 0, 0.3) 30%, 
          rgba(0, 0, 0, 0.7) 70%, 
          rgba(0, 0, 0, 0.85) 100%
        );
        
        /* 增强的毛玻璃效果 */
        backdrop-filter: blur(8px) saturate(1.2);
        -webkit-backdrop-filter: blur(8px) saturate(1.2);
        
        /* 添加微妙的边框 */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        
        /* 平滑过渡效果 */
        transition: all 0.3s ease;

        .book-duration{
          display: flex;
          align-items: center;
          gap: 6rpx;
          margin-bottom: 8rpx;
          
          &-icon{
            width: 22rpx;
            height: 22rpx;
            opacity: 0.9;
          }
          &-text{
            font-size: 20rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
          }
        }

        .book-title {
          max-width: 220rpx;
          font-size: 24rpx;
          font-weight: 600;
          line-height: 1.3;
          color: #ffffff;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
          
          /* 文本截断优化 */
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          word-break: break-word;
          white-space: normal;
        }
      }
    }
    
  }
}

// 书籍网格布局
.book-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30rpx;
  gap: 32rpx;
  
  .book-grid-item {
    width: 208rpx;
    display: flex;
    flex-direction: column;
    // backdrop-filter: red;
    .book-grid-cover {
      box-shadow: 0px 4px 4px 0px #C0BCBA75;

      width: 100%;
      height: 278rpx;
      border-radius: 16rpx;
      overflow: hidden;
      margin-bottom: 16rpx;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .book-grid-info {
      width: 208rpx;
      padding: 6rpx;
      overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      .book-grid-title {
        font-size: 28rpx;
        font-weight: 700;
        color: $primary-text-color;
        margin-bottom: 14rpx;
       
      }
      
      .book-grid-meta {
        display: flex;
        align-items: center;
        // gap: 16rpx;
        .book-grid-duration-icon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 12rpx;
        }
        .book-grid-grade {
          font-size: 24rpx;
          color: $secondary-text-color;
          margin-right: 8rpx;
        }
        
        .book-grid-duration {
          font-size: 24rpx;
          color: $secondary-text-color;
        }
      }
    }
  }
}

// 推荐列表样式
.recommend-list {
  padding: 0 30rpx;
  
  .recommend-item {
    width: 100%;
    height: 200rpx;
    margin-bottom: 48rpx;
    border-radius: 32rpx;
    overflow: hidden;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .recommend-image {
      width: 100%;
      height: 100%;
    }
  }
}

// 视频弹窗样式
.video-container {
  position: relative;
  // padding: 20rpx 0;
  width: 90vw;
  
  .video-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400rpx;
    background: #f5f5f5;
    border-radius: 8rpx;
    
    text {
      font-size: 28rpx;
      color: #999;
    }
  }
}

// 文章列表样式
.article-section {
  margin-top: 40rpx;
  
  .article-scroll {
    white-space: nowrap;
  }
  
  .article-list {
    display: flex;
    padding: 0 30rpx;
    gap: 24rpx;
    
    .article-item {
      flex-shrink: 0;
      width: 580rpx;
      height: 120rpx;
      background: #f8f9fa;
      border-radius: 16rpx;
      padding: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
        background: #f0f1f2;
      }
      
      .article-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12rpx;
        
        .article-title {
          font-size: 32rpx;
          font-weight: 600;
          color: $primary-text-color;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          word-break: break-word;
        }
        
        .article-meta {
          display: flex;
          align-items: center;
          gap: 16rpx;
          
          .article-tag {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            font-size: 20rpx;
            padding: 4rpx 12rpx;
            border-radius: 12rpx;
            font-weight: 500;
          }
          
          .article-time {
            font-size: 24rpx;
            color: $secondary-text-color;
          }
        }
      }
      
      .article-arrow {
        margin-left: 16rpx;
        opacity: 0.6;
      }
    }
  }
}

// 书本列表样式（从搜索页面复制）
.book-list-container {
  background: #fff;
  min-height: 50vh;
}

.book-list-results {
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.book-list-item {
  display: flex;
  align-items: center;
  background: #F8F8F8;
  height: 212rpx;
  gap: 16rpx;
  border-radius: 16rpx;
  padding: 0rpx 16rpx;

  &:last-child {
    border-bottom: none;
  }
  
  .book-list-cover {
    width: 136rpx;
    height: 180rpx;
    border-radius: 16rpx;
    overflow: hidden;
    margin-right: 16rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .book-list-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .book-list-title {
    font-size: 32rpx;
    font-weight: 600;
    color: $primary-text-color;
    line-height: 48rpx;
    letter-spacing: 0;
    margin-bottom: 12rpx;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .book-list-author {
    font-size: 24rpx;
    color: $secondary-text-color;
    margin-bottom: 16rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .book-list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .book-list-duration {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    color: #999;
    
    .book-list-icon {
      width: 18rpx;
      height: 18rpx;
    }
    
    text {
      margin-left: 8rpx;
    }
  }
  
  .book-list-membership {
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #211508;
  }
}

.book-membership-premium {
  background: #E9F1FF;
  border: 2rpx solid #C4DAFF;
}

.book-membership-vip {
  background: #FFF4E9;
  border: 2rpx solid #FFE2C4;
}

.book-membership-basic {
  background: #FFE9E9;
  border: 2rpx solid #FFDBC4;
}
</style>