视频中心ui暂时提交
parent
0b65db118a
commit
9e16b4c558
|
|
@ -201,6 +201,8 @@ export default {
|
||||||
this.$tab.navigateTo('/pages/news/subpages/sysNotice/index');
|
this.$tab.navigateTo('/pages/news/subpages/sysNotice/index');
|
||||||
} else if (item.title === '活动中心') {
|
} else if (item.title === '活动中心') {
|
||||||
this.$tab.navigateTo('/pages/news/subpages/eventCenter/index');
|
this.$tab.navigateTo('/pages/news/subpages/eventCenter/index');
|
||||||
|
} else if (item.title === '视频中心') {
|
||||||
|
this.$tab.navigateTo('/pages/news/subpages/videoCenter/index');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
deleteItem(event, index) {
|
deleteItem(event, index) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,311 @@
|
||||||
|
<template>
|
||||||
|
<view class="video-page">
|
||||||
|
<!-- 日期选择栏 -->
|
||||||
|
<view class="date-tabs">
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in dateList"
|
||||||
|
:key="index"
|
||||||
|
class="date-tab"
|
||||||
|
:class="{ active: item.active }"
|
||||||
|
@click="handleDateClick(item)"
|
||||||
|
>
|
||||||
|
<text class="week">{{ item.week }}</text>
|
||||||
|
<text class="day">{{ item.day }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 日期标题 + 分类筛选（靠右） -->
|
||||||
|
<view class="filter-bar">
|
||||||
|
<text class="date-title">03-26</text>
|
||||||
|
<view class="category-tabs">
|
||||||
|
<view
|
||||||
|
class="category-item"
|
||||||
|
:class="{ active: activeCategory === 'person' }"
|
||||||
|
@click="handleCategoryClick('person')"
|
||||||
|
>
|
||||||
|
<text class="icon">👤</text>
|
||||||
|
<text>人</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="category-item"
|
||||||
|
:class="{ active: activeCategory === 'car' }"
|
||||||
|
@click="handleCategoryClick('car')"
|
||||||
|
>
|
||||||
|
<text class="icon">🚗</text>
|
||||||
|
<text>车</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="category-item"
|
||||||
|
:class="{ active: activeCategory === 'animal' }"
|
||||||
|
@click="handleCategoryClick('animal')"
|
||||||
|
>
|
||||||
|
<text class="icon">🐾</text>
|
||||||
|
<text>动物</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="category-item filter-btn"
|
||||||
|
@click="handleFilterClick"
|
||||||
|
>
|
||||||
|
<text class="icon">🔍</text>
|
||||||
|
<text>筛选</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 视频列表（带时间轴） -->
|
||||||
|
<scroll-view scroll-y class="video-list">
|
||||||
|
<view
|
||||||
|
v-for="(item, index) in videoList"
|
||||||
|
:key="index"
|
||||||
|
class="video-item"
|
||||||
|
>
|
||||||
|
<!-- 时间轴（uni-icons实现） -->
|
||||||
|
<view class="time-axis">
|
||||||
|
<uni-icons type="circle" size="14" color="#1677ff"></uni-icons>
|
||||||
|
<view class="axis-line" v-if="index !== videoList.length - 1"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 时间 + 未读红点 -->
|
||||||
|
<view class="time-info">
|
||||||
|
<text class="time-text">{{ item.time }}</text>
|
||||||
|
<view class="unread-dot" v-if="item.unread"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 视频卡片 -->
|
||||||
|
<view class="video-card">
|
||||||
|
<view class="video-info">
|
||||||
|
<text class="device-name">{{ item.device }}</text>
|
||||||
|
<text class="event-type">{{ item.event }}</text>
|
||||||
|
</view>
|
||||||
|
<image class="video-cover" :src="item.cover" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dateList: [
|
||||||
|
{ week: '五', day: '20', active: false },
|
||||||
|
{ week: '六', day: '21', active: false },
|
||||||
|
{ week: '日', day: '22', active: false },
|
||||||
|
{ week: '一', day: '23', active: false },
|
||||||
|
{ week: '二', day: '24', active: false },
|
||||||
|
{ week: '三', day: '25', active: false },
|
||||||
|
{ week: '四', day: '今', active: true }
|
||||||
|
],
|
||||||
|
activeCategory: 'person',
|
||||||
|
videoList: [
|
||||||
|
{
|
||||||
|
time: '13:22:04',
|
||||||
|
device: 'DS-2DE4423DW-D/GLT/...',
|
||||||
|
event: '画面变化',
|
||||||
|
cover: 'https://picsum.photos/id/1015/400/200',
|
||||||
|
unread: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '13:20:20',
|
||||||
|
device: 'DS-2DE4423DW-D/GLT/...',
|
||||||
|
event: '画面变化',
|
||||||
|
cover: 'https://picsum.photos/id/1015/400/200',
|
||||||
|
unread: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '13:19:12',
|
||||||
|
device: 'DS-2DE4423DW-D/GLT/...',
|
||||||
|
event: '画面变化',
|
||||||
|
cover: 'https://picsum.photos/id/1015/400/200',
|
||||||
|
unread: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '13:18:11',
|
||||||
|
device: 'DS-2DE4423DW-D/GLT/...',
|
||||||
|
event: '画面变化',
|
||||||
|
cover: 'https://picsum.photos/id/1015/400/200',
|
||||||
|
unread: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleDateClick(item) {
|
||||||
|
this.dateList = this.dateList.map(d => ({ ...d, active: d === item }))
|
||||||
|
},
|
||||||
|
handleCategoryClick(type) {
|
||||||
|
this.activeCategory = type
|
||||||
|
uni.showToast({ title: `切换到${type === 'person' ? '人' : type === 'car' ? '车' : '动物'}分类` })
|
||||||
|
},
|
||||||
|
handleFilterClick() {
|
||||||
|
uni.showToast({ title: '打开筛选面板' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 页面容器 */
|
||||||
|
.video-page {
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 日期选择栏 */
|
||||||
|
.date-tabs {
|
||||||
|
display: flex;
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
}
|
||||||
|
.date-tab {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #666;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
}
|
||||||
|
.date-tab.active {
|
||||||
|
background-color: #1677ff;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #1677ff;
|
||||||
|
}
|
||||||
|
.week {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
.day {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 筛选栏 */
|
||||||
|
.filter-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
}
|
||||||
|
.date-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.category-tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.category-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
border: 1rpx solid #e0e0e0;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
margin-left: 15rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.category-item.active {
|
||||||
|
background-color: #fff7f0;
|
||||||
|
border-color: #ff7d00;
|
||||||
|
color: #ff7d00;
|
||||||
|
}
|
||||||
|
.category-item:nth-child(2).active {
|
||||||
|
background-color: #f0f8ff;
|
||||||
|
border-color: #00a8ff;
|
||||||
|
color: #00a8ff;
|
||||||
|
}
|
||||||
|
.category-item:nth-child(3).active {
|
||||||
|
background-color: #f0f5ff;
|
||||||
|
border-color: #4080ff;
|
||||||
|
color: #4080ff;
|
||||||
|
}
|
||||||
|
.filter-btn {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 视频列表 */
|
||||||
|
.video-list {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
}
|
||||||
|
.video-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间轴 */
|
||||||
|
.time-axis {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
padding-top: 8rpx;
|
||||||
|
}
|
||||||
|
.axis-line {
|
||||||
|
width: 1rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间信息 */
|
||||||
|
.time-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
padding-top: 8rpx;
|
||||||
|
}
|
||||||
|
.time-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.unread-dot {
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
background-color: #ff3b30;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 视频卡片 */
|
||||||
|
.video-card {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
}
|
||||||
|
.video-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.device-name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
.event-type {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.video-cover {
|
||||||
|
width: 320rpx;
|
||||||
|
height: 180rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue