feat: 修改样式

src/App.css

@@ -52,6 +52,7 @@
   border: 0;
   display: inline-block;
   height: 30px;
+  line-height: 30px;
   width: 150px;
   cursor: pointer;
   outline: none;
@@ -91,8 +92,24 @@
 
 .language-select-container .language-select {
   margin-left: 10px;
-	width: 120px;
+  width: 135px;
-	height: 30px;
+  height: 35px;
+  background-color: #eef1f6;
+  color: #333333;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.language-select-warpper {
+  position: relative;
+}
+
+.language-select-warpper .language-icon {
+  position: absolute;
+  left: 18px;
+  top: 8px;
+  z-index: 2000;
 }
 
 .language-select-container .language-select fieldset {

src/App.js

@@ -8,7 +8,12 @@ import waterMarkPng from "./images/water-mark.png";
 import React from "react";
 import SettingFrame from "./Components/settingsFrame";
 import QrCode from "qrcode";
-import { getLoginInfo, getProjectSettingValue, setLoginInfo, setProjectSetting } from "./storage";
+import {
+  getLoginInfo,
+  getProjectSettingValue,
+  setLoginInfo,
+  setProjectSetting,
+} from "./storage";
 import Select from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
 import Button from "@mui/material/Button";
@@ -22,6 +27,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import queryString from "query-string";
 import { withTranslation } from "react-i18next";
 import i18n from "i18next";
+import languageImg from "./images/language.png";
 
 class App extends React.Component {
   constructor(props) {
@@ -50,7 +56,8 @@ class App extends React.Component {
   componentDidMount() {
     const loginInfo = getLoginInfo();
     var tenant = utils.getTenant();
-		const hideLogo = queryString.parseUrl(window.location.href)?.query?.hideLogo;
+    const hideLogo = queryString.parseUrl(window.location.href)?.query
+      ?.hideLogo;
     this.setState({ hideLogo: !!hideLogo });
     if (loginInfo && loginInfo.permissionPages.includes(tenant)) {
       this.fetchData();
@@ -96,9 +103,13 @@ class App extends React.Component {
 
   get selectedProjectUrl() {
     var { selectedProject } = this.state;
-		var settingValue = getProjectSettingValue(selectedProject?.Name) || [1, 1, 1];
+    var settingValue = getProjectSettingValue(selectedProject?.Name) || [
-		var rawUrl = selectedProject?.HtmlUrl ? encodeURI(selectedProject?.HtmlUrl) : "";
+      1, 1, 1,
-		rawUrl = rawUrl.replace("http:", () => "https:")
+    ];
+    var rawUrl = selectedProject?.HtmlUrl
+      ? encodeURI(selectedProject?.HtmlUrl)
+      : "";
+    rawUrl = rawUrl.replace("http:", () => "https:");
     if (rawUrl) {
       rawUrl += `?datanumber=${settingValue[0]}&datanumber1=${settingValue[1]}&datanumber2=${settingValue[2]}&lunaOrHtml=false`;
     }
@@ -178,11 +189,26 @@ class App extends React.Component {
   }
 
   UpdateSetting(obj) {
-		setProjectSetting(this.state.selectedProject.Name, [+obj.topType, +obj.centreType, +obj.middleType]);
+    setProjectSetting(this.state.selectedProject.Name, [
+      +obj.topType,
+      +obj.centreType,
+      +obj.middleType,
+    ]);
   }
 
   render() {
-		var { mode, device, projects, selectedProject, dataUrl, loading, loginOpen, loginForm, hideLogo, language } = this.state;
+    var {
+      mode,
+      device,
+      projects,
+      selectedProject,
+      dataUrl,
+      loading,
+      loginOpen,
+      loginForm,
+      hideLogo,
+      language,
+    } = this.state;
     const { t } = this.props;
 
     return (
@@ -221,12 +247,20 @@ class App extends React.Component {
                   color: "red",
                   fontSize: "12px",
                   margin: "0 auto 0 10px",
-								}}>
+                }}
+              >
                 {t(this.state.loginErrorMessage)}
               </span>
             )}
             <FormControlLabel
-							control={<Checkbox checked={loginForm.keepLogin} onChange={(_, checked) => this.setLoginForm({ keepLogin: checked })} />}
+              control={
+                <Checkbox
+                  checked={loginForm.keepLogin}
+                  onChange={(_, checked) =>
+                    this.setLoginForm({ keepLogin: checked })
+                  }
+                />
+              }
               label={t("keepLoginStatus")}
             />
             <Button onClick={() => this.login()}>{t("submit")}</Button>
@@ -245,16 +279,12 @@ class App extends React.Component {
           onDeviceChange={(_device) => this.setDevice(_device)}
         />
         <div className="language-select-container">
-					<div>{t("language")}:</div>
+          <div className="language-select-warpper">
+            <img className="language-icon" src={languageImg} style={{ width: "18px" }} alt="" />
             <Select
               className="language-select"
               value={language}
               label={t("language")}
-						sx={{
-							background: "rgb(115, 158, 211)",
-							width: "80%",
-							color: "white",
-						}}
               onChange={(e) => {
                 let lang = e.target.value;
                 this.setState({
@@ -262,11 +292,17 @@ class App extends React.Component {
                 });
                 i18n.changeLanguage(lang);
                 localStorage.setItem("lang", lang);
-						}}>
+              }}
-						<MenuItem value="en">English</MenuItem>
+            >
-						<MenuItem value="zh">Chinese</MenuItem>
+              <MenuItem style={{ fontSize: "14px" }} value="en">
+                English
+              </MenuItem>
+              <MenuItem style={{ fontSize: "14px" }} value="zh">
+                简体中文
+              </MenuItem>
             </Select>
           </div>
+        </div>
         <div
           style={{
             display: "flex",
@@ -276,11 +312,21 @@ class App extends React.Component {
             backgroundPositionX: "right",
             backgroundPositionY: "bottom",
             backgroundRepeat: "no-repeat",
-					}}>
+          }}
+        >
           {mode === "normal" ? (
-						<DeviceFrame htmlUrl={this.selectedProjectUrl} device={device} qrDataUrl={dataUrl} refreshQrCode={() => this.refreshQrCode()} />
+            <DeviceFrame
+              htmlUrl={this.selectedProjectUrl}
+              device={device}
+              qrDataUrl={dataUrl}
+              refreshQrCode={() => this.refreshQrCode()}
+            />
           ) : (
-						<SettingFrame setting={selectedProject?.TextObjStr} settingValue={this.projectSettingValue} generate={(value) => this.UpdateSetting(value)} />
+            <SettingFrame
+              setting={selectedProject?.TextObjStr}
+              settingValue={this.projectSettingValue}
+              generate={(value) => this.UpdateSetting(value)}
+            />
           )}
         </div>
       </div>

src/Components/settingsFrame/index.js

@@ -2,7 +2,6 @@ import { Alert, Grid, List, ListItem, Snackbar } from "@mui/material";
 import { useEffect, useState } from "react";
 import "./index.css";
 import checkPng from "../../images/check.png";
-import generateButtonPng from "../../images/generate-button.png";
 import { useTranslation } from "react-i18next";
 
 var rows = ["TopText", "CentText", "MiddText"];
@@ -20,7 +19,8 @@ function SettingFrame(props) {
     <div
       style={{
         flex: 1,
-			}}>
+      }}
+    >
       <Snackbar
         open={openPopup}
         onClose={() => setOpenPopup(false)}
@@ -28,18 +28,28 @@ function SettingFrame(props) {
         anchorOrigin={{
           vertical: "top",
           horizontal: "right",
-				}}>
+        }}
+      >
         <Alert severity="success" sx={{ width: "100%" }}>
           {t("saveSuccess")}
         </Alert>
       </Snackbar>
-			<List>
+      <List style={{ width: "80%", margin: "auto" }}>
         {rows.map((rowKey, rowIndex) => (
           <ListItem key={rowIndex}>
-						<span>{t(rowTitles[rowIndex])}</span>
+            <span style={{ display: "inline-block", width: "40px" }}>
-						<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
+              {t(rowTitles[rowIndex])}
-							{(props.setting && props.setting[rowKey] ? Array.from(t(props.setting[rowKey]).split("|")) : [t("none"), t("none"), t("none")]).map((text, index) => (
+            </span>
-								<Grid item xs={2} sm={4} md={4} key={index}>
+            <Grid
+              container
+              spacing={{ xs: 2, md: 3 }}
+              columns={{ xs: 4, sm: 8, md: 12 }}
+            >
+              {(props.setting && props.setting[rowKey]
+                ? Array.from(t(props.setting[rowKey]).split("|"))
+                : [t("none"), t("none"), t("none")]
+              ).map((text, index) => (
+                <Grid item xs={4} sm={4} md={4} key={index}>
                   <div
                     className="setting-card"
                     style={{
@@ -55,7 +65,8 @@ function SettingFrame(props) {
                       var newSetting = settingArr.slice();
                       newSetting[rowIndex] = index + 1;
                       setSettingArr(newSetting);
-										}}>
+                    }}
+                  >
                     {text}
                     <img
                       src={checkPng}
@@ -64,7 +75,8 @@ function SettingFrame(props) {
                         position: "absolute",
                         right: "10px",
                         top: "10px",
-												display: index + 1 === settingArr[rowIndex] ? "block" : "none",
+                        display:
+                          index + 1 === settingArr[rowIndex] ? "block" : "none",
                       }}
                     />
                   </div>
@@ -76,10 +88,12 @@ function SettingFrame(props) {
       </List>
       <div
         style={{
+          width: "80%",
           alignItems: "center",
           cursor: "pointer",
-					marginTop: "30px",
+          margin: "30px auto 0",
-				}}>
+        }}
+      >
         {props.setting && (
           <button
             className="generate-btn"
@@ -91,7 +105,8 @@ function SettingFrame(props) {
               });
 
               setOpenPopup(true);
-						}}>
+            }}
+          >
             {t("generate")}
           </button>
         )}