fix: change style
parent
42c3e51d04
commit
a5f133f055
|
@ -49,25 +49,25 @@ var configMap = {
|
||||||
bkg: ipadHPng,
|
bkg: ipadHPng,
|
||||||
rotate: true,
|
rotate: true,
|
||||||
width: "458px",
|
width: "458px",
|
||||||
height: "326px",
|
height: "626px",
|
||||||
offsetv: "5px",
|
offsetv: "5px",
|
||||||
imgStyle: {
|
imgStyle: {
|
||||||
transform: 'rotate(-90deg) scale(1.4)',
|
transform: 'rotate(-90deg) scale(1)',
|
||||||
},
|
},
|
||||||
styles: {
|
styles: {
|
||||||
transform: "translate(-50%, -50%) scale(1.42)",
|
transform: "translate(-50%, -50%) scale(1)",
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"ipad-v": {
|
"ipad-v": {
|
||||||
bkg: ipadHPng,
|
bkg: ipadHPng,
|
||||||
width: "326px",
|
width: "626px",
|
||||||
height: "458px",
|
height: "458px",
|
||||||
offsetv: "5px",
|
offsetv: "5px",
|
||||||
imgStyle: {
|
imgStyle: {
|
||||||
transform: 'scale(1.4)',
|
// transform: 'scale(1.4)',
|
||||||
},
|
},
|
||||||
styles: {
|
styles: {
|
||||||
transform: "translate(-50%, -50%) scale(1.42)",
|
transform: "translate(-50%, -50%) scale(1)",
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -80,8 +80,38 @@ function DeviceFrame(props) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setConfig(configMap[props.device]);
|
// 将宽度和高度的值转换为数字,并增加10%
|
||||||
}, [props.device, config]);
|
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());
|
var refresh = () => setCacheKey(new Date().getTime());
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue