github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2025-12-14 11:32:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat; add iphone

Browse Source
This commit is contained in:
yehuozhili 2020-10-09 15:21:58 +08:00
parent 34f5b3239b
commit 1ddc9f5fb4
3 changed files with 41 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/iphone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

2
src/layouts/index.tsx
View File

@ -91,7 +91,7 @@ export default function Layout({ children }: IRouteComponentProps) {
setTheme: setState, setTheme: setState,
}} }}
> >
<div style={{ height: '100%', width: '100%' }}> <div style={{ height: '100%', width: '100%', overflow: 'hidden' }}>
<div <div
style={{ style={{
position: 'fixed', position: 'fixed',

61
src/pages/editor/preview.tsx
View File

@ -1,11 +1,10 @@
import React, { memo, useEffect, useMemo, useRef, useState } from 'react'; import React, { CSSProperties, memo, useEffect, useMemo, useRef, useState } from 'react';
import GridLayout from 'react-grid-layout'; import GridLayout from 'react-grid-layout';
import DynamicEngine from 'components/DynamicEngine'; import DynamicEngine from 'components/DynamicEngine';
import req from '@/utils/req'; import req from '@/utils/req';
import styles from './index.less'; import styles from './index.less';
import { useGetScrollBarWidth } from '@/utils/tool'; import { useGetScrollBarWidth } from '@/utils/tool';
import { LocationDescriptorObject } from 'history-with-query'; import { LocationDescriptorObject } from 'history-with-query';
const isMac = navigator.platform.indexOf('Mac') === 0; const isMac = navigator.platform.indexOf('Mac') === 0;
interface PreviewPageProps { interface PreviewPageProps {
@ -54,33 +53,53 @@ const PreviewPage = memo((props: PreviewPageProps) => {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const width = useGetScrollBarWidth(ref); const width = useGetScrollBarWidth(ref);
const pcStyle = useMemo(() => { const pcStyle: CSSProperties = useMemo(() => {
return { return {
width: isMac ? 395 : 375 + width + 1, //小数会有偏差 width: isMac ? 395 : 375 + width + 1, //小数会有偏差
margin: '20px auto', margin: '90px auto',
border: '10px solid #000',
borderRadius: '20px',
height: '684px', height: '684px',
overflow: 'auto', overflow: 'auto',
position: 'relative',
}; };
}, [width]); }, [width]);
return ( return (
<div ref={ref} style={vw > 800 ? pcStyle : {}}> <>
<GridLayout <div ref={ref} style={vw > 800 ? pcStyle : {}}>
className={styles.layout} <GridLayout
cols={24} className={styles.layout}
rowHeight={2} cols={24}
width={vw > 800 ? 375 : vw} rowHeight={2}
margin={[0, 0]} width={vw > 800 ? 375 : vw}
> margin={[0, 0]}
{pointData.map((value: PointDataItem) => ( >
<div className={styles.dragItem} key={value.id} data-grid={value.point}> {pointData.map((value: PointDataItem) => (
<DynamicEngine {...(value.item as any)} /> <div className={styles.dragItem} key={value.id} data-grid={value.point}>
</div> <DynamicEngine {...(value.item as any)} />
))} </div>
</GridLayout> ))}
</div> </GridLayout>
</div>
{vw > 800 ? (
<div
style={{
backgroundImage: "url('/iphone.png') ",
backgroundRepeat: 'no-repeat',
backgroundSize: 'contain',
position: 'absolute',
top: 0,
height: '840px',
width: '419px', //375+22+22
left: '50%',
transform: 'translateX(-50%)',
boxShadow: '0 4px 30px 0 rgba(4, 59, 85, 0.1)',
borderRadius: '60px',
pointerEvents: 'none',
}}
></div>
) : null}
</>
); );
}); });