feat: width fix

Xutaotaotao · May 7, 2024 · 99b7412 · 99b7412
1 parent 0a5ddeb
commit 99b7412
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 12 deletions.
diff --git a/src/pages/imageCompress.tsx b/src/pages/imageCompress.tsx
@@ -69,8 +69,8 @@ export default function ImageCompress() {
   }
 
   return (
-    <Row gutter={16}>
-      <Col span={6}>
+    <Row gutter={[16, 16]}>
+      <Col lg={6} xs={24}>
         <Card
           title="设置"
           styles={{ body: { height: "calc(100vh - 150px", overflow: "auto" } }}
@@ -125,7 +125,7 @@ export default function ImageCompress() {
           </Form>
         </Card>
       </Col>
-      <Col span={18}>
+      <Col lg={18} xs={24}>
         {currentImg ? (
           <div style={{ height: "calc(100vh - 100px)", overflow: "auto" }}>
             <Card

diff --git a/src/pages/imageSlicing.tsx b/src/pages/imageSlicing.tsx
@@ -210,8 +210,8 @@ const ImageSlicing = () => {
   }, [customX, customY, imageRef.current]);
 
   return (
-    <Row>
-      <Col span={5}>
+    <Row gutter={24}>
+      <Col lg={5} xs={24}>
         <RadioGroup
           type="pureCard"
           direction="horizontal"
@@ -289,7 +289,7 @@ const ImageSlicing = () => {
           ) : null}
         </Space>
       </Col>
-      <Col span={17} offset={1}>
+      <Col lg={19} xs={24}>
         {fileList.length ? (
           <div className="image-container">
             <div

diff --git a/src/pages/index.scss b/src/pages/index.scss
@@ -1,7 +1,6 @@
 .home-container {
   width: 100%;
   height: calc(100vh - 100px);
-  padding: 20px;
 }
 
 .image-container {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -18,16 +18,16 @@ export default function AppPage() {
 
   return (
     <div className="home-container">
-      <Row style={{width: '100%',padding:"0 120px",marginTop: 200}}>
-        <Col span={12} style={{ display: 'flex', justifyContent: 'center',flexDirection: 'column' }}>
+      <Row justify="center" align="middle" gutter={[20, 20]} style={{height:'100%'}}>
+        <Col xs={22} lg={10}>
           <Title >专注工具，助力高效</Title>
           <Title heading={5} style={{ marginTop: 20 }} >完全本地化工具，无需云端，不担心隐私泄露</Title>
           <Space style={{ marginTop: 20 }}>
           <Button onClick={goHome} type="primary" size="large" style={{ margin: '8px 0' }}>开始使用</Button>
           <Button onClick={goGithub} size="large" style={{ margin: '8px 0' }}>Github</Button>
           </Space>
         </Col>
-        <Col span={12} style={{textAlign: 'center' }}>
+        <Col xs={22} lg={10}>
           <img style={{ width: '90%' }} src={bigLogo} alt="logo" />
         </Col>
       </Row>

diff --git a/src/pages/jsonFormatting.tsx b/src/pages/jsonFormatting.tsx
@@ -18,10 +18,10 @@ const JsonFormatting = () => {
   }
 
   return <Row gutter={[16, 16]}>
-    <Col span={10}>
+    <Col lg={10} xs={24}>
       <TextArea placeholder="请输入想要格式化的数据" className="json-input" onChange={(e) => handleJsonData(e)}/>
     </Col>
-    <Col span={14}>
+    <Col lg={14} xs={24}>
       <div className="json-input">
         <ReactJson src={jsonData} theme={"monokai"}/>
       </div>