视频中心ui暂时提交
parent
0b65db118a
commit
9e16b4c558
|
|
@ -201,6 +201,8 @@ export default {
|
|||
this.$tab.navigateTo('/pages/news/subpages/sysNotice/index');
|
||||
} else if (item.title === '活动中心') {
|
||||
this.$tab.navigateTo('/pages/news/subpages/eventCenter/index');
|
||||
} else if (item.title === '视频中心') {
|
||||
this.$tab.navigateTo('/pages/news/subpages/videoCenter/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