From 9e16b4c558d3512d5f78bd2b9d5637ba851f13d0 Mon Sep 17 00:00:00 2001
From: lld <15027638633@163.com>
Date: Fri, 27 Mar 2026 00:49:21 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E4=B8=AD=E5=BF=83ui=E6=9A=82?=
 =?UTF-8?q?=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/news/index.vue                      |   2 +
 pages/news/subpages/videoCenter/index.vue | 311 ++++++++++++++++++++++
 2 files changed, 313 insertions(+)
 create mode 100644 pages/news/subpages/videoCenter/index.vue

diff --git a/pages/news/index.vue b/pages/news/index.vue
index 4d05c9e..adf315b 100644
--- a/pages/news/index.vue
+++ b/pages/news/index.vue
@@ -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) {
diff --git a/pages/news/subpages/videoCenter/index.vue b/pages/news/subpages/videoCenter/index.vue
new file mode 100644
index 0000000..84f2440
--- /dev/null
+++ b/pages/news/subpages/videoCenter/index.vue
@@ -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>
\ No newline at end of file