更新

src/components/TheTooltip/index.tsx

@@ -1,73 +1,73 @@
-import { NTooltip } from 'naive-ui';
-import { defineComponent, PropType } from 'vue';
-import styles from './index.module.less';
-
-export default defineComponent({
-  name: 'the-tooltip',
-  props: {
-    maxWidth: {
-      type: Number,
-      default: 300
-    },
-    showContentWidth: {
-      type: Number,
-      default: 120
-    },
-    tipsContent: {
-      type: String,
-      default: ''
-    },
-    content: {
-      type: String,
-      default: ''
-    },
-    placement: {
-      type: String as PropType<
-        | 'top-start'
-        | 'top'
-        | 'top-end'
-        | 'right-start'
-        | 'right'
-        | 'right-end'
-        | 'bottom-start'
-        | 'bottom'
-        | 'bottom-end'
-        | 'left-start'
-        | 'left'
-        | 'left-end'
-      >,
-      default: 'top'
-    },
-    showArrow: {
-      type: Boolean,
-      default: true
-    },
-    trigger: {
-      type: String as PropType<'hover' | 'click'>,
-      default: 'hover'
-    }
-  },
-  setup(props) {
-    return () => (
-      <>
-        <NTooltip
-          style={{ maxWidth: props.maxWidth + 'px' }}
-          trigger={props.trigger}
-          placement={props.placement}
-          showArrow={props.showArrow}
-          delay={500}>
-          {{
-            trigger: () => (
-              <p
-                style={{ maxWidth: props.showContentWidth + 'px' }}
-                class={styles.showContentWidth}>
-                {props.content}
-              </p>
-            ),
-            default: () => props.tipsContent || props.content
-          }}
-        </NTooltip>
-      </>
-    );
-  }
-});
+import { NTooltip } from 'naive-ui';
+import { defineComponent, PropType } from 'vue';
+import styles from './index.module.less';
+
+export default defineComponent({
+  name: 'the-tooltip',
+  props: {
+    maxWidth: {
+      type: Number,
+      default: 300
+    },
+    showContentWidth: {
+      type: Number,
+      default: 120
+    },
+    tipsContent: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    placement: {
+      type: String as PropType<
+        | 'top-start'
+        | 'top'
+        | 'top-end'
+        | 'right-start'
+        | 'right'
+        | 'right-end'
+        | 'bottom-start'
+        | 'bottom'
+        | 'bottom-end'
+        | 'left-start'
+        | 'left'
+        | 'left-end'
+      >,
+      default: 'top'
+    },
+    showArrow: {
+      type: Boolean,
+      default: true
+    },
+    trigger: {
+      type: String as PropType<'hover' | 'click'>,
+      default: 'hover'
+    }
+  },
+  setup(props) {
+    return () => (
+      <>
+        <NTooltip
+          style={{ maxWidth: props.maxWidth + 'px' }}
+          trigger={props.trigger}
+          placement={props.placement}
+          showArrow={props.showArrow}
+          delay={500}>
+          {{
+            trigger: () => (
+              <p
+                style={{ maxWidth: props.showContentWidth + 'px' }}
+                class={[styles.showContentWidth, 'showContentWidthWrap']}>
+                {props.content}
+              </p>
+            ),
+            default: () => props.tipsContent || props.content
+          }}
+        </NTooltip>
+      </>
+    );
+  }
+});

src/views/homework-record/detail/index.module.less

