修改显示

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

@@ -145,7 +145,7 @@
     .iconNumber {
       width: 18px;
       height: 18px;
-      margin-right: 3px;
+      margin-right: 2px;
     }
 
     .item {
@@ -259,7 +259,6 @@
   margin: 0 13px;
   overflow-x: hidden;
   overflow-y: auto;
-
 }
 
 .listChild {
@@ -270,55 +269,73 @@
   border-radius: 0px 0px 16px 16px;
 }
 
+.practiceList {
+  padding-top: 12px;
+}
+
 .practiceItem {
-  display: flex;
-  align-items: center;
+  // display: flex;
+  // align-items: center;
   padding-bottom: 20px;
-  padding-right: 70px;
 
-  .time {
+  .practiceTop {
+    display: flex;
+    align-items: center;
+    padding-bottom: 6px;
+  }
+
+  .time,
+  .timeLabel {
     font-weight: bold;
-    font-size: 14px;
+    font-size: 12px;
     line-height: 18px;
-    color: #777777;
+    color: #333;
     font-family: 'DIN';
-    width: 42px;
+  }
+  .timeLabel {
+    &::before {
+      content: '｜';
+      font-weight: bold;
+      font-size: 12px;
+      color: #b9cfde;
+      line-height: 18px;
+    }
+  }
+  .long {
+    display: flex;
+    align-items: center;
+    padding-left: 2px;
+    font-weight: 400;
+    font-size: 14px;
+    color: #777777;
+    flex-shrink: 0;
+    box-sizing: content-box;
+    span {
+      font-weight: bold;
+      font-size: 18px;
+      color: #259cfe;
+      font-family: 'DIN';
+    }
+    label{
+      flex-shrink: 0;
+    }
   }
 
   .lineBox {
     display: flex;
     align-items: center;
     flex: 1;
-
     .boxSection {
       flex: 1;
       position: relative;
+      background: #e3edf1;
+      border-radius: 2px;
     }
 
     .box {
       background: linear-gradient(270deg, #28a0fe 0%, #98dbff 100%);
       border-radius: 2px;
-      border: 1px solid #ffffff;
       height: 20px;
-      // width: 100%;
-    }
-    .long {
-      position: absolute;
-      top: 0;
-      padding-left: 8px;
-      font-weight: 400;
-      font-size: 14px;
-      color: #777777;
-      flex-shrink: 0;
-      width: 76px;
-      box-sizing: content-box;
-      span {
-        padding-right: 2px;
-        font-weight: bold;
-        font-size: 18px;
-        color: #259cfe;
-        font-family: 'DIN';
-      }
     }
   }
 }

src/views/exercise-record/index.tsx

@@ -52,6 +52,7 @@ export default defineComponent({
     const fromPractice = reactive({
       showData: true,
       showTime: false,
+      afterTime: [dayjs().format('YYYY'), dayjs().format('MM')],
       currentDate: [dayjs().format('YYYY'), dayjs().format('MM')],
       practiceMonthName:
         dayjs().format('YYYY') + '年' + dayjs().format('MM') + '月',
@@ -130,6 +131,16 @@ export default defineComponent({
     const tabResize = () => {
       tabsRef.value?.resize();
     };
+
+    /** 秒转成 分秒 */
+    const formatSToMS = (time: number) => {
+      const minutes = Math.floor(time / 60);
+      const seconds = Math.floor(time % 60);
+      return {
+        minutes,
+        seconds
+      };
+    };
     //
     const getPractice = async () => {
       try {
@@ -150,6 +161,12 @@ export default defineComponent({
         fromPractice.showData = studentTrainStatList?.length > 0;
         fromPractice.practiceDetail = { ...more };
 
+        const practiceTime = formatSToMS(
+          fromPractice.practiceDetail.practiceTimes || 0
+        );
+        fromPractice.practiceDetail.practiceMinutes = practiceTime.minutes;
+        fromPractice.practiceDetail.practiceSeconds = practiceTime.seconds;
+
         const tempList: any = [];
         let maxTime = 0;
         studentTrainStatList?.forEach((item: any) => {
@@ -158,9 +175,10 @@ export default defineComponent({
           }
         });
         studentTrainStatList?.forEach((item: any) => {
+          console.log(formatSToMS(item.practiceTimes));
           tempList.push({
-            date: dayjs(item.practiceDate).format('MM/DD'),
-            time: parseFloat((item.practiceTimes / 60).toFixed(2)),
+            date: dayjs(item.practiceDate).format('MM月DD日'),
+            time: formatSToMS(item.practiceTimes),
             rate: Math.floor((item.practiceTimes / maxTime) * 100)
           });
         });
@@ -315,12 +333,10 @@ export default defineComponent({
                   <OFullRefresh
                     v-model:modelValue={refreshing.value}
                     onRefresh={onRefresh}
-                    style={
-                      {
-                        minHeight: '100%'
-                        // minHeight: `calc(100vh - ${topWrapHeight.value}px)`
-                      }
-                    }>
+                    style={{
+                      minHeight: '100%'
+                      // minHeight: `calc(100vh - ${topWrapHeight.value}px)`
+                    }}>
                     <List
                       loading-text=" "
                       loading={loading.value}
@@ -369,12 +385,16 @@ export default defineComponent({
                     <img src={icon2} class={styles.iconNumber} />
                     <span class={styles.label}>练习时长</span>
                     <span class={styles.value}>
-                      {fromPractice.practiceDetail.practiceTimes
-                        ? Math.floor(
-                            fromPractice.practiceDetail.practiceTimes / 60
-                          )
-                        : 0}
-                      <i>分钟</i>
+                      {fromPractice.practiceDetail.practiceMinutes || 0 ? (
+                        <>
+                          {fromPractice.practiceDetail.practiceMinutes || 0}
+                          <i>分钟</i>
+                        </>
+                      ) : (
+                        ''
+                      )}
+                      {fromPractice.practiceDetail.practiceSeconds || 0}
+                      <i>秒</i>
                     </span>
                   </div>
                 </div>
@@ -404,18 +424,26 @@ export default defineComponent({
                     <div class={styles.practiceList}>
                       {fromPractice.practiceList?.map((item: any) => (
                         <div class={styles.practiceItem}>
-                          <span class={styles.time}>{item.date}</span>
+                          <div class={styles.practiceTop}>
+                            <span class={styles.time}>{item.date}</span>
+                            <span class={styles.timeLabel}>练习时长</span>
+                            <p class={styles.long}>
+                              {item.time.minutes || 0 ? (
+                                <>
+                                  <span>{item.time.minutes || 0}</span>
+                                  <label>分钟</label>
+                                </>
+                              ) : (
+                                ''
+                              )}
+                              <span>{item.time.seconds || 0}</span>秒
+                            </p>
+                          </div>
                           <div class={styles.lineBox}>
                             <div class={styles.boxSection}>
                               <div
                                 class={styles.box}
                                 style={{ width: item.rate + '%' }}></div>
-                              <p
-                                class={styles.long}
-                                style={{ left: item.rate + '%' }}>
-                                <span>{item.time}</span>
-                                分钟
-                              </p>
                             </div>
                           </div>
                         </div>
@@ -450,14 +478,22 @@ export default defineComponent({
           v-model:show={fromPractice.showTime}
           position="bottom"
           round
-          class={'popupBottomSearch'}>
+          class={'popupBottomSearch'}
+          onClosed={() => {
+            // fromPractice.currentDate = fromPractice.afterTime
+            const dates = fromPractice.afterTime
+            fromPractice.currentDate = dates
+          }}>
           <DatePicker
             onCancel={() => {
               fromPractice.showTime = false;
             }}
             onConfirm={(val: any) => {
               fromPractice.showTime = false;
-              fromPractice.practiceMonthName = dayjs(fromPractice.currentDate.join('-')).format('YYYY年MM月')
+              fromPractice.afterTime = val.selectedValues;
+              fromPractice.practiceMonthName = dayjs(
+                fromPractice.currentDate.join('-')
+              ).format('YYYY年MM月');
               getPractice();
             }}
             v-model={fromPractice.currentDate}