From a20f98639cd0c5db987416999b481352878d1faf Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Thu, 22 Aug 2024 14:11:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E8=AE=AE=E7=9B=91=E6=8E=A7=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/UserVideo/index.module.scss | 72 ++++++++++++++++++++++
 src/page/UserVideo/index.tsx         | 92 +++++++++++++++++++++++++++-
 2 files changed, 161 insertions(+), 3 deletions(-)

diff --git a/src/page/UserVideo/index.module.scss b/src/page/UserVideo/index.module.scss
index 693dabb..607f360 100644
--- a/src/page/UserVideo/index.module.scss
+++ b/src/page/UserVideo/index.module.scss
@@ -4,11 +4,14 @@
   background-color: rgb(7, 9, 11);
   padding: 20px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
 
   .userVideoTitle {
     text-align: center;
     color: white;
     font-size: 20px;
+    flex-shrink: 0;
     position: relative;
 
     >span {
@@ -19,4 +22,73 @@
       transform: translate(0, -50%);
     }
   }
+
+  .userVideoContent {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 20px 40px 0;
+
+    .userVideoContentHeader {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-shrink: 0;
+      margin-bottom: 10px;
+      padding: 0 10px;
+
+      >div:nth-child(1) {
+        display: flex;
+        align-items: center;
+
+        >div {
+          background-color: #181A1D;
+          border-radius: 4px;
+          padding: 4px 10px;
+          margin: 0 10px 0 0;
+
+          >span {
+            color: #EEEEEE;
+            font-size: 14px;
+            margin-right: 10px;
+          }
+        }
+      }
+
+      >div:nth-child(2) {
+        display: flex;
+        align-items: center;
+
+        >span {
+          color: #EEEEEE;
+          font-size: 14px;
+          margin-right: 10px;
+        }
+      }
+    }
+
+    .userVideoContentList {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      flex-grow: 1;
+      overflow-y: auto;
+      height: 0;
+
+      .userVideoContentListItem {
+        height: 20%;
+        width: calc(100% / 4 - 20px);
+        padding: 10px;
+
+        .userVideoContentListItemVideo {
+          background-color: #101317;
+          border: 1px solid #EBEBEB;
+          box-sizing: border-box;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/page/UserVideo/index.tsx b/src/page/UserVideo/index.tsx
index 311053a..ced095a 100644
--- a/src/page/UserVideo/index.tsx
+++ b/src/page/UserVideo/index.tsx
@@ -1,10 +1,27 @@
 
 import styles from '@/page/UserVideo/index.module.scss'
-import ImageUrl from '@/utils/package/ImageUrl';
 import { CloseOutlined } from '@ant-design/icons';
-import { useEffect } from "react";
+import { Button, Select } from 'antd';
+import { useEffect, useState } from "react";
 
 const UserVideo: React.FC = () => {
+  const [from, setFrom] = useState<any>({
+    cycleIntervalList: [
+      { value: 30, label: '30秒' },
+      { value: 60, label: '1分钟' },
+      { value: 120, label: '2分钟' },
+      { value: 180, label: '3分钟' },
+    ],
+    cycleIntervalValue: 30,
+    viewPeople: [
+      { value: 4, label: '4人' },
+      { value: 8, label: '8人' },
+      { value: 12, label: '12人' },
+      { value: 16, label: '16人' },
+      { value: 20, label: '20人' },
+    ],
+    viewPeopleValue: 4,
+  })
   useEffect(() => {
 
   }, []);
@@ -13,7 +30,76 @@ const UserVideo: React.FC = () => {
       <div className={styles.userVideo}>
         <div className={styles.userVideoTitle}>
           会议监控
-          <CloseOutlined className='drag'/>
+          <CloseOutlined className='drag' />
+        </div>
+        <div className={`${styles.userVideoContent} drag`}>
+          <div className={styles.userVideoContentHeader}>
+            <div>
+              <div>
+                <span>循环间隔</span>
+                <Select
+                  placeholder='请选择循环间隔'
+                  options={from.cycleIntervalList}
+                  value={from.cycleIntervalValue} onChange={(e) => {
+                    setFrom({ ...from, cycleIntervalValue: e })
+                  }} />
+              </div>
+              <div>
+                <span>查看人数</span>
+                <Select
+                  placeholder='请选择查看人数'
+                  options={from.viewPeople}
+                  value={from.viewPeopleValue} onChange={(e) => {
+                    setFrom({ ...from, viewPeopleValue: e })
+                  }} />
+              </div>
+            </div>
+            <div>
+              <span>30秒后刷新</span>
+              {/* <Button
+                type="primary"
+                onClick={() => { }}
+                style={{ backgroundColor: '#EC3C3C', marginLeft: '14px' }}
+              >暂停循环</Button> */}
+              <Button
+                type="primary"
+                className='m-ant-btn'
+                onClick={() => { }}
+              >开始循环</Button>
+            </div>
+          </div>
+          <div className={styles.userVideoContentList}>
+            <div className={styles.userVideoContentListItem}>
+              <div className={styles.userVideoContentListItemVideo}>
+
+              </div>
+            </div>
+            <div className={styles.userVideoContentListItem}>
+              <div className={styles.userVideoContentListItemVideo}>
+
+              </div>
+            </div>
+            <div className={styles.userVideoContentListItem}>
+              <div className={styles.userVideoContentListItemVideo}>
+
+              </div>
+            </div>
+            <div className={styles.userVideoContentListItem}>
+              <div className={styles.userVideoContentListItemVideo}>
+
+              </div>
+            </div>
+            <div className={styles.userVideoContentListItem}>
+              <div className={styles.userVideoContentListItemVideo}>
+
+              </div>
+            </div>
+            <div className={styles.userVideoContentListItem}>
+              <div className={styles.userVideoContentListItemVideo}>
+
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </>