englishread-front/pages/index/desk.vue

<template>
  <view class="desk-container">

    
    <!-- 顶部搜索栏 -->
    <view class="header">
      <view class="search-container">
        <uv-search 
          placeholder="请输入要查询的内容" 
          :show-action="true"
          :action-style="{color: '#fff', backgroundColor: '#06DADC', borderRadius:'8rpx', width:'100rpx', height: '64rpx', lineHeight: '64rpx', borderRadius: '198rpx', text:'white', fontSize:'26rpx'}"
          shape="round"
          bg-color="#F3F3F3"
          color="#C6C6C6"
          height="32"
          margin="0"
          searchIconColor="#8B8B8B"
          placeholderColor="#c6c6c6"
        ></uv-search>
      </view>
    </view>

    <!-- 书籍网格 -->
    <view class="book-grid-container">
      <view class="book-grid">
        <view 
          v-for="(book, index) in bookList" 
          :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>
</template>

<script>
export default {
  data() {
    return {
      // 书籍列表数据
      bookList: [
        {
          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'
        },
        {
          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'
        },
        {
          cover: '/static/默认图片.png',
          title: '精讲短文',
          grade: '考研',
          duration: '03:24'
        },
        {
          cover: '/static/默认图片.png',
          title: '精讲短文',
          grade: '考研',
          duration: '03:24'
        }
      ]
    }
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
.desk-container {
  background: #fff;
  min-height: 100vh;
}

// 顶部搜索栏
.header {
  display: flex;
  align-items: center;
  padding: 20rpx 32rpx;
  background: #fff;
  
  .search-container {
    flex: 1;
  }
}

// 书籍网格容器
.book-grid-container {
  padding: 20rpx 30rpx;
}

// 书籍网格布局
.book-grid {
  display: flex;
  flex-wrap: wrap;
  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;
      box-sizing: border-box;
      
      .book-grid-title {
        font-size: 28rpx;
        font-weight: 700;
        color: $primary-text-color;
        
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .book-grid-meta {
        display: flex;
        align-items: center;
        margin-top: 8rpx;

        .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;
        }
      }
    }
  }
}
</style>