feat: 首页ui改版

src/App.css

@@ -48,20 +48,22 @@
 }
 
 .pane-btn {
-  border-radius: 4px;
-  border: 0;
+  border-radius: 8px;
+  border: 3px solid #494949;
   display: inline-block;
-  height: 30px;
-  line-height: 30px;
-  width: 150px;
+  height: 62px;
+  line-height: 62px;
+  width: 62px;
   cursor: pointer;
   outline: none;
   font-weight: bold;
+  background: #494949;
+  color: #eee;
+  box-sizing: border-box;
 }
 
 .pane-btn.checked {
-  background-color: #02b564;
-  color: white;
+  border: 3px solid #00DE7A;
 }
 
 .pane-btn + .pane-btn {
@@ -85,17 +87,16 @@
   display: flex;
   align-items: center;
   position: fixed;
-  right: 40px;
-  top: 30px;
+  right: 24px;
+  top: 24px;
   z-index: 1000;
 }
 
 .language-select-container .language-select {
-  margin-left: 10px;
-  width: 135px;
-  height: 35px;
-  background-color: #eef1f6;
-  color: #333333;
+  width: 156px;
+  height: 42px;
+  background-color: #36383A;
+  color: #EEEEEE;
   font-size: 14px;
   display: flex;
   align-items: center;
@@ -103,12 +104,16 @@
 
 .language-select-warpper {
   position: relative;
+  border-radius: 5px;
+  background: #36383A;
+  border: 1px solid #5B5B5B;
+  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.3);
 }
 
 .language-select-warpper .language-icon {
   position: absolute;
-  left: 18px;
-  top: 8px;
+  left: 14px;
+  top: 11px;
   z-index: 2000;
 }
 

src/App.js

@@ -28,6 +28,8 @@ import queryString from "query-string";
 import { withTranslation } from "react-i18next";
 import i18n from "i18next";
 import languageImg from "./images/language.png";
