全屏样式优化
This commit is contained in:
parent
43604de86b
commit
82f1b1759e
|
|
@ -166,9 +166,23 @@
|
|||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
color: #5673f3;
|
||||
z-index: 3;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: #A0A0A0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
svg {
|
||||
fill: #3A4E99 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.speakerModeIcon {
|
||||
|
|
@ -176,9 +190,23 @@
|
|||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
color: #5673f3;
|
||||
z-index: 3;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: #A0A0A0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
svg {
|
||||
fill: #3A4E99 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自由者模式
|
||||
|
|
@ -315,6 +343,15 @@
|
|||
}
|
||||
|
||||
}
|
||||
.meetingContentSwiperCardFullScreenIcon {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.meetingContentBodyLeftBlock {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Operation from '@/components/Operation';
|
|||
import SpeakerModeModal from '@/components/SpeakerModeModal';
|
||||
import InvitingPersonnelModal from '@/components/InvitingPersonnelModal';
|
||||
import { Button, Input, Popover, Modal, Checkbox, message, Popconfirm, notification } from "antd";
|
||||
import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled, CaretDownOutlined, CaretUpOutlined, CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
|
||||
import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { thumbImageBufferToBase64 } from '@/utils/package/base64'
|
||||
import { storage } from '@/utils';
|
||||
|
|
@ -1227,15 +1227,31 @@ const Meeting: React.FC = () => {
|
|||
switch (meetingMode) {
|
||||
case 'StandardMode':
|
||||
if (isVideoFullScreen) {
|
||||
return <CaretDownOutlined className={`${styles.standardModeIcon} drag`} style={{ top: '-8px' }} title='展开' onClick={() => setIsVideoFullScreen(false)} /> //下
|
||||
return <div className={`${styles.standardModeIcon} drag`} style={{ top: '-8px' }} title='展开' onClick={() => setIsVideoFullScreen(false)}>
|
||||
<svg width="22" height="13" viewBox="0 0 22 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.44484 0.435547L0.285156 1.59521L10.9996 12.3075L21.7129 1.59521L20.5532 0.435547L10.9989 9.99002L1.44484 0.435547Z" />
|
||||
</svg>
|
||||
</div> //下
|
||||
} else {
|
||||
return <CaretUpOutlined className={`${styles.standardModeIcon} drag`} style={{ top: '152px' }} title='收起' onClick={() => setIsVideoFullScreen(true)} /> //上
|
||||
return <div className={`${styles.standardModeIcon} drag`} style={{ top: '152px' }} title='收起' onClick={() => setIsVideoFullScreen(true)}>
|
||||
<svg width="22" height="13" viewBox="0 0 22 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.5532 12.3066L21.7129 11.147L10.9984 0.434698L0.285156 11.147L1.44481 12.3066L10.9991 2.75217L20.5532 12.3066Z" />
|
||||
</svg>
|
||||
</div> //上
|
||||
}
|
||||
case 'SpeakerMode':
|
||||
if (isVideoFullScreen) {
|
||||
return <CaretRightOutlined className={`${styles.speakerModeIcon} drag`} style={{ left: '-8px' }} title='展开' onClick={() => setIsVideoFullScreen(false)} /> //右
|
||||
return <div className={`${styles.speakerModeIcon} drag`} style={{ left: '-1px' }} title='展开' onClick={() => setIsVideoFullScreen(false)}>
|
||||
<svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.0625 20.5679L1.22216 21.7275L11.9344 11.0131L1.22216 0.299805L0.0625002 1.45946L9.61697 11.0138L0.0625 20.5679Z" />
|
||||
</svg>
|
||||
</div> //右
|
||||
} else {
|
||||
return <CaretLeftOutlined className={`${styles.speakerModeIcon} drag`} style={{ left: 'calc(18% - 8px)' }} title='收起' onClick={() => setIsVideoFullScreen(true)} /> //左
|
||||
return <div className={`${styles.speakerModeIcon} drag`} style={{ left: 'calc(18% - 4px)' }} title='收起' onClick={() => setIsVideoFullScreen(true)}>
|
||||
<svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.9355 1.45949L10.7759 0.299805L0.0636029 11.0143L10.7759 21.7275L11.9355 20.5679L2.38107 11.0136L11.9355 1.45949Z" />
|
||||
</svg>
|
||||
</div> //左
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1439,6 +1455,8 @@ const Meeting: React.FC = () => {
|
|||
<img src={ImageUrl.loading} alt="" style={{ width: '50px' }} />
|
||||
</div>}
|
||||
</div>
|
||||
{isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
|
||||
<FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
|
||||
{meetingContentUser(currentLookUserAccount, true)}
|
||||
</div> : null}
|
||||
{currentLookUserStatus === 1 && currentLookUserAccount ?
|
||||
|
|
@ -1448,6 +1466,8 @@ const Meeting: React.FC = () => {
|
|||
<Avatar name={currentLookUserAccount.userName} />
|
||||
</div>}
|
||||
</div>
|
||||
{isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
|
||||
<FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
|
||||
{meetingContentUser(currentLookUserAccount, true)}
|
||||
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
|
||||
</div> : null}
|
||||
|
|
@ -1458,6 +1478,8 @@ const Meeting: React.FC = () => {
|
|||
<Avatar name={currentLookUserAccount.userName} />
|
||||
</div>
|
||||
</div>
|
||||
{isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
|
||||
<FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
|
||||
{meetingContentUser(currentLookUserAccount, true)}
|
||||
</div> : null}
|
||||
{currentLookUserStatus === 3 && currentLookUserAccount ?
|
||||
|
|
@ -1467,6 +1489,8 @@ const Meeting: React.FC = () => {
|
|||
<Avatar name={currentLookUserAccount.userName} />
|
||||
</div>
|
||||
</div>
|
||||
{isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
|
||||
<FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
|
||||
{meetingContentUser(currentLookUserAccount, true)}
|
||||
</div> : null}
|
||||
{currentLookUserStatus === 4 && currentLookUserAccount ?
|
||||
|
|
@ -1476,6 +1500,8 @@ const Meeting: React.FC = () => {
|
|||
<Avatar name={currentLookUserAccount.userName} />
|
||||
</div>
|
||||
</div>
|
||||
{isVideoFullScreen ? <FullscreenExitOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='还原大小' onClick={() => setIsVideoFullScreen(false)} /> :
|
||||
<FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
|
||||
{meetingContentUser(currentLookUserAccount, true)}
|
||||
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
|
||||
</div> : null}
|
||||
|
|
|
|||
Loading…
Reference in New Issue