首页自适应优化

src/layout/main.less

@@ -29,6 +29,8 @@
         flex-direction: column;
         flex: 1;
         width: calc(100% - 100px);
+        // overflow-x: hidden;
+        overflow: auto;
       }
 
       &-sider {

src/routes/Home.js

@@ -108,22 +108,19 @@ const WorkBench = (props) => {
               style={{
                 marginLeft: "20px",
                 marginRight: "20px",
+                whiteSpace: "nowrap",
               }}
             >
               {type}
             </div>
 
-            <div
+            <div className="home-work-title">{item.NOTICE_TITLE}</div>
-              className="home-work-title"
-              style={{ flex: 1, alignItems: "flex-start" }}
-            >
-              {item.NOTICE_TITLE}
-            </div>
             <div
               className="home-work-date"
               style={{
-                width: "200px",
+                // width: "200px",
-                marginRight: "100px",
+                whiteSpace: "nowrap",
+                marginRight: "20px",
               }}
             >
               开始时间：{item.TASK_STARTDT}
@@ -131,8 +128,9 @@ const WorkBench = (props) => {
             <div
               className="home-work-date"
               style={{
-                width: "200px",
+                // width: "200px",
-                marginRight: "50px",
+                whiteSpace: "nowrap",
+                marginRight: "10px",
               }}
             >
               结束时间：{item.TASK_ENDDT}
@@ -1575,10 +1573,10 @@ class Home extends React.Component {
               width: "100%",
               height: "25%",
               display: "flex",
-              padding: "0px 20px",
+              // padding: "0px 20px",
               margin: "0px",
               minHeight: "242px",
-              minWidth: "1704px",
+              minWidth: "1136px",
               // justifyContent: "space-between",
               // backgroundColor: "#fff",
             }}
@@ -1592,7 +1590,7 @@ class Home extends React.Component {
                 flexDirection: "column",
                 padding: "0px 20px",
                 borderRadius: "5px 0px 0px 5px",
-                minWidth: "578px",
+                minWidth: "453px",
               }}
             >
               <div
@@ -1732,14 +1730,14 @@ class Home extends React.Component {
                   </div>
 
                   <div style={{ display: "flex", flexDirection: "row" }}>
-                    <div
+                    {/* <div
                       className="home-userInfo-tabs"
                       style={{
                         marginRight: "10px",
                       }}
                     >
                       工号：{this.state.userInfo.CODE}
-                    </div>
+                    </div> */}
                     <div
                       className="home-userInfo-tabs"
                       style={{
@@ -1759,38 +1757,46 @@ class Home extends React.Component {
                 </div>
               </div>
               <div className="home-userInfo-card">
-                <UserInfo
+                <Col span={6}>
-                  data={this.state.workTotal.todoCount}
+                  <UserInfo
-                  title="待办事项"
+                    data={this.state.workTotal.todoCount}
-                  color="#2177d5"
+                    title="待办事项"
-                  showAll={() => {
+                    color="#2177d5"
-                    this.showAll("1");
+                    showAll={() => {
-                  }}
+                      this.showAll("1");
-                />
+                    }}
-                <UserInfo
+                  />
-                  data={this.state.workTotal.timeOverCount}
+                </Col>
-                  title="待办超时"
+                <Col span={6}>
-                  color="#f76707"
+                  <UserInfo
-                  showAll={() => {
+                    data={this.state.workTotal.timeOverCount}
-                    this.showAll("4");
+                    title="待办超时"
-                  }}
+                    color="#f76707"
-                />
+                    showAll={() => {
-                <UserInfo
+                      this.showAll("4");
-                  data={this.state.workTotal.doneCount}
+                    }}
-                  title="已办事项"
+                  />
-                  color="#48a447"
+                </Col>
-                  showAll={() => {
+                <Col span={6}>
-                    this.showAll("2");
+                  <UserInfo
-                  }}
+                    data={this.state.workTotal.doneCount}
-                />
+                    title="已办事项"
-                <UserInfo
+                    color="#48a447"
-                  data={this.state.workTotal.todayNewCount}
+                    showAll={() => {
-                  title="今日提醒"
+                      this.showAll("2");
-                  color="#fcc419"
+                    }}
-                  showAll={() => {
+                  />
-                    this.showAll("3");
+                </Col>
-                  }}
+                <Col span={6}>
-                />
+                  <UserInfo
+                    data={this.state.workTotal.todayNewCount}
+                    title="今日提醒"
+                    color="#fcc419"
+                    showAll={() => {
+                      this.showAll("3");
+                    }}
+                  />
+                </Col>
               </div>
             </Col>
             {/* <div style={{ width: "30px" }}></div> */}
@@ -1874,7 +1880,7 @@ class Home extends React.Component {
                 borderRadius: "5px",
                 display: "flex",
                 flexDirection: "column",
-                minWidth: "466px",
+                minWidth: "344px",
               }}
             >
               <div className="home-always-title">
@@ -1955,12 +1961,14 @@ class Home extends React.Component {
               width: "100%",
               height: "40%",
               display: "flex",
-              padding: "0px 20px",
+              // padding: "0px 20px",
               margin: "30px 0px",
-              justifyContent: "space-between",
+              // justifyContent: "space-between",
               alignItems: "center",
               minHeight: "388px",
-              minWidth: "1704px",
+              overflow:'hidden',
+              // minWidth: "1204px",
+              minWidth: "1136px",
               // backgroundColor: "#fff",
             }}
           >
@@ -1973,8 +1981,9 @@ class Home extends React.Component {
                 flexDirection: "column",
                 padding: "0px",
                 borderRadius: "5px",
+                overflow:'hidden',
                 flex: 1,
-                minWidth: "1168px",
+                // minWidth: "768px",
               }}
             >
               <div className="home-always-title">
@@ -2125,7 +2134,7 @@ class Home extends React.Component {
                 borderRadius: "5px",
                 display: "flex",
                 flexDirection: "column",
-                minWidth: "466px",
+                minWidth: "344px",
               }}
             >
               <div className="home-always-title">
@@ -2200,7 +2209,8 @@ class Home extends React.Component {
             style={{
               margin: "0px 0px 10px 0px",
               minHeight: "275px",
-              minWidth: "1704px",
+              // minWidth: "1204px",
+              minWidth: "1136px",
             }}
           >
             <Col
@@ -2285,7 +2295,7 @@ class Home extends React.Component {
                 borderRadius: "5px",
                 display: "flex",
                 flexDirection: "column",
-                minWidth: "466px",
+                minWidth: "344px",
               }}
             >
               <div className="home-always-title">

src/routes/dashboard.css

@@ -34,6 +34,7 @@
   padding: 3px 10px;
   border-radius: 15px;
   border: 1px solid #55c596;
+  white-space: nowrap;
 }
 :global(.home-userInfo-card) {
   height: 50%;
@@ -52,7 +53,8 @@
   height: 100%;
   justify-content: space-between;
   border-radius: 10px;
-  width: calc(25% - 10px);
+  min-width: 100px;
+  /* width: calc(25% - 10px); */
 }
 :global(.home-userInfo-pad) {
   display: flex;
@@ -69,6 +71,7 @@
   color: #303133;
   font-weight: bold;
   white-space: nowrap;
+  margin-right: 5px;
 }
 :global(.home-userInfo-content) {
   font-size: 24px;
@@ -143,7 +146,7 @@
   width: 100%;
   height: calc(35% - 70px);
   display: flex;
-  padding: 0px 20px;
+  /* padding: 0px 20px; */
   justify-content: space-between;
   align-items: center;
 }
@@ -173,8 +176,11 @@
 :global(.home-rank-name) {
   color: #303133;
   font-size: 13px;
-  margin-right: 40px;
+  margin-right: 20px;
+  width: 90px;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 :global(.home-img) {
   object-fit: contain;
@@ -328,10 +334,12 @@
   font-size: 15px;
   color: #303133;
   padding: 5px 0px;
-  font-weight: bold;
+  /* font-weight: bold; */
   white-space: nowrap;
+  /* width: 250px; */
   overflow: hidden;
   text-overflow: ellipsis;
+  flex: 1;
 }
 :global(.home-work-date) {
   color: #909399;
@@ -349,7 +357,7 @@
   flex-direction: column;
   background-color: #fff;
   border-radius: 5px;
-  min-width: 574px;
+  /* min-width: 374px; */
 }
 :global(.home-setting) {
   display: flex;