修改样式

src/components/m-search/index.module.less

@@ -15,7 +15,7 @@
     .van-field__control {
       -webkit-user-select: text !important;
       user-select: text !important;
-      font-size: 13px;
+      font-size: 14px;
     }
 
     .van-search__field {
@@ -87,8 +87,8 @@
   }
 
   .leftIcon {
-    width: 14px;
-    height: 14px;
+    width: 18px;
+    height: 18px;
     // margin-top: -2px;
 
     img {

src/components/the-time-range/index.module.less

@@ -140,11 +140,15 @@
     :global {
       .van-button {
         font-size: 16px;
-        font-weight: 500 !important;
+        font-weight: 400 !important;
       }
       .van-button + .van-button {
         margin-left: 15px;
       }
+      .van-button--primary {
+        border: none;
+        background: linear-gradient( 90deg, #44C9FF 0%, #259CFE 100%);
+      }
     }
   }
 }

src/views/exercise-record/index.module.less

@@ -157,17 +157,25 @@
         color: #333333;
         line-height: 18px;
       }
+      .unit {
+        font-size: 13px;
+        color: #777777;
+        font-weight: 400;
+      }
       .value {
         display: flex;
         align-items: center;
-        font-weight: bold;
+        // font-weight: bold;
         font-size: 20px;
         color: #333333;
         font-family: 'DIN';
         padding-left: 4px;
+        margin-top: -2px;
 
         i {
+          vertical-align: sub;
           font-style: normal;
+          font-weight: 400;
           font-size: 13px;
           color: #777777;
           font-weight: 400;
@@ -217,7 +225,7 @@
     .active {
       color: #1cacf1;
     }
-    span {
+    .searchText {
       padding-right: 4px;
     }
     .iconArrow {
@@ -259,14 +267,16 @@
   margin: 0 13px;
   overflow-x: hidden;
   overflow-y: auto;
+  background: rgba(255, 255, 255, 0.73);
+  border: 1px solid #ffffff;
+  border-top: 0;
 }
 
 .listChild {
+  height: 100%;
   padding: 0 12px;
-  background: rgba(255, 255, 255, 0.73);
-  border: 1px solid #ffffff;
-  border-top: 0;
-  border-radius: 0px 0px 16px 16px;
+  // background: rgba(255, 255, 255, 0.73);
+  // border-radius: 0px 0px 16px 16px;
 }
 
 .practiceList {
@@ -286,7 +296,7 @@
 
   .time,
   .timeLabel {
-    font-weight: bold;
+    // font-weight: bold;
     font-size: 12px;
     line-height: 18px;
     color: #333;
@@ -311,13 +321,15 @@
     flex-shrink: 0;
     box-sizing: content-box;
     span {
-      font-weight: bold;
+      // font-weight: bold;
       font-size: 18px;
       color: #259cfe;
       font-family: 'DIN';
+      margin-top: -2px;
     }
-    label{
+    label {
       flex-shrink: 0;
+      font-size: 12px;
     }
   }
 

src/views/exercise-record/index.tsx

@@ -1,4 +1,11 @@
-import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue';
+import {
+  defineComponent,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref
+} from 'vue';
 import styles from './index.module.less';
 import MSticky from '@/components/m-sticky';
 import MHeader from '@/components/m-header';
@@ -198,6 +205,16 @@ export default defineComponent({
         }
       });
     };
+    // 设置导航栏颜色
+    function setStatusBarTextColor(isWhite: boolean) {
+      postMessage({
+        api: 'setStatusBarTextColor',
+        content: { statusBarTextColor: isWhite }
+      });
+    }
+    onBeforeMount(() => {
+      setStatusBarTextColor(true);
+    });
 
     onMounted(() => {
       window.addEventListener('resize', tabResize);
@@ -210,6 +227,7 @@ export default defineComponent({
     });
 
     onUnmounted(() => {
+      setStatusBarTextColor(false);
       window.removeEventListener('resize', tabResize);
     });
     return () => (
@@ -225,6 +243,7 @@ export default defineComponent({
                 <div class={styles.woringHeader}>
                   <i
                     onClick={() => {
+                      setStatusBarTextColor(false);
                       if (browser().isApp) {
                         postMessage({
                           api: 'back'
@@ -275,8 +294,9 @@ export default defineComponent({
                     <span class={styles.label}>评测次数</span>
                     <span class={styles.value}>
                       {infoDetail.value.evaluationNum}
-                      <i>次</i>
+                      {/* <i>次</i> */}
                     </span>
+                    <span class={[styles.label, styles.unit]}>次</span>
                   </div>
                   <span class={styles.line}></span>
                   <div class={styles.item} onClick={() => gotoMyWork()}>
@@ -284,8 +304,9 @@ export default defineComponent({
                     <span class={styles.label}>作品数量</span>
                     <span class={styles.value}>
                       {infoDetail.value.userMusicNum}
-                      <i>首</i>
+                      {/* <i>首</i> */}
                     </span>
+                    <span class={[styles.label, styles.unit]}>首</span>
                     <img src={iconArrow} class={styles.iconArrow} />
                   </div>
                 </div>
@@ -313,7 +334,7 @@ export default defineComponent({
                           onClick={() => {
                             state.showPopoverTime = true;
                           }}>
-                          <span>筛选</span>
+                          <span class={styles.searchText}>筛选</span>
                           <img
                             class={styles.iconArrow}
                             src={
@@ -384,18 +405,21 @@ export default defineComponent({
                   <div class={styles.item}>
                     <img src={icon2} class={styles.iconNumber} />
                     <span class={styles.label}>练习时长</span>
-                    <span class={styles.value}>
-                      {fromPractice.practiceDetail.practiceMinutes || 0 ? (
-                        <>
+                    {fromPractice.practiceDetail.practiceMinutes || 0 ? (
+                      <>
+                        <span class={styles.value}>
                           {fromPractice.practiceDetail.practiceMinutes || 0}
-                          <i>分钟</i>
-                        </>
-                      ) : (
-                        ''
-                      )}
+                        </span>
+                        <span class={[styles.label, styles.unit]}>分钟</span>
+                      </>
+                    ) : (
+                      ''
+                    )}
+
+                    <span class={styles.value}>
                       {fromPractice.practiceDetail.practiceSeconds || 0}
-                      <i>秒</i>
                     </span>
+                    <span class={[styles.label, styles.unit]}>秒</span>
                   </div>
                 </div>
               </div>
@@ -436,7 +460,7 @@ export default defineComponent({
                               ) : (
                                 ''
                               )}
-                              <span>{item.time.seconds || 0}</span>秒
+                              <span>{item.time.seconds || 0}</span><label>秒</label>
                             </p>
                           </div>
                           <div class={styles.lineBox}>
@@ -481,8 +505,8 @@ export default defineComponent({
           class={'popupBottomSearch'}
           onClosed={() => {
             // fromPractice.currentDate = fromPractice.afterTime
-            const dates = fromPractice.afterTime
-            fromPractice.currentDate = dates
+            const dates = fromPractice.afterTime;
+            fromPractice.currentDate = dates;
           }}>
           <DatePicker
             onCancel={() => {

src/views/exercise-record/modals/detail-item.module.less

@@ -36,7 +36,7 @@
         border-radius: 3px;
         border: 1px solid rgba(46, 170, 254, 0.37);
         padding: 0 4px;
-        // margin-left: 4px;
+        margin-left: 4px;
       }
 
       .itemTopSub {
@@ -65,8 +65,9 @@
       }
 
       .imgIcon {
-        font-size: 16px;
+        font-size: 14px;
         color: #d8d8d8;
+        font-weight: bold;
         margin-left: 6px;
       }
     }
@@ -89,7 +90,7 @@
         line-height: 30px;
         margin-bottom: 4px;
         font-family: 'DIN';
-        font-weight: bold;
+        // font-weight: bold;
 
         span {
           margin-left: 1px;