@@ -1,240 +1,251 @@
-.listWrap {
-  // min-height: 100%;
-  padding: 32px;
-  background-color: #fff;
-  border-radius: 20px;
-  min-height: calc(100vh - 7.8125vw) !important
-}
-
-.teacherSection {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #E9E9E9;
-  margin-bottom: 30px;
-  padding-bottom: 24px;
-
-  .tTemp {
-    display: flex;
-    align-content: center;
-  }
-
-  .infos {
-    margin-top: 8px;
-    padding: 13px;
-    background: #FFFFFF;
-    border-radius: 10px;
-
-    .homeTitle {
-      font-size: max(17px, 14Px);
-      font-family: PingFangSC, PingFang SC;
-      font-weight: 600;
-      color: #000000;
-      padding-bottom: 8px;
-    }
-
-    .homeContent {
-      padding-bottom: 5px;
-    }
-
-    .homeworkText {
-      display: flex;
-      align-items: flex-start;
-
-      .pSection {
-        max-width: 500px;
-      }
-
-      .p1,
-      .p2 {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-
-
-      }
-
-      .p1::before,
-      .p2::before {
-        content: '';
-        display: inline-block;
-        width: 5px;
-        height: 5px;
-        background: #198CFE;
-        margin-right: 7px;
-        border-radius: 50%;
-        flex-shrink: 0;
-        transform: translateY(-3px);
-      }
-
-      .p2 {
-        padding-top: 6px;
-      }
-
-      .p2::before {
-        background: #F44040;
-      }
-    }
-
-    .title {
-      font-size: max(13px, 12Px);
-      color: #777777;
-      flex-shrink: 0;
-    }
-
-    .text {
-      font-size: max(13px, 12Px);
-      font-weight: 500;
-      color: #333333;
-      line-height: 22px;
-    }
-
-  }
-
-  .stitcTitle {
-    display: flex;
-    align-items: center;
-    font-size: max(20px, 16Px);
-    font-family: PingFangSC, PingFang SC;
-    font-weight: 600;
-    color: #000000;
-    line-height: 28px;
-    padding-bottom: 30px;
-
-    &::before {
-      content: '';
-      display: inline-block;
-      width: 4px;
-      height: 14px;
-      background: #198CFE;
-      border-radius: 2px;
-      margin-right: 8px;
-    }
-  }
-
-  .stitcConent {
-    :global {
-      .n-progress {
-        width: 116Px;
-      }
-    }
-
-    .contentRect {
-      text-align: center;
-
-      .text {
-        padding-top: 5px;
-        font-size: 12Px;
-        font-family: PingFangSC, PingFang SC;
-        font-weight: 400;
-        color: #777777;
-        line-height: 17px;
-      }
-    }
-
-    .nums {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: max(26px, 18Px);
-      font-family: DINAlternate, DINAlternate;
-      font-weight: bold;
-      color: #000000;
-      line-height: 30px;
-
-      i {
-        font-style: normal;
-        font-size: max(20px, 14Px);
-      }
-
-      span {
-        font-size: 12Px;
-        font-family: PingFangSC, PingFang SC;
-        font-weight: 500;
-        color: #333333;
-        line-height: 17px;
-      }
-    }
-  }
-}
-
-.teacherList {
-  display: flex;
-  // align-items: center;
-  flex-direction: column;
-  // margin-bottom: 32px;
-  flex: 1;
-  margin-right: 60px;
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 1px;
-    height: 120px;
-    background: #E9E9E9;
-    top: 50%;
-    margin-top: -60px;
-  }
-
-
-
-  .teacherHeader {
-    width: 100px;
-    height: 100px;
-    padding: 4px;
-    border-radius: 99px;
-    background: linear-gradient(228deg,
-        rgba(2, 186, 255, 1),
-        rgba(0, 122, 254, 1));
-    margin-right: 20px;
-
-    .teacherHeaderBorder {
-      width: 100%;
-      height: 100%;
-      background: #fff;
-      border-radius: 99px;
-      overflow: hidden;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      padding: 4px;
-    }
-  }
-
-  .teacherHeaderImg {
-    width: 84px;
-    height: 84px;
-    border-radius: 50%;
-    overflow: hidden;
-  }
-
-  .workafterInfo {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-
-    h4 {
-      font-size: 22px;
-      line-height: 30px;
-      font-weight: 600;
-      color: #131415;
-      margin-bottom: 12px;
-    }
-
-    p {
-      font-size: max(16px, 12Px);
-      line-height: 22px;
-      color: #777;
-
-      span {
-        color: #ea4132;
-      }
-    }
-  }
-}
-
-.wordDetailModel {
-  width: 1012px;
+.listWrap {
+  // min-height: 100%;
+  padding: 32px;
+  background-color: #fff;
+  border-radius: 20px;
+  min-height: calc(100vh - 7.8125vw) !important
+}
+
+.teacherSection {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #E9E9E9;
+  margin-bottom: 30px;
+  padding-bottom: 24px;
+
+  .tTemp {
+    display: flex;
+    align-content: center;
+  }
+
+  .infos {
+    margin-top: 8px;
+    padding: 13px;
+    background: #FFFFFF;
+    border-radius: 10px;
+
+    .homeTitle {
+      font-size: max(17px, 14Px);
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      color: #000000;
+      padding-bottom: 8px;
+    }
+
+    .homeContent {
+      padding-bottom: 5px;
+    }
+
+    .homeworkText {
+      display: flex;
+      align-items: flex-start;
+
+      .pSection {
+        max-width: 790px;
+      }
+
+      .p1,
+      .p2 {
+        // white-space: nowrap;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
+
+        &>div {
+          display: flex;
+          align-items: flex-start;
+          color: #838383;
+
+          span {
+            color: #313131;
+            flex-shrink: 0;
+          }
+        }
+      }
+
+      .p1::before,
+      .p2::before {
+        content: '';
+        display: inline-block;
+        width: 5px;
+        height: 5px;
+        background: #198CFE;
+        margin-right: 7px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        transform: translateY(-3px);
+      }
+
+      .p2 {
+        padding-top: 6px;
+      }
+
+      .p2::before {
+        background: #F44040;
+      }
+    }
+
+    .title {
+      font-size: max(13px, 12Px);
+      color: #777777;
+      flex-shrink: 0;
+    }
+
+    .text {
+      font-size: max(13px, 12Px);
+      font-weight: 500;
+      color: #333333;
+      line-height: 22px;
+      display: flex;
+      align-items: baseline;
+    }
+
+  }
+
+  .stitcTitle {
+    display: flex;
+    align-items: center;
+    font-size: max(20px, 16Px);
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 600;
+    color: #000000;
+    line-height: 28px;
+    padding-bottom: 30px;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 4px;
+      height: 14px;
+      background: #198CFE;
+      border-radius: 2px;
+      margin-right: 8px;
+    }
+  }
+
+  .stitcConent {
+    :global {
+      .n-progress {
+        width: 116Px;
+      }
+    }
+
+    .contentRect {
+      text-align: center;
+
+      .text {
+        padding-top: 5px;
+        font-size: 12Px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        color: #777777;
+        line-height: 17px;
+      }
+    }
+
+    .nums {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: max(26px, 18Px);
+      font-family: DINAlternate, DINAlternate;
+      font-weight: bold;
+      color: #000000;
+      line-height: 30px;
+
+      i {
+        font-style: normal;
+        font-size: max(20px, 14Px);
+      }
+
+      span {
+        font-size: 12Px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 17px;
+      }
+    }
+  }
+}
+
+.teacherList {
+  display: flex;
+  // align-items: center;
+  flex-direction: column;
+  // margin-bottom: 32px;
+  flex: 1;
+  margin-right: 60px;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    width: 1px;
+    height: 55%;
+    background: #E9E9E9;
+    top: 50%;
+    margin-top: -60px;
+  }
+
+
+
+  .teacherHeader {
+    width: 100px;
+    height: 100px;
+    padding: 4px;
+    border-radius: 99px;
+    background: linear-gradient(228deg,
+        rgba(2, 186, 255, 1),
+        rgba(0, 122, 254, 1));
+    margin-right: 20px;
+
+    .teacherHeaderBorder {
+      width: 100%;
+      height: 100%;
+      background: #fff;
+      border-radius: 99px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 4px;
+    }
+  }
+
+  .teacherHeaderImg {
+    width: 84px;
+    height: 84px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .workafterInfo {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    h4 {
+      font-size: 22px;
+      line-height: 30px;
+      font-weight: 600;
+      color: #131415;
+      margin-bottom: 12px;
+    }
+
+    p {
+      font-size: max(16px, 12Px);
+      line-height: 22px;
+      color: #777;
+
+      span {
+        color: #ea4132;
+      }
+    }
+  }
+}
+
+.wordDetailModel {
+  width: 1012px;
 }

