diff --git a/lib/main/lockDetail/videoLog/editVideoLog/editVideoLog_logic.dart b/lib/main/lockDetail/videoLog/editVideoLog/editVideoLog_logic.dart
index 116b8819..286c229c 100755
--- a/lib/main/lockDetail/videoLog/editVideoLog/editVideoLog_logic.dart
+++ b/lib/main/lockDetail/videoLog/editVideoLog/editVideoLog_logic.dart
@@ -145,9 +145,9 @@ class EditVideoLogLogic extends BaseGetXController {
   }
 
   // 根据URL生成唯一的文件名（MD5哈希值）
-  String getFileNameFromUrl(String url, String extension) {
+  String getFileNameFromUrl(String url, String extension, int recordType) {
     final hash = md5.convert(utf8.encode(url)).toString(); // 使用 md5 生成哈希值
-    return '$hash.$extension';
+    return '$recordType' + '_' + '$hash.$extension';
   }
 
   Future<void> recordDownloadTime(String filePath) async {
@@ -169,7 +169,7 @@ class EditVideoLogLogic extends BaseGetXController {
   }
 
 // 下载文件方法（支持视频和图片）
-  Future<String?> downloadFile(String? url) async {
+  Future<String?> downloadFile(String? url, int recordType) async {
     if (url == null || url.isEmpty) {
       print('URL不能为空');
       return null;
@@ -183,7 +183,8 @@ class EditVideoLogLogic extends BaseGetXController {
 
         // 根据URL生成唯一文件名（自动识别扩展名）
         String extension = _getFileTypeFromUrl(url); // 自动检测文件类型
-        String fileName = getFileNameFromUrl(url, extension); // 根据URL生成唯一文件名
+        String fileName =
+            getFileNameFromUrl(url, extension, recordType); // 根据URL生成唯一文件名
         String savePath = '${appDocDir.path}/downloads/$fileName'; // 自定义保存路径
 
         // 确保目录存在
diff --git a/lib/main/lockDetail/videoLog/editVideoLog/editVideoLog_page.dart b/lib/main/lockDetail/videoLog/editVideoLog/editVideoLog_page.dart
index c677fc8f..f4dcfd31 100755
--- a/lib/main/lockDetail/videoLog/editVideoLog/editVideoLog_page.dart
+++ b/lib/main/lockDetail/videoLog/editVideoLog/editVideoLog_page.dart
@@ -76,23 +76,31 @@ class _EditVideoLogPageState extends State<EditVideoLogPage> {
       body: Column(
         children: <Widget>[
           Expanded(
-            child: Obx(() => ListView.builder(
+            child: Obx(
+              () => ListView.builder(
                 itemCount: state.videoLogList.length,
                 itemBuilder: (BuildContext c, int index) {
                   final CloudStorageData item = state.videoLogList[index];
-                  return Column(
-                    children: <Widget>[
-                      Container(
-                          margin: EdgeInsets.only(
-                              left: 20.w, top: 15.w, bottom: 15.w),
-                          child: Row(children: <Widget>[
-                            Text(item.date ?? '',
-                                style: TextStyle(fontSize: 20.sp)),
-                          ])),
-                      mainListView(index, item)
-                    ],
+                  return ExpansionTile(
+                    shape: Border(),
+                    collapsedShape: Border(),
+                    expansionAnimationStyle: AnimationStyle(
+                      curve: Curves.easeInOut,
+                      duration: Duration(milliseconds: 400),
+                    ),
+                    initiallyExpanded: true,
+                    title: Text(
+                      item.date ?? '',
+                      style: TextStyle(
+                        fontSize: 24.sp,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ),
+                    children: mainListView(index, item),
                   );
-                })),
+                },
+              ),
+            ),
           ),
           bottomBottomBtnWidget()
         ],
@@ -100,29 +108,35 @@ class _EditVideoLogPageState extends State<EditVideoLogPage> {
     );
   }
 
+  Widget _buildNotData() {
+    return Expanded(
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Image.asset(
+              'images/icon_noData.png',
+              width: 160.w,
+              height: 180.h,
+            ),
+            Text(
+              '暂无数据'.tr,
+              style: TextStyle(
+                  color: AppColors.darkGrayTextColor, fontSize: 22.sp),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
   double itemW = (1.sw - 15.w * 4) / 3;
   double itemH = (1.sw - 15.w * 4) / 3 + 40.h;
 
-  Widget mainListView(int index, CloudStorageData itemData) {
-    return GridView.builder(
-      padding: EdgeInsets.only(left: 15.w, right: 15.w),
-      itemCount: itemData.recordList!.length,
-      shrinkWrap: true,
-      physics: const NeverScrollableScrollPhysics(),
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-          //横轴元素个数
-          crossAxisCount: 3,
-          //纵轴间距
-          mainAxisSpacing: 10.w,
-          // 横轴间距
-          crossAxisSpacing: 15.w,
-          //子组件宽高长度比例
-          childAspectRatio: itemW / itemH),
-      itemBuilder: (BuildContext context, int index) {
-        final RecordListData recordData = itemData.recordList![index];
-        return videoItem(recordData);
-      },
-    );
+  // 云存列表
+  List<Widget> mainListView(int index, CloudStorageData itemData) {
+    return itemData.recordList!.map((e) => videoItem(e)).toList();
   }
 
   // Widget videoItem(RecordListData recordData, int index) {
@@ -237,9 +251,9 @@ class _EditVideoLogPageState extends State<EditVideoLogPage> {
     if (state.selectVideoLogList.value.isNotEmpty) {
       state.selectVideoLogList.value.forEach((element) {
         if (element.videoUrl != null && element.videoUrl != '') {
-          logic.downloadFile(element.videoUrl ?? '');
+          logic.downloadFile(element.videoUrl ?? '', element.recordType!);
         } else if (element.imagesUrl != null && element.imagesUrl != '') {
-          logic.downloadFile(element.imagesUrl ?? '');
+          logic.downloadFile(element.imagesUrl ?? '', element.recordType!);
         }
       });
       // double _progress = 0.0;
@@ -339,77 +353,154 @@ class _EditVideoLogPageState extends State<EditVideoLogPage> {
   Widget videoItem(RecordListData recordData) {
     return GestureDetector(
       onTap: () {
-        if (recordData.videoUrl != null && recordData.videoUrl!.isNotEmpty) {
-          Get.toNamed(Routers.videoLogDetailPage, arguments: <String, Object>{
-            'recordData': recordData,
-            'videoDataList': state.videoLogList.value
-          });
-        } else if (recordData.imagesUrl != null &&
-            recordData.imagesUrl!.isNotEmpty) {
-          Navigator.push(
-            context,
-            MaterialPageRoute(
-              builder: (context) => FullScreenImagePage(
-                imageUrl: recordData.imagesUrl!,
-              ),
-            ),
-          );
+        recordData.isSelect = !recordData.isSelect!;
+        if (recordData.isSelect! == true) {
+          state.selectVideoLogList.add(recordData);
+        } else {
+          state.selectVideoLogList.remove(recordData);
         }
+        setState(() {});
       },
-      child: Stack(
-        children: [
-          SizedBox(
-            width: itemW,
-            height: itemH,
-            child: Column(
-              children: <Widget>[
+      child: Container(
+        padding: EdgeInsets.symmetric(horizontal: 20.w),
+        margin: EdgeInsets.only(
+          bottom: 20.h,
+          left: 18.w,
+          right: 18.w,
+        ),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(10.w),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.grey.withOpacity(0.2),
+              spreadRadius: 1,
+              blurRadius: 5,
+              offset: const Offset(0, 3), // changes position of shadow
+            ),
+          ],
+        ),
+        width: 1.sw,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: <Widget>[
+            Row(
+              children: [
+                Image(
+                  width: 36.w,
+                  height: 36.w,
+                  image: state.selectVideoLogList.value.contains(recordData)
+                      ? const AssetImage('images/icon_round_select.png')
+                      : const AssetImage('images/icon_round_unSelect.png'),
+                ),
+                SizedBox(
+                  width: 14.w,
+                ),
                 Container(
-                  width: itemW,
-                  height: itemW,
-                  margin: const EdgeInsets.all(0),
-                  color: Colors.white,
-                  child: ClipRRect(
-                    borderRadius: BorderRadius.circular(10.w),
-                    child: _buildImageOrVideoItem(recordData),
+                  padding: EdgeInsets.all(10.w),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(58.w),
+                    color: AppColors.mainColor,
+                  ),
+                  child: Icon(
+                    _buildIconByType(recordData),
+                    size: 48.sp,
+                    color: Colors.white,
+                  ),
+                ),
+                SizedBox(
+                  width: 14.w,
+                ),
+                Container(
+                  height: itemW,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Text(
+                        _buildTitleByType(recordData),
+                        style: TextStyle(
+                          fontSize: 24.sp,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      SizedBox(
+                        height: 8.h,
+                      ),
+                      Text(
+                        DateTool()
+                            .dateToHNString(recordData.operateDate.toString()),
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          fontSize: 20.sp,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                    ],
                   ),
                 ),
-                SizedBox(height: 5.h),
-                Text(
-                  DateTool()
-                      .dateToYMDHNString(recordData.operateDate.toString()),
-                  textAlign: TextAlign.center,
-                  style: TextStyle(fontSize: 18.sp),
-                )
               ],
             ),
-          ),
-          Positioned(
-            top: 0.w,
-            right: 0.w,
-            child: GestureDetector(
-              onTap: () {
-                recordData.isSelect = !recordData.isSelect!;
-                if (recordData.isSelect! == true) {
-                  state.selectVideoLogList.add(recordData);
-                } else {
-                  state.selectVideoLogList.remove(recordData);
-                }
-                setState(() {});
-              },
-              child: Image(
-                width: 36.w,
-                height: 36.w,
-                image: state.selectVideoLogList.value.contains(recordData)
-                    ? const AssetImage('images/icon_round_select.png')
-                    : const AssetImage('images/icon_round_unSelect.png'),
+            Container(
+              width: 118.w,
+              height: 118.w,
+              margin: const EdgeInsets.all(0),
+              color: Colors.white,
+              child: ClipRRect(
+                borderRadius: BorderRadius.circular(10.w),
+                child: _buildImageOrVideoItem(recordData),
               ),
             ),
-          )
-        ],
+          ],
+        ),
       ),
     );
   }
 
+  String _buildTitleByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 130:
+        return '防拆报警'.tr;
+      case 160:
+        return '人脸'.tr + '开锁'.tr;
+      case 220:
+        return '逗留警告'.tr;
+      default:
+        return '';
+    }
+  }
+
+  IconData _buildIconByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 130:
+        return Icons.fmd_bad_outlined;
+      case 160:
+        return Icons.tag_faces_outlined;
+      case 220:
+        return Icons.wifi_tethering_error_rounded_outlined;
+      default:
+        return Icons.priority_high_rounded;
+    }
+  }
+
+  Color _buildTextColorByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 120:
+      case 150:
+      case 130:
+      case 190:
+      case 200:
+      case 210:
+      case 220:
+        return Colors.red;
+      default:
+        return Colors.black;
+    }
+  }
+
   _buildImageOrVideoItem(RecordListData recordData) {
     if (recordData.videoUrl != null && recordData.videoUrl!.isNotEmpty) {
       return _buildVideoItem(recordData);
diff --git a/lib/main/lockDetail/videoLog/videoLog/videoLog_logic.dart b/lib/main/lockDetail/videoLog/videoLog/videoLog_logic.dart
index 35bc490c..f61e3079 100755
--- a/lib/main/lockDetail/videoLog/videoLog/videoLog_logic.dart
+++ b/lib/main/lockDetail/videoLog/videoLog/videoLog_logic.dart
@@ -1,7 +1,7 @@
 import 'dart:convert';
 import 'dart:io';
-import 'dart:typed_data';
 
+import 'package:crypto/crypto.dart';
 import 'package:get/get.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:star_lock/appRouters.dart';
@@ -63,8 +63,17 @@ class VideoLogLogic extends BaseGetXController {
       final content = await File(logFilePath).readAsString();
       final logData = Map<String, int>.from(json.decode(content));
 
-      // 遍历所有记录
       logData.forEach((filePath, timestamp) {
+        String fileName = filePath
+            .split('/')
+            .last; // 得到: 220_f5e371111918ff70cb3532bec20e38c4.mp4
+        String withoutExt = fileName.replaceAll('.mp4', ''); // 或使用 substring 截取
+
+        String numberStr = withoutExt.split('_').first; // 得到: 220
+
+        int number = int.parse(numberStr);
+
+        print(number); // 输出: 220
         final downloadDateTime = DateTime.fromMillisecondsSinceEpoch(timestamp);
         final dateKey =
             '${downloadDateTime.year}-${downloadDateTime.month.toString().padLeft(2, '0')}-${downloadDateTime.day.toString().padLeft(2, '0')}';
@@ -77,11 +86,15 @@ class VideoLogLogic extends BaseGetXController {
         // 将文件记录添加到对应日期的列表中
         if (filePath.endsWith('.jpg')) {
           groupedDownloads[dateKey]?.add(
-            RecordListData(operateDate: timestamp, imagesUrl: filePath),
+            RecordListData(
+                operateDate: timestamp,
+                imagesUrl: filePath,
+                recordType: number),
           );
         } else if (filePath.endsWith('.mp4')) {
           groupedDownloads[dateKey]?.add(
-            RecordListData(operateDate: timestamp, videoUrl: filePath),
+            RecordListData(
+                operateDate: timestamp, videoUrl: filePath, recordType: number),
           );
         }
       });
diff --git a/lib/main/lockDetail/videoLog/videoLog/videoLog_page.dart b/lib/main/lockDetail/videoLog/videoLog/videoLog_page.dart
index 0167d59b..247ea747 100755
--- a/lib/main/lockDetail/videoLog/videoLog/videoLog_page.dart
+++ b/lib/main/lockDetail/videoLog/videoLog/videoLog_page.dart
@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
 import 'package:star_lock/appRouters.dart';
+import 'package:star_lock/app_settings/app_settings.dart';
 import 'package:star_lock/flavors.dart';
 import 'package:star_lock/main/lockDetail/videoLog/videoLog/videoLog_entity.dart';
 import 'package:star_lock/main/lockDetail/videoLog/videoLog/videoLog_state.dart';
@@ -26,9 +27,7 @@ class VideoLogPage extends StatefulWidget {
 
 class _VideoLogPageState extends State<VideoLogPage> {
   final VideoLogLogic logic = Get.put(VideoLogLogic());
-  final VideoLogState state = Get
-      .find<VideoLogLogic>()
-      .state;
+  final VideoLogState state = Get.find<VideoLogLogic>().state;
 
   @override
   void initState() {
@@ -56,66 +55,71 @@ class _VideoLogPageState extends State<VideoLogPage> {
           // title加编辑按钮
           editVideoTip(),
           Obx(
-                () =>
-                Visibility(
-                  visible: !state.isNavLocal.value,
-                  child: state.videoLogList.length > 0
-                      ? Expanded(
-                    child: ListView.builder(
-                      itemCount: state.videoLogList.length,
-                      itemBuilder: (BuildContext c, int index) {
-                        final CloudStorageData item =
-                        state.videoLogList[index];
-                        return Column(
-                          children: <Widget>[
-                            Container(
-                                margin: EdgeInsets.only(
-                                    left: 20.w, top: 15.w, bottom: 15.w),
-                                child: Row(children: <Widget>[
-                                  Text(item.date ?? '',
-                                      style: TextStyle(fontSize: 20.sp)),
-                                ])),
-                            mainListView(index, item)
-                          ],
-                        );
-                      },
-                    ),
-                  )
-                      : _buildNotData(),
-                ),
+            () => Visibility(
+              visible: !state.isNavLocal.value,
+              child: state.videoLogList.length > 0
+                  ? Expanded(
+                      child: ListView.builder(
+                        itemCount: state.videoLogList.length,
+                        itemBuilder: (BuildContext c, int index) {
+                          final CloudStorageData item =
+                              state.videoLogList[index];
+                          return ExpansionTile(
+                            shape: Border(),
+                            collapsedShape: Border(),
+                            expansionAnimationStyle: AnimationStyle(
+                              curve: Curves.easeInOut,
+                              duration: Duration(milliseconds: 400),
+                            ),
+                            initiallyExpanded: true,
+                            title: Text(
+                              item.date ?? '',
+                              style: TextStyle(
+                                fontSize: 24.sp,
+                                fontWeight: FontWeight.w600,
+                              ),
+                            ),
+                            children: mainListView(index, item),
+                          );
+                        },
+                      ),
+                    )
+                  : _buildNotData(),
+            ),
           ),
           // 本地顶部
           Obx(
-                () =>
-                Visibility(
-                  visible: state.isNavLocal.value,
-                  child: state.lockVideoList.length > 0
-                      ? Expanded(
-                    child: ListView.builder(
-                      itemCount: state.lockVideoList.length,
-                      itemBuilder: (BuildContext c, int index) {
-                        final CloudStorageData item =
-                        state.lockVideoList[index];
-                        return Column(
-                          children: <Widget>[
-                            Container(
-                              margin: EdgeInsets.only(
-                                  left: 20.w, top: 15.w, bottom: 15.w),
-                              child: Row(
-                                children: <Widget>[
-                                  Text(item.date ?? '',
-                                      style: TextStyle(fontSize: 20.sp)),
-                                ],
+            () => Visibility(
+              visible: state.isNavLocal.value,
+              child: state.lockVideoList.length > 0
+                  ? Expanded(
+                      child: ListView.builder(
+                        itemCount: state.lockVideoList.length,
+                        itemBuilder: (BuildContext c, int index) {
+                          final CloudStorageData item =
+                              state.lockVideoList[index];
+                          return ExpansionTile(
+                            shape: Border(),
+                            collapsedShape: Border(),
+                            expansionAnimationStyle: AnimationStyle(
+                              curve: Curves.easeInOut,
+                              duration: Duration(milliseconds: 400),
+                            ),
+                            initiallyExpanded: true,
+                            title: Text(
+                              item.date ?? '',
+                              style: TextStyle(
+                                fontSize: 24.sp,
+                                fontWeight: FontWeight.w600,
                               ),
                             ),
-                            lockMainListView(index, item)
-                          ],
-                        );
-                      },
-                    ),
-                  )
-                      : _buildNotData(),
-                ),
+                            children: mainListView(index, item),
+                          );
+                        },
+                      ),
+                    )
+                  : _buildNotData(),
+            ),
           ),
         ],
       ),
@@ -154,24 +158,28 @@ class _VideoLogPageState extends State<VideoLogPage> {
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           TextButton(
-              onPressed: () {
-                setState(() {
-                  state.isNavLocal.value = false;
-                  state.lockVideoList.clear();
-                  // logic.clearDownloads();
-                });
-              },
-              child: Obx(() =>
-                  Text('云存'.tr,
-                      style: state.isNavLocal.value == true
-                          ? TextStyle(
-                          color: Colors.grey,
-                          fontSize: 26.sp,
-                          fontWeight: FontWeight.w600)
-                          : TextStyle(
-                          color: Colors.white,
-                          fontSize: 28.sp,
-                          fontWeight: FontWeight.w600)))),
+            onPressed: () {
+              setState(() {
+                state.isNavLocal.value = false;
+                state.lockVideoList.clear();
+                // logic.clearDownloads();
+              });
+            },
+            child: Obx(
+              () => Text(
+                '云存'.tr,
+                style: state.isNavLocal.value == true
+                    ? TextStyle(
+                        color: Colors.grey,
+                        fontSize: 26.sp,
+                        fontWeight: FontWeight.w600)
+                    : TextStyle(
+                        color: Colors.white,
+                        fontSize: 28.sp,
+                        fontWeight: FontWeight.w600),
+              ),
+            ),
+          ),
           TextButton(
             onPressed: () {
               setState(() {
@@ -180,19 +188,18 @@ class _VideoLogPageState extends State<VideoLogPage> {
               });
             },
             child: Obx(
-                  () =>
-                  Text(
-                    '已下载'.tr,
-                    style: state.isNavLocal.value == true
-                        ? TextStyle(
+              () => Text(
+                '已下载'.tr,
+                style: state.isNavLocal.value == true
+                    ? TextStyle(
                         color: Colors.white,
                         fontSize: 28.sp,
                         fontWeight: FontWeight.w600)
-                        : TextStyle(
+                    : TextStyle(
                         color: Colors.grey,
                         fontSize: 26.sp,
                         fontWeight: FontWeight.w600),
-                  ),
+              ),
             ),
           ),
         ],
@@ -212,93 +219,88 @@ class _VideoLogPageState extends State<VideoLogPage> {
         // height: 150.h,
         margin: EdgeInsets.all(15.w),
         padding:
-        EdgeInsets.only(left: 20.w, top: 20.w, bottom: 20.w, right: 10.w),
+            EdgeInsets.only(left: 20.w, top: 20.w, bottom: 20.w, right: 10.w),
         decoration: BoxDecoration(
-            color: const Color(0xFFF6F7F8),
-            borderRadius: BorderRadius.circular(20.h)),
+          color: const Color(0xFFF6F7F8),
+          borderRadius: BorderRadius.circular(
+            20.h,
+          ),
+        ),
         child: Obx(
-              () =>
-              Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Row(
+          () => Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                children: <Widget>[
+                  Expanded(
+                      child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
                     children: <Widget>[
-                      Expanded(
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: <Widget>[
-                              Text('3天滚动储存'.tr,
-                                  style: TextStyle(fontSize: 24.sp)),
-                              SizedBox(height: 10.h),
-                              Text("${F
-                                  .navTitle}${"已为本设备免费提供3大滚动视频储存服务"
-                                  .tr}",
-                                  style:
-                                  TextStyle(fontSize: 22.sp, color: Colors
-                                      .grey)),
-                            ],
-                          )),
-                      SizedBox(width: 15.w),
-                      Text('去升级'.tr, style: TextStyle(fontSize: 22.sp)),
-                      Image(
-                          width: 40.w,
-                          height: 24.w,
-                          image: const AssetImage(
-                              'images/icon_right_black.png'))
+                      Text('3天滚动储存'.tr, style: TextStyle(fontSize: 24.sp)),
+                      SizedBox(height: 10.h),
+                      Text("${F.navTitle}${"已为本设备免费提供3大滚动视频储存服务".tr}",
+                          style:
+                              TextStyle(fontSize: 22.sp, color: Colors.grey)),
                     ],
-                  ),
-                  SizedBox(
-                    height: 16.h,
-                  ),
-                  Text(
-                    '云存服务状态：${_handlerValidityPeriodStatsText()}',
-                    style: TextStyle(
-                      fontSize: 24.sp,
-                    ),
-                  ),
-                  SizedBox(
-                    height: 8.h,
-                  ),
-                  Visibility(
-                    visible: state.validityPeriodInfo.value != null &&
-                        state.validityPeriodInfo.value?.status == 1,
-                    child: Text(
-                      '过期时间：${state.validityPeriodInfo.value
-                          ?.validityPeriodEnd}',
-                      style: TextStyle(
-                        fontSize: 24.sp,
-                      ),
-                    ),
-                  ),
-                  SizedBox(
-                    height: 8.h,
-                  ),
-                  Visibility(
-                    visible: state.validityPeriodInfo.value != null &&
-                        state.validityPeriodInfo.value?.status == 1,
-                    child: Text(
-                      '滚动存储天数：${state.validityPeriodInfo.value?.rollingStorageDays} 天',
-                      style: TextStyle(
-                        fontSize: 24.sp,
-                      ),
-                    ),
-                  ),
-                  SizedBox(
-                    height: 8.h,
-                  ),
-                  Visibility(
-                    visible: state.validityPeriodInfo.value != null &&
-                        state.validityPeriodInfo.value?.status == 1,
-                    child: Text(
-                      '剩余天数：${state.validityPeriodInfo.value
-                          ?.remainingDays} 天',
-                      style: TextStyle(
-                        fontSize: 24.sp,
-                      ),
-                    ),
-                  ),
+                  )),
+                  SizedBox(width: 15.w),
+                  Text('去升级'.tr, style: TextStyle(fontSize: 22.sp)),
+                  Image(
+                      width: 40.w,
+                      height: 24.w,
+                      image: const AssetImage('images/icon_right_black.png'))
                 ],
               ),
+              SizedBox(
+                height: 16.h,
+              ),
+              Text(
+                '云存服务状态：${_handlerValidityPeriodStatsText()}',
+                style: TextStyle(
+                  fontSize: 24.sp,
+                ),
+              ),
+              SizedBox(
+                height: 8.h,
+              ),
+              Visibility(
+                visible: state.validityPeriodInfo.value != null &&
+                    state.validityPeriodInfo.value?.status == 1,
+                child: Text(
+                  '过期时间：${state.validityPeriodInfo.value?.validityPeriodEnd}',
+                  style: TextStyle(
+                    fontSize: 24.sp,
+                  ),
+                ),
+              ),
+              SizedBox(
+                height: 8.h,
+              ),
+              Visibility(
+                visible: state.validityPeriodInfo.value != null &&
+                    state.validityPeriodInfo.value?.status == 1,
+                child: Text(
+                  '滚动存储天数：${state.validityPeriodInfo.value?.rollingStorageDays} 天',
+                  style: TextStyle(
+                    fontSize: 24.sp,
+                  ),
+                ),
+              ),
+              SizedBox(
+                height: 8.h,
+              ),
+              Visibility(
+                visible: state.validityPeriodInfo.value != null &&
+                    state.validityPeriodInfo.value?.status == 1,
+                child: Text(
+                  '剩余天数：${state.validityPeriodInfo.value?.remainingDays} 天',
+                  style: TextStyle(
+                    fontSize: 24.sp,
+                  ),
+                ),
+              ),
+            ],
+          ),
         ),
       ),
     );
@@ -329,7 +331,7 @@ class _VideoLogPageState extends State<VideoLogPage> {
         // height: 130.h,
         margin: EdgeInsets.all(15.w),
         padding:
-        EdgeInsets.only(left: 20.w, top: 30.w, bottom: 30.w, right: 10.w),
+            EdgeInsets.only(left: 20.w, top: 30.w, bottom: 30.w, right: 10.w),
         decoration: BoxDecoration(
             color: const Color(0xFFF6F7F8),
             borderRadius: BorderRadius.circular(20.h)),
@@ -337,15 +339,15 @@ class _VideoLogPageState extends State<VideoLogPage> {
           children: <Widget>[
             Expanded(
                 child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: <Widget>[
-                    // SizedBox(height: 20.h),
-                    Text('下载列表'.tr, style: TextStyle(fontSize: 24.sp)),
-                    SizedBox(height: 15.h),
-                    Text('暂无下载内容'.tr,
-                        style: TextStyle(fontSize: 22.sp, color: Colors.grey)),
-                  ],
-                )),
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: <Widget>[
+                // SizedBox(height: 20.h),
+                Text('下载列表'.tr, style: TextStyle(fontSize: 24.sp)),
+                SizedBox(height: 15.h),
+                Text('暂无下载内容'.tr,
+                    style: TextStyle(fontSize: 22.sp, color: Colors.grey)),
+              ],
+            )),
             SizedBox(width: 15.w),
             // Text("去升级", style: TextStyle(fontSize: 24.sp)),
             Image(
@@ -412,48 +414,12 @@ class _VideoLogPageState extends State<VideoLogPage> {
   double itemH = (1.sw - 15.w * 4) / 3 + 40.h;
 
   // 云存列表
-  Widget mainListView(int index, CloudStorageData itemData) {
-    return GridView.builder(
-      padding: EdgeInsets.only(left: 15.w, right: 15.w),
-      itemCount: itemData.recordList!.length,
-      shrinkWrap: true,
-      physics: const NeverScrollableScrollPhysics(),
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-        //横轴元素个数
-          crossAxisCount: 3,
-          //纵轴间距
-          mainAxisSpacing: 15.w,
-          // 横轴间距
-          crossAxisSpacing: 15.w,
-          //子组件宽高长度比例
-          childAspectRatio: itemW / itemH),
-      itemBuilder: (BuildContext context, int index) {
-        final RecordListData recordData = itemData.recordList![index];
-        return videoItem(recordData);
-      },
-    );
+  List<Widget> mainListView(int index, CloudStorageData itemData) {
+    return itemData.recordList!.map((e) => videoItem(e)).toList();
   }
 
-  Widget lockMainListView(int index, CloudStorageData itemData) {
-    return GridView.builder(
-      padding: EdgeInsets.only(left: 15.w, right: 15.w),
-      itemCount: itemData.recordList!.length,
-      shrinkWrap: true,
-      physics: const NeverScrollableScrollPhysics(),
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-        //横轴元素个数
-          crossAxisCount: 3,
-          //纵轴间距
-          mainAxisSpacing: 15.w,
-          // 横轴间距
-          crossAxisSpacing: 15.w,
-          //子组件宽高长度比例
-          childAspectRatio: itemW / itemH),
-      itemBuilder: (BuildContext context, int index) {
-        final RecordListData recordData = itemData.recordList![index];
-        return videoItem(recordData);
-      },
-    );
+  List<Widget> lockMainListView(int index, CloudStorageData itemData) {
+    return itemData.recordList!.map((e) => videoItem(e)).toList();
   }
 
   Widget videoItem(RecordListData recordData) {
@@ -469,22 +435,86 @@ class _VideoLogPageState extends State<VideoLogPage> {
           Navigator.push(
             context,
             MaterialPageRoute(
-              builder: (context) =>
-                  FullScreenImagePage(
-                    imageUrl: recordData.imagesUrl!,
-                  ),
+              builder: (context) => FullScreenImagePage(
+                imageUrl: recordData.imagesUrl!,
+              ),
             ),
           );
         }
       },
-      child: SizedBox(
-        width: itemW,
-        height: itemH,
-        child: Column(
+      child: Container(
+        padding: EdgeInsets.symmetric(horizontal: 20.w),
+        margin: EdgeInsets.only(
+          bottom: 20.h,
+          left: 18.w,
+          right: 18.w,
+        ),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(10.w),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.grey.withOpacity(0.2),
+              spreadRadius: 1,
+              blurRadius: 5,
+              offset: const Offset(0, 3), // changes position of shadow
+            ),
+          ],
+        ),
+        width: 1.sw,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: <Widget>[
+            Row(
+              children: [
+                Container(
+                  padding: EdgeInsets.all(10.w),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(58.w),
+                    color: AppColors.mainColor,
+                  ),
+                  child: Icon(
+                    _buildIconByType(recordData),
+                    size: 48.sp,
+                    color: Colors.white,
+                  ),
+                ),
+                SizedBox(
+                  width: 14.w,
+                ),
+                Container(
+                  height: itemW,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Text(
+                        _buildTitleByType(recordData),
+                        style: TextStyle(
+                          fontSize: 24.sp,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      SizedBox(
+                        height: 8.h,
+                      ),
+                      Text(
+                        DateTool()
+                            .dateToHNString(recordData.operateDate.toString()),
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          fontSize: 20.sp,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
             Container(
-              width: itemW,
-              height: itemW,
+              width: 118.w,
+              height: 118.w,
               margin: const EdgeInsets.all(0),
               color: Colors.white,
               child: ClipRRect(
@@ -492,12 +522,6 @@ class _VideoLogPageState extends State<VideoLogPage> {
                 child: _buildImageOrVideoItem(recordData),
               ),
             ),
-            SizedBox(height: 5.h),
-            Text(
-              DateTool().dateToYMDHNString(recordData.operateDate.toString()),
-              textAlign: TextAlign.center,
-              style: TextStyle(fontSize: 18.sp),
-            )
           ],
         ),
       ),
@@ -512,6 +536,50 @@ class _VideoLogPageState extends State<VideoLogPage> {
     }
   }
 
+  String _buildTitleByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 130:
+        return '防拆报警'.tr;
+      case 160:
+        return '人脸'.tr + '开锁'.tr;
+      case 220:
+        return '逗留警告'.tr;
+      default:
+        return '';
+    }
+  }
+
+  IconData _buildIconByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 130:
+        return Icons.fmd_bad_outlined;
+      case 160:
+        return Icons.tag_faces_outlined;
+      case 220:
+        return Icons.wifi_tethering_error_rounded_outlined;
+      default:
+        return Icons.priority_high_rounded;
+    }
+  }
+
+  Color _buildTextColorByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 120:
+      case 150:
+      case 130:
+      case 190:
+      case 200:
+      case 210:
+      case 220:
+        return Colors.red;
+      default:
+        return Colors.black;
+    }
+  }
+
   _buildVideoItem(RecordListData recordData) {
     return VideoThumbnailImage(videoUrl: recordData.videoUrl!);
   }
diff --git a/lib/main/lockDetail/videoLog/videoLogDetail/videoLogDetail_page.dart b/lib/main/lockDetail/videoLog/videoLogDetail/videoLogDetail_page.dart
index ca1259cb..3631d861 100755
--- a/lib/main/lockDetail/videoLog/videoLogDetail/videoLogDetail_page.dart
+++ b/lib/main/lockDetail/videoLog/videoLogDetail/videoLogDetail_page.dart
@@ -1,9 +1,13 @@
+import 'dart:io';
+
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
+import 'package:star_lock/appRouters.dart';
+import 'package:star_lock/app_settings/app_settings.dart';
 import 'package:star_lock/main/lockDetail/videoLog/videoLog/videoLog_entity.dart';
 import 'package:star_lock/main/lockDetail/videoLog/videoLogDetail/controlsOverlay_page.dart';
 import 'package:star_lock/main/lockDetail/videoLog/videoLogDetail/videoLogDetail_state.dart';
@@ -30,11 +34,11 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
   @override
   void initState() {
     super.initState();
+    AppLog.log(
+        'state.recordData.value.videoUrl!' + state.recordData.value.videoUrl!);
 
-    state.videoController = VideoPlayerController.networkUrl(
-      Uri.parse(state.recordData.value.videoUrl!),
-      videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
-    );
+    state.videoController =
+        createVideoController(state.recordData.value.videoUrl!);
 
     state.videoController.addListener(() {
       setState(() {});
@@ -47,10 +51,8 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
     if (state.videoController != null) {
       await state.videoController.dispose(); // 释放旧资源
     }
-    state.videoController = VideoPlayerController.networkUrl(
-      Uri.parse(videoUrl),
-      videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
-    );
+    state.videoController =
+        createVideoController(state.recordData.value.videoUrl!);
 
     // 初始化完成后通知框架重新构建界面
     await state.videoController.initialize();
@@ -60,6 +62,22 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
     setState(() {});
   }
 
+  VideoPlayerController createVideoController(String url) {
+    if (url.startsWith('http://') || url.startsWith('https://')) {
+      return VideoPlayerController.networkUrl(
+        Uri.parse(url),
+        videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
+      );
+    } else {
+      final file = File(
+          url.startsWith('file://') ? url.replaceFirst('file://', '') : url);
+      return VideoPlayerController.file(
+        file,
+        videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
+      );
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -104,6 +122,7 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
                     ],
                   ),
                 ),
+                // _buildTitleRow(),
                 _buildOther(),
               ],
             )
@@ -135,14 +154,79 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
           );
         }
       },
-      child: SizedBox(
-        width: itemW,
-        height: itemH,
-        child: Column(
+      child: Container(
+        padding: EdgeInsets.symmetric(horizontal: 20.w),
+        margin: EdgeInsets.only(
+          bottom: 20.h,
+          left: 18.w,
+          right: 18.w,
+        ),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(10.w),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.grey.withOpacity(0.2),
+              spreadRadius: 1,
+              blurRadius: 5,
+              offset: const Offset(0, 3), // changes position of shadow
+            ),
+          ],
+        ),
+        width: 1.sw,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: <Widget>[
+            Row(
+              children: [
+                Container(
+                  padding: EdgeInsets.all(10.w),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(58.w),
+                    color: AppColors.mainColor,
+                  ),
+                  child: Icon(
+                    _buildIconByType(recordData),
+                    size: 48.sp,
+                    color: Colors.white,
+                  ),
+                ),
+                SizedBox(
+                  width: 14.w,
+                ),
+                Container(
+                  height: itemW,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Text(
+                        _buildTitleByType(recordData),
+                        style: TextStyle(
+                          fontSize: 24.sp,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      SizedBox(
+                        height: 8.h,
+                      ),
+                      Text(
+                        DateTool()
+                            .dateToHNString(recordData.operateDate.toString()),
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          fontSize: 20.sp,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
             Container(
-              width: itemW,
-              height: itemW,
+              width: 118.w,
+              height: 118.w,
               margin: const EdgeInsets.all(0),
               color: Colors.white,
               child: ClipRRect(
@@ -213,11 +297,13 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
                 margin: EdgeInsets.only(left: 20.w, top: 15.w, bottom: 15.w),
                 child: Row(
                   children: <Widget>[
-                    Text(item.date ?? '', style: TextStyle(fontSize: 20.sp)),
+                    Text(item.date ?? '',
+                        style: TextStyle(
+                            fontSize: 24.sp, fontWeight: FontWeight.w600)),
                   ],
                 ),
               ),
-              mainListView(index, item),
+              ...mainListView(index, item),
             ],
           );
         },
@@ -225,22 +311,60 @@ class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
     );
   }
 
-  Widget mainListView(int index, CloudStorageData itemData) {
-    return GridView.builder(
-      itemCount: itemData.recordList!.length,
-      shrinkWrap: true,
-      physics: const NeverScrollableScrollPhysics(),
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-        //横轴元素个数
-        crossAxisCount: 3,
-      ),
-      itemBuilder: (BuildContext context, int index) {
-        return _buildItem(itemData.recordList![index]);
-      },
-    );
+  // 云存列表
+  List<Widget> mainListView(int index, CloudStorageData itemData) {
+    return itemData.recordList!.map((e) => videoItem(e)).toList();
+  }
+
+  String _buildTitleByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 130:
+        return '防拆报警'.tr;
+      case 160:
+        return '人脸'.tr + '开锁'.tr;
+      case 220:
+        return '逗留警告'.tr;
+      default:
+        return '';
+    }
+  }
+
+  IconData _buildIconByType(RecordListData item) {
+    final recordType = item.recordType;
+    switch (recordType) {
+      case 130:
+        return Icons.fmd_bad_outlined;
+      case 160:
+        return Icons.tag_faces_outlined;
+      case 220:
+        return Icons.wifi_tethering_error_rounded_outlined;
+      default:
+        return Icons.priority_high_rounded;
+    }
   }
 
   _buildItem(itemData) {
     return videoItem(itemData);
   }
+
+  _buildTitleRow() {
+    return Container(
+      decoration: BoxDecoration(
+        color: Colors.white,
+      ),
+      padding: EdgeInsets.only(left: 15.w, top: 24.w, bottom: 24.w),
+      child: Row(
+        children: [
+          Text(
+            _buildTitleByType(state.recordData.value) ?? '',
+            style: TextStyle(
+              fontSize: 24.sp,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
 }
diff --git a/lib/main/lockDetail/videoLog/widget/video_thumbnail_image.dart b/lib/main/lockDetail/videoLog/widget/video_thumbnail_image.dart
index 04ffebb8..4ee3519d 100644
--- a/lib/main/lockDetail/videoLog/widget/video_thumbnail_image.dart
+++ b/lib/main/lockDetail/videoLog/widget/video_thumbnail_image.dart
@@ -2,6 +2,7 @@ import 'dart:io';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:video_thumbnail/video_thumbnail.dart';
 
@@ -77,7 +78,7 @@ class _VideoThumbnailState extends State<VideoThumbnailImage> {
               ),
               Icon(
                 Icons.play_arrow_rounded,
-                size: 80,
+                size: 88.sp,
                 color: Colors.white.withOpacity(0.8),
               ),
             ],