首页优化

src/index.css

@@ -105,6 +105,15 @@ body {
   padding: 36px 5px 10px 5px;
   min-width: 375px;
 }
+:global(.ant-modal.antd-modal-homescreen) {
+  top    : 0;
+  width  : 100% !important;
+  height : 100%;
+  z-index: 100;
+  position: fixed;
+  padding: 36px 40px 40px 40px;
+  min-width: 375px;
+}
 
 :global(.ant-modal.antd-modal-fullscreen > .ant-modal-content) {
   height: 100%;
@@ -115,6 +124,15 @@ body {
   padding   : 0;
   max-height: unset;
 }
+:global(.ant-modal.antd-modal-homescreen > .ant-modal-content) {
+  height: 100%;
+}
+
+:global(.ant-modal.antd-modal-homescreen > .ant-modal-content > .ant-modal-body) {
+  height    : calc(100% - 55px);
+  padding   : 0;
+  max-height: unset;
+}
 
 /** 全屏弹窗样式 ===end=== **/
 

src/layout/sider.less

@@ -244,18 +244,18 @@
       display: grid;
       grid-template-rows: auto;
       grid-template-columns: auto;
-      grid-template-columns: repeat(auto-fill, 170px);
+      grid-template-columns: repeat(auto-fill, 180px);
       justify-content: space-between;
       //   grid-gap: 5px;
       /*  声明了两行，行高分别为 50px 50px  */
       //   grid-template-rows: 50px;
-      margin: 10px 20px 10px 70px;
+      margin: 10px 20px 10px 55px;
     }
     &__shortMenuShowFlex {
       background-color: #fff;
       // border-top: 10px solid #f3f4f6;
-      padding: 30px 0px 20px 0px;
+      padding: 20px 0px 5px 0px;
-      margin-bottom: 20px;
+      margin-bottom: 10px;
       margin-right: 30px;
       box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
       border-radius: 10px;
@@ -309,7 +309,7 @@
       align-items: center;
       cursor: pointer;
       box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-      margin: 10px 0px;
+      margin: 8px 0px;
       padding: 10px;
       border-radius: 5px;
       // justify-content: center;

src/routes/Home.js

@@ -23,7 +23,14 @@ import {
   Dropdown,
   Menu,
   Empty,
-  Modal
+  Modal,
+  Divider,
+  Form,
+  Input,
+  Table,
+  Button,
+  DatePicker,
+  Select
 } from "antd";
 import styles from "./dashboard.css";
 import "slick-carousel/slick/slick.css";
@@ -34,6 +41,12 @@ import ModifyPassword from "../components/MainPage/ModifyPassword";
 import FoUserInfoShow from "../components/MainPage/FoUserInfoShow";
 import FormPage from "../components/FormPage";
 const { TabPane } = Tabs;
+const Option = Select.Option;
+const RangePicker = DatePicker.RangePicker;
+const formItemLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 14 },
+};
 const WorkBench = (props) => {
   return (
     <div>
@@ -118,7 +131,12 @@ const WorkBench = (props) => {
 };
 const UserInfo = (props) => {
   return (
-    <div className="home-userInfo">
+    <div
+      className="home-userInfo"
+      onClick={() => {
+        props.showAll();
+      }}
+    >
       <div className="home-userInfo-pad">
         <Icon
           type="schedule"
@@ -146,7 +164,15 @@ class Home extends React.Component {
       tableKey: "1",
       formVisible: false,
       noticeTitle: "",
+      searchVisible: false,
+      visibleTitle: "",
+      searchTodayVisible: false,
+      taskSelects: [],
       tmpData: {},
+      querySearch:{},
+      currentpageIndex:'1',
+      visibleStartTime: [],
+      visibleEndTime: [],
       completeName: [
         {
           name: "张森友",
@@ -199,6 +225,157 @@ class Home extends React.Component {
     this.dangerChange();
     this.getUser();
   }
+  showAll = (key) => {
+    const { tableData } = this.state;
+
+    if (key == "2") {
+      this.state.searchColumns = [
+        {
+          width: "450px",
+          title: "任务名称",
+          dataIndex: "NOTICE_TITLE",
+          key: "NOTICE_TITLE",
+          render: (text, record) => (
+            <span>
+              <a
+                onClick={() =>
+                  this.showEditModal(
+                    record.SOURCE_DATA_ID,
+                    record.SOURCE_FORMCODE,
+                    record.ID,
+                    record.NOTICE_TITLE,
+                    record.CODE
+                  )
+                }
+              >
+                {record.NOTICE_TITLE}
+              </a>
+            </span>
+          ),
+        },
+        {
+          title: "开始时间",
+          dataIndex: "TASK_STARTDT",
+          key: "TASK_STARTDT",
+        },
+        {
+          title: "结束时间",
+          dataIndex: "TASK_ENDDT",
+          key: "TASK_ENDDT",
+        },
+        {
+          title: "办结时间",
+          dataIndex: "TASK_DT",
+          key: "TASK_DT",
+        },
+      ];
+      this.setState({
+        searchVisible: true,
+        searchTodayVisible: false,
+        querySearch: {},
+      });
+    } else if (key === "3") {
+      this.state.searchColumns = [
+        {
+          width: "450px",
+          title: "提醒内容",
+          dataIndex: "NOTICE_TITLE",
+          key: "NOTICE_TITLE",
+          render: (text, record) => (
+            <span>
+              <a
+                onClick={() =>
+                  this.showTodayModal(
+                    record.SOURCE_DATA_ID,
+                    record.SOURCE_FORMCODE,
+                    record.ID,
+                    record.NOTICE_TITLE,
+                    record.CODE,
+                    record.TASK_STARTDT,
+                    record.NOTICE_STATUS
+                  )
+                }
+              >
+                {record.NOTICE_TITLE}
+              </a>
+            </span>
+          ),
+        },
+        {
+          title: "提醒时间",
+          dataIndex: "TASK_STARTDT",
+          key: "TASK_STARTDT",
+        },
+        {
+          title: "状态",
+          dataIndex: "NOTICE_STATUS",
+          key: "NOTICE_STATUS",
+          render: (text, record) => this.ShowStatus(record),
+        },
+      ];
+      this.setState({
+        searchVisible: false,
+        searchTodayVisible: true,
+        querySearch: {},
+      });
+    } else {
+      this.state.searchColumns = [
+        {
+          width: "450px",
+          title: "任务名称",
+          dataIndex: "NOTICE_TITLE",
+          key: "NOTICE_TITLE",
+          render: (text, record) => (
+            <span>
+              <a
+                onClick={() =>
+                  this.showEditModal(
+                    record.SOURCE_DATA_ID,
+                    record.SOURCE_FORMCODE,
+                    record.ID,
+                    record.NOTICE_TITLE,
+                    record.CODE
+                  )
+                }
+              >
+                {record.NOTICE_TITLE}
+              </a>
+            </span>
+          ),
+        },
+        {
+          title: "开始时间",
+          dataIndex: "TASK_STARTDT",
+          key: "TASK_STARTDT",
+        },
+        {
+          title: "结束时间",
+          dataIndex: "TASK_ENDDT",
+          key: "TASK_ENDDT",
+        },
+        {
+          title: "预警状态",
+          dataIndex: "NOTICE_TYPE",
+          key: "NOTICE_TYPE",
+          render: (text, record) => this.ShowState(record),
+        },
+      ];
+      this.setState({
+        searchVisible: true,
+        searchTodayVisible: false,
+        querySearch: {},
+      });
+    }
+    this.setState(
+      {
+        tableData,
+        currentpageIndex: key,
+      },
+      () => {
+        this.getBaseData(1, key);
+      }
+    );
+  };
   tabsCallback = (key) => {
     if (key == 1) {
       this.getBaseData(1, "1", 5);
@@ -231,6 +408,24 @@ class Home extends React.Component {
       e.CODE
     );
   };
+  ShowState(obj) {
+    var thisResult =
+      (Date.parse(obj.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000;
+    if (thisResult > 0) {
+      return "正常";
+    } else {
+      return <span style={{ color: "red" }}>超期</span>;
+    }
+  }
+  ShowStatus(obj) {
+    if (obj.NOTICE_STATUS === 0) {
+      return <span style={{ color: "red" }}>未读</span>;
+    } else if (obj.NOTICE_STATUS === 3) {
+      return "已读";
+    } else {
+      return "已办";
+    }
+  }
   showEditModal = (dataId, formCode, TaskID, title, taskCode) => {
     this.props.dispatch({
       type: "app/getDataByPost",
@@ -262,14 +457,11 @@ class Home extends React.Component {
         tmpData: newtmpData,
         currActivatedMenu: "",
       },
-      () =>{
+      () => {
         this.setState({
           formVisible: true,
-        })
+        });
       }
-      
-        
-        
     );
   };
   clearData = () => {
@@ -287,14 +479,38 @@ class Home extends React.Component {
     this.getBaseData(1, this.state.tableKey, 5);
     this.clearData();
   };
-  closeModal=()=>{
+  closeModal = () => {
     this.setState({
       formVisible: false,
-    })
+    });
-  }
+  };
   getBaseData = (pagination, key, limit) => {
     const current = pagination ? pagination.current : 1;
     const json = initFilter(this.props.login.OrgId, "", "CODE", 1, current);
+    const querySearch = this.state.querySearch;
+    for (var item in querySearch) {
+      if (item == "searchName") {
+        extendRule(json, "NOTICE_TITLE", 9, querySearch[item]);
+      }
+      if (item == "searchCode") {
+        extendRule(json, "CODE", 9, querySearch[item]);
+      }
+      if (item == "startTime1") {
+        extendRule(json, "TASK_STARTDT", 6, querySearch[item]);
+      }
+      if (item == "startTime2") {
+        extendRule(json, "TASK_STARTDT", 4, querySearch[item]);
+      }
+      if (item == "endTime1") {
+        extendRule(json, "TASK_ENDDT", 6, querySearch[item]);
+      }
+      if (item == "endTime2") {
+        extendRule(json, "TASK_ENDDT", 4, querySearch[item]);
+      }
+      if (item == "searchStatus") {
+        extendRule(json, "NOTICE_STATUS", 1, querySearch[item]);
+      }
+    }
     //extendRule(json, "NOTICE_STATUS", 1, 0);
     json.Limit = limit;
     //json.Limit = 10;
@@ -410,7 +626,7 @@ class Home extends React.Component {
           left: "5%",
           right: "5%",
           bottom: "15%",
-          top: "5%",
+          top: "10%",
           containLabel: true,
           z: 22,
         },
@@ -527,10 +743,10 @@ class Home extends React.Component {
           },
         },
         grid: {
-          left: "10%",
+          left: "5%",
-          // right: "10%",
+          right: "5%",
           bottom: "15%",
-          top: "5%",
+          top: "10%",
           containLabel: true,
           z: 22,
         },
@@ -656,16 +872,28 @@ class Home extends React.Component {
       let myChart = echarts.init(timelyRates);
       myChart.setOption(
         {
-          title: {
+          title: [
+            {
               text: "83%",
               x: "center",
-            y: "center",
+              top: "40%",
               textStyle: {
                 fontWeight: "normal",
                 color: "#ffa94d",
-              fontSize: "20",
+                fontSize: "26",
               },
             },
+            {
+              text: "及时完成率",
+              x: "center",
+              top: "55%",
+              textStyle: {
+                fontWeight: "normal",
+
+                fontSize: "14",
+              },
+            },
+          ],
           color: "#ffd6b5",
           legend: {
             show: false,
@@ -736,16 +964,28 @@ class Home extends React.Component {
     if (completeRates) {
       let myChart = echarts.init(completeRates);
       myChart.setOption({
-        title: {
+        title: [
+          {
             text: "93%",
             x: "center",
-          y: "center",
+            top: "40%",
             textStyle: {
               fontWeight: "normal",
               color: "#0580f2",
-            fontSize: "20",
+              fontSize: "26",
             },
           },
+          {
+            text: "个人完成率",
+            x: "center",
+            top: "55%",
+            textStyle: {
+              fontWeight: "normal",
+
+              fontSize: "14",
+            },
+          },
+        ],
         color: ["rgba(176, 212, 251, 1)"],
         legend: {
           show: false,
@@ -812,8 +1052,8 @@ class Home extends React.Component {
   riskLevel = () => {
     let riskLevel = [];
     let showData = [
-      { value: 20, name: "一级" },
+      { value: 2, name: "一级" },
-      { value: 10, name: "二级" },
+      { value: 5, name: "二级" },
       { value: 15, name: "三级" },
       { value: 30, name: "四级" },
     ];
@@ -823,20 +1063,24 @@ class Home extends React.Component {
       let myChart = echarts.init(riskLevels);
       myChart.setOption({
         color: ["#c92a2a", "#ffa94d", "#ffe066", "#4285F4", "#fa8a89"],
-        title: {
+        title: [{
-          text: "60",
+          text: "52",
           x: "26%",
-          y: "center",
+          y: "40%",
           textStyle: {
-            fontSize: 16,
+            fontSize: 26,
             fontWeight: "normal",
             color: ["#333"],
           },
-          subtextStyle: {
+        },{
+          text: "风险总数",
+          x: "24%",
+          y: "55%",
+          textStyle: {
             color: "#666",
             fontSize: 12,
           },
-        },
+        }],
         tooltip: {
           trigger: "item",
           formatter: "{b}:({d}%)",
@@ -942,8 +1186,103 @@ class Home extends React.Component {
       visible: false,
     });
   };
+  doubleClear = () => {
+    if (this.state.searchVisible === true) {
+      this.setState({ searchVisible: false });
+    } else if (this.state.searchTodayVisible === true) {
+      this.setState({ searchTodayVisible: false });
+    }
+
+    this.getBaseData(1, this.state.tableKey, 5);
+  };
+  vauleChange = (e) => {
+    const { querySearch } = this.state;
+    if (e.target.value) {
+      switch (e.target.name) {
+        case "searchName":
+          querySearch[e.target.name] = e.target.value;
+          this.setState({ querySearch });
+          break;
+        case "searchCode":
+          querySearch[e.target.name] = e.target.value;
+          this.setState({ querySearch });
+          break;
+        case "searchType":
+          querySearch[e.target.name] = e.target.value;
+          this.setState({ querySearch });
+          break;
+        case "searchContent":
+          querySearch[e.target.name] = e.target.value;
+          this.setState({ querySearch });
+          break;
+      }
+    } else {
+      this.setState({ querySearch: {} });
+    }
+  };
+  handleSearch = (item) => {
+    this.getBaseData(1, item, null);
+  };
+  selectChange = (value) => {
+    const { querySearch } = this.state;
+    querySearch.searchStatus = value;
+    this.setState(
+      {
+        querySearch,
+      },
+      () => { }
+    );
+  };
+  // 开始时间
+  startChange = (dates, dateStr) => {
+    const { querySearch } = this.state;
+    if (dates.length != 2) {
+      this.setState({
+        visibleStartTime: [],
+        querySearch: {},
+      });
+      return;
+    }
+    this.state.visibleStartTime = dates;
+    querySearch.startTime1 = this.state.visibleStartTime[0].format(
+      "YYYY-MM-DD HH:mm:ss"
+    );
+    querySearch.startTime2 = this.state.visibleStartTime[1].format(
+      "YYYY-MM-DD HH:mm:ss"
+    );
+    this.setState(
+      {
+        querySearch,
+      },
+      () => { }
+    );
+  };
+  // 结束时间
+  endChange = (dates, dateStr) => {
+    const { querySearch } = this.state;
+    if (dates.length != 2) {
+      this.setState({
+        visibleEndTime: [],
+        querySearch: {},
+      });
+      return;
+    }
+    this.state.visibleEndTime = dates;
+    querySearch.endTime1 = this.state.visibleEndTime[0].format(
+      "YYYY-MM-DD HH:mm:ss"
+    );
+    querySearch.endTime2 = this.state.visibleEndTime[1].format(
+      "YYYY-MM-DD HH:mm:ss"
+    );
+    this.setState({ querySearch });
+  };
 
   render() {
+    const rowSelection = {
+      onChange: (selectedRowKeys, selectedRows) => {
+        this.state.taskSelects = selectedRows;
+      },
+    };
     return (
       <div
         className="route-home"
@@ -967,6 +1306,148 @@ class Home extends React.Component {
         >
           <FormPage {...this.state.tmpData} />
         </Modal>
+        <Modal
+          visible={this.state.searchVisible}
+          zIndex={999}
+          title={this.state.visibleTitle}
+          maskClosable={false}
+          onCancel={this.doubleClear}
+          footer={false}
+          className="antd-modal-homescreen"
+        >
+          <div>
+            <Form>
+                <Row style={{ marginTop: "50px" }}>
+                  <Col span={5}>
+                    <Form.Item label={"名称"} {...formItemLayout}>
+                      <Input
+                        value={this.state.querySearch.searchName}
+                        placeholder={"请输入任务名称"}
+                        name="searchName"
+                        onChange={this.vauleChange}
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col span={6}>
+                    <Form.Item label={"开始时间"} {...formItemLayout}>
+                      <RangePicker
+                        value={this.state.visibleStartTime}
+                        onChange={this.startChange}
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col span={6}>
+                    <Form.Item label={"结束时间"} {...formItemLayout}>
+                      <RangePicker
+                        value={this.state.visibleEndTime}
+                        onChange={this.endChange}
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col span={2}>
+                    <Button
+                      type={"primary"}
+                      icon={"search"}
+                      onClick={() =>
+                        this.handleSearch(this.state.currentpageIndex)
+                      }
+                    >
+                      搜索
+                    </Button>
+                  </Col>
+                </Row>
+              </Form>
+            <Table
+              // rowSelection={rowSelection}
+              dataSource={this.state.workData}
+              columns={this.state.searchColumns}
+              onChange={(num) =>
+                this.getBaseInfoData(num, this.state.currentpageIndex, null)
+              }
+              loading={this.state.showLoading}
+              size="small"
+              style={{padding: "0px 20px"}}
+            />
+          </div>
+        </Modal>
+        <Modal
+          visible={this.state.searchTodayVisible}
+          title={this.state.visibleTitle}
+          maskClosable={false}
+          zIndex={999}
+          onCancel={this.doubleClear}
+          footer={false}
+          className="antd-modal-homescreen"
+        >
+          <div>
+            <Form>
+                <Row style={{ marginTop: "50px" }}>
+                  <Col span={5}>
+                    <Form.Item label={"提醒内容"} {...formItemLayout}>
+                      <Input
+                        value={this.state.querySearch.searchName}
+                        placeholder={"请输入提醒内容"}
+                        name="searchName"
+                        onChange={this.vauleChange}
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col span={6}>
+                    <Form.Item label={"开始时间"} {...formItemLayout}>
+                      <RangePicker
+                        value={this.state.visibleStartTime}
+                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
+                        onChange={this.startChange}
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col span={6}>
+                    <Form.Item label={"结束时间"} {...formItemLayout}>
+                      <RangePicker
+                        value={this.state.visibleEndTime}
+                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
+                        onChange={this.endChange}
+                      />
+                    </Form.Item>
+                  </Col>
+                  <Col span={3}>
+                    <Form.Item label={"状态"} {...formItemLayout}>
+                      <Select
+                        value={this.state.querySearch.searchStatus}
+                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
+                        onChange={this.selectChange}
+                      >
+                        <Option value="0">未读</Option>
+                        <Option value="3">已读</Option>
+                        <Option value="1">已办</Option>
+                      </Select>
+                    </Form.Item>
+                  </Col>
+                  <Col span={2}>
+                    <Button
+                      type={"primary"}
+                      icon={"search"}
+                      onClick={() =>
+                        this.handleSearch(this.state.currentpageIndex)
+                      }
+                    >
+                      搜索
+                    </Button>
+                  </Col>
+                </Row>
+              </Form>
+            <Table
+              dataSource={this.state.workData}
+              columns={this.state.searchColumns}
+              onChange={(num) =>
+                this.getBaseInfoData(num, this.state.currentpageIndex, null)
+              }
+              loading={this.state.showLoading}
+              size="small"
+              style={{padding: "0px 20px"}}
+            />
+          </div>
+        </Modal>
 
         <Col span={24} style={{ width: "100%", height: "100%" }}>
           <Row
@@ -978,20 +1459,20 @@ class Home extends React.Component {
               padding: "0px 20px",
               margin: "0px",
               minHeight: "242px",
-              minWidth: "1904px",
+              minWidth: "1704px",
               // justifyContent: "space-between",
               // backgroundColor: "#fff",
             }}
           >
             <Col
-              span={8}
+              span={9}
               style={{
                 backgroundColor: "#fff",
                 height: "100%",
                 display: "flex",
                 flexDirection: "column",
                 padding: "0px 20px",
-                borderRadius: "5px",
+                borderRadius: "5px 0px 0px 5px",
                 minWidth: "578px",
               }}
             >
@@ -1163,44 +1644,62 @@ class Home extends React.Component {
                   data={this.state.workTotal.todoCount}
                   title="待办事项"
                   color="#2177d5"
+                  showAll={() => {
+                    this.showAll("1");
+                  }}
                 />
                 <UserInfo
                   data={this.state.workTotal.timeOverCount}
                   title="待办超时"
                   color="#f76707"
+                  showAll={() => {
+                    this.showAll("4");
+                  }}
                 />
                 <UserInfo
                   data={this.state.workTotal.doneCount}
                   title="已办事项"
                   color="#48a447"
+                  showAll={() => {
+                    this.showAll("2");
+                  }}
                 />
                 <UserInfo
                   data={this.state.workTotal.todayNewCount}
                   title="今日提醒"
                   color="#fcc419"
+                  showAll={() => {
+                    this.showAll("3");
+                  }}
                 />
               </div>
             </Col>
-            <div style={{ width: "30px" }}></div>
+            {/* <div style={{ width: "30px" }}></div> */}
+
             <Col
-              span={9}
+              span={8}
               style={{
                 backgroundColor: "#fff",
                 height: "100%",
-                borderRadius: "5px",
+                borderRadius: "0px 5px 5px 0px",
                 padding: "0px",
                 display: "flex",
                 flexDirection: "row",
                 flex: 1,
               }}
             >
+              <Divider
+                type="vertical"
+                dashed={true}
+                style={{ height: "100%", backgroundColor: "#fff" }}
+              />
               <div className="home-rate">
-                <div className="home-always-title">
+                {/* <div className="home-always-title">
                   <div className="home-always-left">
                     <div className="home-always-badge"></div>
                     <div className="home-always-name">完成率</div>
                   </div>
-                </div>
+                </div> */}
                 <div style={{ flex: 1, height: "100%", padding: "0px" }}>
                   <div
                     id="completeRate"
@@ -1212,21 +1711,26 @@ class Home extends React.Component {
                   ></div>
                 </div>
               </div>
-              <div
+              <Divider
+                type="vertical"
+                dashed={true}
+                style={{ height: "100%" }}
+              />
+              {/* <div
                 style={{
                   width: "20px",
                   height: "100%",
                   backgroundColor: "#f4f7ff",
                   minWidth: "20px",
                 }}
-              ></div>
+              ></div> */}
               <div className="home-rate">
-                <div className="home-always-title">
+                {/* <div className="home-always-title">
                   <div className="home-always-left">
                     <div className="home-always-badge"></div>
                     <div className="home-always-name">及时完成率</div>
                   </div>
-                </div>
+                </div> */}
                 <div style={{ flex: 1, height: "100%", padding: "0px" }}>
                   <div
                     id="timelyRate"
@@ -1399,7 +1903,7 @@ class Home extends React.Component {
               justifyContent: "space-between",
               alignItems: "center",
               minHeight: "388px",
-              minWidth: "1904px",
+              minWidth: "1704px",
               // backgroundColor: "#fff",
             }}
           >
@@ -1413,7 +1917,7 @@ class Home extends React.Component {
                 padding: "0px",
                 borderRadius: "5px",
                 flex: 1,
-                minWidth: "1368px",
+                minWidth: "1168px",
               }}
             >
               <div className="home-always-title">
@@ -1625,7 +2129,7 @@ class Home extends React.Component {
             style={{
               margin: "0px 0px 10px 0px",
               minHeight: "275px",
-              minWidth: "1904px",
+              minWidth: "1704px",
             }}
           >
             <Col

src/routes/dashboard.css

@@ -4,7 +4,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  min-Width: "320px",
+  min-Width: "220px",
 }
 :global(.home-userInfo-tabs) {
   background-color: #eefff8;
@@ -49,7 +49,7 @@
   white-space: nowrap;
 }
 :global(.home-userInfo-content) {
-  font-size: 20px;
+  font-size: 24px;
   font-weight: bold;
   white-space: nowrap;
   /* margin-right: 20px; */
@@ -316,7 +316,7 @@ cursor: pointer;
   flex-direction: column;
   background-color: #fff;
   border-radius: 5px;
-  min-width: 674px;
+  min-width: 574px;
 }
 :global(.home-setting) {
   display: flex;