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>

相关推荐
Black蜡笔小新5 小时前
赋能智慧货运:视频汇聚平台EasyCVR打造货运汽车安全互联网视频监控与管理方案
网络·汽车·音视频
撬动未来的支点6 小时前
【音视频】DASH 和 SRT协议与传统协议对比
音视频
音视频牛哥6 小时前
狂飙与重构:机器人IPO浪潮背后的系统焦虑与感知进化
人工智能·计算机视觉·机器人·音视频·多智能体协同·rtsp播放器rtmp播放器·视频感知低延迟音视频
华仔啊6 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
天才测试猿8 小时前
Selenium定位元素的方法css和xpath的区别
css·自动化测试·软件测试·python·selenium·测试工具·测试用例
撬动未来的支点9 小时前
【音视频】SDP与SIP协议的区别与联系
音视频
EasyGBS9 小时前
EasyGBS在智慧仓储物流场景下视频实时监控系统应用方案
网络·音视频
wdfk_prog11 小时前
NVIDIA驱动更新“翻车”?解决RTX 2060在Bilibili客户端无法加载4K视频的终极指南*
音视频
社恐的下水道蟑螂11 小时前
前端小彩蛋:纯 CSS 实现情侣小球互动,甜到齁的代码我扒下来了
css
南清的coding日记13 小时前
Java 程序员的 Vue 指南 - Vue 万字速览(01)
java·开发语言·前端·javascript·vue.js·css3·html5