update: 样式调整

src/App.css

@@ -52,7 +52,6 @@
   border: 3px solid #494949;
   display: inline-block;
   height: 62px;
-  line-height: 62px;
   width: 62px;
   cursor: pointer;
   outline: none;
@@ -67,7 +66,7 @@
 }
 
 .pane-btn + .pane-btn {
-  margin-left: 10px;
+  margin-left: 14px;
 }
 
 .generate-btn {

src/Components/deviceFrame/index.css

@@ -22,21 +22,20 @@
   right: 24px;
   top: 82px;
   background: #DBDBDB;
+  width: 156px;
+  text-align: center;
   border-radius: 5px;
   padding-top: 14px;
-  padding-left: 14px;
-  padding-right: 14px;
   padding-bottom: 11px;
 }
 
 .qrCode p {
   display: flex;
+  justify-content: center;
   align-items: center;
-  padding-left: 22px;
   color: #666666;
   font-size: 14px;
 }
 
 .qrCode img {
-    margin-left: 8px;
 }

src/Components/deviceFrame/index.js

@@ -19,14 +19,12 @@ var configMap = {
 		bkg: androidVPng,
 		rotate: true,
 		width: "666px",
-		height: "321px",
+		height: "321px"
-		offsetv: "4px",
 	},
 	"android-v": {
 		bkg: androidVPng,
-		width: "321px",
+		width: "323px",
 		height: "666px",
-		offsetv: "5px",
 	},
 	"iphone-h": {
 		bkg: iphoneVPng,
@@ -40,16 +38,15 @@ var configMap = {
 		height: "693px",
 	},
 	"ipad-h": {
-		bkg: ipadHPng,
+		bkg: ipadVPng,
-		width: "433px",
+		rotate: true,
-		height: "326px",
+		width: "460px",
-		offsetv: "5px",
+		height: "320px",
 	},
 	"ipad-v": {
 		bkg: ipadVPng,
-		width: "324px",
+		width: "320px",
-		height: "433px",
+		height: "460px",
-		offsetv: "5px",
 	},
 };
 
@@ -82,7 +79,7 @@ function DeviceFrame(props) {
 					<p style={{ margin: "0",   }}>
 						{t("scan")}
 						<CopyToClipboard text={absoluteUrl} onCopy={() => setOpenPopup(true)}>
-							<img style={{ cursor: "pointer", width: "20px", height: "20px" }} src={copyPng} alt="复制链接" />
+							<img style={{ cursor: "pointer", width: "20px", height: "20px", marginLeft: "9px" }} src={copyPng} alt="复制链接" />
 						</CopyToClipboard>
 					</p>
 					

src/Components/pane/index.js

@@ -79,37 +79,50 @@ function Pane(props) {
 
 	return (
 		<div className="Pane">
-			<Select
+			<div>
-				id="mode-select"
+				{props.loading ? (
-				value={mode}
+					<CircularProgress color="inherit" />
-				onChange={(e) => modeChange(e)}
+				) : (
-				IconComponent={CustomIcon}
+					project && (
-				sx={{
+						<Select
-					width: "100%",
+							id="project-select"
-					height: '42px',
+							value={project}
-					border: "1px solid #757575",
+							onChange={(e) => projectSelect(e)}
-					background: "#535353",
+							IconComponent={CustomIcon}
-					borderRadius: '5px',
+							placeholder="选择项目"
-					color: "white",
+							sx={{
-					boxShadow: '0px 3px 0px 0px rgba(0, 0, 0, 0.3)',
+								width: "100%",
-					// '&.MuiOutlinedInput-notchedOutline': {
+								height: '42px',
-					// 		borderColor: '#757575', // 设置焦点时的边框颜色为红色
+								border: "1px solid #757575",
-					// 	},
+								background: "#535353",
-					'&.Mui-focused': {
+								borderRadius: '5px',
-						borderColor: '#757575',
+								color: "white",
-						'&.MuiOutlinedInput-notchedOutline': {
+								boxShadow: '0px 3px 0px 0px rgba(0, 0, 0, 0.3)',
-							borderColor: '#757575 !important',
+								// '&.MuiOutlinedInput-notchedOutline': {
-						},
+								// 		borderColor: '#757575', // 设置焦点时的边框颜色为红色
-    				},
+								// 	},
-				}}
+								'&.Mui-focused': {
-				MenuProps={{
+									borderColor: '#757575',
-					classes: {
+									'&.MuiOutlinedInput-notchedOutline': {
-						paper: "selectPager",
+										borderColor: '#757575 !important',
-					},
+									},
-				}}>
+								},
-				<MenuItem value={"normal"}>Normal Preview</MenuItem>
+							}}
-				<MenuItem value={"dynamic"}>Dynamic Preview</MenuItem>
+							MenuProps={{
-			</Select>
+								classes: {
+									paper: "selectPager",
+								},
+							}}
+						>
+							{props.projects.map((pName, i) => (
+								<MenuItem key={i} value={pName}>
+									{pName}
+								</MenuItem>
+							))}
+						</Select>
+					)
+				)}
+			</div>
 			<List
 			sx={{
 				paddingTop: '20px'
@@ -126,14 +139,12 @@ function Pane(props) {
 							background: '#535353',
 							border: '1px solid #757575',
 							boxShadow: '0px 3px 0px 0px rgba(0, 0, 0, 0.3)',
-							paddingLeft: '52px',
+							paddingLeft: '23px',
-							paddingTop: '16px',
-							paddingBottom: '8px',
 							paddingRight: '20px',
 							marginBottom: '14px'
 							
 						}}>
-						<div style={{ display: "flex", flexDirection: 'column', justifyContent: 'center', alignItems: "center", width: '98px' }}>
+						<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>
@@ -152,34 +163,7 @@ function Pane(props) {
 					</ListItem>
 				))}
 			</List>
-			<div
+			
-				style={{
-					marginTop: "50px",
-					color: "white",
-				}}>
-				{props.loading ? (
-					<CircularProgress color="inherit" />
-				) : (
-					project && (
-						<Select
-							id="project-select"
-							value={project}
-							onChange={(e) => projectSelect(e)}
-							placeholder="选择项目"
-							sx={{
-								background: "rgb(115, 158, 211)",
-								width: "80%",
-								color: "white",
-							}}>
-							{props.projects.map((pName, i) => (
-								<MenuItem key={i} value={pName}>
-									{pName}
-								</MenuItem>
-							))}
-						</Select>
-					)
-				)}
-			</div>
 			{!props.hideLogo && <div className="bottomLogo"><img src={logoPanePng} alt="logo" width={"100%"} /></div> }
 		</div>
 	);