uniapp视频首页页面

<style scoped>
/* 全局样式 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.search-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.search-button {
  padding: 10px 20px;
  margin-left: 10px;
  background-color: #ff4081;
  color: #fff;
  border: none;
  border-radius: 5px;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.nav-item {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #333;
  padding: 10px;
}

.nav-item.active {
  color: #ff4081;
  border-bottom: 2px solid #ff4081;
}

/* 内容区域样式 */
.content-area {
  flex: 1;
  background-color: #f5f5f5;
}

.content-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.content-item {
  width: 48%;
  margin: 1%;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content-item-image {
  width: 100%;
  height: 150px; /* 固定高度，确保方形显示 */
}

.content-item-title {
  padding: 10px;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <image class="logo" src="/static/images/logo.png" mode="widthFix"></image>
      <input class="search-input" placeholder="搜索视频"/>
      <button class="search-button">搜索</button>
    </view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view :class="['nav-item', {'active': activeTab === 'recommend'}]" @click="changeTab('recommend')">推荐</view>
      <view :class="['nav-item', {'active': activeTab === 'hot'}]" @click="changeTab('hot')">热门</view>
      <view :class="['nav-item', {'active': activeTab === 'article'}]" @click="changeTab('article')">图文</view>
      <view :class="['nav-item', {'active': activeTab === 'short'}]" @click="changeTab('short')">短视频</view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content-area" :style="{height: contentHeight + 'px'}" scroll-y>
      <view class="content-grid">
        <navigator v-for="(item, index) in items" :key="index" :url="'/pages/videoDetail/main?id=' + item.id" hover-class="navigator-hover" class="content-item">
          <image :src="item.image" mode="aspectFill" class="content-item-image"></image>
          <text class="content-item-title">{{ item.title }}</text>
        </navigator>
      </view>
    </scroll-view>

    <!-- 底部导航栏（uniapp自带） -->
    <uni-tabbar></uni-tabbar>
  </view>
</template>
<script>
export default {
  data() {
    return {
      activeTab: 'recommend',
      items: [
        { id: 1, image: '/static/images/video1.jpg', title: '视频标题1' },
        { id: 2, image: '/static/images/video2.jpg', title: '视频标题2' },
        { id: 3, image: '/static/images/video3.jpg', title: '视频标题3' },
        // 添加更多内容项
      ],
      screenHeight: 0,
      searchBarHeight: 60, // 搜索栏高度（可根据实际情况调整）
      navBarHeight: 40,   // 导航栏高度（可根据实际情况调整）
      tabBarHeight: 50,   // 底部导航栏高度（可根据实际情况调整）
    };
  },
  computed: {
    contentHeight() {
      return this.screenHeight - this.searchBarHeight - this.navBarHeight - this.tabBarHeight;
    }
  },
  onReady() {
    // 获取屏幕高度
    const systemInfo = uni.getSystemInfoSync();
    this.screenHeight = systemInfo.windowHeight;
  },
  methods: {
    changeTab(tab) {
      this.activeTab = tab;
      // 根据选中的标签加载相应的内容
      // 这里可以调用API获取数据
    }
  }
};
</script>