样式优化

This commit is contained in:
yj 2024-10-25 14:24:57 +08:00
parent 42059e3c6f
commit 2fc1301cb9
2 changed files with 24 additions and 11 deletions

View File

@ -100,7 +100,9 @@
}
}
>div:nth-child(3) {
>div:nth-child(3) {}
.beautyEffect {
>span {
color: white;
}
@ -144,7 +146,7 @@
}
}
>div:nth-child(4) {
.otherVideoSeeting {
>div {
margin-bottom: 20px;

View File

@ -147,6 +147,7 @@ const VideoComponents = () => {
list: [],
item: null,
});
const [videoKey, setVideoKey] = useState('beautyEffect');
const [virtualBackgroundImg] = useState([
ImageUrl.virtualBackground1,
ImageUrl.virtualBackground2,
@ -213,7 +214,7 @@ const VideoComponents = () => {
if (setting.virtualBackground) {
setVirtualBackground(setting.virtualBackground)
} else {
setting.darkLightEnhancement = {
setting.virtualBackground = {
isVirtualBackground: false, //是否打开虚拟背景
color: '0xFFFFFF', // 纯色
sourceIndex: '', // 背景图下标
@ -338,6 +339,16 @@ const VideoComponents = () => {
</div>
<div>
<Radio.Group buttonStyle="solid" value={videoKey} onChange={(e) => {
setVideoKey(e.target.value)
}}>
<Radio.Button value="beautyEffect"></Radio.Button>
<Radio.Button value="colorEnhancement"></Radio.Button>
<Radio.Button value="darkLightEnhancement"></Radio.Button>
<Radio.Button value="virtualBackground"></Radio.Button>
</Radio.Group>
</div>
{videoKey === 'beautyEffect' ? <div className={styles.beautyEffect}>
<span>
<Checkbox style={{ marginRight: '10px' }} checked={virtualBackground.isVirtualBackground} onChange={(e) => {
setting.virtualBackground.isVirtualBackground = e.target.checked;
@ -389,9 +400,9 @@ const VideoComponents = () => {
})
}
</div>
</div>
<div>
<div>
</div> : null}
<div className={styles.otherVideoSeeting}>
{videoKey === 'colorEnhancement' ? <div>
<span>
<Checkbox style={{ marginRight: '10px' }} checked={beautyEffect.isBeautyEffect} onChange={(e) => {
setting.beautyEffect.isBeautyEffect = e.target.checked;
@ -479,8 +490,8 @@ const VideoComponents = () => {
</div>
</div>
</div>
</div>
<div>
</div> : null}
{videoKey === 'darkLightEnhancement' ? <div>
<span>
<Checkbox style={{ marginRight: '10px' }} checked={colorEnhancement.isColorEnhancement} onChange={(e) => {
setting.colorEnhancement.isColorEnhancement = e.target.checked;
@ -523,8 +534,8 @@ const VideoComponents = () => {
</div>
</div>
</div>
</div>
<div>
</div> : null}
{videoKey === 'virtualBackground' ? <div>
<span>
<Checkbox style={{ marginRight: '10px' }} checked={darkLightEnhancement.isDarkLightEnhancement} onChange={(e) => {
setting.darkLightEnhancement.isDarkLightEnhancement = e.target.checked;
@ -571,7 +582,7 @@ const VideoComponents = () => {
</div>
</div>
</div>
</div>
</div> : null}
</div>
</div>
</div>