Переглянути джерело

修改智慧运营报告概览样式

Renxy 1 рік тому
батько
коміт
ad5594b728
2 змінених файлів з 13 додано та 22 видалено
  1. 7 10
      src/pages/SmartReport/index.js
  2. 6 12
      src/pages/SmartReport/index.less

+ 7 - 10
src/pages/SmartReport/index.js

@@ -187,20 +187,18 @@ const SmartReport = () => {
 
   const TwoBoxItem = ({ label, value, unit }) => {
     return (
-      <div className={styles.longWhiteBox}>
-        <div className={styles.longWhiteBoxIn}>
-          <div>{label}</div>
-          <span className={styles.value}>
-            {value}
-            {unit && <span className={styles.unit}>{unit}</span>}
-          </span>
-        </div>
+      <div className={`card-box ${styles.longWhiteBox}`}>
+        <div>{label}</div>
+        <span className={styles.value}>
+          {value}
+          {unit && <span className={styles.unit}>{unit}</span>}
+        </span>
       </div>
     );
   };
   const ThreeBoxContent = ({ data }) => {
     return (
-      <div className={styles.threeContent}>
+      <div className={`card-box ${styles.threeContent}`}>
         {data?.map((item) => (
           <div className={styles.threeItem}>
             <div className={styles.value}>
@@ -272,7 +270,6 @@ const SmartReport = () => {
       <ConfigProvider locale={zhCN}>
         <PageTitle children="智慧运营报告" returnable />
         <div className={styles.head}>
-          {/* <div className={styles.name}>智慧运营报告</div> */}
           <div className={styles.photo}>
             {dayjs(date.stime).format('MM月DD日')}-
             {dayjs(date.etime).format('MM月DD日')}

+ 6 - 12
src/pages/SmartReport/index.less

@@ -136,14 +136,8 @@
   .longWhiteBox {
     width: 48%;
     white-space: nowrap;
-    padding: 0.02rem;
-    box-shadow: 0 0.05rem 0.14rem 0 rgba(141, 141, 141, 0.2);
-    border-radius: 0.95rem;
-    background-image: linear-gradient(
-      178deg,
-      rgba(0, 166, 255, 1),
-      rgba(255, 255, 255, 0)
-    );
+    padding: 0.3rem 0 0.02rem;
+    text-align: center;
   }
   .longWhiteBoxIn {
     text-align: center;
@@ -175,10 +169,10 @@
     display: flex;
     width: 100%;
     height: 1.86rem;
-    background: #ecf8fd;
-    box-shadow: 0rem 0.05rem 0.14rem 0rem rgba(141, 141, 141, 0.2);
-    border-radius: 2.78rem;
-    border: 0.01rem solid #00a6ff;
+    // background: #ecf8fd;
+    // box-shadow: 0rem 0.05rem 0.14rem 0rem rgba(141, 141, 141, 0.2);
+    // border-radius: 2.78rem;
+    // border: 0.01rem solid #00a6ff;
     .blueText;
   }
   .threeItem {