englishread-front/pages/index/home.vue

<template>
  <view class="home-container">
    <!-- 状态栏安全区域 -->
    <uv-status-bar></uv-status-bar>
    
    <!-- 顶部搜索栏 -->
    <view class="header">
      <view class="search-container">
        <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 }}
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 轮播图 -->
    <view class="swiper-container">
      <uv-swiper 
        :list="bannerList" 
        keyName="image"
        height="121"
        radius="12"
        indicator
        ndicatorInactiveColor="#fff"
        :loading="false"
        indicatorMode="dot"
        indicatorActiveColor="#F95A01"
        @click="onBannerClick"
      ></uv-swiper>
    </view>

    <!-- 今日更新 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">今日更新</text>
        <view class="section-more">
          <text>更多</text>
          <uv-icon name="arrow-right" size="14" color="#888"></uv-icon>
        </view>
      </view>
      <scroll-view show-scrollbar="false" class="content-scroll" scroll-x="true" >
        <view class="content-list">
          <view 
            v-for="(item, index) in todayUpdates" 
            :key="index" 
            class="content-item"
          >
            <view class="item-cover">
              <image :src="item.cover" mode="aspectFill"></image>
            </view>
            <view class="item-info">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-author">{{ item.author }}</text>
              <view class="item-duration"><image src="/static/播放图标.png" class="item-icon" /><text>{{ item.duration }}</text></view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 推荐书籍 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">推荐书籍</text>
        <view class="section-more">
          <text>更多</text>
          <uv-icon name="arrow-right" size="14" color="#999"></uv-icon>
        </view>
      </view>
      <scroll-view show-scrollbar="false" class="content-scroll" scroll-x="true" >
        <view class="book-list">
          <view 
            v-for="(book, index) in recommendBooks" 
            :key="index" 
            class="book-item"
          >
            <view class="book-cover">
              <image :src="book.cover" mode="aspectFill"></image>
              <!-- <view class="book-duration">
                <uv-icon name="time" size="10" color="#fff"></uv-icon>
                <text>{{ book.duration }}</text>
              </view> -->
              <view class="book-overlay">
                <view class="book-duration">
                  <image src="/static/闹钟图标.png" class="book-duration-icon" />
                  <text class="book-duration-text">{{ book.duration }}</text>
                </view>
                <view class="book-title">{{ book.title }}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 四级精讲短文合集书 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">四级精讲短文合集书</text>
        <view class="section-more">
          <text>更多</text>
          <uv-icon name="arrow-right" size="14" color="#999"></uv-icon>
        </view>
      </view>
      <view class="book-grid">
        <view 
          v-for="(book, index) in bookGridList" 
          :key="index" 
          class="book-grid-item"
        >
          <view class="book-grid-cover">
            <image :src="book.cover" mode="aspectFill"></image>
          </view>
          <view class="book-grid-info">
            <text class="book-grid-title">{{ book.title }}</text>
            <view class="book-grid-meta">
              <text class="book-grid-grade">{{ book.grade }}/</text>
              <image src="/static/播放图标.png" class="book-grid-duration-icon" />
              <text class="book-grid-duration">{{ book.duration }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 推荐内容列表 -->
    <view class="section">
      <view class="recommend-list">
        <view 
          @click="goPlan()"
          v-for="(item, index) in recommendList" 
          :key="index" 
          class="recommend-item"
        >
          <image :src="item.image" mode="aspectFill" class="recommend-image"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // Tab数据
      tabs: ['为你推荐', '精选', '短文', '专栏', '初中', '四六级'],
      activeTab: 0,
      
      // 轮播图数据
      bannerList: [
        {
          image: '/static/首页背景图.png',
          title: '轮播图1'
        },
        {
          image: '/static/默认图片.png',
          title: '轮播图2'
        },
        {
          image: '/static/logo.png',
          title: '轮播图3'
        }
      ],
      
      // 今日更新数据
      todayUpdates: [
        {
          cover: '/static/默认图片.png',
          title: '全脑孩子：12项革命性策略...',
          author: 'Daniel J. Siegel / Tina Payne Bryso...',
          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: '全脑孩子：12项革命性策略...',
          author: 'Daniel J. Siegel / Tina Payne Bryso...',
          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: '全脑孩子：12项革命性策略...',
          author: 'Daniel J. Siegel / Tina Payne Bryso...',
          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: '全脑孩子：12项革命性策略...',
          author: 'Daniel J. Siegel / Tina Payne Bryso...',
          duration: '03:24'
        },
      ],
      
      // 推荐书籍数据
      recommendBooks: [
        {
          cover: '/static/默认图片.png',
          title: 'The Power of Now 擦拭才:The Power of Now :The Power of Now :',
          
          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: 'Dealing in Desire 擦擦:The Power of Now :The Power of Now :',

          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: 'A New Earth擦超2 :The Power of Now :The Power of Now :',

          duration: '03:24'
        }
      ],
       
       // 书籍网格数据
       bookGridList: [
         {
           cover: '/static/默认图片.png',
           title: '精讲短文',
           grade: '四级',
           duration: '03:24'
         },
         {
           cover: '/static/默认图片.png',
           title: '精讲短文',
           grade: '四级',
           duration: '03:24'
         },
         {
           cover: '/static/默认图片.png',
           title: '精讲短文',
           grade: '四级',
           duration: '03:24'
         },
         {
           cover: '/static/默认图片.png',
           title: '精讲短文',
           grade: '四级',
           duration: '03:24'
         },
         {
           cover: '/static/默认图片.png',
           title: '精讲短文',
           grade: '四级',
           duration: '03:24'
         },
         {
           cover: '/static/默认图片.png',
           title: '精讲短文',
           grade: '四级',
           duration: '03:24'
         }
        ],
       
       // 推荐列表数据
       recommendList: [
         {
           image: '/static/默认图片.png'
         },
         {
           image: '/static/默认图片.png'
         },
         {
           image: '/static/默认图片.png'
         },
         {
           image: '/static/默认图片.png'
         }
       ]
    }
  },
  
  methods: {
    // 切换Tab
    switchTab(index) {
      this.activeTab = index
    },
    
    // 轮播图点击事件
    onBannerClick(index) {
      console.log('点击轮播图:', index)
      // 这里可以添加跳转逻辑
    },
    // 跳转计划定制
    goPlan() {
      uni.navigateTo({
        url: '/subPages/home/plan'
      })
    }
  }
}
</script>

