会议监控样式
This commit is contained in:
parent
f475ddb85a
commit
a20f98639c
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue