agri-app/pages/news/subpages/videoCenter/index.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">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>