样式修改

src/components/PageContent/index.less

@@ -6,9 +6,9 @@
 
   .close {
     position: absolute;
-    top: 22px;
+    top: 26px;
     right: 20px;
-    font-size: 28px;
+    font-size: 38px;
 
     color: #4a4a4a;
     cursor: pointer;

src/components/PageTitle/index.less

@@ -3,8 +3,8 @@
   align-items: center;
 }
 .titleBar {
-  width: 5px;
-  height: 26px;
+  width: 7px;
+  height: 35px;
   background: #4a90e2;
   float: left;
   margin-right: 18px;

src/components/TabsContent/index.less

@@ -3,6 +3,13 @@
   align-items: center;
   height: 116px;
   margin-bottom: 10px;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
   > .tabsItem {
     border-right: 1px solid #979797;
   }
@@ -14,6 +21,7 @@
   padding: 0 40px;
   color: #4a4a4a;
   font-size: 36px;
+  white-space: nowrap;
 }
 .active {
   color: #4a90e2;

src/pages/Controller/Hardware.js

@@ -8,13 +8,11 @@ import Light from './components/Light';
 function Hardware() {
   const handleTabsChange = (tab) => {};
   return (
-    <PageContent tabs>
+    <PageContent closeable={false}>
       <PageTitle
         tabs
         onReturn={() => UnityAction.sendMsg('menuItem', '智能管控')}
-      >
-        感知监控
-      </PageTitle>
+      ></PageTitle>
       <TabsContent
         defaultActiveKey="1"
         onChange={handleTabsChange}

src/pages/EqSelfInspection/List/index.js

@@ -11,62 +11,6 @@ function List(props) {
 
   const { projectId } = useParams();
 
-  const getColumns = () => {
-    return [
-      {
-        title: '自检时间',
-        dataIndex: 'CreatedTime',
-        width: '26%',
-        render: (text) => {
-          return text ? dayjs(text).format('YYYY-MM-DD HH:mm') : null;
-        },
-      },
-      {
-        title: '工艺段',
-        width: '24%',
-        render: (record) => {
-          const name = processList?.find(
-            (item) => item.group_id == record?.RouteInfo?.GroupID,
-          )?.name;
-          return name || '-';
-        },
-      },
-      {
-        title: '状态',
-        width: '10%',
-        dataIndex: 'Status',
-        render: (text) => {
-          return text == 0 ? (
-            '正常'
-          ) : (
-            <div style={{ color: '#FF8600' }}>异常</div>
-          );
-        },
-      },
-      {
-        title: '操作',
-        width: '16%',
-        render: (text, record) => {
-          return (
-            <Fragment>
-              {
-                <>
-                  <a
-                    onClick={(e) => {
-                      goToDetail(record, e);
-                    }}
-                  >
-                    详情
-                  </a>
-                </>
-              }
-            </Fragment>
-          );
-        },
-      },
-    ];
-  };
-
   const goToDetail = (record) => {
     UnityAction.sendMsg('reportDetail', '');
     history.push(

src/pages/EqSelfInspection/List/index.less

@@ -1,24 +1,25 @@
 .list {
   margin-top: 40px;
   .item {
-    padding: 94px 20px 56px;
+    padding: 28px 75px 28px 124px;
     display: flex;
     justify-content: space-between;
-    margin-bottom: 14px;
+    margin-bottom: 18px;
     background: #ffffff;
     box-shadow: 0px 0px 8px 14px rgba(0, 0, 0, 0.03);
-    border-radius: 8px;
+    border-radius: 12px;
     align-items: center;
   }
   .status {
-    width: 100px;
-    height: 100px;
-    font-size: 26px;
+    width: 134px;
+    height: 134px;
+    font-size: 36px;
     font-weight: 400;
     color: #000000;
     text-align: center;
-    line-height: 100px;
+    line-height: 134px;
     background: url('@/assets/circle-success.png') no-repeat center;
+    background-size: 100% 100%;
   }
   .statusError {
     background-image: url('@/assets/circle-error.png');
@@ -27,42 +28,43 @@
     flex: 1;
     padding-left: 100px;
     i {
-      width: 10px;
-      height: 10px;
+      width: 14px;
+      height: 14px;
       display: inline-block;
       vertical-align: middle;
       border-radius: 50%;
-      margin-right: 10px;
+      margin-right: 14px;
       background-color: rgba(74, 144, 226, 1);
     }
   }
   .time {
-    font-size: 18px;
+    font-size: 24px;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 24px;
+    line-height: 34px;
   }
   .desc {
-    font-size: 24px;
+    font-size: 32px;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 34px;
+    line-height: 44px;
     .number {
-      font-size: 40px;
+      font-size: 54px;
       font-weight: 500;
       color: #f5a623;
-      line-height: 56px;
-      margin-left: 8px;
+      line-height: 76px;
+      margin-left: 12px;
     }
 
     span {
-      font-size: 22px;
+      font-size: 28px;
       color: #000000;
     }
   }
   .btn {
-    width: 17px;
-    height: 26px;
+    width: 23px;
+    height: 35px;
     background: url('@/assets/arr-right.png') no-repeat center;
+    background-size: 100% 100%;
   }
 }

src/pages/EqSelfInspection/Statistics.js

@@ -140,7 +140,7 @@ const Statistics = (props) => {
   return (
     <PageContent closeable={false}>
       <PageTitle returnable>系统自检统计</PageTitle>
-      <div className={`${styles.itemMain2} card-box`} style={{padding: '40px 0'}}>
+      <div className={`${styles.itemMain2} card-box`} style={{padding: '44px 0'}}>
         <div style={{ display: 'flex' }}>
           {overviewData?.map((item) => (
             <Text num={item.num} label={item.label} />

src/pages/EqSelfInspection/index.js

@@ -115,7 +115,7 @@ const EqSelfInspection = (props) => {
           className={`${styles.itemMain} card-box`}
           style={{ padding: '15px 24px' }}
         >
-          <div style={{ fontSize: 28, color: 'rgba(110, 110, 110, 1)' }}>
+          <div style={{ fontSize: 28, color: 'rgb(110, 110, 110)' }}>
             自检间隔：{autoReport?.RouteInfo?.PlanDur}h
           </div>
 
@@ -171,18 +171,7 @@ const EqSelfInspection = (props) => {
         </div>
         <Item name="设备自检" status={patrolStatus}></Item>
         <Item name="工艺自检" status={faultAnalysisStatus}></Item>
-        <Item
-          name="安全自检"
-          warningText={
-            secureStatus === 1
-              ? `共发现${
-                  secureChildren?.filter((item) => item.status === 1)?.length ||
-                  0
-                }项异常`
-              : ''
-          }
-          status={secureStatus}
-        >
+        <Item name="安全自检" status={secureStatus}>
           {secureChildren?.map((item) => (
             <WarningItem label={item.label} status={item.status} />
           ))}
@@ -263,9 +252,9 @@ const Item = (props) => {
   };
   return (
     <div className={`${styles.itemMain} card-box`}>
-      <div className={styles.item} style={{ height: children ? 60 : '' }}>
+      <div className={styles.item} style={{ height: children ? 80 : '' }}>
         <span className={styles.itemName}>{name}</span>
-        <span className={styles.warningText}>{warningText}</span>
+        {/* <span className={styles.warningText}>{warningText}</span> */}
         {renderRight(status)}
       </div>
       {children}

src/pages/EqSelfInspection/index.less

@@ -29,18 +29,18 @@
     margin-bottom: 6px;
   }
   .logoTitle {
-    font-size: 20px;
+    font-size: 28px;
     font-weight: 400;
     color: #6e6e6e;
-    line-height: 28px;
+    line-height: 38px;
     display: flex;
   }
   .logoTime {
-    font-size: 16px;
+    font-size: 22px;
     font-weight: 400;
     color: #6e6e6e;
-    line-height: 22px;
-    margin-top: 6px;
+    line-height: 28px;
+    margin-top: 10px;
   }
   .logoFont {
     position: absolute;
@@ -48,15 +48,16 @@
     align-items: center;
     right: 0;
     bottom: 0;
-    font-size: 20px;
+    font-size: 28px;
     font-weight: 400;
     color: #6e6e6e;
-    line-height: 28px;
+    line-height: 38px;
     .iconSetting {
-      margin-left: 8px;
-      width: 20px;
-      height: 20px;
+      margin-left: 10px;
+      width: 28px;
+      height: 28px;
       background: url('@/assets/icon-setting.png') no-repeat;
+      background-size: 100% 100%;
     }
   }
 }
@@ -68,37 +69,37 @@
   margin-top: 20px;
   :global {
     .ant-btn-primary {
-      font-size: 20px;
-      width: 158px;
-      height: 40px;
+      font-size: 24px;
+      width: 140px;
+      height: 46px;
       cursor: pointer;
     }
   }
 }
 .item {
-  height: 80px;
+  height: 108px;
   display: flex;
   align-items: center;
   position: relative;
-  padding: 0 20px;
+  padding: 0 30px;
   .right {
     position: absolute;
     right: 0;
-    margin-right: 10px;
-    font-size: 20px;
+    margin-right: 30px;
+    font-size: 28px;
   }
   .warningText {
     margin-left: 40px;
-    font-size: 20px;
+    font-size: 28px;
     font-weight: 400;
     color: #fe5850;
-    line-height: 28px;
+    line-height: 38px;
   }
   .itemName {
-    font-size: 20px;
+    font-size: 28px;
     font-weight: 500;
     color: #4a4a4a;
-    line-height: 28px;
+    line-height: 38px;
     font-weight: bold;
   }
 }
@@ -107,30 +108,31 @@
 }
 .warningItem {
   // border-bottom: 2px solid #555;
-  height: 60px;
+  height: 90px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 20px;
+  padding: 0 30px;
   border-bottom: 1px solid rgba(219, 219, 219, 1);
   &:last-child {
     border-bottom: none;
   }
   span {
-    font-size: 20px;
+    font-size: 28px;
   }
 }
 .iconSuccess {
-  width: 28px;
-  height: 22px;
+  width: 38px;
+  height: 30px;
   background: url('@/assets/icon-success.png') no-repeat;
+  background-size: 100% 100%;
 }
 .reportBtn {
   margin-top: 40px;
   width: 100%;
-  height: 70px;
+  height: 86px;
   display: block;
-  font-size: 22px;
+  font-size: 30px;
   font-weight: 400;
   color: #ffffff;
 }
@@ -152,16 +154,17 @@
   justify-content: center;
   align-items: center;
   flex: 1;
-  font-size: 26px;
   .num {
     color: #f5af3a;
-    font-size: 30px;
-    margin-bottom: 14px;
+    font-size: 40px;
+    margin-bottom: 8px;
     font-weight: bold;
     letter-spacing: 2px;
+    line-height: 56px;
   }
   .label {
     color: #555;
+    font-size: 24px;
   }
 }
 .dialogBtns {

src/pages/Smart/ConditionDetection.js

@@ -49,7 +49,7 @@ const ConditionDetection = (props) => {
     <PageContent closeable={false}>
       <PageTitle returnable>工况检测</PageTitle>
       <div className={styles.circle}>
-        <CircleScore>
+        <CircleScore big>
           <span className={styles.circleText}>{score}</span>
         </CircleScore>
         {/* <p>{desc}</p> */}
@@ -57,7 +57,7 @@ const ConditionDetection = (props) => {
       </div>
       <div className={styles.content}>
         <Row gutter={16}>
-          <Col span={12} style={{ padding: 10 }}>
+          <Col span={12} style={{ padding: 22 }}>
             <div className={`${styles.card} card-box`}>
               <h3>
                 实时工况 <span>{real.score}分</span>
@@ -81,7 +81,7 @@ const ConditionDetection = (props) => {
               </ul>
             </div>
           </Col>
-          <Col span={12} style={{ padding: 10 }}>
+          <Col span={12} style={{ padding: 22 }}>
             <div className={`${styles.card2} card-box`}>
               <h3>
                 目标工况 <span>{best.score}分</span>

src/pages/Smart/ConditionDetection.less

@@ -1,30 +1,31 @@
 .card {
   background-size: 100% 100%;
-  border-radius: 8px;
-  padding: 10px 20px;
+  border-radius: 14px;
+  padding: 14px 20px;
   margin: 10px 0;
   box-shadow: 0px 0px 8px 2px rgba(191, 191, 191, 0.2);
   h3 {
-    margin-bottom: 10px;
+    margin-bottom: 30px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: 20px;
+    font-size: 28px;
     font-weight: 500;
     color: #4a4a4a;
-    line-height: 28px;
+    line-height: 40px;
     span {
-      font-size: 24px;
+      font-size: 32px;
       color: #4a90e2;
     }
   }
   ul {
     margin: 0px;
+    margin-bottom: 10px;
     padding: 0;
-    padding-left: 40px;
+    padding-left: 30px;
     li {
-      margin-bottom: 10px;
-      font-size: 20px;
+      margin-bottom: 14px;
+      font-size: 23px;
       &:last-child {
         margin-bottom: 0;
       }
@@ -33,11 +34,11 @@
 
   i {
     display: inline-block;
-    width: 10px;
-    height: 10px;
+    width: 14px;
+    height: 14px;
     background-color: #4a90e2;
     border-radius: 50%;
-    margin-right: 8px;
+    margin-right: 12px;
   }
 }
 
@@ -53,9 +54,10 @@
 .content {
   position: relative;
   .img {
-    width: 58px;
-    height: 103px;
+    width: 78px;
+    height: 138px;
     background: url('~@/assets/vs.png') no-repeat;
+    background-size: 100% 100%;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -69,11 +71,11 @@
   // color: #fff;
   font-size: 24px;
   p {
-    margin-top: 10px;
-    font-size: 22px;
+    margin-top: 14px;
+    font-size: 30px;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 30px;
+    line-height: 40px;
   }
 }
 .circleText {

src/pages/Smart/OptimizationTasks.js

@@ -99,7 +99,7 @@ const Produce = ({ projectId, queryMandate }) => {
   });
 
   return (
-    <div style={{ marginBottom: 20 }}>
+    <div style={{ marginBottom: 30 }}>
       <h3 className={styles.title}>
         <i />
         生产调度类
@@ -180,9 +180,11 @@ const Cost = ({ projectId }) => {
   });
   return (
     <div>
-      <h3 className={styles.title}>
-        <i style={{ background: '#F5A623' }} />
-        成本节约类
+      <h3 className={styles.title} style={{ justifyContent: 'space-between' }}>
+        <div>
+          <i style={{ background: '#F5A623' }} />
+          成本节约类
+        </div>
         <div
           className={styles.btn}
           onClick={() => history.push(`/smart/simulate/${projectId}`)}

src/pages/Smart/OptimizationTasks.less

@@ -1,20 +1,22 @@
 .title {
-  font-size: 24px;
-  margin-bottom: 14px;
+  font-size: 32px;
+  margin-bottom: 16px;
   font-weight: bold;
-  line-height: 40px;
+  line-height: 44px;
+  display: flex;
+  align-items: center;
   i {
     display: inline-block;
     vertical-align: middle;
-    width: 12px;
-    height: 12px;
+    width: 14px;
+    height: 14px;
     border-radius: 50%;
     background-color: #4a90e2;
     margin-right: 10px;
   }
 }
 .desc {
-  font-size: 22px;
+  font-size: 30px;
   font-weight: 400;
   color: #4a4a4a;
 }
@@ -24,9 +26,9 @@
   padding: 20px;
   align-items: center;
   .left {
-    width: 90px;
+    width: 150px;
     margin: 0;
-    font-size: 18px;
+    font-size: 24px;
     font-weight: 400;
     color: #3b3b3b;
   }
@@ -36,20 +38,20 @@
 }
 .orderIcon {
   background: #12ceb3;
-  width: 200px;
+  width: 300px;
   position: absolute;
-  top: 30px;
-  right: -55px;
+  top: 40px;
+  right: -92px;
   text-align: center;
-  font-size: 18px;
+  font-size: 24px;
   transform: rotate(45deg);
-  padding: 8px 0;
+  padding: 10px 0;
   color: #fff;
 }
 .pageCard {
   margin-top: 30px;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: 26px;
   box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.3);
   border: 1px solid #eee;
   position: relative;
@@ -57,27 +59,26 @@
 }
 .bottom {
   border-top: 1px solid #c0c0c0;
-  padding: 28px;
+  padding: 38px;
   height: 100%;
   .bottomText {
-    font-size: 18px;
+    font-size: 24px;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 24px;
+    line-height: 34px;
     text-align: center;
   }
 }
 .btn {
-  width: 90px;
-  height: 40px;
+  width: 120px;
+  height: 56px;
   background: rgba(245, 166, 35, 0.75);
-  border-radius: 4px;
-  font-size: 18px;
+  border-radius: 5px;
+  font-size: 24px;
   font-weight: 400;
   color: #ffffff;
-  line-height: 40px;
+  line-height: 56px;
   text-align: center;
-  float: right;
 }
 .table2 {
   :global {

src/pages/Smart/components/CircleScore.js

@@ -1,10 +1,10 @@
 import styles from './CircleScore.less';
 
-const CircleScore = ({ score, children }) => {
+const CircleScore = ({ score, children, big = false }) => {
   const normalizedScore = Math.min(Math.max(score, 0), 100);
 
   return (
-    <div className={styles.circleScore}>
+    <div className={`${styles.circleScore} ${big ? styles.big : ''}`}>
       <div className={styles.circle}></div>
       <div className={styles.text}>{children}</div>
     </div>

src/pages/Smart/components/CircleScore.less

@@ -3,6 +3,13 @@
   height: 174px;
   position: relative;
 }
+.big {
+  width: 194px;
+  height: 194px;
+  .circle {
+    mask: radial-gradient(transparent, transparent 78px, #000 78px);
+  }
+}
 
 .circle {
   width: 100%;
@@ -10,7 +17,7 @@
   border-radius: 50%;
   animation: rotation 4s linear infinite;
   background: linear-gradient(60deg, #36a5ed 0%, #6eee96 100%);
-  mask: radial-gradient(transparent, transparent 75px, #000 77px)
+  mask: radial-gradient(transparent, transparent 75px, #000 77px);
 }
 
 .text {

src/pages/Smart/components/SimulateDetail.js

@@ -91,6 +91,7 @@ const SimulateDetail = (props) => {
     <div>
       {data && (
         <TabsContent
+          center={false}
           defaultActiveKey={data[0]}
           items={data.map((item) => ({
             label: TYPE[item]?.name,
@@ -543,7 +544,7 @@ function getOption(data = [], active) {
     legend: {
       textStyle: {
         // color: '#fff',
-        fontSize: 18,
+        fontSize: 24,
       },
     },
     grid: {
@@ -555,36 +556,22 @@ function getOption(data = [], active) {
     xAxis: {
       type: 'category',
       data: xAxis,
-      axisLine: {
-        lineStyle: {
-          // color: '#fff',
-        },
-      },
-      splitLine: {
-        lineStyle: {
-          // color: '#fff',
-        },
+      nameTextStyle: {
+        fontSize: 24,
       },
       axisLabel: {
-        // color: '#fff',
+        fontSize: 24,
       },
     },
     yAxis: {
       name: yAxisName,
       type: 'value',
       boundaryGap: [0, 0.01],
-      axisLine: {
-        lineStyle: {
-          // color: '#fff',
-        },
-      },
-      splitLine: {
-        lineStyle: {
-          // color: '#fff',
-        },
+      nameTextStyle: {
+        fontSize: 24,
       },
       axisLabel: {
-        // color: '#fff',
+        fontSize: 24,
       },
     },
     series,
@@ -705,6 +692,21 @@ function getMembraneOption(data = []) {
 
 const Optimization = ({ data }) => {
   if (!data?.optimization) return '';
+
+  const NAME_MAP = {
+    peb_interval: '反冲洗周期调整',
+    pac_fr: '絮凝剂投加建议',
+    ceb_residue_count: '超滤微滤, 剩余药洗次数',
+    ceb_permeability: '超滤微滤, 渗透率低于阈值, 药洗提醒',
+    ceb_time_expire: '超滤微滤药洗提醒',
+    ro_pressure_1st: 'ro一段运行状况',
+    ro_pressure_2nd: 'ro二段运行状况',
+    ro_pressure_3th: 'ro三段运行状况',
+    ro_nob_interval: 'ro非氧化杀菌调整',
+    ro_wash_interval: 'ro冲洗调整',
+    ro_residue_count: 'ro化学清洗后,剩余的可清洗次数',
+  };
+
   return (
     <div className={styles.optimization}>
       <div className={styles.title1}>
@@ -713,7 +715,7 @@ const Optimization = ({ data }) => {
       <div className={styles.title2}>调整内容</div>
       {Object.entries(data.optimization).map(([key, item]) => (
         <div className={styles.content}>
-          {key}:{item.remark}
+          【{NAME_MAP[key]}】{item.remark}
         </div>
       ))}
     </div>

src/pages/Smart/components/SimulateDetail.less

@@ -1,6 +1,5 @@
 .box {
   display: flex;
-  min-height: 54.2vh;
 }
 
 .title {
@@ -96,14 +95,14 @@
 .chartBox {
   width: 100%;
   height: 100%;
-  padding: 20px;
+  padding: 28px 32px;
   :global {
     .ant-select-selection-item {
-      line-height: 42px !important;
-      font-size: 22px !important;
+      line-height: 60px !important;
+      font-size: 30px !important;
     }
     .ant-select-selector {
-      height: 44px !important;
+      height: 60px !important;
     }
   }
 }
@@ -112,21 +111,20 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 30px;
 }
 
 .dateTabs {
   display: flex;
   border: 1px solid #d5d5d5;
-  border-radius: 5px;
-  height: 44px;
+  height: 60px;
   .dateTabsItem {
-    width: 94px;
+    width: 128px;
     text-align: center;
     cursor: pointer;
     border-right: 1px solid #d5d5d5;
-    line-height: 44px;
-    font-size: 18px;
+    line-height: 60px;
+    font-size: 24px;
     font-weight: 400;
     color: #4a4a4a;
     &:last-child {
@@ -140,29 +138,30 @@
 }
 .optimization {
   background-color: rgba(245, 166, 35, 0.08);
-  padding: 16px 24px;
-  margin-top: 20px;
+  padding: 20px 30px;
+  margin-top: 24px;
   .title1 {
-    font-size: 20px;
+    font-size: 28px;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 28px;
-    margin-bottom: 15px;
+    line-height: 38px;
+    margin-bottom: 20px;
   }
   .title2 {
-    padding: 4px 15px;
+    padding: 6px 20px;
     background: rgba(245, 166, 35, 0.35);
-    font-size: 20px;
+    font-size: 28px;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 28px;
-    margin-bottom: 10px;
+    line-height: 38px;
+    margin-bottom: 12px;
   }
   .content {
-    font-size: 20px;
+    font-size: 28px;
     font-weight: 400;
     color: #4a4a4a;
-    line-height: 34px;
-    padding-left: 15px;
+    line-height: 38px;
+    padding-left: 20px;
+    margin-bottom: 10px;
   }
 }

src/pages/Smart/components/SimulatePie.js

@@ -45,8 +45,8 @@ const SimulatePie = (props) => {
   }, []);
 
   return (
-    <div className="card-box" style={{ padding: 20, marginTop: 20 }}>
-      <h2 style={{ textAlign: 'center', fontSize: 22, color: '#4A4A4A' }}>
+    <div className="card-box" style={{ padding: 26, marginTop: 30 }}>
+      <h2 style={{ textAlign: 'center', fontSize: 30, color: '#4A4A4A' }}>
         通过模拟仿真预计未来一日可省 &nbsp;
         <span style={{ color: '#F5A623' }}>{getProfit()}元</span>
       </h2>

src/pages/Smart/index.js

@@ -20,16 +20,17 @@ const Work = (props) => {
     <PageContent>
       <PageTitle>水厂工况</PageTitle>
       <div className={styles.score}>
-        <CircleScore>
+        <CircleScore big>
           {data?.score}
-          <div style={{ fontSize: 18 }}>{data?.grade}</div>
+          <div style={{ fontSize: 24 }}>{data?.grade}</div>
         </CircleScore>
         <div className={styles.scoreRight}>
           <h3>当前运行{data?.grade}，可继续优化</h3>
           <div className={styles.time}>{data?.clac_time}</div>
           {data?.score && (
             <Button
-              style={{ marginRight: 20, height: 50 }}
+              style={{ marginRight: 20}}
+              className={styles.btn}
               type="primary"
               onClick={() =>
                 history.push(
@@ -42,7 +43,7 @@ const Work = (props) => {
           )}
 
           <Button
-            style={{ height: 50 }}
+            className={styles.btn}
             type="primary"
             onClick={() =>
               history.push('/smart/condition-detection/' + projectId)

src/pages/Smart/index.less

@@ -4,56 +4,61 @@
   display: flex;
   align-items: center;
   padding-left: 60px;
-  margin-bottom: 20px;
+  margin-bottom: 52px;
 }
 
 .scoreRight {
-  margin-left: 30px;
+  margin-left: 56px;
 
   h3 {
-    font-size: 22px;
+    font-size: 28px;
     font-family: PingFangSC-Regular, PingFang SC;
     color: #4a4a4a;
-    line-height: 30px;
-    margin-bottom: 6px;
+    line-height: 40px;
+    margin-bottom: 9px;
   }
 
   .time {
-    margin-bottom: 12px;
-    font-size: 18px;
+    margin-bottom: 16px;
+    font-size: 24px;
     font-weight: 400;
     color: #6e6e6e;
-    line-height: 24px;
+    line-height: 32px;
+  }
+  .btn {
+    height: 66px;
+    width: 134px;
+    font-size: 22px;
   }
 }
 
 .card {
   border-radius: 8px;
   box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.3);
-  padding: 20px;
-  padding-top: 10px;
+  padding: 16px;
   border: 1px solid #eee;
   margin: 10px 0;
   background: rgba(255, 255, 255, 0.6);
 
   h3 {
-    font-size: 20px;
+    font-size: 28px;
     color: #4a4a4a;
-    line-height: 28px;
-    margin-bottom: 14px;
+    line-height: 38px;
+    margin-bottom: 12px;
     font-weight: bold;
   }
 
   ul {
     margin: 0;
     padding: 0;
+    padding-bottom: 10px;
 
     li {
       margin-bottom: 16px;
-      font-size: 18px;
+      font-size: 24px;
       font-weight: 400;
       color: #4a4a4a;
-      line-height: 24px;
+      line-height: 30px;
       &:last-child {
         margin-bottom: 0;
       }
@@ -62,8 +67,8 @@
 
   i {
     display: inline-block;
-    width: 10px;
-    height: 10px;
+    width: 14px;
+    height: 14px;
     background-color: #4a90e2;
     border-radius: 50%;
     margin-right: 8px;