<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>