src/views/homework-record/detail/index.tsx

@@ -21,6 +21,7 @@ import { trainingStatusArray } from '@/utils/searchArray';
 import dayjs from 'dayjs';
 import TheEmpty from '/src/components/TheEmpty';
 import TrainingDetails from '../../classList/modals/TrainingDetails';
+import { evaluateDifficult } from '/src/utils/contants';
 export default defineComponent({
   name: 'homewrok-record-detail',
   setup() {
@@ -108,16 +109,35 @@ export default defineComponent({
             // if (child.trainingType === 'EVALUATION' && child.musicName) {
             //   eTitle += eTitle ? '、' + child.musicName : child.musicName;
             // }
+            const trainingContent = child.trainingContent
+              ? JSON.parse(child.trainingContent)
+              : null;
 
             if (child.trainingType === 'PRACTICE' && child.musicName) {
-              pTitle += pTitle
-                ? '、《' + child.musicName + '》'
-                : '练习曲目《' + child.musicName + '》';
+              pTitle += '《' + child.musicName + '》';
+
+              if (trainingContent) {
+                const tempList = [
+                  `${trainingContent.practiceChapterBegin}-${trainingContent.practiceChapterEnd}小节`,
+                  `速度${trainingContent.practiceSpeed}`,
+                  `${trainingContent.trainingTimes}分钟`
+                ];
+                pTitle += tempList.join(' | ') + '；';
+              }
             }
             if (child.trainingType === 'EVALUATION' && child.musicName) {
-              eTitle += eTitle
-                ? '、《' + child.musicName + '》'
-                : '评测曲目《' + child.musicName + '》';
+              eTitle += '《' + child.musicName + '》';
+              if (trainingContent) {
+                const tempList = [
+                  `${evaluateDifficult[trainingContent.evaluateDifficult]}`,
+                  trainingContent.practiceChapterBegin ||
+                  trainingContent.practiceChapterEnd
+                    ? `${trainingContent.practiceChapterBegin}-${trainingContent.practiceChapterEnd}小节`
+                    : '全部小节',
+                  `${trainingContent.trainingTimes}分合格`
+                ];
+                eTitle += tempList.join(' | ') + '；';
+              }
             }
           });
         }
@@ -281,12 +301,18 @@ export default defineComponent({
                   <div class={styles.pSection}>
                     {state.workInfo.pTitle && (
                       <p class={[styles.text, styles.p1]}>
-                        {state.workInfo.pTitle}
+                        <div>
+                          <span>练习曲目:</span>
+                          <p>{state.workInfo.pTitle}</p>
+                        </div>
                       </p>
                     )}
                     {state.workInfo.eTitle && (
                       <p class={[styles.text, styles.p2]}>
-                        {state.workInfo.eTitle}
+                        <div>
+                          <span>评测曲目:</span>
+                          <p>{state.workInfo.eTitle}</p>
+                        </div>
                       </p>
                     )}
                   </div>

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

@@ -1,350 +1,357 @@
-.listWrap {
-  padding: 32px;
-  background-color: #fff;
-  border-radius: 20px;
-}
-
-.searchList {
-  .searchInput {
-    max-width: 260px;
-  }
-
-  // .CDatePickerItem {
-  //   :global {
-  //     .n-input {
-  //       width: 303px;
-  //     }
-  //   }
-  // }
-
-  :global {
-    .n-form.n-form--inline {
-      flex-wrap: wrap;
-    }
-
-    .n-form.n-form--inline .n-form-item {
-      margin-right: 18px;
-    }
-
-    // .n-form-item-blank>div {
-    //   .n-select {
-    //     min-width: 150px !important;
-    //     width: 150px !important;
-    //   }
-    // }
-  }
-}
-
-.infoListWrap {
-  min-height: calc(100vh - 150px) !important
-}
-
-.addBtnIcon {
-  width: 13Px !important;
-  height: 14Px !important;
-}
-
-.addBtn {
-  margin-bottom: 30px;
-  background: #198cfe !important;
-  border-radius: 7Px !important;
-  padding: 0 18Px !important;
-  font-weight: 600 !important;
-}
-
-.btnGroup {
-  padding: 40px 0;
-
-  :global {
-    .n-button {
-      height: 47px;
-      min-width: 156px;
-    }
-  }
-}
-
-.addClass {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 50px;
-}
-
-.listWrap {
-  min-height: 100%;
-  padding: 32px;
-  background-color: #fff;
-  border-radius: 20px;
-
-}
-
-.workVisiable {
-  width: 1258px;
-}
-
-.workContainer {
-  display: flex;
-  align-items: center;
-
-  .workTrain {
-    flex: 1;
-    height: 75vh;
-
-    &>div {
-      padding-top: 15px;
-    }
-  }
-
-  :global {
-    .train-container {
-      // max-height: calc(var(--window-page-lesson-height) - 135px) !important;
-      max-height: calc(var(--window-page-lesson-height) - 100px) !important;
-
-      .train-listSection {
-        min-height: calc(var(--window-page-lesson-height) - 100px) !important;
-      }
-    }
-  }
-
-  .resourceMain {
-    flex: 0 0 360px;
-    height: 75vh;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-  }
-}
-
-.removeVisiable {
-  width: 432px;
-
-  :global {
-    .n-card-header {
-      font-size: max(22px, 16Px);
-    }
-  }
-
-  .studentRemove {
-    padding: 0 40px;
-
-    p {
-      font-size: max(18px, 14Px);
-      color: #777777;
-      line-height: 30px;
-
-      span {
-        color: #EA4132;
-      }
-    }
-  }
-
-  .btnGroup {
-    padding: 32px 0;
-
-    :global {
-      .n-button {
-        height: 47px;
-        min-width: 156px;
-      }
-    }
-  }
-}
-
-.listSection {
-  padding: 0 0 12px;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  gap: 20px 2%;
-
-  &>div {
-    width: 49% !important;
-  }
-}
-
-.item {
-  cursor: pointer;
-  background: #F7F9FF;
-  border-radius: 13px;
-  padding: 0 17px 17px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  .header {
-    display: flex;
-    align-items: center;
-    padding: 13px 0;
-
-    .navatar {
-      width: 60px;
-      height: 60px;
-      border-radius: 50%;
-      padding: 2px;
-      border: 1px solid #198CFE;
-      margin-right: 15px;
-      flex-shrink: 0;
-      background-color: #fff !important;
-
-      :global {
-        img {
-          border-radius: 50%;
-        }
-      }
-    }
-
-    .userInfo {
-      padding-top: 4px;
-      flex: 1;
-
-      h2 {
-        font-size: max(17px, 14Px);
-        font-weight: 600;
-        color: #131415;
-        line-height: 28px;
-      }
-
-      p {
-        font-size: max(16px, 12Px);
-        color: #777777;
-        line-height: 28px;
-      }
-    }
-
-    .ing,
-    .over {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 121px;
-      height: 38px;
-      display: inline-block;
-    }
-
-    .ing {
-      background: url('./images/icon-ing.png') no-repeat center;
-      background-size: contain;
-    }
-
-    .over {
-      background: url('./images/icon-over.png') no-repeat center;
-      background-size: contain;
-    }
-  }
-
-  .content {
-    // display: flex;
-    // justify-content: space-between;
-    // align-items: flex-end;
-    flex: 1;
-    padding: 13px;
-    background: #FFFFFF;
-    border-radius: 10px;
-
-    .homeTitle {
-      font-size: max(17px, 14Px);
-      font-family: PingFangSC, PingFang SC;
-      font-weight: 600;
-      color: #000000;
-      padding-bottom: 5px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      :global {
-        .n-space {
-          flex-shrink: 0;
-        }
-      }
-
-      &>p {
-        display: flex;
-        align-items: center;
-      }
-
-      .CLASSWORK,
-      .HOMEWORK {
-        padding: 2px 8px 1px;
-        border-radius: 4px;
-        font-size: max(13px, 11Px);
-        line-height: 18px;
-        margin-right: 7px;
-      }
-
-      .CLASSWORK {
-        color: #E24F4F;
-        background: #FFD2D2;
-      }
-
-      .HOMEWORK {
-        color: #3F8ADF;
-        background: #D2E9FF;
-
-      }
-    }
-
-    .homeContent {
-      padding-bottom: 5px;
-    }
-
-    .homeworkText {
-      display: flex;
-      align-items: flex-start;
-
-      .pSection {
-        max-width: 650px;
-      }
-
-      .p1,
-      .p2 {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .p1::before,
-      .p2::before {
-        content: '';
-        display: inline-block;
-        width: 5px;
-        height: 5px;
-        background: #198CFE;
-        margin-right: 7px;
-        border-radius: 50%;
-        flex-shrink: 0;
-        transform: translateY(-3px);
-      }
-
-      .p1 {
-        padding-bottom: 6px;
-      }
-
-      .p2::before {
-        background: #F44040;
-      }
-    }
-
-    .title {
-      font-size: max(13px, 12Px);
-      color: #777777;
-      flex-shrink: 0;
-    }
-
-    .text {
-      font-size: max(13px, 12Px);
-      font-weight: 500;
-      color: #333333;
-      line-height: 22px;
-    }
-
-    .errorBtn {
-      // min-width: 93px;
-      // height: 30px;
-      --n-height: 24px !important;
-      // background: #F94D50;
-      // border-radius: 7px;
-      --n-font-size: max(15px, 13Px);
-      font-weight: 500 !important;
-      // color: #FFFFFF;
-      line-height: 18px;
-    }
-  }
+.listWrap {
+  padding: 32px;
+  background-color: #fff;
+  border-radius: 20px;
+}
+
+.searchList {
+  .searchInput {
+    max-width: 260px;
+  }
+
+  // .CDatePickerItem {
+  //   :global {
+  //     .n-input {
+  //       width: 303px;
+  //     }
+  //   }
+  // }
+
+  :global {
+    .n-form.n-form--inline {
+      flex-wrap: wrap;
+    }
+
+    .n-form.n-form--inline .n-form-item {
+      margin-right: 18px;
+    }
+
+    // .n-form-item-blank>div {
+    //   .n-select {
+    //     min-width: 150px !important;
+    //     width: 150px !important;
+    //   }
+    // }
+  }
+}
+
+.infoListWrap {
+  min-height: calc(100vh - 150px) !important
+}
+
+.addBtnIcon {
+  width: 13Px !important;
+  height: 14Px !important;
+}
+
+.addBtn {
+  margin-bottom: 30px;
+  background: #198cfe !important;
+  border-radius: 7Px !important;
+  padding: 0 18Px !important;
+  font-weight: 600 !important;
+}
+
+.btnGroup {
+  padding: 40px 0;
+
+  :global {
+    .n-button {
+      height: 47px;
+      min-width: 156px;
+    }
+  }
+}
+
+.addClass {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 50px;
+}
+
+.listWrap {
+  min-height: 100%;
+  padding: 32px;
+  background-color: #fff;
+  border-radius: 20px;
+
+}
+
+.workVisiable {
+  width: 1258px;
+}
+
+.workContainer {
+  display: flex;
+  align-items: center;
+
+  .workTrain {
+    flex: 1;
+    height: 75vh;
+
+    &>div {
+      padding-top: 15px;
+    }
+  }
+
+  :global {
+    .train-container {
+      // max-height: calc(var(--window-page-lesson-height) - 135px) !important;
+      max-height: calc(var(--window-page-lesson-height) - 100px) !important;
+
+      .train-listSection {
+        min-height: calc(var(--window-page-lesson-height) - 100px) !important;
+      }
+    }
+  }
+
+  .resourceMain {
+    flex: 0 0 360px;
+    height: 75vh;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+  }
+}
+
+.removeVisiable {
+  width: 432px;
+
+  :global {
+    .n-card-header {
+      font-size: max(22px, 16Px);
+    }
+  }
+
+  .studentRemove {
+    padding: 0 40px;
+
+    p {
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: 30px;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroup {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}
+
+.listSection {
+  padding: 0 0 12px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 20px 2%;
+
+  &>div {
+    width: 49% !important;
+  }
+}
+
+.item {
+  cursor: pointer;
+  background: #F7F9FF;
+  border-radius: 13px;
+  padding: 0 17px 17px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    display: flex;
+    align-items: center;
+    padding: 13px 0;
+
+    .navatar {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      padding: 2px;
+      border: 1px solid #198CFE;
+      margin-right: 15px;
+      flex-shrink: 0;
+      background-color: #fff !important;
+
+      :global {
+        img {
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .userInfo {
+      padding-top: 4px;
+      flex: 1;
+
+      h2 {
+        font-size: max(17px, 14Px);
+        font-weight: 600;
+        color: #131415;
+        line-height: 28px;
+      }
+
+      p {
+        font-size: max(16px, 12Px);
+        color: #777777;
+        line-height: 28px;
+      }
+    }
+
+    .ing,
+    .over {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 121px;
+      height: 38px;
+      display: inline-block;
+    }
+
+    .ing {
+      background: url('./images/icon-ing.png') no-repeat center;
+      background-size: contain;
+    }
+
+    .over {
+      background: url('./images/icon-over.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .content {
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: flex-end;
+    flex: 1;
+    padding: 13px;
+    background: #FFFFFF;
+    border-radius: 10px;
+
+    .homeTitle {
+      font-size: max(17px, 14Px);
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      color: #000000;
+      padding-bottom: 5px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      :global {
+        .n-space {
+          flex-shrink: 0;
+        }
+      }
+
+      &>p {
+        display: flex;
+        align-items: center;
+      }
+
+      .CLASSWORK,
+      .HOMEWORK {
+        padding: 2px 8px 1px;
+        border-radius: 4px;
+        font-size: max(13px, 11Px);
+        line-height: 18px;
+        margin-right: 7px;
+      }
+
+      .CLASSWORK {
+        color: #E24F4F;
+        background: #FFD2D2;
+      }
+
+      .HOMEWORK {
+        color: #3F8ADF;
+        background: #D2E9FF;
+
+      }
+    }
+
+    .homeContent {
+      padding-bottom: 5px;
+    }
+
+    .homeworkText {
+      display: flex;
+      align-items: flex-start;
+
+      .pSection {
+        max-width: 650px;
+      }
+
+      .p1,
+      .p2 {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .p1::before,
+      .p2::before {
+        content: '';
+        display: inline-block;
+        width: 5px;
+        height: 5px;
+        background: #198CFE;
+        margin-right: 7px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        transform: translateY(-3px);
+      }
+
+      .p1 {
+        padding-bottom: 6px;
+      }
+
+      .p2::before {
+        background: #F44040;
+      }
+    }
+
+    .title {
+      font-size: max(13px, 12Px);
+      color: #777777;
+      flex-shrink: 0;
+    }
+
+    .text {
+      font-size: max(13px, 12Px);
+      font-weight: 500;
+      color: #333333;
+      line-height: 22px;
+
+      :global {
+        .showContentWidthWrap {
+          max-width: 100% !important;
+          display: inline;
+        }
+      }
+    }
+
+    .errorBtn {
+      // min-width: 93px;
+      // height: 30px;
+      --n-height: 24px !important;
+      // background: #F94D50;
+      // border-radius: 7px;
+      --n-font-size: max(15px, 13Px);
+      font-weight: 500 !important;
+      // color: #FFFFFF;
+      line-height: 18px;
+    }
+  }
 }

src/views/homework-record/index.tsx

@@ -32,6 +32,8 @@ import { useResizeObserver } from '@vueuse/core';
 import { nextTick } from 'process';
 import PreviewWindow from '../preview-window';
 import { state as baseState } from '@/state';
+import { evaluateDifficult } from '/src/utils/contants';
+import TheTooltip from '/src/components/TheTooltip';
 
 export const getCurrentMonth = () => {
   return [dayjs().startOf('month').valueOf(), dayjs().endOf('month').valueOf()];
@@ -146,18 +148,43 @@ export default defineComponent({
             item.studentLessonTrainingDetails.length > 0
           ) {
             item.studentLessonTrainingDetails.forEach((child: any) => {
+              const trainingContent = child.trainingContent
+                ? JSON.parse(child.trainingContent)
+                : null;
               if (child.trainingType === 'PRACTICE' && child.musicName) {
                 pTitle += pTitle
-                  ? '、《' + child.musicName + '》'
+                  ? '《' + child.musicName + '》'
                   : '练习曲目《' + child.musicName + '》';
+
+                if (trainingContent) {
+                  const tempList = [
+                    `${trainingContent.practiceChapterBegin}-${trainingContent.practiceChapterEnd}小节`,
+                    `速度${trainingContent.practiceSpeed}`,
+                    `${trainingContent.trainingTimes}分钟`
+                  ];
+                  pTitle += tempList.join(' | ') + '；';
+                }
               }
               if (child.trainingType === 'EVALUATION' && child.musicName) {
                 eTitle += eTitle
-                  ? '、《' + child.musicName + '》'
+                  ? '《' + child.musicName + '》'
                   : '评测曲目《' + child.musicName + '》';
+
+                if (trainingContent) {
+                  const tempList = [
+                    `${evaluateDifficult[trainingContent.evaluateDifficult]}`,
+                    trainingContent.practiceChapterBegin ||
+                    trainingContent.practiceChapterEnd
+                      ? `${trainingContent.practiceChapterBegin}-${trainingContent.practiceChapterEnd}小节`
+                      : '全部小节',
+                    `${trainingContent.trainingTimes}分合格`
+                  ];
+                  eTitle += tempList.join(' | ') + '；';
+                }
               }
             });
           }
+
           item.pTitle = pTitle;
           item.eTitle = eTitle;
 
@@ -527,12 +554,21 @@ export default defineComponent({
                         <div class={styles.pSection}>
                           {item.pTitle && (
                             <p class={[styles.text, styles.p1]}>
-                              {item.pTitle}
+                              {/* {item.pTitle} */}
+                              <TheTooltip
+                                maxWidth={500}
+                                content={item.pTitle}
+                                style={{ maxWidth: '100% !important' }}
+                              />
                             </p>
                           )}
                           {item.eTitle && (
                             <p class={[styles.text, styles.p2]}>
-                              {item.eTitle}
+                              <TheTooltip
+                                maxWidth={500}
+                                content={item.eTitle}
+                                style={{ maxWidth: '100% !important' }}
+                              />
                             </p>
                           )}
                         </div>