From df3ff899bc7de501020ab3a8936774620ffad3f1 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Mon, 15 Jul 2024 11:41:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.module.scss | 32 +++++++++++++-----
 src/page/Meeting/index.tsx         | 53 ++++++++++++++----------------
 src/utils/styles/main.css          |  1 +
 3 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss
index 177811e..3540fd9 100644
--- a/src/page/Meeting/index.module.scss
+++ b/src/page/Meeting/index.module.scss
@@ -98,27 +98,42 @@
         .meetingContentSwiper {
           margin: 20px 0 12px;
           flex-shrink: 0;
-
-          :global {
-            .swiper-slide-active {
-              border: 1px solid #EBEBEB;
-              box-sizing: border-box;
-            }
-          }
+          display: flex;
+          align-items: center;
+          overflow-x: scroll;
+          padding: 0 20px;
 
           .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) {
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 84a2a73..1b64990 100644
--- a/src/page/Meeting/index.tsx
+++ b/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 { DeleteOutlined, ProfileOutlined, ReloadOutlined, SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
+import { Button, Input, Popover, Modal, Checkbox, message, Table, Pagination } from "antd";
+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
-                  loop={false}
-                  centeredSlides={true}
-                  modules={[Navigation, Pagination]}
-                  spaceBetween={20}
-                  slidesPerView={6}
-                  navigation
-                  pagination={false}
-                  scrollbar={{ draggable: true }}
-                  onSwiper={(swiper: any) => {
-                    swiper.on('click', (e: any) => {
-                      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)}
+                {roomUserList.map((item: any, index: number) =>
+                  <div
+                    className={styles.meetingContentSwiperCard}
+                    key={index}
+                    onClick={() => {
+                      setCurrentVideoId(item.account)
+                    }}
+                  >
+                    <div className={styles.meetingContentSwiperCardVdeio} id={`video-${item.account}`}>
+                      <div className={styles.meetingContentSwiperCardVdeioLoading}>
+                        <LoadingOutlined style={{ color: 'white', fontSize: '30px' }} />
                       </div>
-                    </SwiperSlide>
-                  )}
-                </Swiper>
+                    </div>
+                    {meetingContentUser(item)}
+                  </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
diff --git a/src/utils/styles/main.css b/src/utils/styles/main.css
index 1e3858a..d0c93c0 100644
--- a/src/utils/styles/main.css
+++ b/src/utils/styles/main.css
@@ -36,6 +36,7 @@ img {
 /* 修改垂直滚动条 */
 ::-webkit-scrollbar {
   width: 6px;
+  height: 10px;
 }
 
 /* 修改滚动条轨道背景色 */