视频首页uniapp

视频首页包含一个搜索框，一个顶部导航，下面是视频列表卡片

<template>
  <view class="home-page">
    <!-- 导航栏 -->
    <view class="navbar">
      <text class="navbar-title">视频首页</text>
    </view>

    <!-- 搜索框 -->
    <view class="search-bar">
      <input 
        type="text" 
        v-model="searchQuery" 
        placeholder="搜索视频..." 
        @confirm="handleSearch"
        confirm-type="search"
        class="search-input"
      />
      <button type="primary" size="mini" @tap="handleSearch" class="search-button">搜索</button>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 热门视频 -->
      <view class="section">
        <text class="section-title"></text>
        <view class="news-grid">
          <navigator v-for="(item, index) in hotNews" :key="index" :url="'/pages/newsDetail/main?id=' + item.id" hover-class="navigator-hover" class="news-card">
            <image :src="item.thumbnail" class="news-thumbnail"></image>
            <text class="news-title">{{ item.title }}</text>
            <text class="news-summary">{{ item.summary }}</text>
          </navigator>
        </view>
      </view>

      
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '', // 搜索查询字符串
      hotNews: [
        { id: 1, title: '视频标题1',  thumbnail: 'https://example.com/thumbnail1.jpg' },
        { id: 2, title: '视频标题2',  thumbnail: 'https://example.com/thumbnail2.jpg' },
		{ id: 1, title: '视频标题1',  thumbnail: 'https://example.com/thumbnail1.jpg' },
		  { id: 2, title: '视频标题2',  thumbnail: 'https://example.com/thumbnail2.jpg' },		  
		{ id: 1, title: '视频标题1',  thumbnail: 'https://example.com/thumbnail1.jpg' },
		{ id: 2, title: '视频标题2',  thumbnail: 'https://example.com/thumbnail2.jpg' },
		{ id: 1, title: '视频标题1',  thumbnail: 'https://example.com/thumbnail1.jpg' },
		  { id: 2, title: '视频标题2',  thumbnail: 'https://example.com/thumbnail2.jpg' },		  
		
		
      ],
      
    };
  },
  methods: {
    handleSearch() {
      console.log('正在搜索:', this.searchQuery);
      // 实现搜索逻辑...
    }
  }
};
</script>

<style>
/* 样式部分 */
.home-page {
  padding: 0 15px;
  background-color: #f9f9f9;
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
  margin-bottom: 10px;
}

.navbar-title {
  font-size: 15px;
  font-weight: bold;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 25px;
  padding: 5px 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}

.search-input {
  flex-grow: 1;
  padding: 10px;
  border: none;
  outline: none;
  background-color: transparent;
}

.search-button {
  margin-left: 10px;
  border-radius: 20px;
}

.content {
  height: calc(100vh - 150px); /* 调整高度以适应不同屏幕尺寸 */
  background-color: #f9f9f9;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0 10px;
  color: #333;
}

.news-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.news-card {
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  width: calc(50% - 7.5px); /* 两个项目占据一行，留出间距 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}

.item-list {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.item-card {
  background-color: #fff;
  border-radius: 50px;
  overflow: hidden;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}

.news-thumbnail, .item-thumbnail {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #ddd;
}

.news-title, .item-title {
  font-size: 16px;
  margin: 10px 0;
  color: #333;
}

.news-summary {
  font-size: 140px;
  color: #666;
  padding: 0 10px 10px;
}

.navigator-hover {
  opacity: 0.8;
}
</style>