diff --git a/src/assets/data/resource.js b/src/assets/data/resource.js
index 9283673..ceb3466 100644
--- a/src/assets/data/resource.js
+++ b/src/assets/data/resource.js
@@ -1258,147 +1258,6 @@ export default {
     },
   ],
   my: [
-    {
-      "id": "ac78850c-1497-43bb-bdf8-219f3262b690",
-      "cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/f520c88ca2184b8f9ecc5c0b7426e80e~c5_300x400.jpeg?from=4257465056_large",
-      "dynamic_cover": "https://p5-ipv6.douyinpic.com/obj/tos-cn-i-0004/f520c88ca2184b8f9ecc5c0b7426e80e?from=4257465056_large",
-      "origin_cover": "https://p29.douyinpic.com/tos-cn-p-0015/92d4a1ce384d4abb97219ccbfe6bd564_1629595844~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
-      "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c4gqhfjc77u3f5hm465g&line=1&file_id=65b507a426ce411280a48985aa590e1e&sign=733accba61339e2f7bfd81980b1ef161&is_play_url=1&source=PackSourceEnum_PUBLISH",
-      "video_data_size": 11165836,
-      "duration": 194880,
-      "desc": "小伙发现一口古老棺材，躺过之后会开天眼，能看到神的存在 #抖音电影 #我的观影报告",
-      "allow_download": 0,
-      "allow_duet": 0,
-      "allow_react": 0,
-      "allow_music": 1,
-      "allow_douplus": 1,
-      "allow_share": 1,
-      "digg_count": 120,
-      "comment_count": 0,
-      "download_count": 0,
-      "play_count": 0,
-      "share_count": 0,
-      "forward_count": 0,
-      "collect_count": 2,
-      "sort": 0,
-      "is_top": 0,
-      "city": "350100",
-      "musicId": "3e4df84d-dbea-48b3-8cdd-136bb49094ad",
-      "create_time": "1630391758",
-      "creator_id": "54884802577",
-      "status": 1,
-      "topics": [
-        {
-          "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
-          "name": "我的观影报告",
-          "creator_id": "54884802577",
-          "create_time": "1630391758",
-          "status": 1
-        },
-        {
-          "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
-          "name": "抖音电影",
-          "creator_id": "54884802577",
-          "create_time": "1630391758",
-          "status": 1
-        }
-      ],
-      "music": null
-    },
-    {
-      "id": "c4ff3c09-e426-4c3d-b6e7-208fe310bb19",
-      "cover": "https://p29.douyinpic.com/img/tos-cn-i-0004/8e9f70a81dab46d8b9803c8730cf5a6e~c5_300x400.jpeg?from=4257465056_large",
-      "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/8e9f70a81dab46d8b9803c8730cf5a6e?from=4257465056_large",
-      "origin_cover": "https://p6.douyinpic.com/tos-cn-p-0015/ed85415df6bd47f8bb7a3c608aad53e0_1629595844~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
-      "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c4gqhfjc77ua1jq3rtfg&line=1&file_id=d49b873b3576436c8dbed7ecc899cc7f&sign=de5d58784bb7fd5902a183abf8d1a8b1&is_play_url=1&source=PackSourceEnum_PUBLISH",
-      "video_data_size": 10040642,
-      "duration": 180400,
-      "desc": "小伙发现一口古老棺材，躺过之后会开天眼，能看到神的存在 #抖音电影 #我的观影报告",
-      "allow_download": 0,
-      "allow_duet": 0,
-      "allow_react": 0,
-      "allow_music": 1,
-      "allow_douplus": 1,
-      "allow_share": 1,
-      "digg_count": 248,
-      "comment_count": 6,
-      "download_count": 0,
-      "play_count": 0,
-      "share_count": 4,
-      "forward_count": 0,
-      "collect_count": 2,
-      "sort": 1,
-      "is_top": 0,
-      "city": "350100",
-      "musicId": "222ede4d-0622-4b13-9049-b7b388a8b44d",
-      "create_time": "1630391758",
-      "creator_id": "54884802577",
-      "status": 1,
-      "topics": [
-        {
-          "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
-          "name": "抖音电影",
-          "creator_id": "54884802577",
-          "create_time": "1630391758",
-          "status": 1
-        },
-        {
-          "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
-          "name": "我的观影报告",
-          "creator_id": "54884802577",
-          "create_time": "1630391758",
-          "status": 1
-        }
-      ],
-      "music": null
-    },
-    {
-      "id": "7b8cd096-a317-4a4f-80be-1490f36906c6",
-      "cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/8ecfe75aa5fd4ecf8314cb6c161c9097~c5_300x400.jpeg?from=4257465056_large",
-      "dynamic_cover": "https://p9.douyinpic.com/obj/tos-cn-i-0004/8ecfe75aa5fd4ecf8314cb6c161c9097?from=4257465056_large",
-      "origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/dfc079547239425dbca5281f869d5cdb_1629595842~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
-      "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c4gqhfjc77ua981pv5e0&line=1&file_id=121c9edf9b0f46c386381f35bc71c7dd&sign=451e71c172ae3d039774593bfe69af07&is_play_url=1&source=PackSourceEnum_PUBLISH",
-      "video_data_size": 13824272,
-      "duration": 233280,
-      "desc": "小伙发现一口古老棺材，躺过之后会开天眼，能看到神的存在 #抖音电影 #我的观影报告 ",
-      "allow_download": 0,
-      "allow_duet": 0,
-      "allow_react": 0,
-      "allow_music": 1,
-      "allow_douplus": 1,
-      "allow_share": 1,
-      "digg_count": 103,
-      "comment_count": 3,
-      "download_count": 0,
-      "play_count": 0,
-      "share_count": 0,
-      "forward_count": 0,
-      "collect_count": 1,
-      "sort": 2,
-      "is_top": 0,
-      "city": "350100",
-      "musicId": "8d2c7382-5d6f-4a9b-a376-c93ed100e8d0",
-      "create_time": "1630391758",
-      "creator_id": "54884802577",
-      "status": 1,
-      "topics": [
-        {
-          "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
-          "name": "我的观影报告",
-          "creator_id": "54884802577",
-          "create_time": "1630391758",
-          "status": 1
-        },
-        {
-          "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
-          "name": "抖音电影",
-          "creator_id": "54884802577",
-          "create_time": "1630391758",
-          "status": 1
-        }
-      ],
-      "music": null
-    },
     {
       "id": "27149aa9-e597-4282-b234-effdb8d7db93",
       "cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/989afddc17cd47c0af09d2d9e228c153~c5_300x400.jpeg?from=4257465056_large",
@@ -14301,78 +14160,86 @@ export default {
   ],
   private1: [
     {
-      "id": "ac78850c-1497-43bb-bdf8-219f3262b690",
-      "cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/f520c88ca2184b8f9ecc5c0b7426e80e~c5_300x400.jpeg?from=4257465056_large",
-      "dynamic_cover": "https://p5-ipv6.douyinpic.com/obj/tos-cn-i-0004/f520c88ca2184b8f9ecc5c0b7426e80e?from=4257465056_large",
-      "origin_cover": "https://p29.douyinpic.com/tos-cn-p-0015/92d4a1ce384d4abb97219ccbfe6bd564_1629595844~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
-      "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c4gqhfjc77u3f5hm465g&line=1&file_id=65b507a426ce411280a48985aa590e1e&sign=733accba61339e2f7bfd81980b1ef161&is_play_url=1&source=PackSourceEnum_PUBLISH",
-      "video_data_size": 11165836,
-      "duration": 194880,
-      "desc": "小伙发现一口古老棺材，躺过之后会开天眼，能看到神的存在 #抖音电影 #我的观影报告",
+      "id": "c99d325c-741e-4722-9f39-82bb423a5989",
+      "cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc~c5_300x400.jpeg?from=4257465056_large",
+      "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc?from=4257465056_large",
+      "origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/d9e9b6dc783f4c13a8e5cc08df788a02_1627117997~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
+      "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77ucs14tfra0&line=1&file_id=8b05a5dfb9644865a605ba13cc25f0fe&sign=07cddb6e3292bb2f4478d1f9e6187b33&is_play_url=1&source=PackSourceEnum_PUBLISH",
+      "video_data_size": 10754240,
+      "duration": 151720,
+      "desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影",
       "allow_download": 0,
       "allow_duet": 0,
       "allow_react": 0,
       "allow_music": 1,
       "allow_douplus": 1,
       "allow_share": 1,
-      "digg_count": 120,
-      "comment_count": 0,
+      "digg_count": 156,
+      "comment_count": 7,
       "download_count": 0,
       "play_count": 0,
       "share_count": 0,
       "forward_count": 0,
-      "collect_count": 2,
-      "sort": 0,
+      "collect_count": 0,
+      "sort": 9,
       "is_top": 0,
       "city": "350100",
-      "musicId": "3e4df84d-dbea-48b3-8cdd-136bb49094ad",
+      "musicId": "0da2663b-6bff-425f-a93e-9106b4889c99",
       "create_time": "1630391758",
       "creator_id": "54884802577",
       "status": 1,
       "topics": [
         {
-          "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
-          "name": "我的观影报告",
+          "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
+          "name": "抖音电影",
           "creator_id": "54884802577",
           "create_time": "1630391758",
           "status": 1
         },
         {
-          "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
-          "name": "抖音电影",
+          "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
+          "name": "我的观影报告",
           "creator_id": "54884802577",
           "create_time": "1630391758",
           "status": 1
         }
       ],
-      "music": null
+      "music": {
+        "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
+        "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
+        "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
+        "title": "@喵嗷污说电影创作的原声",
+        "creator_id": "54884802577",
+        "create_time": "1630391758",
+        "status": 1
+      }
     },
     {
-      "id": "c4ff3c09-e426-4c3d-b6e7-208fe310bb19",
-      "cover": "https://p29.douyinpic.com/img/tos-cn-i-0004/8e9f70a81dab46d8b9803c8730cf5a6e~c5_300x400.jpeg?from=4257465056_large",
-      "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/8e9f70a81dab46d8b9803c8730cf5a6e?from=4257465056_large",
-      "origin_cover": "https://p6.douyinpic.com/tos-cn-p-0015/ed85415df6bd47f8bb7a3c608aad53e0_1629595844~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
-      "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c4gqhfjc77ua1jq3rtfg&line=1&file_id=d49b873b3576436c8dbed7ecc899cc7f&sign=de5d58784bb7fd5902a183abf8d1a8b1&is_play_url=1&source=PackSourceEnum_PUBLISH",
-      "video_data_size": 10040642,
-      "duration": 180400,
-      "desc": "小伙发现一口古老棺材，躺过之后会开天眼，能看到神的存在 #抖音电影 #我的观影报告",
+      "id": "cf26d20e-577f-4e08-ae0e-77eac2f1adbb",
+      "cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe~c5_300x400.jpeg?from=4257465056_large",
+      "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe?from=4257465056_large",
+      "origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/15826b4e6ad54f0bbdb3bd8af024604c_1627117999~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
+      "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77u4a4ivddk0&line=1&file_id=f8c9a32ba7bc4976b66db0437dd65d1b&sign=c96c9adfacde30c007555eee23f0f214&is_play_url=1&source=PackSourceEnum_PUBLISH",
+      "video_data_size": 16850048,
+      "duration": 216320,
+      "desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
       "allow_download": 0,
       "allow_duet": 0,
       "allow_react": 0,
       "allow_music": 1,
       "allow_douplus": 1,
       "allow_share": 1,
-      "digg_count": 248,
-      "comment_count": 6,
+      "digg_count": 72,
+      "comment_count": 4,
       "download_count": 0,
       "play_count": 0,
-      "share_count": 4,
+      "share_count": 1,
       "forward_count": 0,
-      "collect_count": 2,
-      "sort": 1,
+      "collect_count": 0,
+      "sort": 10,
       "is_top": 0,
       "city": "350100",
-      "musicId": "222ede4d-0622-4b13-9049-b7b388a8b44d",
+      "musicId": "28944e2e-3bcb-4173-92d2-eb9a263aa826",
       "create_time": "1630391758",
       "creator_id": "54884802577",
       "status": 1,
@@ -14392,54 +14259,70 @@ export default {
           "status": 1
         }
       ],
-      "music": null
+      "music": {
+        "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
+        "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
+        "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
+        "title": "@喵嗷污说电影创作的原声",
+        "creator_id": "54884802577",
+        "create_time": "1630391758",
+        "status": 1
+      }
     },
     {
-      "id": "7b8cd096-a317-4a4f-80be-1490f36906c6",
-      "cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/8ecfe75aa5fd4ecf8314cb6c161c9097~c5_300x400.jpeg?from=4257465056_large",
-      "dynamic_cover": "https://p9.douyinpic.com/obj/tos-cn-i-0004/8ecfe75aa5fd4ecf8314cb6c161c9097?from=4257465056_large",
-      "origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/dfc079547239425dbca5281f869d5cdb_1629595842~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
-      "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c4gqhfjc77ua981pv5e0&line=1&file_id=121c9edf9b0f46c386381f35bc71c7dd&sign=451e71c172ae3d039774593bfe69af07&is_play_url=1&source=PackSourceEnum_PUBLISH",
-      "video_data_size": 13824272,
-      "duration": 233280,
-      "desc": "小伙发现一口古老棺材，躺过之后会开天眼，能看到神的存在 #抖音电影 #我的观影报告 ",
+      "id": "f3fd9b59-6ff5-4301-ac18-a4b8cbf35982",
+      "cover": "https://p9.douyinpic.com/img/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0~c5_300x400.jpeg?from=4257465056_large",
+      "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0?from=4257465056_large",
+      "origin_cover": "https://p26.douyinpic.com/tos-cn-p-0015/0d7948340d3543bda3357a9496e0cb86_1627117998~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
+      "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c3ttjarc77ucsm96q040&line=1&file_id=ccc7eccfa0d746febdcf7436841281a8&sign=a4fc8eb995aad2acdcc622371ecc9c7c&is_play_url=1&source=PackSourceEnum_PUBLISH",
+      "video_data_size": 23547094,
+      "duration": 230880,
+      "desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
       "allow_download": 0,
       "allow_duet": 0,
       "allow_react": 0,
       "allow_music": 1,
       "allow_douplus": 1,
       "allow_share": 1,
-      "digg_count": 103,
+      "digg_count": 93,
       "comment_count": 3,
       "download_count": 0,
       "play_count": 0,
       "share_count": 0,
       "forward_count": 0,
       "collect_count": 1,
-      "sort": 2,
+      "sort": 11,
       "is_top": 0,
       "city": "350100",
-      "musicId": "8d2c7382-5d6f-4a9b-a376-c93ed100e8d0",
+      "musicId": "6fe6bbfc-d393-45f2-a2c8-432422c5904a",
       "create_time": "1630391758",
       "creator_id": "54884802577",
       "status": 1,
       "topics": [
         {
-          "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
-          "name": "我的观影报告",
+          "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
+          "name": "抖音电影",
           "creator_id": "54884802577",
           "create_time": "1630391758",
           "status": 1
         },
         {
-          "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
-          "name": "抖音电影",
+          "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
+          "name": "我的观影报告",
           "creator_id": "54884802577",
           "create_time": "1630391758",
           "status": 1
         }
       ],
-      "music": null
+      "music": {
+        "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
+        "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
+        "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
+        "title": "@喵嗷污说电影创作的原声",
+        "creator_id": "54884802577",
+        "create_time": "1630391758",
+        "status": 1
+      }
     },
   ],
   users:{
diff --git a/src/components/BaseVideo.vue b/src/components/BaseVideo.vue
new file mode 100644
index 0000000..ae902a4
--- /dev/null
+++ b/src/components/BaseVideo.vue
@@ -0,0 +1,700 @@
+<template>
+  <div class="video-wrapper" ref="videoWrapper" :class="name">
+    <Loading v-if="loading" style="position: absolute"/>
+    <video :src="video.video + '?v=123'"
+           :poster="video.video + videoPoster"
+           ref="video"
+           muted
+           preload
+           :autoplay="isPlay" loop>
+      <p> 您的浏览器不支持 video 标签。</p>
+    </video>
+    <img src="../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
+    <div class="float" @click="togglePlayVideo">
+      <!--       @click.stop="togglePlayVideo" -->
+      <div :style="{opacity:isMove ? 0:1}" class="normal">
+        <div class="toolbar mb1r">
+          <div class="avatar-ctn mb4r">
+            <img class="avatar" :src="lVideo.author.avatar" alt=""
+                 @click.stop="$emit('goUserInfo')">
+            <transition name="fade">
+              <div v-if="!isAttention" @click.stop="attention" class="options" ref="attention-option">
+                <img class="no" src="../assets/img/icon/add-light.png" alt="">
+                <img class="yes" src="../assets/img/icon/ok-red.png" alt="">
+              </div>
+            </transition>
+
+          </div>
+          <div class="love mb2r" @click.stop="loved($event)">
+            <div>
+              <img src="../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
+              <img src="../assets/img/icon/loved.svg" class="love-image" v-if="lVideo.isLoved">
+            </div>
+            <span>{{ $likeNum(lVideo.digg_count) }}</span>
+          </div>
+          <div class="message mb2r" @click.stop="$emit('showComments')">
+            <!--            <div class="message mb15p" @click.stop="showComment">-->
+            <img src="../assets/img/icon/message.svg" alt="" class="message-image">
+            <span>{{ $likeNum(lVideo.comment_count) }}</span>
+          </div>
+          <div v-if="!isMy" class="share mb4r" @click.stop="$emit('showShare')">
+            <img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
+            <span>{{ $likeNum(lVideo.share_count) }}</span>
+          </div>
+          <div v-else class="share mb4r" @click.stop="$emit('showShare')">
+            <img src="../assets/img/icon/share-white-full.png" alt="" class="share-image">
+          </div>
+          <BaseMusic
+              :cover="lVideo.music.cover"
+              :key="name"
+              :name="name"
+              :isPlay="isPlay"
+              @click.stop="$emit('goMusic')"
+          />
+        </div>
+        <div class="content ml1r mb1r" v-if="!isMy">
+          <div class="location-wrapper" v-if=" lVideo.city || lVideo.address">
+            <div class="location">
+              <img src="../assets/img/icon/location.webp" alt="">
+              <span>{{ lVideo.city }}</span>
+              <template v-if="lVideo.address && lVideo.address">
+                <div class="gang"></div>
+              </template>
+              <span>{{ lVideo.address }}</span>
+            </div>
+          </div>
+          <div class="name mb1r fb" @click.stop="$emit('goUserInfo')">@{{ lVideo.author.nickname }}</div>
+          <div class="description mb1r">
+            {{ lVideo.desc }}
+          </div>
+          <div class="music" @click.stop="$nav('/music')">
+            <img src="../assets/img/icon/music.svg" alt="" class="music-image">
+            <BaseMarquee :key="name"
+                         :name="name"
+                         :isPlay="isPlay"
+                         :text="lVideo.music.title"
+                         @click.stop="$emit('goMusic')"/>
+          </div>
+        </div>
+        <div v-else class="comment-status">
+          <div class="comment">
+            <div class="type-comment">
+              <img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+              <div class="right">
+                <p>
+                  <span class="name">zzzzz</span>
+                  <span class="time">2020-01-20</span>
+                </p>
+                <p class="text">北京</p>
+              </div>
+            </div>
+            <transition-group name="comment-status" tag="div" class="loveds">
+              <div class="type-loved" :key="i" v-for="i in test">
+                <img src="../assets/img/icon/head-image.jpeg" alt="" class="avatar">
+                <img src="../assets/img/icon/love.svg" alt="" class="loved">
+              </div>
+            </transition-group>
+          </div>
+        </div>
+      </div>
+      <div class="progress"
+           v-if="duration > 60"
+           :class="progressClass"
+           @touchmove="move"
+           @touchend="end"
+      >
+        <div class="time" v-if="isMove">
+          <span class="currentTime">{{ $duration(currentTime) }}</span>
+          <span class="duration"> / {{ $duration(duration) }}</span>
+        </div>
+        <div class="line" :style="durationStyle" ref="line"></div>
+        <div class="point" :style="durationStyle" ref="point"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import globalMethods from '../utils/global-methods'
+import BaseMarquee from "./BaseMarquee";
+import Dom from "../utils/dom";
+import BaseMusic from "./BaseMusic";
+import {mapState} from "vuex";
+import Loading from "./Loading";
+
+export default {
+  name: "Video",
+  components: {
+    BaseMarquee,
+    BaseMusic,
+    Loading
+  },
+  props: {
+    video: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    index: {
+      type: Number,
+      default: () => {
+        return -1
+      }
+    },
+    //用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
+    isPlay: {
+      type: Boolean,
+      default: () => {
+        return true
+      }
+    },
+    isMy: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
+  },
+  computed: {
+    durationStyle() {
+      return {left: this.pageX + 'px'}
+    },
+    progressClass() {
+      if (this.isMove) {
+        return 'stop'
+      } else {
+        return this.isPlaying ? '' : 'stop'
+      }
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      name: `v-${this.index}-video`,
+      globalMethods: globalMethods,
+      duration: 0,
+      step: 0,
+      currentTime: -1,
+      pageX: 0,
+      height: 0,
+      width: 0,
+      isPlaying: this.isPlay,
+      isAttention: false,
+      line: null,
+      point: null,
+      isMove: false,
+      test: [1, 2],
+      lVideo: this.video,
+      videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
+      timer: null,
+      lastClickTime: 0
+    }
+  },
+  mounted() {
+    this.height = document.body.clientHeight
+    this.width = document.body.clientWidth
+    this.line = this.$refs.line
+    this.point = this.$refs.point
+    let video = this.$refs.video
+    video.currentTime = 0
+    let fun = e => {
+      this.currentTime = Math.ceil(e.target.currentTime)
+      this.pageX = this.currentTime * this.step
+    }
+    video.addEventListener('loadedmetadata', e => {
+      this.duration = video.duration
+      if (this.duration > 60) {
+        // if (this.duration > 6) {
+        this.step = this.width / Math.floor(this.duration)
+        video.addEventListener('timeupdate', fun)
+      }
+    })
+
+    let eventTester = (e, t) => {
+      video.addEventListener(e, () => {
+        if (e === 'playing') this.loading = false
+        if (e === 'progress') this.loading = true
+        if (e === 'waiting') this.loading = true
+        //
+      }, false);
+    }
+
+
+    // eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
+    // eventTester("abort", '客户端主动终止下载（不是因为错误引起）'); //客户端主动终止下载（不是因为错误引起）
+    // eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据
+    eventTester("progress", '客户端正在请求数据'); //客户端正在请求数据
+    // // eventTester("suspend", '延迟下载'); //延迟下载
+    // eventTester("abort", '客户端主动终止下载（不是因为错误引起），'); //客户端主动终止下载（不是因为错误引起），
+    // eventTester("error", '请求数据时遇到错误'); //请求数据时遇到错误
+    // eventTester("stalled", '网速失速'); //网速失速
+    // eventTester("play", 'play()和autoplay开始播放时触发'); //play()和autoplay开始播放时触发
+    // eventTester("pause", 'pause()触发'); //pause()触发
+    // eventTester("loadedmetadata", '成功获取资源长度'); //成功获取资源长度
+    // eventTester("loadeddata"); //
+    eventTester("waiting", '等待数据，并非错误'); //等待数据，并非错误
+    eventTester("playing", '开始回放'); //开始回放
+    // eventTester("canplay", '/可以播放，但中途可能因为加载而暂停'); //可以播放，但中途可能因为加载而暂停
+    // eventTester("canplaythrough", '可以播放，歌曲全部加载完毕'); //可以播放，歌曲全部加载完毕
+    // eventTester("seeking", '寻找中'); //寻找中
+    // eventTester("seeked", '寻找完毕'); //寻找完毕
+    // // eventTester("timeupdate",'播放时间改变'); //播放时间改变
+    // eventTester("ended", '播放结束'); //播放结束
+    // eventTester("ratechange", '播放速率改变'); //播放速率改变
+    // eventTester("durationchange", '资源长度改变'); //资源长度改变
+    // eventTester("volumechange", '音量改变'); //音量改变
+
+    this.$refs.videoWrapper.addEventListener('play', this.play)
+    this.$refs.videoWrapper.addEventListener('stop', this.stop)
+  },
+  methods: {
+    //切换视频状态
+    togglePlayVideo(e) {
+      let checkTime = 200
+      let nowTime = new Date().getTime();
+      if (nowTime - this.lastClickTime < checkTime) {
+        clearTimeout(this.timer);
+      } else {
+        this.timer = setTimeout(() => {
+          if (this.isPlaying) {
+            this.pause()
+          } else {
+            this.play()
+          }
+        }, checkTime);
+      }
+      this.lastClickTime = nowTime
+    },
+    play() {
+      new Dom(`.${this.name}-marquee`).trigger('start')
+      new Dom(`.${this.name}-music`).trigger('start')
+      // console.log('trigger-play')
+      this.isPlaying = true
+      if (this.currentTime !== -1) {
+        this.$refs.video.currentTime = this.currentTime
+      }
+      this.$refs.video.volume = 1
+      this.$refs.video.play()
+    },
+    stop() {
+      new Dom(`.${this.name}-marquee`).trigger('stop')
+      new Dom(`.${this.name}-music`).trigger('stop')
+      // console.log('trigger-stop')
+      this.$refs.video.pause()
+      this.isPlaying = false
+      this.$refs.video.currentTime = 0
+    },
+    pause() {
+      new Dom(`.${this.name}-marquee`).trigger('pause')
+      new Dom(`.${this.name}-music`).trigger('pause')
+      // console.log('trigger-pause')
+      this.$refs.video.pause()
+      this.isPlaying = false
+    },
+    $likeNum(v) {
+      return globalMethods.$likeNum(v)
+    },
+    $duration(v) {
+      return globalMethods.$duration(v)
+    },
+    attention() {
+      let option = this.$refs['attention-option']
+      option.classList.add('attention')
+      setTimeout(() => {
+        this.isAttention = true
+      }, 1000)
+    },
+
+    loved(e, index) {
+      this.lVideo.isLoved = !this.lVideo.isLoved
+      this.$emit('update:video', this.lVideo)
+    },
+    start(e) {
+      this.pageX = e.touches[0].pageX
+    },
+    move(e) {
+      if (this.isPlaying) return
+      this.isMove = true
+      this.pause()
+      this.pageX = e.touches[0].pageX
+      // console.log(this.step)
+      this.currentTime = Math.ceil(Math.ceil(e.touches[0].pageX) / this.step)
+      globalMethods.$stopPropagation(e)
+    },
+    end(e) {
+      if (this.isPlaying) return
+      console.log('end', e)
+      setTimeout(() => {
+        this.isMove = false
+      }, 1000)
+      this.currentTime = Math.ceil(Math.ceil(e.changedTouches[0].pageX) / this.step)
+      this.play()
+      globalMethods.$stopPropagation(e)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../assets/less/color";
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: transform 0.5s linear;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  transform: scale(0);
+}
+
+
+.video-wrapper {
+  position: relative;
+  background: black;
+  font-size: 1.4rem;
+  width: 100%;
+  height: 100%;
+
+  video {
+    width: 100%;
+    height: 100%;
+    /*position: absolute;*/
+  }
+
+  .pause {
+    width: 10rem;
+    height: 10rem;
+    opacity: 0.5;
+    position: absolute;
+    margin: auto;
+    left: 0;
+    top: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    animation: pause-animation 1.1s linear;
+
+    @scale: scale(1.2);
+
+    @keyframes pause-animation {
+      0% {
+        opacity: 0;
+        transform: scale(2);
+      }
+      10% {
+        opacity: 0.5;
+        transform: @scale;
+      }
+      100% {
+        transform: @scale;
+        opacity: 0.5;
+      }
+    }
+  }
+
+  .float {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+
+    .normal {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      transition: all .3s;
+
+      .toolbar {
+        //width: 40px;
+        position: absolute;
+        bottom: 0;
+        right: 5px;
+        color: #fff;
+
+        .avatar-ctn {
+          position: relative;
+
+          .avatar {
+            width: 55px;
+            height: 55px;
+            border-radius: 50%;
+          }
+
+          .options {
+            position: absolute;
+            border-radius: 50%;
+            margin: auto;
+            left: 0;
+            right: 0;
+            bottom: -5px;
+            background: red;
+            //background: black;
+            width: 18px;
+            height: 18px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: all 1s;
+
+            img {
+              position: absolute;
+              width: 12px;
+              height: 12px;
+              transition: all 1s;
+            }
+
+            .yes {
+              opacity: 0;
+              transform: rotate(-180deg);
+            }
+
+            &.attention {
+              background: white;
+
+              .no {
+                opacity: 0;
+                transform: rotate(180deg);
+              }
+
+              .yes {
+                opacity: 1;
+                transform: rotate(0deg);
+              }
+            }
+          }
+        }
+
+        .love, .message, .share {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+
+          @width: 3.5rem;
+
+          img {
+            width: @width;
+            height: @width;
+          }
+
+          span {
+            font-size: 1.2rem;
+          }
+        }
+
+        .loved {
+          background: red;
+        }
+
+      }
+
+      .content {
+        color: #fff;
+        position: absolute;
+        bottom: 0;
+        width: 75%;
+        //display: flex;
+        //flex-direction: column;
+
+        .location-wrapper {
+          display: flex;
+
+          .location {
+            margin-bottom: 1rem;
+
+            display: flex;
+            align-items: center;
+            font-size: 1.2rem;
+            padding: .4rem;
+            border-radius: .3rem;
+            background: @second-btn-color-tran;
+
+            .gang {
+              height: .8rem;
+              width: 1.5px;
+              margin: 0 .5rem;
+              background: gray;
+            }
+
+            img {
+              margin-right: .7rem;
+              width: 1.8rem;
+            }
+          }
+        }
+
+
+        .music {
+          position: relative;
+          width: 60%;
+          display: flex;
+          align-items: center;
+
+          .music-image {
+            width: 20px;
+            height: 20px;
+            margin-top: 3px;
+          }
+        }
+      }
+
+      .comment-status {
+        display: flex;
+        align-items: center;
+
+        .comment {
+
+          .type-comment {
+            display: flex;
+            background: rgb(130, 21, 44);
+            border-radius: 50px;
+            padding: 3px;
+            margin-bottom: 20px;
+
+            .avatar {
+              width: 36px;
+              height: 36px;
+              border-radius: 50%;
+            }
+
+            .right {
+              margin: 0 10px;
+              color: @second-text-color;
+
+              .name {
+                margin-right: 10px;
+              }
+
+              .text {
+                color: white;
+              }
+
+            }
+
+          }
+
+          .loveds {
+          }
+
+          .type-loved {
+            width: 40px;
+            height: 40px;
+            position: relative;
+            margin-bottom: 20px;
+            animation: test 1s;
+            animation-delay: .5s;
+
+            .avatar {
+              width: 36px;
+              height: 36px;
+              border-radius: 50%;
+            }
+
+            .loved {
+              position: absolute;
+              bottom: 0;
+              left: 20px;
+              width: 10px;
+              height: 10px;
+              background: red;
+              padding: 3px;
+              border-radius: 50%;
+              border: 2px solid white;
+            }
+          }
+
+          @keyframes test {
+            from {
+              display: block;
+              transform: translate3d(0, 0, 0);
+            }
+            to {
+              display: none;
+              transform: translate3d(0, -60px, 0);
+            }
+
+          }
+        }
+      }
+    }
+
+    .progress {
+      bottom: -1px;
+      position: absolute;
+      height: 7px;
+      width: 100vw;
+      background: black;
+
+
+      .time {
+        position: absolute;
+        z-index: 9;
+        font-size: 24px;
+        bottom: 50px;
+        left: 0;
+        right: 0;
+        color: white;
+        text-align: center;
+
+        .duration {
+          color: darkgray;
+        }
+      }
+
+      &:before {
+        z-index: 9;
+        content: ' ';
+        height: 1.5px;
+        width: 100vw;
+        background: gray;
+        position: absolute;
+        top: 0;
+      }
+
+      .line {
+        z-index: 999;
+        content: '';
+        position: absolute;
+        top: 0;
+        height: 1px;
+        width: 200vw;
+        transform: translate3d(-200vw, 0, 0);
+        background: gray;
+      }
+
+      .point {
+        z-index: 10;
+        position: absolute;
+        left: 10vw;
+        top: -1px;
+        height: 4px;
+        width: 4px;
+        border-radius: 50%;
+        background: gray;
+      }
+    }
+
+    & .stop {
+      &:before {
+        height: 3.5px;
+      }
+
+      .line {
+        height: 3px;
+        background: white;
+      }
+
+      .point {
+        top: -2px;
+        height: 8px;
+        width: 8px;
+        background: white;
+      }
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/RecommendSlideUser.vue b/src/components/RecommendSlideUser.vue
new file mode 100644
index 0000000..ba56bc1
--- /dev/null
+++ b/src/components/RecommendSlideUser.vue
@@ -0,0 +1,362 @@
+<template>
+  <div id="SlideUser">
+    <div class="content">
+      <img class="close" src="../assets/img/icon/components/gray-close-full2.png" alt="">
+      <img class="avatar" :src="modelValue.avatar">
+      <div class="name">{{ modelValue.name }}</div>
+      <div class="age">{{ modelValue.age }}岁</div>
+      <div class="realName">通讯录朋友{{ modelValue.realName }}</div>
+      <div class="poster-wrapper">
+        <div class="poster-item" v-for="(i,index) in modelValue.videos.slice(0,3)" @click="globalMethods.$no">
+          <img class="poster" :src="globalMethods.$imgPreview(i.cover)"/>
+          <div class="num">
+            <img class="love" src="../assets/img/icon/love.svg" alt="">
+            <span>{{ globalMethods.$likeNum(i.digg_count) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="options">
+      <base-button type="white">换一个</base-button>
+      <base-button type="primary">关注</base-button>
+    </div>
+  </div>
+</template>
+<script>
+import Posters from "./Posters";
+import globalMethods from "../utils/global-methods";
+import BaseButton from "./BaseButton";
+
+export default {
+  name: "SlideUser",
+  components: {
+    Posters,
+    BaseButton
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default() {
+        return {
+          type: 'user',
+          "id": "224e9a00-ffa0-4bc1-bb07-c318c7b02fa5",
+          "avatar": new URL('../assets/img/icon/avatar/1.png', import.meta.url).href,
+          "name": "何以为家",
+          "realName": "王小二",
+          "sex": "",
+          "age": 25,
+          "idCard": null,
+          "phone": "",
+          "address": null,
+          "wechat": "",
+          "password": null,
+          "lastLoginTime": "1629993515",
+          "createTime": "1630035089",
+          "isDelete": 0,
+          "account": "234",
+          "pinyin": "H",
+          "select": false,
+          videos: [
+            {
+              "id": "c99d325c-741e-4722-9f39-82bb423a5989",
+              "cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc~c5_300x400.jpeg?from=4257465056_large",
+              "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc?from=4257465056_large",
+              "origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/d9e9b6dc783f4c13a8e5cc08df788a02_1627117997~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
+              "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77ucs14tfra0&line=1&file_id=8b05a5dfb9644865a605ba13cc25f0fe&sign=07cddb6e3292bb2f4478d1f9e6187b33&is_play_url=1&source=PackSourceEnum_PUBLISH",
+              "video_data_size": 10754240,
+              "duration": 151720,
+              "desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影",
+              "allow_download": 0,
+              "allow_duet": 0,
+              "allow_react": 0,
+              "allow_music": 1,
+              "allow_douplus": 1,
+              "allow_share": 1,
+              "digg_count": 156,
+              "comment_count": 7,
+              "download_count": 0,
+              "play_count": 0,
+              "share_count": 0,
+              "forward_count": 0,
+              "collect_count": 0,
+              "sort": 9,
+              "is_top": 0,
+              "city": "350100",
+              "musicId": "0da2663b-6bff-425f-a93e-9106b4889c99",
+              "create_time": "1630391758",
+              "creator_id": "54884802577",
+              "status": 1,
+              "topics": [
+                {
+                  "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
+                  "name": "抖音电影",
+                  "creator_id": "54884802577",
+                  "create_time": "1630391758",
+                  "status": 1
+                },
+                {
+                  "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
+                  "name": "我的观影报告",
+                  "creator_id": "54884802577",
+                  "create_time": "1630391758",
+                  "status": 1
+                }
+              ],
+              "music": {
+                "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
+                "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
+                "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
+                "title": "@喵嗷污说电影创作的原声",
+                "creator_id": "54884802577",
+                "create_time": "1630391758",
+                "status": 1
+              }
+            },
+            {
+              "id": "cf26d20e-577f-4e08-ae0e-77eac2f1adbb",
+              "cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe~c5_300x400.jpeg?from=4257465056_large",
+              "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe?from=4257465056_large",
+              "origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/15826b4e6ad54f0bbdb3bd8af024604c_1627117999~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
+              "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77u4a4ivddk0&line=1&file_id=f8c9a32ba7bc4976b66db0437dd65d1b&sign=c96c9adfacde30c007555eee23f0f214&is_play_url=1&source=PackSourceEnum_PUBLISH",
+              "video_data_size": 16850048,
+              "duration": 216320,
+              "desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
+              "allow_download": 0,
+              "allow_duet": 0,
+              "allow_react": 0,
+              "allow_music": 1,
+              "allow_douplus": 1,
+              "allow_share": 1,
+              "digg_count": 72,
+              "comment_count": 4,
+              "download_count": 0,
+              "play_count": 0,
+              "share_count": 1,
+              "forward_count": 0,
+              "collect_count": 0,
+              "sort": 10,
+              "is_top": 0,
+              "city": "350100",
+              "musicId": "28944e2e-3bcb-4173-92d2-eb9a263aa826",
+              "create_time": "1630391758",
+              "creator_id": "54884802577",
+              "status": 1,
+              "topics": [
+                {
+                  "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
+                  "name": "抖音电影",
+                  "creator_id": "54884802577",
+                  "create_time": "1630391758",
+                  "status": 1
+                },
+                {
+                  "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
+                  "name": "我的观影报告",
+                  "creator_id": "54884802577",
+                  "create_time": "1630391758",
+                  "status": 1
+                }
+              ],
+              "music": {
+                "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
+                "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
+                "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
+                "title": "@喵嗷污说电影创作的原声",
+                "creator_id": "54884802577",
+                "create_time": "1630391758",
+                "status": 1
+              }
+            },
+            {
+              "id": "f3fd9b59-6ff5-4301-ac18-a4b8cbf35982",
+              "cover": "https://p9.douyinpic.com/img/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0~c5_300x400.jpeg?from=4257465056_large",
+              "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0?from=4257465056_large",
+              "origin_cover": "https://p26.douyinpic.com/tos-cn-p-0015/0d7948340d3543bda3357a9496e0cb86_1627117998~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
+              "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c3ttjarc77ucsm96q040&line=1&file_id=ccc7eccfa0d746febdcf7436841281a8&sign=a4fc8eb995aad2acdcc622371ecc9c7c&is_play_url=1&source=PackSourceEnum_PUBLISH",
+              "video_data_size": 23547094,
+              "duration": 230880,
+              "desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
+              "allow_download": 0,
+              "allow_duet": 0,
+              "allow_react": 0,
+              "allow_music": 1,
+              "allow_douplus": 1,
+              "allow_share": 1,
+              "digg_count": 93,
+              "comment_count": 3,
+              "download_count": 0,
+              "play_count": 0,
+              "share_count": 0,
+              "forward_count": 0,
+              "collect_count": 1,
+              "sort": 11,
+              "is_top": 0,
+              "city": "350100",
+              "musicId": "6fe6bbfc-d393-45f2-a2c8-432422c5904a",
+              "create_time": "1630391758",
+              "creator_id": "54884802577",
+              "status": 1,
+              "topics": [
+                {
+                  "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
+                  "name": "抖音电影",
+                  "creator_id": "54884802577",
+                  "create_time": "1630391758",
+                  "status": 1
+                },
+                {
+                  "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
+                  "name": "我的观影报告",
+                  "creator_id": "54884802577",
+                  "create_time": "1630391758",
+                  "status": 1
+                }
+              ],
+              "music": {
+                "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
+                "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
+                "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
+                "title": "@喵嗷污说电影创作的原声",
+                "creator_id": "54884802577",
+                "create_time": "1630391758",
+                "status": 1
+              }
+            },
+          ]
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      globalMethods
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    console.log('modelValue', this.modelValue)
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="less">
+#SlideUser {
+  width: 100%;
+  height: 100%;
+  //background: #e1e1e1;
+  background: linear-gradient(to bottom, rgb(69, 63, 73), rgb(25, 20, 42));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  .content {
+    width: 85%;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 1.5rem;
+    //box-shadow: 0 0 2rem 0 #b3b3b3;
+    padding: 1.5rem;
+    color: black;
+    position: relative;
+
+    .close {
+      top: 1.5rem;
+      right: 1.5rem;
+      width: 2.5rem;
+      height: 2.5rem;
+      position: absolute;
+    }
+
+    .avatar {
+      width: 12rem;
+      border-radius: 50%;
+    }
+
+    .name {
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+      font-weight: bold;
+      font-size: 1.6rem;
+    }
+
+    .age {
+      font-size: 1rem;
+      background: #f1f1f1;
+      padding: 3px;
+      border-radius: 2px;
+    }
+
+    .realName {
+      text-align: center;
+      color: black;
+      border-top: 1px solid #f1f1f1;
+      border-bottom: 1px solid #f1f1f1;
+      padding: 1rem 0;
+      margin: 1.5rem 0;
+      font-size: 1.2rem;
+      width: 90%;
+    }
+
+
+    .poster-wrapper {
+      display: grid;
+      grid-template-columns: repeat(3, 31%);
+
+      grid-column-gap: 3.5%;
+      grid-row-gap: 2%;
+    }
+
+    .poster-item {
+      border-radius: .8rem;
+      overflow: hidden;
+      position: relative;
+
+      .poster {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      .num {
+        color: white;
+        position: absolute;
+        bottom: .5rem;
+        left: .5rem;
+        display: flex;
+        align-items: center;
+        font-size: 1.2rem;
+
+
+        .love {
+          width: 1.2rem;
+          height: 1.2rem;
+          margin-right: .5rem;
+        }
+      }
+    }
+
+  }
+
+  .options {
+    position: absolute;
+    bottom: 2rem;
+    display: flex;
+    justify-content: space-between;
+    left: 1.5rem;
+    right: 1.5rem;
+
+    .button {
+      width: 49%;
+    }
+
+
+  }
+}
+
+</style>
diff --git a/src/components/SlideUser.vue b/src/components/SlideUser.vue
deleted file mode 100644
index 30b9981..0000000
--- a/src/components/SlideUser.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-  <div id="SlideUser">
-    <div class="content">
-      <img class="close" src="../assets/img/icon/components/gray-close-full2.png" alt="">
-      <img class="avatar" :src="user.avatar">
-      <div class="name">{{ user.name }}</div>
-      <div class="age">{{ user.age }}岁</div>
-      <div class="realName">通讯录朋友{{ user.realName }}</div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "SlideUser",
-  components: {},
-  props: {
-    modelValue: {
-      type: Object,
-      default() {
-        return {}
-      }
-    }
-  },
-  data() {
-    return {
-      user: {
-        type: 'user',
-        "id": "224e9a00-ffa0-4bc1-bb07-c318c7b02fa5",
-        "avatar": new URL('../assets/img/icon/avatar/1.png', import.meta.url).href,
-        "name": "何以为家",
-        "realName": "王小二",
-        "sex": "",
-        "age": 25,
-        "idCard": null,
-        "phone": "",
-        "address": null,
-        "wechat": "",
-        "password": null,
-        "lastLoginTime": "1629993515",
-        "createTime": "1630035089",
-        "isDelete": 0,
-        "account": "234",
-        "pinyin": "H",
-        "select": false,
-      }
-    }
-  },
-  computed: {},
-  watch: {},
-  created() {
-
-  },
-  methods: {}
-}
-</script>
-
-<style scoped lang="less">
-#SlideUser {
-  width: 100%;
-  height: 100%;
-  background: #e1e1e1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .content {
-    width: 85%;
-    background: white;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: 1.5rem;
-    box-shadow: 0 0 2rem 0 #b3b3b3;
-    padding: 1rem;
-    color: black;
-    position: relative;
-
-    .close {
-      top: 1.5rem;
-      right: 1.5rem;
-      width: 2.5rem;
-      height: 2.5rem;
-      position: absolute;
-    }
-
-    .avatar {
-      width: 12rem;
-      border-radius: 50%;
-    }
-
-    .name {
-      margin-top: 2rem;
-      margin-bottom: 2rem;
-      font-weight: bold;
-      font-size: 1.6rem;
-    }
-
-    .age {
-      font-size: 1rem;
-      background: #f1f1f1;
-      padding: 3px;
-      border-radius: 2px;
-    }
-
-    .realName {
-      text-align: center;
-      color: gray;
-      border-top: 1px solid #f1f1f1;
-      border-bottom: 1px solid #f1f1f1;
-      padding: 1rem 0;
-      margin: 1.5rem 0;
-      width: 90%;
-    }
-  }
-}
-
-</style>
diff --git a/src/pages/test/Test3.vue b/src/pages/test/Test3.vue
index 39880c1..e970d14 100644
--- a/src/pages/test/Test3.vue
+++ b/src/pages/test/Test3.vue
@@ -16,7 +16,9 @@ export default {
           let id = 'a' + Date.now()
           let elWidth = 80
           let rotate = randomNum(0, 1)
-          let template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}" id="${id}" src="${require('../assets/img/icon/loved.svg')}" alt="">`
+          let template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}"
+ id="${id}"
+  src="${new URL('../../assets/img/icon/loved.svg', import.meta.url).href}" alt="">`
           let el = new Dom().create(template)
           el.css({top: e.y - elWidth, left: e.x - elWidth / 2,})
           new Dom().find('.test').append(el)
diff --git a/src/pages/test/TestOne.vue b/src/pages/test/TestOne.vue
index d81a869..d03a9e2 100644
--- a/src/pages/test/TestOne.vue
+++ b/src/pages/test/TestOne.vue
@@ -1,15 +1,15 @@
 <template>
   <div id="TestOne">
-    <SlideUser class="vue"></SlideUser>
+    <RecommendSlideUser/>
   </div>
 </template>
 <script>
-import SlideUser from "../../components/SlideUser";
+import RecommendSlideUser from "../../components/RecommendSlideUser";
 
 export default {
   name: "TestOne",
   components: {
-    SlideUser
+    RecommendSlideUser
   },
   props: {
     modelValue: false
diff --git a/src/pages/test/TestSlide.vue b/src/pages/test/TestSlide.vue
index 97e585a..1f1c923 100644
--- a/src/pages/test/TestSlide.vue
+++ b/src/pages/test/TestSlide.vue
@@ -1,18 +1,18 @@
 <template>
   <div id="TestSlide">
     <SlideRowList
-        v-if="false"
+        v-if="true"
         name="baseSlide"
         v-model:active-index="baseActiveIndex">
       <SlideItem>
         <SlideRowList
-            style="height: calc(100% - 5rem);"
+            style="height: calc(100vh - 5rem);"
             v-model:active-index="activeIndex">
           <SlideItem>
-            <div id="TestSlide1"></div>
+            <div id="TestSlide1" style="height: calc(100vh - 5rem);"></div>
           </SlideItem>
           <SlideItem>
-            <div id="TestSlide2"></div>
+            <div id="TestSlide2" style="height: calc(100vh - 5rem);"></div>
           </SlideItem>
         </SlideRowList>
         <Footer v-bind:init-tab="1"/>
@@ -21,14 +21,16 @@
         <div id="TestSlide3"></div>
       </SlideItem>
     </SlideRowList>
-    <div id="TestSlide1" style="height: calc(100% - 5rem);"></div>
+    <!--    <div id="TestSlide1" style="height: calc(100% - 5rem);"></div>-->
   </div>
 </template>
 <script lang="jsx">
-import Slide from "./slide";
-import Video from "../../components/Video";
+import Slide from "./slide.jsx";
+import BaseVideo from "../../components/BaseVideo";
+import RecommendSlideUser from "../../components/RecommendSlideUser";
 import resource from "../../assets/data/resource.js";
 import CONST_VAR from "../../utils/const_var";
+import Dom from "../../utils/dom";
 
 export default {
   name: "TestSlide",
@@ -43,6 +45,9 @@ export default {
       pageNo: 0,
       baseActiveIndex: 0,
       activeIndex: 0,
+      lastClickTime: 0,
+      isDbClick: false,
+      dbClickTimer: null,
     }
   },
   computed: {},
@@ -52,41 +57,216 @@ export default {
   mounted() {
     let list = resource.videos
     list = list.concat(resource.videos)
-    list.splice(24, 6)
-    list = list.slice(0, 1)
-    list.map(v => {
-      v.type = 'video'
-    })
-    list.unshift({
-      type: 'img',
-      src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
-    })
-    list.unshift({
-      type: 'user',
-      "id": "224e9a00-ffa0-4bc1-bb07-c318c7b02fa5",
-      "avatar": new URL('../../assets/img/icon/avatar/1.png', import.meta.url).href,
-      "name": "何以为家",
-      "sex": "",
-      "age": null,
-      "idCard": null,
-      "phone": "",
-      "address": null,
-      "wechat": "",
-      "password": null,
-      "lastLoginTime": "1629993515",
-      "createTime": "1630035089",
-      "isDelete": 0,
-      "account": "234",
-      "pinyin": "H",
-      "select": false,
-    })
-    // list.splice(3)
-    console.log('length', list.length)
-    let slide = new Slide('#TestSlide1', {
+    list = list.slice(0, 5)
+    list.map(v => v.type = 'recommend-video')
+    if (true) {
+    // if (false) {
+      list.map(v => {
+        v.type = 'recommend-video'
+      })
+      list.unshift({
+        type: 'img',
+        src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`
+      })
+      list.unshift({
+        type: 'send-video',
+        src: `http://douyin.ttentau.top/0.mp4`
+      })
+      list.unshift({
+        type: 'user',
+        "id": "224e9a00-ffa0-4bc1-bb07-c318c7b02fa5",
+        "avatar": new URL('../../assets/img/icon/avatar/1.png', import.meta.url).href,
+        "name": "何以为家",
+        "realName": "王小二",
+        "sex": "",
+        "age": 25,
+        "idCard": null,
+        "phone": "",
+        "address": null,
+        "wechat": "",
+        "password": null,
+        "lastLoginTime": "1629993515",
+        "createTime": "1630035089",
+        "isDelete": 0,
+        "account": "234",
+        "pinyin": "H",
+        "select": false,
+        videos: [
+          {
+            "id": "c99d325c-741e-4722-9f39-82bb423a5989",
+            "cover": "https://p26.douyinpic.com/img/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc~c5_300x400.jpeg?from=4257465056_large",
+            "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/9cf624ff4e054c8f997295473dce49cc?from=4257465056_large",
+            "origin_cover": "https://p11.douyinpic.com/tos-cn-p-0015/d9e9b6dc783f4c13a8e5cc08df788a02_1627117997~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
+            "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77ucs14tfra0&line=1&file_id=8b05a5dfb9644865a605ba13cc25f0fe&sign=07cddb6e3292bb2f4478d1f9e6187b33&is_play_url=1&source=PackSourceEnum_PUBLISH",
+            "video_data_size": 10754240,
+            "duration": 151720,
+            "desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影",
+            "allow_download": 0,
+            "allow_duet": 0,
+            "allow_react": 0,
+            "allow_music": 1,
+            "allow_douplus": 1,
+            "allow_share": 1,
+            "digg_count": 156,
+            "comment_count": 7,
+            "download_count": 0,
+            "play_count": 0,
+            "share_count": 0,
+            "forward_count": 0,
+            "collect_count": 0,
+            "sort": 9,
+            "is_top": 0,
+            "city": "350100",
+            "musicId": "0da2663b-6bff-425f-a93e-9106b4889c99",
+            "create_time": "1630391758",
+            "creator_id": "54884802577",
+            "status": 1,
+            "topics": [
+              {
+                "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
+                "name": "抖音电影",
+                "creator_id": "54884802577",
+                "create_time": "1630391758",
+                "status": 1
+              },
+              {
+                "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
+                "name": "我的观影报告",
+                "creator_id": "54884802577",
+                "create_time": "1630391758",
+                "status": 1
+              }
+            ],
+            "music": {
+              "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
+              "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
+              "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
+              "title": "@喵嗷污说电影创作的原声",
+              "creator_id": "54884802577",
+              "create_time": "1630391758",
+              "status": 1
+            }
+          },
+          {
+            "id": "cf26d20e-577f-4e08-ae0e-77eac2f1adbb",
+            "cover": "https://p3.douyinpic.com/img/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe~c5_300x400.jpeg?from=4257465056_large",
+            "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/a62aa299fd1f48e28a783deec2cdccbe?from=4257465056_large",
+            "origin_cover": "https://p3.douyinpic.com/tos-cn-p-0015/15826b4e6ad54f0bbdb3bd8af024604c_1627117999~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
+            "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0300fg10000c3ttjarc77u4a4ivddk0&line=1&file_id=f8c9a32ba7bc4976b66db0437dd65d1b&sign=c96c9adfacde30c007555eee23f0f214&is_play_url=1&source=PackSourceEnum_PUBLISH",
+            "video_data_size": 16850048,
+            "duration": 216320,
+            "desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
+            "allow_download": 0,
+            "allow_duet": 0,
+            "allow_react": 0,
+            "allow_music": 1,
+            "allow_douplus": 1,
+            "allow_share": 1,
+            "digg_count": 72,
+            "comment_count": 4,
+            "download_count": 0,
+            "play_count": 0,
+            "share_count": 1,
+            "forward_count": 0,
+            "collect_count": 0,
+            "sort": 10,
+            "is_top": 0,
+            "city": "350100",
+            "musicId": "28944e2e-3bcb-4173-92d2-eb9a263aa826",
+            "create_time": "1630391758",
+            "creator_id": "54884802577",
+            "status": 1,
+            "topics": [
+              {
+                "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
+                "name": "抖音电影",
+                "creator_id": "54884802577",
+                "create_time": "1630391758",
+                "status": 1
+              },
+              {
+                "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
+                "name": "我的观影报告",
+                "creator_id": "54884802577",
+                "create_time": "1630391758",
+                "status": 1
+              }
+            ],
+            "music": {
+              "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
+              "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
+              "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
+              "title": "@喵嗷污说电影创作的原声",
+              "creator_id": "54884802577",
+              "create_time": "1630391758",
+              "status": 1
+            }
+          },
+          {
+            "id": "f3fd9b59-6ff5-4301-ac18-a4b8cbf35982",
+            "cover": "https://p9.douyinpic.com/img/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0~c5_300x400.jpeg?from=4257465056_large",
+            "dynamic_cover": "https://p3.douyinpic.com/obj/tos-cn-i-0004/890ebdf8a5c84abcae18c6e00c4165a0?from=4257465056_large",
+            "origin_cover": "https://p26.douyinpic.com/tos-cn-p-0015/0d7948340d3543bda3357a9496e0cb86_1627117998~tplv-dy-360p.jpeg?from=4257465056&s=&se=false&sh=&sc=&l=202108301444360102111780824E10113C&biz_tag=feed_cover",
+            "video": "https://api.amemv.com/aweme/v1/play/?video_id=v0200fg10000c3ttjarc77ucsm96q040&line=1&file_id=ccc7eccfa0d746febdcf7436841281a8&sign=a4fc8eb995aad2acdcc622371ecc9c7c&is_play_url=1&source=PackSourceEnum_PUBLISH",
+            "video_data_size": 23547094,
+            "duration": 230880,
+            "desc": "实验意外爆炸，在场的人全晕了过去，再次醒来却发现身处诡异世界#我的观影报告 #抖音电影 ",
+            "allow_download": 0,
+            "allow_duet": 0,
+            "allow_react": 0,
+            "allow_music": 1,
+            "allow_douplus": 1,
+            "allow_share": 1,
+            "digg_count": 93,
+            "comment_count": 3,
+            "download_count": 0,
+            "play_count": 0,
+            "share_count": 0,
+            "forward_count": 0,
+            "collect_count": 1,
+            "sort": 11,
+            "is_top": 0,
+            "city": "350100",
+            "musicId": "6fe6bbfc-d393-45f2-a2c8-432422c5904a",
+            "create_time": "1630391758",
+            "creator_id": "54884802577",
+            "status": 1,
+            "topics": [
+              {
+                "id": "41821c6d-e14f-47f1-a391-f0b1f42afbe1",
+                "name": "抖音电影",
+                "creator_id": "54884802577",
+                "create_time": "1630391758",
+                "status": 1
+              },
+              {
+                "id": "c10178eb-441f-4dc7-93b6-eaae1b6248cc",
+                "name": "我的观影报告",
+                "creator_id": "54884802577",
+                "create_time": "1630391758",
+                "status": 1
+              }
+            ],
+            "music": {
+              "id": "8ce2cb26-4772-4c7b-91d9-a2580c667c21",
+              "cover": "https://p3.douyinpic.com/aweme/100x100/85f000239e43c3c985b5.jpeg?from=116350172",
+              "mp3": "https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/6995889105167076132.mp3",
+              "title": "@喵嗷污说电影创作的原声",
+              "creator_id": "54884802577",
+              "create_time": "1630391758",
+              "status": 1
+            }
+          },
+        ]
+      })
+    }
+
+    // console.log('length', list.length)
+    let config = {
       render: (item, itemIndex, play) => {
         let html
-        if (item.type === 'video') {
-          html = <Video
+        if (item.type === 'recommend-video') {
+          html = <BaseVideo
               isPlay={play}
               video={item}
               index={itemIndex}
@@ -100,36 +280,64 @@ export default {
         if (item.type === 'img') {
           html = <img src={item.src} style="height:100%;"/>
         }
+        if (item.type === 'send-video') {
+          html = <video src={item.src} style="height:100%;"/>
+        }
         if (item.type === 'user') {
-          html = <div>
-            user
-          </div>
+          html = <RecommendSlideUser modelValue={item}/>
         }
         return html
       },
       list,
       index: 0,
-      request: this.$api.videos.recommended
-    })
-    // let slide2 = new Slide('#TestSlide2', {
-    //   render: (item, itemIndex, play) => {
-    //     return (
-    //         <Video
-    //             isPlay={play}
-    //             video={item}
-    //             index={itemIndex}
-    //             onShowComments={e => this.isCommenting = true}
-    //             onShowShare={e => this.isSharing = true}
-    //             onGoUserInfo={e => this.baseActiveIndex = 1}
-    //             onGoMusic={e => this.$nav('/home/music')}
-    //             v-model={[this.videos[itemIndex], 'video']}
-    //         />
-    //     )
-    //   },
-    //   request: this.$api.videos.recommended
-    // })
+      request: async q => {
+        let res = await this.$api.videos.recommended(q)
+        if (res.code === 200) {
+          res.data.list.map(v => v.type = 'recommend-video')
+          return {code: 200, data: res.data}
+        }
+        return {code: 500}
+      }
+    };
+    let slide = new Slide('#TestSlide1', config)
+    let slide2 = new Slide('#TestSlide2', config)
+
+    // let layout = document.querySelector('#TestSlide')
+    // let checkTime = 300
+    // let setIsDbClickFalse = () => {
+    //   this.dbClickTimer = setTimeout(() => {
+    //     this.isDbClick = false
+    //   }, checkTime);
+    // }
+    // layout.addEventListener('click', e => {
+    //   if (this.isDbClick) {
+    //     this.dbClick(e)
+    //     clearTimeout(this.dbClickTimer);
+    //     setIsDbClickFalse()
+    //     return
+    //   }
+    //   let nowTime = new Date().getTime();
+    //   if (nowTime - this.lastClickTime < checkTime) {
+    //     this.dbClick(e)
+    //     this.isDbClick = true
+    //     setIsDbClickFalse()
+    //   }
+    //   this.lastClickTime = nowTime;
+    // }, true)
   },
   methods: {
+    dbClick(e) {
+      let id = 'a' + Date.now()
+      let elWidth = 80
+      let rotate = this.$randomNum(0, 1)
+      let template = `<img class="${rotate ? 'left love-dbclick' : 'right love-dbclick'}" id="${id}" src="src/assets/img/icon/loved.svg">`
+      let el = new Dom().create(template)
+      el.css({top: e.y - elWidth - 50, left: e.x - elWidth / 2,})
+      new Dom('#TestSlide').append(el)
+      setTimeout(() => {
+        new Dom(`#${id}`).remove()
+      }, 1000)
+    },
     async getData() {
       let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize})
       console.log(res)
@@ -164,7 +372,7 @@ if (import.meta.hot) {
 
 </style>
 
-<style scoped lang="less">
+<style lang="less">
 @import "@/assets/less/index";
 
 #TestSlide {
@@ -180,5 +388,69 @@ if (import.meta.hot) {
   .content {
     padding-top: 6rem;
   }
+
+  .love-dbclick {
+    position: absolute;
+    @width: 9rem;
+    width: @width;
+    height: @width;
+
+    &.left {
+      animation: loveLeft 1.1s linear;
+    }
+
+    &.right {
+      animation: loveRight 1.1s linear;
+    }
+
+    @scale: scale(1.2);
+    @rotate: 10deg;
+
+    @keyframes loveLeft {
+      0% {
+        opacity: 0;
+        transform: scale(2) rotate(0-@rotate);
+      }
+      10% {
+        opacity: 1;
+        transform: scale(1) rotate(0-@rotate);
+      }
+      15% {
+        opacity: 1;
+        transform: @scale rotate(0-@rotate);
+      }
+      40% {
+        opacity: 1;
+        transform: @scale rotate(0-@rotate);
+      }
+      100% {
+        transform: translateY(-12rem) scale(2) rotate(0-@rotate);
+        opacity: 0;
+      }
+    }
+    @keyframes loveRight {
+      0% {
+        opacity: 0;
+        transform: scale(2) rotate(0+@rotate);
+      }
+      10% {
+        opacity: 1;
+        transform: scale(1) rotate(0+@rotate);
+      }
+      15% {
+        opacity: 1;
+        transform: @scale rotate(0+@rotate);
+      }
+      40% {
+        opacity: 1;
+        transform: @scale rotate(0+@rotate);
+      }
+      100% {
+        transform: translateY(-12rem) scale(2) rotate(0+@rotate);
+        opacity: 0;
+      }
+    }
+  }
+
 }
 </style>
diff --git a/src/pages/test/slide.js b/src/pages/test/slide.jsx
similarity index 82%
rename from src/pages/test/slide.js
rename to src/pages/test/slide.jsx
index 0d7be38..7673ac5 100644
--- a/src/pages/test/slide.js
+++ b/src/pages/test/slide.jsx
@@ -32,6 +32,7 @@ export default class Slide {
     this.virtualTotal = 5
 
     this.height = parseFloat(container.css('height'))
+    // console.log('height',this.height)
     this.isDrawDown = true
     this.config = config
     this.appInsMap = new Map()
@@ -89,21 +90,23 @@ export default class Slide {
         start = start - (end - this.total)
       }
     }
-    console.log('startIndex', start)
-    console.log('endIndex', end)
+    // console.log('startIndex', start)
+    // console.log('endIndex', end)
     this.getList().slice(start, end).map((v, i) => {
-      let el = this.getInsEl(v, start + i, false)
+      let el = this.getInsEl(v, start + i, this.index === start + i)
       this.slideList.appendChild(el)
     })
 
     //this.total > this.virtualTotal，只有总条数在不少this.virtualTotal条数的情况下用top
     //this.index > 1 和setTop保持统一，这里其实可以用this.index > 2
-    if (this.index > 1 && this.total > this.virtualTotal) {
+    // if (this.index > 1 && this.total > this.virtualTotal) {
+    if (this.index > 1) {
       this.css(this.slideList, 'transform', `translate3d(0px, ${this.getHeight()}px, 0px)`)
 
       this.slideList.childNodes.forEach(v => {
-        //((this.total - 1 - this.index) > 1 ? 0 : 2),如果当前是最后两条，那么要多减去N个height
-        console.log('((this.total - this.index) > 1 ? 0 : 2)', ((this.total - 1 - this.index) > 1 ? 0 : this.total - 1 - this.index))
+        //(this.total - 1 - this.index) > 1 ? 0 : this.total - 1 - this.index) , 如果当前是最后两条，那么要多减去N个height
+        console.log('((this.total - 1 - this.index) > 1 ? 0 : this.total - 1 - this.index)',
+          (this.total - 1 - this.index) > 1 ? 0 : this.total - 1 - this.index)
         this.css(v, 'top', (this.index - 2 - ((this.total - 1 - this.index) > 1 ? 0 : this.total - 1 - this.index)) * this.height + 'px')
       })
     }
@@ -116,27 +119,29 @@ export default class Slide {
     let slideVNode = this.config.render(item, index, play)
     const app = Vue.createApp({
       render() {
-        return slideVNode
+        return <div class={`slide-item slide-item-${index}`}>{slideVNode}</div>
       }
     })
     const ins = app.mount(document.createElement('div'))
     this.appInsMap.set(index, app)
 
-    let parent = this.create(`<div class="slide-item slide-item-${index}"></div>`)
-    parent.appendChild(ins.$el)
-    return parent
+    return ins.$el
   }
 
   touchstart(e) {
-    // console.log('touchstart')
+    // console.log('start')
     this.startLocationX = e.touches[0].pageX
     this.startLocationY = e.touches[0].pageY
+    this.moveXDistance = 0
+    this.moveYDistance = 0
+
     this.startTime = Date.now()
     // console.log('touchstart', this.startTime)
     this.css(this.slideList, 'transition-duration', '0ms')
   }
 
   touchmove(e) {
+    // console.log('move')
     this.moveXDistance = e.touches[0].pageX - this.startLocationX
     this.moveYDistance = e.touches[0].pageY - this.startLocationY
     // console.log('touchmove', this.moveXDistance)
@@ -144,7 +149,7 @@ export default class Slide {
     this.isDrawDown = this.moveYDistance < 0
     // console.log('isDrawDown', this.isDrawDown)
     if (this.isDrawDown) {
-      if ( this.index === this.getList().length - 1) {
+      if (this.index === this.getList().length - 1) {
         this.css(this.slideList, 'transform', `translate3d(0px, ${this.getHeight() + (Math.abs(this.moveYDistance) > this.height / 5 ? -this.height / 5 : this.moveYDistance)}px, 0px)`)
         return
       }
@@ -156,6 +161,7 @@ export default class Slide {
   }
 
   touchend() {
+    // console.log('end')
     //如果向下划，并且加载中，并且还是已有数据的最后一条
     if (this.isDrawDown && this.loading && this.index === this.getList().length - 1) {
       return console.log('加载中')
@@ -165,6 +171,15 @@ export default class Slide {
     if (Date.now() - this.startTime < 40) canSlide = false
 
     if (canSlide) {
+      let stopPreviousNodeFn = (index) => {
+        setTimeout(() => {
+          let previousNode = this.slideList.querySelector(`.slide-item-${index} .video-wrapper`)
+          previousNode && previousNode.dispatchEvent(new Event('stop'))
+        }, 300)
+      }
+      //index要传过去，不然是修改后的值
+      stopPreviousNodeFn(this.index)
+
       if (this.isDrawDown) {
         if (this.index < this.getList().length - 1) {
           this.index += 1
@@ -181,8 +196,8 @@ export default class Slide {
             }
             let res2 = this.slideList.querySelector(`.slide-item-${removeIndex}`)
             if (res2) {
-              // this.appInsMap.get(removeIndex).unmount()
-              this.slideList.removeChild(res2)
+              this.appInsMap.get(removeIndex).unmount()
+              // this.slideList.removeChild(res2)
             }
           } else {
             this.getData(this.pageNo + 1, false)
@@ -207,11 +222,14 @@ export default class Slide {
           }
           let res2 = this.slideList.querySelector(`.slide-item-${removeIndex}`)
           if (res2) {
-            // this.appInsMap.get(removeIndex).unmount()
-            this.slideList.removeChild(res2)
+            this.appInsMap.get(removeIndex).unmount()
+            // this.slideList.removeChild(res2)
           }
         }
       }
+
+      let nextNode = this.slideList.querySelector(`.slide-item-${this.index} .video-wrapper`)
+      nextNode && nextNode.dispatchEvent(new Event('play'))
       this.setTop()
       this.setActive()
     }
diff --git a/src/utils/global-methods.jsx b/src/utils/global-methods.jsx
index 2fd06ba..a911ff0 100644
--- a/src/utils/global-methods.jsx
+++ b/src/utils/global-methods.jsx
@@ -365,4 +365,14 @@ export default {
     }
     return str
   },
+  $randomNum(minNum, maxNum) {
+    switch (arguments.length) {
+      case 1:
+        return parseInt(Math.random() * minNum + 1, 10);
+      case 2:
+        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+      default:
+        return 0;
+    }
+  },
 }
\ No newline at end of file