会议监控样式

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%;
+        }
+      }
+    }
+  }
 }

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>
     </>