From 1418128b0ddd5cf8794136e2c8c1d3dfcef8e81a Mon Sep 17 00:00:00 2001
From: guofei <guofeichu@gmail.com>
Date: Thu, 17 Oct 2024 13:58:36 +0800
Subject: [PATCH] fix: update some styles

---
 src/Components/deviceFrame/index.css |   4 ++
 src/Components/deviceFrame/index.js  |  38 ++++++++++++----
 src/Components/pane/index.css        |  62 +++++++++++++--------------
 src/Components/pane/index.js         |  29 +++++++------
 src/images/ipad-horizontal.png       | Bin 0 -> 2861 bytes
 5 files changed, 79 insertions(+), 54 deletions(-)
 create mode 100644 src/images/ipad-horizontal.png

diff --git a/src/Components/deviceFrame/index.css b/src/Components/deviceFrame/index.css
index 7374629..5c34e0d 100644
--- a/src/Components/deviceFrame/index.css
+++ b/src/Components/deviceFrame/index.css
@@ -38,4 +38,8 @@
 }
 
 .qrCode img {
+}
+
+#deviceFrame {
+  border-radius: 10px;
 }
\ No newline at end of file
diff --git a/src/Components/deviceFrame/index.js b/src/Components/deviceFrame/index.js
index 09d00b2..ca8c314 100644
--- a/src/Components/deviceFrame/index.js
+++ b/src/Components/deviceFrame/index.js
@@ -3,7 +3,7 @@ import androidHPng from "../../images/android-h.png";
 import androidVPng from "../../images/android-v.png";
 import iphoneHPng from "../../images/iphone-h.png";
 import iphoneVPng from "../../images/iphone-v.png";
-import ipadHPng from "../../images/iPad-h.png";
+import ipadHPng from "../../images/ipad-horizontal.png";
 import ipadVPng from "../../images/iPad-v.png";
 import copyPng from "../../images/copy.png";
 import refreshButtonPng from "../../images/refresh-button.png";
@@ -31,25 +31,44 @@ var configMap = {
 	"iphone-h": {
 		bkg: iphoneVPng,
 		rotate: true,
-		width: "692px",
-		height: "322px",
+		width: "690px",
+		height: "325px",
+		styles: {
+			borderRadius: '13px'
+		}
 	},
 	"iphone-v": {
 		bkg: iphoneVPng,
 		width: "322px",
 		height: "693px",
+		styles: {
+			borderRadius: '13px'
+		}
 	},
 	"ipad-h": {
 		bkg: ipadHPng,
-		width: "433px",
+		rotate: true,
+		width: "458px",
 		height: "326px",
 		offsetv: "5px",
+		imgStyle: {
+			transform: 'rotate(-90deg) scale(1.4)',
+		},
+		styles: {
+			transform: "translate(-50%, -50%) scale(1.42)",
+		}
 	},
 	"ipad-v": {
-		bkg: ipadVPng,
-		width: "324px",
-		height: "433px",
+		bkg: ipadHPng,
+		width: "326px",
+		height: "458px",
 		offsetv: "5px",
+		imgStyle: {
+			transform: 'scale(1.4)',
+		},
+		styles: {
+			transform: "translate(-50%, -50%) scale(1.42)",
+		}
 	},
 };
 
