325 lines
7.5 KiB
Vue
325 lines
7.5 KiB
Vue
<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">
|
||
<uni-dateformat :date="Date.now()" format="MM-dd" />
|
||
</text>
|
||
<view class="category-tabs">
|
||
<view
|
||
v-for="(item, index) in categoryList"
|
||
:key="index"
|
||
class="category-item"
|
||
:class="{ active: activeCategory === item.type,
|
||
'filter-btn': item.type === 'filter' }"
|
||
@click="handleCategoryClick(item.type)"
|
||
>
|
||
<image class="icon" :src="item.imgUrl" mode="aspectFill"/>
|
||
<text>{{ item.name }}</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"></view>
|
||
</view>
|
||
|
||
<!-- 时间 + 卡片 垂直排列 -->
|
||
<view class="time-card-wrap">
|
||
<!-- 时间 + 未读红点（在卡片正上方） -->
|
||
<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>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {parseTime} from "@/utils/agri";
|
||
|
||
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',
|
||
categoryList: [
|
||
{ type: 'person', name: '人', imgUrl: "https://picsum.photos/id/1015/400/200" },
|
||
{ type: 'car', name: '车', imgUrl: "https://picsum.photos/id/1015/400/200" },
|
||
{ type: 'animal', name: '动物', imgUrl: "https://picsum.photos/id/1015/400/200" },
|
||
{ type: 'filter', name: '筛选', imgUrl: "https://picsum.photos/id/1015/400/200" }
|
||
],
|
||
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/G我饿全额钱31313122LT/...',
|
||
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: {
|
||
parseTime,
|
||
handleDateClick(item) {
|
||
this.dateList = this.dateList.map(d => ({ ...d, active: d === item }))
|
||
},
|
||
handleCategoryClick(type) {
|
||
if (type === 'filter') {
|
||
this.handleFilterClick();
|
||
return;
|
||
}
|
||
this.activeCategory = type;
|
||
uni.showToast({ title: `切换到${type === 'person' ? '人' : type === 'car' ? '车' : '动物'}分类` })
|
||
},
|
||
handleFilterClick() {
|
||
uni.showToast({ title: '打开筛选面板' })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面容器 */
|
||
.video-page {
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 日期选择栏 */
|
||
.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;
|
||
background: #f7f8fd;
|
||
margin: 0 10rpx;
|
||
//border: 1rpx solid #e0e0e0;
|
||
border-radius: 12rpx;
|
||
padding: 16rpx 0;
|
||
}
|
||
.date-tab.active {
|
||
background-color: #1677ff;
|
||
color: #fff;
|
||
border-color: #1677ff;
|
||
}
|
||
.week {
|
||
font-size: 25rpx;
|
||
margin-bottom: 8rpx;
|
||
color: #bdbdbd;
|
||
}
|
||
.day {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 筛选栏 */
|
||
.filter-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
.date-title {
|
||
font-size: 36rpx;
|
||
font-weight: 400;
|
||
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;
|
||
width: 16rpx;
|
||
height: 22rpx;
|
||
}
|
||
|
||
/* 视频列表 */
|
||
.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: 14rpx;
|
||
padding-top: 20rpx;
|
||
}
|
||
.axis-line {
|
||
width: 1rpx;
|
||
height: 170rpx; /* 适配时间+卡片高度 */
|
||
background-color: #e0e0e0;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
/* 时间+卡片 垂直包裹 */
|
||
.time-card-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 时间信息（在卡片正上方） */
|
||
.time-info {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
.time-text {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
margin-top: 20rpx;
|
||
}
|
||
.unread-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background-color: #ff3b30;
|
||
border-radius: 50%;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
/* 视频卡片 */
|
||
.video-card {
|
||
display: flex;
|
||
background-color: #f7f8fd;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
}
|
||
.video-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
width: 0;
|
||
}
|
||
.device-name {
|
||
font-size: 28rpx;
|
||
color: #8f8f8f;
|
||
margin-bottom: 10rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
padding-right: 10rpx;
|
||
}
|
||
.event-type {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
.video-cover {
|
||
width: 320rpx;
|
||
height: 180rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
</style> |