修改系统日志样式

src/global.less

@@ -46,6 +46,19 @@ button {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+@font-face {
+  font-family: 'PangMenZhengDao-3';
+  src: url('@/assets/fonts/PangMenZhengDao-3.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'PangMenZhengDao';
+  src: url('@/assets/fonts/PangMenZhengDao.ttf');
+  font-weight: normal;
+  font-style: normal;
+}
 body {
   color: #333;
   .ant-collapse-header {

src/pages/SystemDaily/index.js

@@ -40,46 +40,60 @@ const SystemDaily = (props) => {
   const handleOnClick = () => {
     history.back();
   };
+  const renderItem = (value, unit) => {
+    return (
+      <>
+        <span className={styles.value}>{value || 0}</span>
+        <span className={styles.unit}>{unit}</span>
+      </>
+    );
+  };
   return (
     <PageContent closeable={false}>
       <Spin spinning={loading}>
-        <div className={styles.titleContent}>
+        <div>
           <PageTitle children="系统工作日报" returnable />
-          {/* <div className={styles.title}>
-            <LeftOutlined
-              onClick={handleOnClick}
-              style={{ fontSize: 36, cursor: 'pointer', marginRight: '0.2rem' }}
-            />
-            系统工作日报
-          </div> */}
           <div className={styles.time}>{dayjs().format('MM月DD日')}</div>
         </div>
-        <div className={styles.content}>
-          <div className={styles.text}>
-            执行自控指令次数：{automatic_task || 0}次
-          </div>
-          <div className={styles.text}>
-            推送优化建议：{push_optimize_task}条
-          </div>
-          <div className={styles.text}>
-            系统自检次数：{self_inspection_task}条
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常次数：
-            {self_inspection_normal_task}条
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;异常次数：
-            {self_inspection_abnormal_task}条
-          </div>
-          <div className={styles.text}>
-            推送任务：{push_task}条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            任务完成率：{task_percent}%
-          </div>
-          <div className={styles.text}>
-            工单数量：{work_order_task}条
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工单完成率：
-            {work_percent}%
-          </div>
-          <div className={styles.text}>
-            工单完成人员第一名：
-            {user_name ? `${user_name}完成${user_name_count}个工单` : '暂无'}
+        <div className={styles.box}>
+          <div className={styles.main_in}>
+            <div className={styles.titleContent}>日报</div>
+            <div className={styles.content}>
+              <div className={styles.text}>
+                执行自控指令次数：{renderItem(automatic_task, '次')}
+              </div>
+              <div className={styles.text}>
+                推送优化建议：{renderItem(push_optimize_task, '条')}
+              </div>
+              <div className={styles.text}>
+                系统自检次数：
+                {renderItem(self_inspection_task, '条')}
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正常次数：
+                {renderItem(self_inspection_normal_task, '条')}
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;异常次数：
+                {renderItem(self_inspection_abnormal_task, '条')}
+              </div>
+              <div className={styles.text}>
+                推送任务：
+                {renderItem(push_task, '条')}
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 任务完成率：
+                {renderItem(task_percent, '%')}
+              </div>
+              <div className={styles.text}>
+                工单数量：
+                {renderItem(work_order_task, '条')}
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;工单完成率：
+                {renderItem(work_percent, '%')}
+              </div>
+              <div className={styles.text}>
+                工单完成人员第一名：
+                {/* <span className={styles.value}> */}
+                {user_name
+                  ? `${user_name}完成${user_name_count}个工单`
+                  : '暂无'}
+                {/* </span> */}
+              </div>
+            </div>
           </div>
         </div>
       </Spin>

src/pages/SystemDaily/index.less

@@ -7,32 +7,70 @@
   box-shadow: 0rem 0rem 0.08rem 0.04rem rgba(212, 212, 212, 0.5);
   border-radius: 0.2rem;
 }
-.titleContent {
-  width: 100%;
-  // text-align: center;
-  font-family: PingFangSC, PingFang SC;
+.time {
+  margin-left: 0.6rem;
+  font-size: 0.22rem;
+  line-height: 0.3rem;
   color: #4a4a4a;
-  margin: auto;
+}
+.titleContent {
+  padding: 0.14rem 0.4rem;
+  position: absolute;
+  top: -0.27rem;
+  left: 0.4rem;
+  background-color: #1755ff;
+  border-radius: 0.43rem;
+  font-size: 0.27rem;
+  font-family: Helvetica;
+  color: #ffffff;
+  letter-spacing: 0.04rem;
   .title {
     font-size: 0.34rem;
     line-height: 0.48rem;
   }
-  .time {
-    margin-left: 0.6rem;
-    font-size: 0.22rem;
-    line-height: 0.3rem;
-  }
 }
 .content {
   padding: 0.6rem 0.3rem;
-  margin: 0.2rem auto;
-  box-shadow: 0rem 0rem 0.08rem 0.04rem rgba(212, 212, 212, 0.5);
-  border-radius: 0.2rem;
-  background: #e7f1fe;
+  .item {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 0.01rem solid #9b9797;
+  }
   .text {
-    margin-bottom: 0.34rem;
-    font-family: PingFangSC, PingFang SC;
-    color: #4a4a4a;
-    font-size: 0.3rem;
+    padding: 0.3rem 0;
+    font-size: 0.32rem;
+    font-family: Source Han Sans, Source Han Sans;
+    font-weight: 500;
+    color: #9b9797;
+    border-bottom: 1px solid #9b9797;
+  }
+  text:last-child {
+    border-bottom: none;
+  }
+  .value {
+    font-size: 0.64rem;
+    font-family: PangMenZhengDao-3, PangMenZhengDao-3;
+    font-weight: 400;
+    color: #3b3b3b;
+    letter-spacing: 0.05rem;
+  }
+  .unit {
+    .value;
+    font-size: 0.36rem;
+  }
+}
+.box {
+  position: relative;
+  margin: 0.6rem 0 1rem 0;
+  box-sizing: border-box;
+  padding: 0.04rem;
+  border-radius: 0.4rem 0.1rem 0.4rem 0.1rem;
+  background-image: -webkit-linear-gradient(#1755ff 0%, #ffffff 80%);
+  box-shadow: 0.01rem 0.08rem 0.14rem 0rem rgba(0, 0, 0, 0.1);
+  .main_in {
+    width: 100%;
+    height: 100%;
+    border-radius: 0.4rem 0.1rem 0.4rem 0.1rem;
+    background: linear-gradient(180deg, #ddf4ff 0%, #ffffff 100%);
   }
 }