feat: 手机框替换

index
icefire 2024-10-15 21:13:17 +08:00
parent d79e186bb8
commit 93fb34532f
6 changed files with 22 additions and 20 deletions

View File

@ -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"

View File

@ -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; /* 改变箭头颜色 */
} }

View File

@ -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