视频中心ui提交

pages/news/subpages/videoCenter/index.vue

@@ -16,38 +16,20 @@
 
     <!-- 日期标题 + 分类筛选（靠右） -->
     <view class="filter-bar">
-      <text class="date-title">03-26</text>
+      <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 === 'person' }"
-            @click="handleCategoryClick('person')"
+            :class="{ active: activeCategory === item.type,
+             'filter-btn': item.type === 'filter' }"
+            @click="handleCategoryClick(item.type)"
         >
-          <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>
+          <image class="icon" :src="item.imgUrl" mode="aspectFill"/>
+          <text>{{ item.name }}</text>
         </view>
       </view>
     </view>
@@ -62,7 +44,7 @@
         <!-- 时间轴（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 class="axis-line" v-if="index !== videoList.length"></view>
         </view>
 
         <!-- 时间 + 卡片 垂直排列 -->
@@ -88,6 +70,8 @@
 </template>
 
 <script>
+import {parseTime} from "@/utils/agri";
+
 export default {
   data() {
     return {
@@ -101,6 +85,12 @@ export default {
         { 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',
@@ -111,7 +101,7 @@ export default {
         },
         {
           time: '13:20:20',
-          device: 'DS-2DE4423DW-D/GLT/...',
+          device: 'DS-2DE4423DW-D/G我饿全额钱31313122LT/...',
           event: '画面变化',
           cover: 'https://picsum.photos/id/1015/400/200',
           unread: true
@@ -134,11 +124,16 @@ export default {
     }
   },
   methods: {
+    parseTime,
     handleDateClick(item) {
       this.dateList = this.dateList.map(d => ({ ...d, active: d === item }))
     },
     handleCategoryClick(type) {
-      this.activeCategory = type
+      if (type === 'filter') {
+        this.handleFilterClick();
+        return;
+      }
+      this.activeCategory = type;
       uni.showToast({ title: `切换到${type === 'person' ? '人' : type === 'car' ? '车' : '动物'}分类` })
     },
     handleFilterClick() {
@@ -170,10 +165,11 @@ export default {
   align-items: center;
   justify-content: center;
   color: #666;
+  background: #f7f8fd;
   margin: 0 10rpx;
-  border: 1rpx solid #e0e0e0;
+  //border: 1rpx solid #e0e0e0;
   border-radius: 12rpx;
-  padding: 10rpx 0;
+  padding: 16rpx 0;
 }
 .date-tab.active {
   background-color: #1677ff;
@@ -181,11 +177,12 @@ export default {
   border-color: #1677ff;
 }
 .week {
-  font-size: 28rpx;
+  font-size: 25rpx;
   margin-bottom: 8rpx;
+  color: #bdbdbd;
 }
 .day {
-  font-size: 32rpx;
+  font-size: 28rpx;
   font-weight: 500;
 }
 
@@ -198,7 +195,7 @@ export default {
 }
 .date-title {
   font-size: 36rpx;
-  font-weight: 500;
+  font-weight: 400;
   color: #333;
 }
 .category-tabs {
@@ -236,6 +233,8 @@ export default {
 }
 .icon {
   margin-right: 6rpx;
+  width: 16rpx;
+  height: 22rpx;
 }
 
 /* 视频列表 */
@@ -254,12 +253,12 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-right: 20rpx;
-  padding-top: 8rpx;
+  margin-right: 14rpx;
+  padding-top: 20rpx;
 }
 .axis-line {
   width: 1rpx;
-  height: 120rpx; /* 适配时间+卡片高度 */
+  height: 170rpx; /* 适配时间+卡片高度 */
   background-color: #e0e0e0;
   margin-top: 8rpx;
 }
@@ -280,7 +279,7 @@ export default {
 .time-text {
   font-size: 30rpx;
   color: #333;
-  font-weight: 500;
+  margin-top: 20rpx;
 }
 .unread-dot {
   width: 12rpx;
@@ -293,7 +292,7 @@ export default {
 /* 视频卡片 */
 .video-card {
   display: flex;
-  background-color: #f9f9f9;
+  background-color: #f7f8fd;
   border-radius: 12rpx;
   padding: 20rpx;
 }
@@ -302,14 +301,19 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  width: 0;
 }
 .device-name {
-  font-size: 30rpx;
-  color: #666;
+  font-size: 28rpx;
+  color: #8f8f8f;
   margin-bottom: 10rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 10rpx;
 }
 .event-type {
-  font-size: 32rpx;
+  font-size: 28rpx;
   color: #333;
   font-weight: 500;
 }