@@ -101,7 +120,7 @@ function DeviceFrame(props) {
 				</Alert>
 			</Snackbar>
 			<div>
-				<img src={config.bkg} alt="background" style={{ position: "relative", zIndex: 100, transform: config.rotate ? "rotate(-90deg)" : "", pointerEvents: 'none' }} />
+				<img src={config.bkg} alt="background" style={{ position: "relative", zIndex: 100, transform: config.rotate ? "rotate(-90deg)" : "", pointerEvents: 'none', ...config.imgStyle }} />
 				{props.htmlUrl && (
 					<iframe
 						id="deviceFrame"
@@ -109,8 +128,9 @@ function DeviceFrame(props) {
 							position: "absolute",
 							top: "50%",
 							left: "50%",
-							transform: "translate(-50%, -50%)",
+							transform: "translate(-50%, -50%) scale(1.007)",
 							paddingBottom: config.offsetv,
+							...config.styles
 						}}
 						allow="clipboard-read; clipboard-write *"
 						title="preview"
diff --git a/src/Components/pane/index.css b/src/Components/pane/index.css
index 45df083..6fab2af 100644
--- a/src/Components/pane/index.css
+++ b/src/Components/pane/index.css
@@ -1,58 +1,58 @@
 .Pane {
-    width: 370px;
-    background-color: #535353;
-    min-height: 100vh;
-    padding: 24px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    position: relative;
+  width: 370px;
+  background-color: #535353;
+  min-height: 100vh;
+  padding: 24px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  position: relative;
 }
 
 .modeSelect {
-    width: 100%;
-    border: none;
+  width: 100%;
+  border: none;
 }
 
 .deviceIcon {
-    width: auto;
-    height: 76px;
-    margin-bottom: 10px;
+  width: auto;
+  height: 76px;
+  margin-bottom: 10px;
+  margin-top: 7px;
 }
 .deviceText {
-
 }
 
 .deviceContent {
-    height: 100%;
-    color: #EEEEEE;
+  height: 100%;
+  color: #eeeeee;
 }
 
 .deviceButtons {
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
 }
 
 .deviceButtons img {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .selectPager {
-    left: 0 !important;
-    width: 350px;
+  left: 25px !important;
+  width: 319px !important;
 }
 
 .bottomLogo {
-    position: absolute;
-    width: 322px;
-    bottom: 24px;
-    text-align: center;
-    img {
-        width: 280px;
-    }
+  position: absolute;
+  width: 322px;
+  bottom: 24px;
+  text-align: center;
+  img {
+    width: 280px;
+  }
 }
 
 .Mui-focused .MuiOutlinedInput-notchedOutline {
-    border: none;
-}
\ No newline at end of file
+  border: none;
+}
diff --git a/src/Components/pane/index.js b/src/Components/pane/index.js
index 88d3192..9943304 100644
--- a/src/Components/pane/index.js
+++ b/src/Components/pane/index.js
@@ -19,11 +19,11 @@ import { useTranslation } from "react-i18next";
 import SvgIcon from '@mui/material/SvgIcon';
 
 function CustomIcon(props) {
-  return (
-    <SvgIcon viewBox="0 0 24 24" {...props}>
-      <path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
-    </SvgIcon>
-  );
+	return (
+		<SvgIcon viewBox="0 0 24 24" {...props}>
+			<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
+		</SvgIcon>
+	);
 }
 
 var deviceConfigs = [
@@ -123,10 +123,11 @@ function Pane(props) {
 					)
 				)}
 			</div>
+
 			<List
-			sx={{
-				paddingTop: '20px'
-			}}
+				sx={{
+					paddingTop: '20px'
+				}}
 			>
 				{deviceConfigs.map((_device) => (
 					<ListItem
@@ -142,11 +143,11 @@ function Pane(props) {
 							paddingLeft: '23px',
 							paddingRight: '20px',
 							marginBottom: '14px'
-							
+
 						}}>
-						<div style={{ display: "flex", flexDirection: 'column', justifyContent: 'center', alignItems: "center", width: '98px'}}>
-							<img className="deviceIcon" style={{ height: _device.name === 'iPad' ? '54px' : '76px'}} src={_device.icon} alt={_device.name} />
-							<img className="deviceText"  src={_device.text} alt={_device.name} />
+						<div style={{ display: "flex", flexDirection: 'column', justifyContent: 'center', alignItems: "center", width: '98px' }}>
+							<img className="deviceIcon" style={{ height: _device.name === 'iPad' ? '54px' : '76px' }} src={_device.icon} alt={_device.name} />
+							<img className="deviceText" src={_device.text} alt={_device.name} />
 						</div>
 						<div className="deviceContent">
 							<div className="deviceButtons">
@@ -163,8 +164,8 @@ function Pane(props) {
 					</ListItem>
 				))}
 			</List>
-			
-			{!props.hideLogo && <div className="bottomLogo"><img src={logoPanePng} alt="logo" width={"100%"} /></div> }
+
+			{!props.hideLogo && <div className="bottomLogo"><img src={logoPanePng} alt="logo" width={"100%"} /></div>}
 		</div>
 	);
 }
