fix: 单个视频添加标题

packages/base-components/VideoSliderModal/src/demos/demo.tsx

@@ -18,14 +18,16 @@ const Demo = () => {
   // 视频数据源信息
   const videos = [
     {
-      id: '339B3B67-A7AE-45B2-89B7-227619A88A01', // 398993BB-A795-4237-BE75-B6A7EC9D675
+      id: 'E48A1B9F-16AD-4728-9A9F-9D86E897B1CC', // 398993BB-A795-4237-BE75-B6A7EC9D675
       name: '琼海电信小区1', // 设备名称
-      protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
+      protocol: '萤石EZOPEN', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
       username: '6c44c8e92d1c4d75a9818756025df550',
       password: '78b7dc88f9f4bf19c2b1aabfdd995244',
       dataRate: 'Sub', // Main 主码流  Sub 子码流
       pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
       address: '236644034',
+      width: 1000,
+      height: 500,
     },
     {
       id: '339B3B67-A7AE-45B2-89B7-227619A88A01', // 398993BB-A795-4237-BE75-B6A7EC9D675
@@ -36,6 +38,8 @@ const Demo = () => {
       dataRate: 'Sub', // Main 主码流  Sub 子码流
       pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
       address: '236644034',
+      width: 1000,
+      height: 500,
     },
     {
       id: '972DF430-2E69-4960-86E2-C1D336B85280', // 398993BB-A795-4237-BE75-B6A7EC9D675
@@ -46,6 +50,8 @@ const Demo = () => {
       dataRate: 'Sub', // Main 主码流  Sub 子码流
       pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg:  ws://172.16.19.19:8080/
       address: '236644034',
+      width: 1000,
+      height: 500,
     },
   ];
 

packages/base-components/VideoSliderModal/src/index.js

@@ -41,7 +41,14 @@ const VideoSliderModal = (props) => {
     >
       <>
         {videoInfos.length === 1 ? (
-          videoInfos.map((item, index) => <VmsVideo VideoInfo={item} JessibucaObj={JessibucaObj} />)
+          videoInfos.map((item, index) => (
+            <div className={styles['swiper-wrap']} key={index}>
+              <div className={styles['swiper-title']}>{item.name}</div>
+              <div className={styles['swiper-content']}>
+                <VmsVideo VideoInfo={item} JessibucaObj={JessibucaObj} />
+              </div>
+            </div>
+          ))
         ) : (
           <>
             <Swiper