feat: 手机框替换
parent
d79e186bb8
commit
93fb34532f
|
@ -12,29 +12,32 @@ 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: androidHPng,
|
bkg: androidVPng,
|
||||||
width: "512px",
|
rotate: true,
|
||||||
height: "286px",
|
width: "666px",
|
||||||
offsetv: "5px",
|
height: "321px",
|
||||||
|
offsetv: "4px",
|
||||||
},
|
},
|
||||||
"android-v": {
|
"android-v": {
|
||||||
bkg: androidVPng,
|
bkg: androidVPng,
|
||||||
width: "286px",
|
width: "321px",
|
||||||
height: "512px",
|
height: "666px",
|
||||||
offsetv: "5px",
|
offsetv: "5px",
|
||||||
},
|
},
|
||||||
"iphone-h": {
|
"iphone-h": {
|
||||||
bkg: iphoneHPng,
|
bkg: iphoneVPng,
|
||||||
width: "628px",
|
rotate: true,
|
||||||
|
width: "692px",
|
||||||
height: "322px",
|
height: "322px",
|
||||||
},
|
},
|
||||||
"iphone-v": {
|
"iphone-v": {
|
||||||
bkg: iphoneVPng,
|
bkg: iphoneVPng,
|
||||||
width: "322px",
|
width: "322px",
|
||||||
height: "628px",
|
height: "693px",
|
||||||
},
|
},
|
||||||
"ipad-h": {
|
"ipad-h": {
|
||||||
bkg: ipadHPng,
|
bkg: ipadHPng,
|
||||||
|
@ -98,7 +101,7 @@ function DeviceFrame(props) {
|
||||||
</Alert>
|
</Alert>
|
||||||
</Snackbar>
|
</Snackbar>
|
||||||
<div>
|
<div>
|
||||||
<img src={config.bkg} alt="background" />
|
<img src={config.bkg} alt="background" style={{position: "relative" , zIndex: 100, transform: config.rotate ? "rotate(-90deg)" : "" }} />
|
||||||
{props.htmlUrl && (
|
{props.htmlUrl && (
|
||||||
<iframe
|
<iframe
|
||||||
id="deviceFrame"
|
id="deviceFrame"
|
||||||
|
|
|
@ -45,15 +45,14 @@
|
||||||
|
|
||||||
.bottomLogo {
|
.bottomLogo {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 280px;
|
width: 322px;
|
||||||
bottom: 24px;
|
bottom: 24px;
|
||||||
left: 68px;
|
text-align: center;
|
||||||
|
img {
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.MuiSelect-select.MuiSelect-select::after {
|
.Mui-focused .MuiOutlinedInput-notchedOutline {
|
||||||
content: '';
|
border: none;
|
||||||
background-image: url('../../images/arrow.png'); /* 使用你的自定义图标 */
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
color: green; /* 改变箭头颜色 */
|
|
||||||
}
|
}
|
|
@ -180,7 +180,7 @@ function Pane(props) {
|
||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{!props.hideLogo && <img src={logoPanePng} alt="logo" width={"100%"} className="bottomLogo" />}
|
{!props.hideLogo && <div className="bottomLogo"><img src={logoPanePng} alt="logo" width={"100%"} /></div> }
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 5.8 KiB |
Loading…
Reference in New Issue