+import Arrow from './images/arrow.svg'
+
 
 class App extends React.Component {
   constructor(props) {

src/Components/deviceFrame/index.css

@@ -1,33 +1,42 @@
 .deviceFrameContainer {
   width: 100%;
+  height: 100vh;
   flex: 1 1 0%;
   align-items: center;
   position: relative;
   display: flex;
-  height: 100vh;
   justify-content: center;
   overflow: hidden;
+  background: #36383A;
 }
 
 .refreshButton {
   position: absolute;
-  left: 30px;
-  bottom: 30px;
+  right: 24px;
+  bottom: 24px;
   cursor: pointer;
 }
 
 .qrCode {
   position: absolute;
-  right: 40px;
-  top: 100px;
+  right: 24px;
+  top: 82px;
+  background: #DBDBDB;
+  border-radius: 5px;
+  padding-top: 14px;
+  padding-left: 14px;
+  padding-right: 14px;
+  padding-bottom: 11px;
 }
 
 .qrCode p {
   display: flex;
   align-items: center;
-  padding-left: 23px;
+  padding-left: 22px;
+  color: #666666;
+  font-size: 14px;
 }
 
 .qrCode img {
-    margin-left: 6px;
+    margin-left: 8px;
 }

src/Components/deviceFrame/index.js

@@ -75,13 +75,14 @@ function DeviceFrame(props) {
 			<img src={refreshButtonPng} alt="refresh" onClick={() => refresh()} className="refreshButton" />
 			{props.qrDataUrl && (
 				<div className="qrCode">
-					<p style={{ margin: "0" }}>
+					<img src={props.qrDataUrl} alt="qr code" />
+					<p style={{ margin: "0",   }}>
 						{t("scan")}
 						<CopyToClipboard text={absoluteUrl} onCopy={() => setOpenPopup(true)}>
 							<img style={{ cursor: "pointer", width: "20px", height: "20px" }} src={copyPng} alt="复制链接" />
 						</CopyToClipboard>
 					</p>
-					<img src={props.qrDataUrl} alt="qr code" />
+					
 				</div>
 			)}
 			<Snackbar

src/Components/pane/index.css

@@ -1,9 +1,12 @@
 .Pane {
-    width: 350px;
-    background-color: rgb(52, 90, 176);
+    width: 370px;
+    background-color: #535353;
     min-height: 100vh;
+    padding: 24px;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
+    position: relative;
 }
 
 .modeSelect {
@@ -13,18 +16,20 @@
 
 .deviceIcon {
     width: auto;
-    height: 80px;
-    margin-right: 10px;
-    margin-bottom: -24px;
+    height: 76px;
+    margin-bottom: 10px;
+}
+.deviceText {
+
 }
 
 .deviceContent {
-    text-align: left;
-    color: white;
+    height: 100%;
+    color: #EEEEEE;
 }
 
 .deviceButtons {
-    width: 160px;
+    height: 100%;
     display: flex;
     justify-content: space-between;
 }
@@ -39,5 +44,16 @@
 }
 
 .bottomLogo {
-    margin-top: auto;
-}
+    position: absolute;
+    width: 280px;
+    bottom: 24px;
+    left: 68px;
+}
+
+.MuiSelect-select.MuiSelect-select::after {
+    content: '';
+    background-image: url('../../images/arrow.png'); /* 使用你的自定义图标 */
+    background-repeat: no-repeat;
+    background-position: center;
+    color: green; /* 改变箭头颜色 */
+  }

src/Components/pane/index.js

@@ -4,8 +4,11 @@ import MenuItem from "@mui/material/MenuItem";
 import { useEffect, useState } from "react";
 import { CircularProgress, List, ListItem } from "@mui/material";
 import ipadPng from "../../images/ipad.png";
+import ipadTextPng from "../../images/ipad-text.png";
 import iphonePng from "../../images/iphone.png";
+import iphoneTextPng from '../../images/iphone-text.png'
 import androidPng from "../../images/android.png";
+import androidTextPng from '../../images/android-text.png'
 import logoPanePng from "../../images/logo-pane.png";
 import horizentalChecked from "../../images/horizental-button-checked.png";
 import horizentalButton from "../../images/horizental-button.png";
@@ -18,18 +21,21 @@ var deviceConfigs = [
 	{
 		name: "iPhone",
 		icon: iphonePng,
+		text: iphoneTextPng,
 		vertical: "iphone-v",
 		horizental: "iphone-h",
 	},
 	{
 		name: "Android Phone",
 		icon: androidPng,
+		text: androidTextPng,
 		vertical: "android-v",
 		horizental: "android-h",
 	},
 	{
 		name: "iPad",
 		icon: ipadPng,
+		text: ipadTextPng,
 		vertical: "ipad-v",
 		horizental: "ipad-h",
 	},
@@ -68,13 +74,23 @@ function Pane(props) {
 				id="mode-select"
 				value={mode}
 				onChange={(e) => modeChange(e)}
-				startAdornment={<img src={modeSelectPng} height={"30px"} alt="selected" />}
 				sx={{
 					width: "100%",
-					border: "none",
-					background: "rgb(69, 115, 191)",
+					height: '42px',
+					border: "1px solid #757575",
+					background: "#535353",
+					borderRadius: '5px',
 					color: "white",
-					fontWeight: "bold",
+					boxShadow: '0px 3px 0px 0px rgba(0, 0, 0, 0.3)',
+					// '&.MuiOutlinedInput-notchedOutline': {
+					// 		borderColor: '#757575', // 设置焦点时的边框颜色为红色
+					// 	},
+					'&.Mui-focused': {
+						borderColor: '#757575',
+						'&.MuiOutlinedInput-notchedOutline': {
+							borderColor: '#757575',
+						},
+    				},
 				}}
 				MenuProps={{
 					classes: {
@@ -84,19 +100,34 @@ function Pane(props) {
 				<MenuItem value={"normal"}>Normal Preview</MenuItem>
 				<MenuItem value={"dynamic"}>Dynamic Preview</MenuItem>
 			</Select>
-			<List>
+			<List
+			sx={{
+				paddingTop: '20px'
+			}}
+			>
 				{deviceConfigs.map((_device) => (
 					<ListItem
 						key={_device.name}
 						sx={{
 							display: "flex",
 							textAlign: "center",
+							justifyContent: "space-between",
+							borderRadius: '5px',
+							background: '#535353',
+							border: '1px solid #757575',
+							boxShadow: '0px 3px 0px 0px rgba(0, 0, 0, 0.3)',
+							paddingLeft: '52px',
+							paddingTop: '16px',
+							paddingBottom: '8px',
+							paddingRight: '20px',
+							marginBottom: '14px'
+							
 						}}>
-						<div style={{ width: "120px", alignItems: "center" }}>
-							<img className="deviceIcon" src={_device.icon} 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">
-							<p style={{ margin: "14px 0" }}>{_device.name}</p>
 							<div className="deviceButtons">
 								<button className={`pane-btn  ${device === _device.horizental ? "checked" : ""}`} onClick={() => deviceChange(_device.horizental)}>
 									{t("horizontal")}

src/apis/loginApi.js

@@ -1,4 +1,5 @@
-var BaseUrl = "https://api.soyootech.com/";
+// var BaseUrl = "https://api.soyootech.com/";
+var BaseUrl = "api/";
 export async function UserLogin(loginForm) {
   try {
     var response = await fetch(BaseUrl + "SoyooUser/previewlogin", {

src/images/arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="13.435028612613678" height="13.435028612613678" viewBox="0 0 13.435028612613678 13.435028612613678"><g transform="matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-4.335786265016024,2.9675144346638707)"><path d="M0.41421353816986084,15.217514306306839L8.91421353816986,15.217514306306839L8.91421353816986,13.217514306306839L2.414213538169861,13.217514306306839L2.414213538169861,6.717514306306839L0.41421353816986084,6.717514306306839L0.41421353816986084,15.217514306306839Z" fill-rule="evenodd" fill="#D8D8D8" fill-opacity="1"/></g></svg>

src/setupProxy.js

@@ -1,12 +1,12 @@
 const { createProxyMiddleware } = require("http-proxy-middleware");
 
 module.exports = function (app) {
-	// app.use(
-	// 	"/api",
-	// 	createProxyMiddleware({
-	// 		target: "https://api.soyootech.com/",
-	// 		changeOrigin: true,
-	// 		pathRewrite: { "^/api": "" },
-	// 	})
-	// );
+	app.use(
+		"/api",
+		createProxyMiddleware({
+			target: "https://api.soyootech.com/",
+			changeOrigin: true,
+			pathRewrite: { "^/api": "" },
+		})
+	);
 };