polish style

master
Aaron Yu 2021-12-25 00:26:00 +08:00
parent 8af62b5566
commit ae94e98ecf
12 changed files with 90 additions and 65 deletions

View File

@ -1,14 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
@ -25,8 +23,9 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
@ -39,5 +38,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</body>
</html>

View File

@ -1,6 +1,7 @@
.App {
text-align: center;
display: flex;
align-items: stretch;
}
.App-logo {

View File

@ -38,16 +38,17 @@ class App extends React.Component {
});
}
fetchData() {
fetch('http://123.56.161.61:1157/home/GetServerJsonData', {
async fetchData() {
var response = await fetch('http://123.56.161.61:1157/home/GetServerJsonData', {
headers: {
'Content-Type': 'application/json'
},
}).then((response) =>
response.json()
.then(projects => this.setState({
projects
})));
});
var projects = await response.json();
this.setState({
projects,
selectedProject: projects[0]
})
}
UpdateSetting(obj) {
@ -72,8 +73,8 @@ class App extends React.Component {
mode={mode}
onModeChange={(_mode) => this.setMode(_mode) }
projects={projects}
device={device}
onProjectSelect={(project) => {
console.log(project)
this.setSelectedProject(project)
}}
onDeviceChange={(_device) => this.setDevice(_device)}/>

View File

@ -0,0 +1,10 @@
.deviceFrameContainer {
width: 100%;
flex: 1 1 0%;
align-items: center;
position: relative;
display: flex;
height: 100vh;
justify-content: center;
overflow: hidden;
}

View File

@ -48,27 +48,22 @@ function DeviceFrame(props) {
useEffect(() => {
setConfig(configMap[props.device])
console.log(props.device, config)
}, [props.device, config])
var refresh = () => setIframeKey(Math.round(Math.random() * 10000));
useEffect(() => {
console.log(props.htmlUrl)
refresh()
}, [props.htmlUrl])
return (
<div style={{
width: '100%',
flex: 1,
alignItems: 'center',
position: 'relative'
}}>
<div className='deviceFrameContainer'>
<img src={refreshButtonPng} alt='refresh' onClick={() => refresh()} style={{
position: 'absolute',
left: '20px',
bottom: '20px',
left: '30px',
bottom: '30px',
cursor: 'pointer'
}}/>
<div>

View File

@ -1,8 +1,7 @@
.Pane {
width: 25vw;
min-width: 200px;
width: 30vw;
background-color: rgb(52, 90, 176);
height: 100vh;
min-height: 100vh;
}
.modeSelect {
@ -17,5 +16,16 @@
}
.deviceContent {
text-align: left;
color: white;
}
.deviceButtons {
width: 160px;
display: flex;
justify-content: space-between;
}
.deviceButtons img {
cursor: pointer;
}

View File

@ -6,6 +6,10 @@ import { Chip, List, ListItem } from '@mui/material';
import ipadPng from '../../images/ipad.png'
import iphonePng from '../../images/iphone.png'
import androidPng from '../../images/android.png'
import horizentalChecked from '../../images/horizental-button-checked.png'
import horizentalButton from '../../images/horizental-button.png'
import verticalChecked from '../../images/vertical-button-checked.png'
import verticalButton from '../../images/vertical-button.png'
var deviceConfigs = [
{
@ -79,21 +83,20 @@ function Pane(props) {
key={_device.name}
sx={{
display: 'flex',
alignItems: 'center'
textAlign: 'center'
}}>
<div style={{ width: '120px', alignItems: 'center' }}>
<img className='deviceIcon' src={_device.icon} alt={_device.name}/>
</div>
<div className='deviceContent'>
<p>{_device.name}</p>
<p style={{ margin: "14px 0"}}>{_device.name}</p>
<div className='deviceButtons'>
<Chip label='横屏'
onClick={() => deviceChange(_device.horizental)}
color={ device === _device.horizental ? 'success' : 'default'}
sx={{
marginRight: '10px'
}}/>
<Chip label='竖屏'
onClick={() => deviceChange(_device.vertical)}
color={ device === _device.vertical ? 'success' : 'default'}/>
<img src={device === _device.horizental ? horizentalChecked : horizentalButton}
alt='horizental'
onClick={() => deviceChange(_device.horizental)}/>
<img src={device === _device.vertical ? verticalChecked : verticalButton}
alt='vertical'
onClick={() => deviceChange(_device.vertical)}/>
</div>
</div>
</ListItem>)

View File

@ -23,7 +23,10 @@ function SettingFrame(props) {
<ListItem key={rowIndex}>
<span>{rowTitles[rowIndex]}</span>
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
{props.setting && props.setting[rowKey] && Array.from(props.setting[rowKey].split('|')).map((text, index) => (
{(props.setting && props.setting[rowKey]
? Array.from(props.setting[rowKey].split('|'))
: ['无', '无', '无'])
.map((text, index) => (
<Grid item xs={2} sm={4} md={4} key={index}>
<div style={{
backgroundImage: `url('${settingCardPng}')`,
@ -62,7 +65,8 @@ function SettingFrame(props) {
cursor: 'pointer',
marginTop: '30px'
}}>
<img
{
props.setting && <img
src={generateButtonPng}
alt='generate'
style={{
@ -73,6 +77,7 @@ function SettingFrame(props) {
centreType: settingArr[1]+'',
middleType: settingArr[2]+''
})}/>
}
</div>
</div>
)

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 622 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 596 B