<style lang="scss" scoped>


.home-container {
  background: #fff;
  min-height: 100vh;
}

// 顶部搜索栏
.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;
  
  .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;
}

// 内容区块
.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;
    // border-radius: 16rpx;
    .book-cover {
      width: 100%;
      height: 360rpx;
      border-radius: 16rpx;
      overflow: hidden;
      position: relative;
      
      image {
        width: 100%;
        height: 100%;
      }
      

      .book-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 140rpx;
        padding-top: 4rpx;
        padding-right: 16rpx;
        padding-bottom: 8rpx;
        padding-left: 16rpx;
        backdrop-filter: blur(5px);
        box-sizing: border-box;
        background: #00000066;
        padding: 20rpx 16rpx 8rpx;
        // gap: 26rpx;

        .book-duration{
          display: flex;
          gap: 8rpx;
          
          &-icon{
            width: 24rpx;
            height: 24rpx;
          }
          &-text{
            font-size: 20rpx;
            color: #DCDCDC;
          }
        }

        .book-title {
          margin-top: 10rpx;
          max-width: 220rpx;
          font-size: 24rpx;
          line-height: 1.4;
          color: #fff;

          // max-height: 68rpx;        /* = line-height * 2（34rpx * 2）作为保险 */
          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;
    
    .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 {
      padding: 6rpx;
      .book-grid-title {
        font-size: 28rpx;
        font-weight: 700;
        color: $primary-text-color;
        margin-bottom: 14rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .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%;
    }
  }
}
</style>