From 8b1faf408dab72ecead92d43a4e33fcaf3f47e04 Mon Sep 17 00:00:00 2001 From: icefire <1028247921@qq.com> Date: Mon, 14 Oct 2024 22:38:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5ui=E6=94=B9=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 37 ++++++++++++--------- src/App.js | 2 ++ src/Components/deviceFrame/index.css | 23 +++++++++---- src/Components/deviceFrame/index.js | 5 +-- src/Components/pane/index.css | 36 ++++++++++++++------ src/Components/pane/index.js | 47 ++++++++++++++++++++++----- src/apis/loginApi.js | 3 +- src/images/android-text.png | Bin 0 -> 1713 bytes src/images/android.png | Bin 1462 -> 912 bytes src/images/arrow.png | Bin 0 -> 201 bytes src/images/arrow.svg | 1 + src/images/copy.png | Bin 3251 -> 386 bytes src/images/ipad-text.png | Bin 0 -> 671 bytes src/images/ipad.png | Bin 1724 -> 474 bytes src/images/iphone-text.png | Bin 0 -> 918 bytes src/images/iphone.png | Bin 1701 -> 821 bytes src/images/language.png | Bin 6376 -> 778 bytes src/images/logo-pane.png | Bin 27036 -> 9774 bytes src/images/refresh-button.png | Bin 1500 -> 1905 bytes src/setupProxy.js | 16 ++++----- 20 files changed, 118 insertions(+), 52 deletions(-) create mode 100644 src/images/android-text.png create mode 100644 src/images/arrow.png create mode 100644 src/images/arrow.svg create mode 100644 src/images/ipad-text.png create mode 100644 src/images/iphone-text.png diff --git a/src/App.css b/src/App.css index 6f8637b..b5686ad 100644 --- a/src/App.css +++ b/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; } diff --git a/src/App.js b/src/App.js index abce3ce..8b8f735 100644 --- a/src/App.js +++ b/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) { diff --git a/src/Components/deviceFrame/index.css b/src/Components/deviceFrame/index.css index 10411df..a6ba0f9 100644 --- a/src/Components/deviceFrame/index.css +++ b/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; } \ No newline at end of file diff --git a/src/Components/deviceFrame/index.js b/src/Components/deviceFrame/index.js index 7fd80ae..28a08eb 100644 --- a/src/Components/deviceFrame/index.js +++ b/src/Components/deviceFrame/index.js @@ -75,13 +75,14 @@ function DeviceFrame(props) { refresh refresh()} className="refreshButton" /> {props.qrDataUrl && (
-

+ qr code +

{t("scan")} setOpenPopup(true)}> 复制链接

- qr code +
)} modeChange(e)} - startAdornment={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) { Normal Preview Dynamic Preview - + {deviceConfigs.map((_device) => ( -
- {_device.name} +
+ {_device.name} + {_device.name}
-

{_device.name}