样式

src/pages/Smart/ConditionDetection.js

@@ -51,15 +51,18 @@ const ConditionDetection = (props) => {
 
       <div className="content-title">
         <div className={styles.circle}>
-          <CircleScore big>
+          {/* <CircleScore big>
             <span className={styles.circleText}>{score}</span>
-          </CircleScore>
+          </CircleScore> */}
+          <div className={styles.circleBox}>
+            <span className={styles.circleText}>{score}</span>
+          </div>
           {/* <p>{desc}</p> */}
           <p>膜车间当前运行状态{grade}</p>
         </div>
         <div className={styles.content}>
           <Row gutter={16}>
-            <Col span={12} style={{ padding: "0.2rem" }}>
+            <Col span={12} style={{ padding: '0.2rem' }}>
               <div className={`${styles.card} card-box`}>
                 <h3>
                   实时工况 <span>{real.score}分</span>
@@ -83,7 +86,7 @@ const ConditionDetection = (props) => {
                 </ul>
               </div>
             </Col>
-            <Col span={12} style={{ padding: "0.2rem" }}>
+            <Col span={12} style={{ padding: '0.2rem' }}>
               <div className={`${styles.card2} card-box`}>
                 <h3>
                   目标工况 <span>{best.score}分</span>

src/pages/Smart/ConditionDetection.less

@@ -41,7 +41,18 @@
     margin-right: 0.12rem;
   }
 }
-
+.circleBox {
+  width: 1.94rem;
+  height: 1.94rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: url('@/assets/home-circle.png') no-repeat center;
+  background-size: 100% 100%;
+  font-size: 0.34rem;
+  font-weight: bold;
+}
 .card2 {
   .card;
   i {