From a5f133f0551f59392155dd827c238226a1a30cb8 Mon Sep 17 00:00:00 2001 From: guofei Date: Tue, 5 Nov 2024 15:08:21 +0800 Subject: [PATCH] fix: change style --- src/Components/deviceFrame/index.js | 46 ++++++++++++++++++++++++----- 1 file changed, 38 insertions(+), 8 deletions(-) diff --git a/src/Components/deviceFrame/index.js b/src/Components/deviceFrame/index.js index 76717aa..cdc4e79 100644 --- a/src/Components/deviceFrame/index.js +++ b/src/Components/deviceFrame/index.js @@ -49,25 +49,25 @@ var configMap = { bkg: ipadHPng, rotate: true, width: "458px", - height: "326px", + height: "626px", offsetv: "5px", imgStyle: { - transform: 'rotate(-90deg) scale(1.4)', + transform: 'rotate(-90deg) scale(1)', }, styles: { - transform: "translate(-50%, -50%) scale(1.42)", + transform: "translate(-50%, -50%) scale(1)", } }, "ipad-v": { bkg: ipadHPng, - width: "326px", + width: "626px", height: "458px", offsetv: "5px", imgStyle: { - transform: 'scale(1.4)', + // transform: 'scale(1.4)', }, styles: { - transform: "translate(-50%, -50%) scale(1.42)", + transform: "translate(-50%, -50%) scale(1)", } }, }; @@ -80,8 +80,38 @@ function DeviceFrame(props) { const { t } = useTranslation(); useEffect(() => { - setConfig(configMap[props.device]); - }, [props.device, config]); + // 将宽度和高度的值转换为数字,并增加10% + const current = JSON.parse(JSON.stringify(configMap[props.device])) + const w = parseFloat(current.width) + const h = parseFloat(current.height) + current.width = (w * 1.1) + 'px'; + current.height = (h * 1.1) + 'px'; + let bgW = (w * 1.1) + 32; + let bgH = (h * 1.1) + 32; + // 竖屏 + if (props.device === 'android-v') { + bgW -= 12; + } else if (props.device === 'android-h') { + // 横屏 + bgH -= 12; + } + + // 平板 + if (props.device === 'ipad-v') { + bgW += 32; + } else if (props.device === 'ipad-h') { + // 横屏 + bgH += 32; + } + + if (current.rotate) { + current.imgStyle = Object.assign({ height: bgW, width: bgH }, current.imgStyle || {}) + } else { + current.imgStyle = Object.assign({ width: bgW, height: bgH }, current.imgStyle || {}) + } + setConfig(current); + // setConfig(configMap[props.device]); + }, [props.device]); var refresh = () => setCacheKey(new Date().getTime());