优化

src/page/Meeting/index.module.scss

@@ -98,27 +98,42 @@
         .meetingContentSwiper {
           margin: 20px 0 12px;
           flex-shrink: 0;
-
+          display: flex;
-          :global {
+          align-items: center;
-            .swiper-slide-active {
+          overflow-x: scroll;
-              border: 1px solid #EBEBEB;
+          padding: 0 20px;
-              box-sizing: border-box;
-            }
-          }
 
           .meetingContentSwiperCard {
             height: 196px;
+            width: 280px;
             border-radius: 10px;
             overflow: hidden;
             position: relative;
             cursor: pointer;
-            margin: 0 auto;
+            margin-right: 20px;
+            flex-shrink: 0;
 
             .meetingContentSwiperCardVdeio {
               width: 100%;
               height: 100%;
               background: black;
+              position: relative;
+
+              .meetingContentSwiperCardVdeioLoading {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+              }
             }
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
+
+          .active {
+            border: 1px red solid;
           }
         }
 
@@ -577,6 +592,7 @@
     margin-top: 20px;
   }
 }
+
 // 共享文件
 .sharedFilesModel {
   >div:nth-child(1) {

src/page/Meeting/index.tsx

@@ -1,13 +1,11 @@
 import styles from '@/page/Meeting/index.module.scss'
 import { useEffect, useRef, useState } from "react";
 import Operation from '@/components/Operation';
-import { Navigation, Pagination } from 'swiper/modules';
-import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
-import { Button, Input, Popover, Modal, Checkbox, message, Table, Pagination as AntdPagination } from "antd";
+import { Button, Input, Popover, Modal, Checkbox, message, Table, Pagination } from "antd";
-import { DeleteOutlined, ProfileOutlined, ReloadOutlined, SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
+import { DeleteOutlined, LoadingOutlined, ProfileOutlined, ReloadOutlined, SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { thumbImageBufferToBase64 } from '@/utils/package/base64'
 import { storage } from '@/utils';
@@ -109,6 +107,7 @@ const Meeting: React.FC = () => {
   })
   const [roomUserList, setRoomUserList] = useState<any>([])
   const [chatList, setChatList] = useState<any>([])
+  const [currentVideoId, setCurrentVideoId] = useState('')
 
   const [list] = useState<number[]>([1, 2, 3, 4, 5, 6, 7])
   const [open, setOpen] = useState(false)
@@ -151,6 +150,11 @@ const Meeting: React.FC = () => {
       setChatList((newChatList: any) => [...newChatList, item])
     })
   }, [])
+
+  useEffect(() => {
+
+
+  }, [currentVideoId])
   // 操作按钮
   const changeStatusList = async (row: any, itemIndex: number, rowIndex: number): Promise<void> => {
     const footerListTemplate = [...footerList]
@@ -344,31 +348,22 @@ const Meeting: React.FC = () => {
           <div className={styles.meetingContentBody}>
             <div className={styles.meetingContentBodyLeft}>
               <div className={`${styles.meetingContentSwiper} drag`}>
-                <Swiper
+                {roomUserList.map((item: any, index: number) =>
-                  loop={false}
+                  <div
-                  centeredSlides={true}
+                    className={styles.meetingContentSwiperCard}
-                  modules={[Navigation, Pagination]}
+                    key={index}
-                  spaceBetween={20}
+                    onClick={() => {
-                  slidesPerView={6}
+                      setCurrentVideoId(item.account)
-                  navigation
+                    }}
-                  pagination={false}
+                  >
-                  scrollbar={{ draggable: true }}
+                    <div className={styles.meetingContentSwiperCardVdeio} id={`video-${item.account}`}>
-                  onSwiper={(swiper: any) => {
+                      <div className={styles.meetingContentSwiperCardVdeioLoading}>
-                    swiper.on('click', (e: any) => {
+                        <LoadingOutlined style={{ color: 'white', fontSize: '30px' }} />
-                      swiper.slideTo(e.clickedIndex)
-                    })
-                  }}
-                  onSlideChange={() => { }}
-                >
-                  {roomUserList.map((item: any, index: number) =>
-                    <SwiperSlide key={index}>
-                      <div className={styles.meetingContentSwiperCard}>
-                        <div className={styles.meetingContentSwiperCardVdeio} id={`video-${item.account}`}></div>
-                        {meetingContentUser(item)}
                       </div>
-                    </SwiperSlide>
+                    </div>
-                  )}
+                    {meetingContentUser(item)}
-                </Swiper>
+                  </div>
+                )}
               </div>
               <div className={`${styles.meetingContentVideo} drag`}>
                 <div className={styles.meetingContentVideoDom}></div>
@@ -665,7 +660,7 @@ const Meeting: React.FC = () => {
                 )} />
               </Table>
               <div style={{ display: 'flex', justifyContent: 'center', marginTop: '10px' }}>
-                <AntdPagination size="small" total={fileList.total} onChange={(e) => {
+                <Pagination size="small" total={fileList.total} onChange={(e) => {
                   setFileList({
                     ...fileList,
                     pageIndex: e

src/utils/styles/main.css

@@ -36,6 +36,7 @@ img {
 /* 修改垂直滚动条 */
 ::-webkit-scrollbar {
   width: 6px;
+  height: 10px;
 }
 
 /* 修改滚动条轨道背景色 */