fix: img bg prohibit drag

index
guofei 2024-10-17 11:07:36 +08:00
parent 133e6ca036
commit a6196e8f7d
1 changed files with 17 additions and 13 deletions

View File

@ -12,18 +12,21 @@ import React, { useEffect, useState } from "react";
import { BaseUrl } from "../../constants"; import { BaseUrl } from "../../constants";
import { Alert, Snackbar } from "@mui/material"; import { Alert, Snackbar } from "@mui/material";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import zIndex from "@mui/material/styles/zIndex";
var configMap = { var configMap = {
"android-h": { "android-h": {
bkg: androidVPng, bkg: androidVPng,
rotate: true, rotate: true,
width: "666px", width: "666px",
height: "321px" height: "321px",
offsetv: "4px",
}, },
"android-v": { "android-v": {
bkg: androidVPng, bkg: androidVPng,
width: "323px", width: "321px",
height: "666px", height: "666px",
offsetv: "5px",
}, },
"iphone-h": { "iphone-h": {
bkg: iphoneVPng, bkg: iphoneVPng,
@ -37,15 +40,16 @@ var configMap = {
height: "693px", height: "693px",
}, },
"ipad-h": { "ipad-h": {
bkg: ipadVPng, bkg: ipadHPng,
rotate: true, width: "433px",
width: "460px", height: "326px",
height: "320px", offsetv: "5px",
}, },
"ipad-v": { "ipad-v": {
bkg: ipadVPng, bkg: ipadVPng,
width: "320px", width: "324px",
height: "460px", height: "433px",
offsetv: "5px",
}, },
}; };
@ -74,14 +78,14 @@ function DeviceFrame(props) {
<img src={refreshButtonPng} alt="refresh" onClick={() => refresh()} className="refreshButton" /> <img src={refreshButtonPng} alt="refresh" onClick={() => refresh()} className="refreshButton" />
{props.qrDataUrl && ( {props.qrDataUrl && (
<div className="qrCode"> <div className="qrCode">
<img src={props.qrDataUrl} alt="qr code" style={{marginBottom: '6px'}} /> <img src={props.qrDataUrl} alt="qr code" />
<p style={{ margin: "0", }}> <p style={{ margin: "0", }}>
{t("scan")} {t("scan")}
<CopyToClipboard text={absoluteUrl} onCopy={() => setOpenPopup(true)}> <CopyToClipboard text={absoluteUrl} onCopy={() => setOpenPopup(true)}>
<img style={{ cursor: "pointer", width: "20px", height: "20px", marginLeft: "9px" }} src={copyPng} alt="复制链接" /> <img style={{ cursor: "pointer", width: "20px", height: "20px" }} src={copyPng} alt="复制链接" />
</CopyToClipboard> </CopyToClipboard>
</p> </p>
</div> </div>
)} )}
<Snackbar <Snackbar
@ -97,7 +101,7 @@ function DeviceFrame(props) {
</Alert> </Alert>
</Snackbar> </Snackbar>
<div> <div>
<img src={config.bkg} alt="background" style={{position: "relative" , zIndex: 100, transform: config.rotate ? "rotate(-90deg)" : "" }} /> <img src={config.bkg} alt="background" style={{ position: "relative", zIndex: 100, transform: config.rotate ? "rotate(-90deg)" : "", pointerEvents: 'none' }} />
{props.htmlUrl && ( {props.htmlUrl && (
<iframe <iframe
id="deviceFrame" id="deviceFrame"