diff --git a/src/images/ipad-horizontal.png b/src/images/ipad-horizontal.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce599149abc99e5eae304fb1a08e7b0002e5dce6
GIT binary patch
literal 2861
zcmeHJX;4#F6n>8&dkShL$`-3AGcJQwf?yzM!~$bk<uwYjRH;iM%dm_<kffr;rPg*@
zObrGng~9a21X>J1;gKLJiUU>&4@e|c*(8ufW6YvR-@pEFtoENjxHEU|oc+7!o^$7%
zOo)rZyLh<(0DzB)j!XgokdEz_P7WAnSJ^EUc7O#*QB*+O>obWF_65|KWG8HuIc1#y
z0GEN7$Sujm7qr6>N!2v(TaPE!*)0mn$^`2QrhEriHzF1K)T6Xa=Dc0hKPw(B8YD+=
zCscj9j=$)@c-@aTmU^(h^e<Gki<k7YEqFSX98nWmx<X=S>GdHJ&9M!9Sab6<K^yv}
z7cF=_AE?P$F^ezNH^7=$$oH#$^>lEAgXJgQy`0)1Z5vFHqU~ahdswIfF-u8jjH(4$
z?CM^jMo@pBVhaqgjVGAZvowfE-}E`o(3l7zEP5l+S2JWklj<BK-*H3)$Nzn8?Q;QP
zAyZF;HTM=AWY0c<pd;r=ru#acfT?FfCT6Ue5ANjE!ZsE|`<kE8wgC&)3EPtD53q}t
zK>bsw@@acUikD`{e};B4NPg`MtQkA<vnh?Kka41MVU?ZSU~`<58m<~`4!|4A)M~Tc
z$aS=9+V{H*6j=tGE0s>COjYyWB=y~m0*cFPQDwtMVw=+TE5aY^FAzJi=T$ZxW(Brz
zF+3~|!2=A|qR9wUM2aQm?AZpa3AsSBc9%_!^f-9p<oT|#IS_=HS=~`pc6A}SqM7xw
zCQ_?^d>xoS-J{$M^@-e7en5#>*#^}gWJgvSE4GL%^s}h4scd!NX0H0xDw*#L{e*fI
zXAJaDagvDK*<qMc^OMA3)X~tFLW?Jwcqf5FKP2FeEu^#asCbV!0eIb+v^j+D;1r+$
z9v|~sdf_c$OGiBckmq-Gbs^o6c#rrGF!^tPC{w>W{A)&b)dbFxepz^F<-b_)!3Y4H
zBU30k2;&xiAi{Ttlc<>)lg_COVHi<v-jfziO8j3}f4AfJC2h{~BhS#o%syAZvgG@&
zkxgW>@LBP02qKfoMR|D%osSJ26I=m^9t!gtxN|24g0wmvs?+62P|fJ*=&Fb2`E)jk
z93C#xYPDXURFW3E(bp|j<b_<uXv`VYV5Q<4_YnvLOae=q^Ss?0uwo{Dn}EAKglXN$
zN<z%XRaxtQ=ka)s7XuXlqgf`);BYu3zq5?>=M|U)!-LTn8p9)Fsvc>`-y)JUcN@X7
zK;6`2ahSNTukTt*ivXVd1(C^E`mqvYjSESB3Tvij3h>^Jo-59eyg1+fgy){@qkFP!
zsNY&o0Of0G*=iWRKaPTOUr%cGZw|LNaEWg8n|vK&hHBg&1(3MJK^t)UN~7snNrfwz
zc~uxJg<<up2uLFRV+_a}E@5anR-Uy;5#^oY21wTimH5$BL?G0Y`*7S5G0TJ+!&Mqi
zel(Gx9hh?8&2qI~+MkXoA~Ngd*7B}od}CrpDx)EnQf%CMKBvluy}zk&|K86OA_+G7
zSbT(FW=9vQ9QY>Uz+Jy-WOf&nJ8*RwAoh`<>S0r7D;1$Ztg0D0yT}{rzl$n)7hA8q
zIE~vEUz|p9w9n*y0hw&=(X?SBK2RjVCb2d86#Jc(wcNM|wUy=1)D2JQBHq21u@v#X
zG(hp<c;{jF*arpM%>vFOB7<Rf$fP+qWoMbhhO3!rm)0m|p<tp^pDWZzpHr91_hRfF
z4DH!VVb<!c;Tv6FR&&#DO)O6WJ$VC#M4M3>_t(boP{lw`^ES02Xt1(LmF^s37$G-I
l-Y6^AT8wGA=_RLF;O&*$n>x}`pJO905VI{VQcTS}`VR{Oc=!MS

literal 0
HcmV?d00001