FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Refactor(css): Change all less to module mode

Browse Source
This commit is contained in:
Fat Snake
2024-10-17 20:26:06 +08:00
parent 3d77dc793b
commit b7c3fb8524
111 changed files with 962 additions and 858 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Playground/Output/Preview/Render.tsx
View File

@@ -1,5 +1,5 @@
import { ChangeEvent } from 'react'
import '@/components/Playground/Output/Preview/render.less'
import styles from '@/components/Playground/Output/Preview/render.module.less'
import { COLOR_FONT_MAIN } from '@/constants/common.constants'
import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
import HideScrollbar from '@/components/common/HideScrollbar'
@@ -174,16 +174,18 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
return mobileMode ? (
<>
<HideScrollbar
className={'mobile-mode-background'}
className={styles.mobileModeRoot}
isShowVerticalScrollbar
isShowHorizontalScrollbar
autoHideWaitingTime={1000}
>
<div className={'mobile-mode-content'} style={{ zoom }}>
<div className={`device${isRotate ? ' rotate' : ''}`}>
<div className={`device-header${isRotate ? ' rotate' : ''}`} />
<div className={styles.mobileModeContent} style={{ zoom }}>
<div className={`${styles.device}${isRotate ? ` ${styles.rotate}` : ''}`}>
<div
className={`device-content${isRotate ? ' rotate' : ''}`}
className={`${styles.deviceHeader}${isRotate ? ` ${styles.rotate}` : ''}`}
/>
<div
className={`${styles.deviceContent}${isRotate ? ` ${styles.rotate}` : ''}`}
style={{
width: isRotate
? (devices.find((value) => value.name === selectedDevice)
@@ -198,7 +200,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
}}
>
<iframe
data-component={'playground-output-preview-render'}
className={styles.renderRoot}
key={iframeKey}
ref={iframeRef}
src={iframeUrl}
@@ -207,19 +209,21 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
allow={'clipboard-read; clipboard-write'}
/>
</div>
<div className={`device-footer${isRotate ? ' rotate' : ''}`} />
<div
className={`${styles.deviceFooter}${isRotate ? ` ${styles.rotate}` : ''}`}
/>
</div>
</div>
</HideScrollbar>
<div className={'switch-device'}>
<div className={styles.switchDevice}>
<IconOxygenMobile fill={COLOR_FONT_MAIN} />
<select value={selectedDevice} onChange={handleOnChangeDevice}>
{devices.map((value) => (
<option value={value.name}>{value.name}</option>
))}
</select>
<div className={'rotate-device'} title={'旋转屏幕'} onClick={handleOnRotateDevice}>
<div title={'旋转屏幕'} onClick={handleOnRotateDevice}>
{isRotate ? (
<IconOxygenRotateRight fill={COLOR_FONT_MAIN} />
) : (
@@ -227,7 +231,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
)}
</div>
</div>
<div className={'switch-zoom'}>
<div className={styles.switchZoom}>
<IconOxygenZoom fill={COLOR_FONT_MAIN} />
<input
type={'range'}
@@ -241,7 +245,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
</>
) : (
<iframe
data-component={'playground-output-preview-render'}
className={styles.renderRoot}
key={iframeKey}
ref={iframeRef}
src={iframeUrl}