添加

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.lim8lrbg4r8"
+    "revision": "0.4m9b2fdbr0g"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/layout/index.module.less

@@ -129,6 +129,8 @@
       flex-direction: row;
       align-items: center;
 
+
+
       .messageBadge {
         margin-right: 24px;
 
@@ -563,4 +565,10 @@
     // }
   }
 
+}
+
+.popoverClassModel {
+  width: 500px !important;
+  border-radius: 19px !important;
+  // border-radius: ;
 }

src/components/layout/layoutTop.tsx

@@ -24,6 +24,7 @@ import ForgotPassword from '/src/views/setting/modal/forgotPassword';
 import ImGroup from './imGroup';
 import SuggestionOption from './modals/suggestion-option';
 import dayjs from 'dayjs';
+import ClassModal from '/src/views/home/modals/class-modal';
 export default defineComponent({
   name: 'layoutTop',
   setup() {
@@ -119,18 +120,25 @@ export default defineComponent({
             </p>
           </div>
           <div class={styles.layoutRight}>
-            {/* <NTooltip>
-              {{
+            <NPopover
+              width={380}
+              class={styles.popoverClassModel}
+              placement={'bottom'}
+              trigger="click"
+              displayDirective="show"
+              v-slots={{
                 trigger: () => (
-                  <div class={styles.optons} onClick={() => {
-                    router.push('/')
-                  }}>
+                  <div
+                    class={styles.optons}
+                    onClick={() => {
+                      router.push('/');
+                    }}>
                     <NImage src={classHistoryIcon} previewDisabled></NImage>
                   </div>
-                ),
-                default: '上课记录'
-              }}
-            </NTooltip> */}
+                )
+              }}>
+              <ClassModal />
+            </NPopover>
             <NTooltip>
               {{
                 trigger: () => (

src/views/content-information/content-instrument/components/list/index.tsx

@@ -70,6 +70,7 @@ export default defineComponent({
         <SearchGroupResources
           categoryChildList={props.categoryChildList}
           onSearch={(item: any) => onSearch(item)}
+          wikiCategoryId={props.categoryId}
         />
 
         <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>

src/views/content-information/content-instrument/components/list/search-group-resources.tsx

@@ -8,6 +8,10 @@ export default defineComponent({
     categoryChildList: {
       type: Array as PropType<any>,
       default: () => []
+    },
+    wikiCategoryId: {
+      type: String,
+      default: ''
     }
   },
   emits: ['search', 'add'],
@@ -37,7 +41,7 @@ export default defineComponent({
               size="small"
               focusable={false}
               onClick={() => {
-                forms.wikiCategoryId = '';
+                forms.wikiCategoryId = props.wikiCategoryId;
                 onSearch();
               }}>
               全部

src/views/content-information/content-instrument/detail.module.less

@@ -164,6 +164,16 @@
       color: #000000;
       line-height: 25px;
       border-top: 1px solid #F2F2F2;
+      display: flex;
+      align-items: center;
+    }
+
+    .icon2 {
+      width: 23px;
+      height: 23px;
+      margin-right: 8px;
+      background: url('../images/icon-2.png') no-repeat center;
+      background-size: contain;
     }
   }
 
@@ -336,6 +346,17 @@
     font-weight: 600;
     color: #000000;
     line-height: 25px;
+    display: flex;
+    align-items: center;
+
+    .icon1 {
+      display: inline-block;
+      width: 23px;
+      height: 23px;
+      margin-right: 8px;
+      background: url('../images/icon-1.png') no-repeat center;
+      background-size: contain;
+    }
   }
 
   .musicContent {

src/views/content-information/content-instrument/detail.tsx

@@ -114,6 +114,10 @@ export default defineComponent({
         knowledgeWikiCategories.length > 0
           ? knowledgeWikiCategories[0].name
           : '';
+      res.data.intros = res.data.intros.replace(
+        /<video/gi,
+        '<video style="width: 100% !important;" controlslist="nodownload"'
+      );
       data.details = res.data;
       data.loading = false;
     };

src/views/content-information/content-music/components/list/index.module.less

@@ -165,4 +165,32 @@
       background-size: contain;
     }
   }
+}
+
+.popSelect {
+  font-size: 16px;
+  width: 160px;
+  box-shadow: 0px 2 16px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 11px;
+  --n-option-height: 34px;
+}
+
+.spaceSection {
+  padding-bottom: 20px;
+}
+
+.textBtn {
+  background: #fff;
+  border-radius: 8px;
+  padding: 4px 17px;
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+
+  &:hover,
+  &.textBtnActive {
+    background: #D2ECFF;
+    font-weight: 600;
+    color: #131415;
+  }
 }

src/views/content-information/content-music/components/list/index.tsx

@@ -58,7 +58,10 @@ export default defineComponent({
 
     const onSearch = async (item: any) => {
       state.pagination.page = 1;
-      state.searchGroup = Object.assign(state.searchGroup, item);
+      const { wikiCategoryIdChild, wikiCategoryId } = item;
+      state.searchGroup = Object.assign(state.searchGroup, {
+        wikiCategoryId: wikiCategoryIdChild || wikiCategoryId
+      });
       getList();
     };
 
@@ -70,6 +73,7 @@ export default defineComponent({
       <div class={styles.instrumentList}>
         <SearchGroupResources
           categoryChildList={props.categoryChildList}
+          wikiCategoryId={props.categoryId}
           onSearch={(item: any) => onSearch(item)}
         />
 

src/views/content-information/content-music/components/list/search-group-resources.tsx

@@ -8,6 +8,10 @@ export default defineComponent({
     categoryChildList: {
       type: Array as PropType<any>,
       default: () => []
+    },
+    wikiCategoryId: {
+      type: String,
+      default: ''
     }
   },
   emits: ['search', 'add'],
@@ -17,19 +21,30 @@ export default defineComponent({
     const forms = reactive({
       keyword: '',
       wikiCategoryId: '',
-      wikiCategoryIdChild: ''
+      wikiCategoryIdChild: '',
+      childIds: [] as any
     });
 
     const onSearch = () => {
       emit('search', forms);
     };
 
+    const selectChildObj = (item: any, index: number) => {
+      const obj: any = {};
+      item?.forEach((child: any) => {
+        if (child.id === forms.wikiCategoryIdChild) {
+          obj.selected = true;
+          obj.name = child.name;
+        }
+      });
+      return obj;
+    };
+
     const childList = computed(() => {
       const categoryChildList = props.categoryChildList || [];
       const child = categoryChildList.find(
         (item: any) => item.id === forms.wikiCategoryId
       );
-      console.log(child, 'child');
       if (child && child.childrenList.length) {
         child.childrenList.forEach((child: any) => {
           const i = child.childrenList;
@@ -38,11 +53,24 @@ export default defineComponent({
             j.value = j.id;
           });
         });
-        return child.childrenList || [];
+
+        return (
+          [
+            {
+              label: '全部',
+              value: '',
+              id: '',
+              name: '全部',
+              childrenList: []
+            },
+            ...child.childrenList
+          ] || []
+        );
       }
       return [];
     });
 
+    console.log(props.categoryChildList, 'categoryChildList');
     return () => (
       <div class={styles.searchGroup}>
         <div
@@ -58,7 +86,8 @@ export default defineComponent({
               size="small"
               focusable={false}
               onClick={() => {
-                forms.wikiCategoryId = '';
+                forms.wikiCategoryId = props.wikiCategoryId;
+                forms.wikiCategoryIdChild = '';
                 onSearch();
               }}>
               全部
@@ -88,51 +117,51 @@ export default defineComponent({
             }}
           />
         </div>
-        <NForm labelAlign="left" labelPlacement="left">
-          {childList.value.length > 0 && (
-            <div class={[styles.collapsSection]}>
-              <NFormItem>
-                <div class={[styles.collapseWrap]}>
-                  <NSpace class={[styles.spaceSection]}>
-                    {childList.value.map((music: any) => (
-                      <>
-                        {/* {music.childrenList.length > 0 ? (
-                          <NPopselect
-                            options={music.childrenList}
-                            trigger="click">
-                            <NButton round size="small">
-                              {music.name}
-                              <i class={styles.iconArray}></i>
-                            </NButton>
-                          </NPopselect>
-                        ) : ( */}
-                        <NButton
-                          // secondary={forms.wikiCategoryIdChild === music.id}
-                          // quaternary={forms.wikiCategoryIdChild !== music.id}
-                          strong
-                          round
-                          size="small"
-                          focusable={false}
-                          type={
-                            forms.wikiCategoryIdChild === music.id
-                              ? 'primary'
-                              : 'default'
-                          }
-                          onClick={() => {
-                            forms.wikiCategoryIdChild = music.id;
-                            onSearch();
-                          }}>
-                          {music.name}
-                        </NButton>
-                        {/* )} */}
-                      </>
-                    ))}
-                  </NSpace>
-                </div>
-              </NFormItem>
-            </div>
-          )}
-        </NForm>
+
+        {childList.value.length > 0 && (
+          <div class={[styles.collapseWrap]}>
+            <NSpace class={[styles.spaceSection]}>
+              {childList.value.map((music: any, index: number) => (
+                <>
+                  {music.childrenList.length > 0 ? (
+                    <NPopselect
+                      options={music.childrenList}
+                      trigger="click"
+                      v-model:value={forms.wikiCategoryIdChild}
+                      onUpdate:value={() => {
+                        onSearch();
+                      }}
+                      key={music.id}
+                      class={styles.popSelect}>
+                      <span
+                        class={[
+                          styles.textBtn,
+                          selectChildObj(music.childrenList, index).selected &&
+                            styles.textBtnActive
+                        ]}>
+                        {selectChildObj(music.childrenList, index).name ||
+                          music.name}
+                      </span>
+                    </NPopselect>
+                  ) : (
+                    <span
+                      class={[
+                        styles.textBtn,
+                        forms.wikiCategoryIdChild === music.id &&
+                          styles.textBtnActive
+                      ]}
+                      onClick={() => {
+                        forms.wikiCategoryIdChild = music.id;
+                        onSearch();
+                      }}>
+                      {music.name}
+                    </span>
+                  )}
+                </>
+              ))}
+            </NSpace>
+          </div>
+        )}
       </div>
     );
   }

src/views/content-information/content-music/detail.module.less

@@ -55,6 +55,11 @@
   flex: 1;
   transition: padding .3s;
   overflow: hidden;
+
+  &.wrapBottom {
+    padding-bottom: 108px;
+
+  }
 }
 
 .content {
@@ -66,6 +71,25 @@
   // max-height: 90vh;
 }
 
+.tools {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  :global {
+    .n-input {
+      margin-left: auto;
+      width: 361px;
+    }
+
+    .n-input__input-el {
+      height: 100%;
+      line-height: 100%;
+    }
+  }
+}
+
 .contentWrap {
   position: relative;
   flex: 1;
@@ -73,184 +97,307 @@
   padding: 20px 55px 20px 20px;
   overflow: hidden;
   gap: 0 32px;
-  width: calc(100vw - 164px);
 }
 
-.contentMusic {
-  background: #fff;
-  width: 100%;
-  overflow-y: auto;
+.musicList {
+  background-color: #fff;
+  border-radius: 16px;
+
+  width: 512px;
+  min-width: 294px;
   height: 100%;
-  border-radius: 13px;
-  // overflow: hidden;
-}
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-width: 330Px;
 
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
 
-.musicTop {
-  position: sticky;
-  top: 0;
-  background-color: #fff;
-  padding: 27px 22px;
-}
+  .instrumentGroup {
+    padding-top: 27px;
+    padding-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
 
-.musicTop,
-.musicInfo {
-  display: flex;
-  align-items: center;
-}
+    .instrumentImg {
+      width: 125px;
+      height: 125px;
+      overflow: hidden;
+      border-radius: 50%;
+    }
 
-.musicImg {
-  position: relative;
-  width: 77px;
-  height: 77px;
-  border-radius: 2px;
-  z-index: 9;
-  margin-right: 54px;
-  margin-left: 31px;
+    .instrumentName {
+      padding: 13px 0 5px;
+      font-size: 18px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 25px;
+      letter-spacing: 1px;
+    }
 
-  .img {
-    position: relative;
-    z-index: 9;
-    width: 77px;
-    height: 77px;
-    border-radius: 2px;
+    .instrumentTag {
+      font-size: 13px;
+      color: #777777;
+      line-height: 18px;
+    }
   }
 
-  .iconPan {
-    position: absolute;
-    right: -33px;
-    top: 4px;
-    width: 73px;
-    height: 73px;
-    z-index: 0;
-  }
 
-  &::before {
-    content: ' ';
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 10;
-    display: inline-block;
-    width: 5px;
-    height: 77px;
-    background: linear-gradient(270deg, rgba(0, 0, 0, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
+
+  .wrapList {
+    width: 512px;
+    padding: 0 17px;
+    min-width: 294px;
+    min-height: 100%;
+    // background: #fff;
+    border-radius: 16px;
+
+
+    .titlec {
+      padding: 20px 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: #000000;
+      line-height: 25px;
+      border-top: 1px solid #F2F2F2;
+      display: flex;
+      align-items: center;
+    }
+
+    .icon2 {
+      width: 23px;
+      height: 23px;
+      margin-right: 8px;
+      background: url('../images/icon-2.png') no-repeat center;
+      background-size: contain;
+    }
   }
 
-  &::after {
-    content: ' ';
-    position: absolute;
-    left: -31px;
-    bottom: 0;
-    z-index: 8;
-    width: 148px;
-    height: 16px;
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
-    filter: blur(2.3328px);
-    border-radius: 50%;
+  .empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50vh;
+    // height: 100%;
   }
 }
 
-.musicInfo {
-  width: 500px;
+.itemContainer {
+  width: 100%;
+  border-radius: 16px;
+  padding: 4px 8px;
+  // background-color: #fff;
 
-  .name {
-    font-size: 18px;
-    font-weight: 600;
-    color: #131415;
-    line-height: 25px;
-    padding-bottom: 12px;
+  &:first-child {
+    padding-top: 8px;
   }
 
-  .c {
-    font-size: 13px;
-    color: #777777;
-    line-height: 18px;
-
-    span {
-      margin-right: 20px;
-    }
+  &:last-child {
+    // border-radius: 0 0 16px 16px;
+    padding-bottom: 8px;
   }
 }
 
-.audio {
-  flex: 1;
+.item {
+  position: relative;
   display: flex;
   align-items: center;
-}
+  padding: 10px;
+  border-radius: 12px;
 
-.playBtns {
-  display: flex;
-  align-items: center;
+  cursor: pointer;
 
-  :global {
-    .n-button {
-      width: 40px;
-      height: 40px;
+  &:hover {
+    background-color: rgba(0, 0, 0, .05);
+  }
 
-      img {
-        width: 100%;
-        height: 100%;
-      }
+  &.active {
+    background-color: #DDF2FF;
+
+    .arrow {
+      opacity: 1;
     }
   }
 
-  .playBtn {
-    width: 50px;
-    height: 50px;
-    background: linear-gradient(to right bottom, #44CAFE, #007AFE);
+  .img {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border-radius: 8px;
+    margin-right: 12px;
+    box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
+    overflow: hidden;
+    flex-shrink: 0;
+
+    :global {
+      .n-image {
+        width: 60px;
+        height: 60px;
+      }
+    }
 
     img {
-      display: block;
-      // width: 18px;
-      height: 20px;
+      transition: opacity .3s;
+      opacity: 0;
+      height: 100%;
+      width: 100%;
+    }
+
+    img[data-loaded="true"] {
+      opacity: 1;
+    }
+  }
+
+  .title {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .titleName {
+      font-size: 17px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 28px;
+      width: 100%;
+    }
+
+    .titleDes {
+      font-size: 14px;
+      font-weight: 400;
+      color: #777777;
+      line-height: 20px;
+      max-width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  .btn {
+    margin-left: auto;
+    width: 84px;
+    height: 40px;
+    background: linear-gradient(to right, #44CAFF, #259DFE);
+    border: none;
+    padding: 0;
+    font-weight: bold !important;
+    flex-shrink: 0;
+    min-width: 62px;
+    min-height: 30px;
+
+    :global {
+      .n-button__content {
+        &>img {
+          margin-left: 10px;
+          width: 9px;
+          height: 12px;
+        }
+      }
     }
   }
+
+  .arrow {
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translate(124%, -50%);
+    opacity: 0;
+  }
+
+  .showPlayLoading {
+    opacity: 0;
+  }
+
 }
 
-.timeWrap {
-  flex: 1;
+.loadingWrap {
   display: flex;
-  align-items: center;
-  margin-left: 27px;
+  justify-content: center;
+  min-height: 80px;
+}
 
-  .timeProgress {
-    margin-right: 24px;
-    border-radius: 6px;
-    --n-handle-size: 20px !important;
-    --n-rail-height: 8px !important;
+.musicStaff {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  left: -8px;
+  flex: 1;
+  background-color: #fff;
+  border-radius: 16px;
+  // height: 100%;
+  z-index: 1;
+  overflow: hidden;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
   }
 
-  .time {
-    color: #777777;
-    font-size: 15px;
-    width: 90px;
-    white-space: nowrap;
-    flex-shrink: 0;
+
+  .musicTitle {
+    padding: 27px 27px 13px;
+    font-size: 18px;
+    font-weight: 600;
+    color: #000000;
+    line-height: 25px;
+    display: flex;
+    align-items: center;
+
+    .icon1 {
+      display: inline-block;
+      width: 23px;
+      height: 23px;
+      margin-right: 8px;
+      background: url('../images/icon-1.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .musicContent {
+    flex: 1;
+    overflow-y: auto;
+    height: 100%;
+    padding: 0 27px;
+
+    &>img {
+      width: 100%;
+    }
+
+    section,
+    &>div {
+      font-size: inherit !important;
+    }
   }
 }
 
-.musicContent {
+.staffImgs {
   flex: 1;
-  width: calc(100% - 54px);
-  box-sizing: content-box;
-  margin: 0 27px 0;
-  padding-top: 20px;
-  border-top: 1px solid #EBEBEB;
+  overflow-y: auto;
+  height: 100%;
+  padding: 0 30px;
 
   &>img {
     width: 100%;
   }
+}
 
-  section,
-  &>div {
-    font-size: inherit !important;
+
+:global {
+
+  .van-fade-enter-active,
+  .van-fade-leave-active {
+    transition: all 0.3s;
   }
 
-  video {
-    width: 60%;
-    margin: 0 auto !important;
-    display: block;
+  .van-fade-enter-from,
+  .van-fade-leave-to {
+    opacity: 0;
   }
 }
 
@@ -292,5 +439,115 @@
       --n-handle-size: 15px !important;
       --n-rail-height: 0 !important;
     }
+
+  }
+}
+
+.musicTop,
+.musicInfo {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 36px;
+  padding-bottom: 22px;
+}
+
+.musicImg {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  border-radius: 2px;
+  z-index: 9;
+  margin-right: 54px;
+  margin-left: 31px;
+  margin-bottom: 27px;
+
+  .img {
+    position: relative;
+    z-index: 9;
+    width: 120px;
+    height: 120px;
+    border-radius: 2px;
+  }
+
+  .panSection {
+    position: absolute;
+    right: -52px;
+    top: 7px;
+    width: 112px;
+    height: 112px;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .img2 {
+      position: relative;
+      z-index: 1;
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+    }
+  }
+
+
+  .iconPan {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 112px;
+    height: 112px;
+    z-index: 0;
+  }
+
+  &::before {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    display: inline-block;
+    width: 5px;
+    height: 120px;
+    background: linear-gradient(270deg, rgba(0, 0, 0, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
+  }
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    left: -31px;
+    bottom: 0;
+    z-index: 8;
+    width: 148px;
+    height: 16px;
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
+    filter: blur(2.3328px);
+    border-radius: 50%;
+  }
+}
+
+.info {
+  text-align: center;
+}
+
+.musicInfo {
+  width: 500px;
+
+  .name {
+    font-size: 18px;
+    font-weight: 600;
+    color: #131415;
+    line-height: 25px;
+    padding-bottom: 6px;
+  }
+
+  .c {
+    font-size: 13px;
+    color: #777777;
+    line-height: 18px;
+
+    span {
+      margin-right: 20px;
+    }
   }
 }

src/views/content-information/content-music/detail.tsx

@@ -2,102 +2,75 @@ import {
   NBreadcrumb,
   NBreadcrumbItem,
   NButton,
+  NImage,
   NSlider,
-  NSpace
+  NSpace,
+  NSpin
 } from 'naive-ui';
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
+import { computed, defineComponent, onMounted, reactive } from 'vue';
 import styles from './detail.module.less';
 import icon_back from '../../xiaoku-music/images/icon_back.png';
-import icon_separator from '../../xiaoku-music/images/icon_separator.png';
-import { useRoute, useRouter } from 'vue-router';
-import musicBg from '../../xiaoku-music/images/icon_default.png';
-import iconPan from '../images/icon-pan.png';
+import icon_arrow from '../../xiaoku-music/images/icon_arrow.png';
 import icon_play from '../../xiaoku-music/images/icon_play.png';
 import icon_pause from '../../xiaoku-music/images/icon_pause.png';
+import icon_default from '../../xiaoku-music/images/icon_default.png';
+import icon_separator from '../../xiaoku-music/images/icon_separator.png';
 import iconT from '../images/icon-t.png';
 import iconAddT from '../images/icon-add-t.png';
 import iconPlusT from '../images/icon-plus-t.png';
-import { getSecondRPM } from '/src/utils';
-import { api_knowledgeWiki_detail } from '../api';
+import musicBg from '../../xiaoku-music/images/icon_default.png';
+import iconPan from '../images/icon-pan.png';
+import { useRoute, useRouter } from 'vue-router';
+import PlayLoading from '../../xiaoku-music/component/play-loading';
+import TheNoticeBar from '/src/components/TheNoticeBar';
 import TheEmpty from '/src/components/TheEmpty';
+import PlayItem from '../../xiaoku-music/component/play-item';
+import { api_knowledgeWiki_detail } from '../api';
+import { state } from '/src/state';
 
 export default defineComponent({
   name: 'instrument-detail',
   setup() {
     const route = useRoute();
     const router = useRouter();
-    const state = reactive({
-      playState: 'pause',
+    const forms = reactive({
+      page: 1,
+      rows: 20,
+      status: true,
+      name: '', // 关键词
+      type: route.query.type
+    });
+    const data = reactive({
       loading: false,
       finshed: false,
       reshing: false,
       details: {} as any,
       list: [] as any,
-      fontSize: 18
-    });
-    let timer = null as any;
-    const audioData = reactive({
-      isFirst: true,
-      duration: 0,
-      currentTime: 0
+      listActive: 0,
+      playState: 'pause' as 'play' | 'pause',
+      showPlayer: false,
+      showPreivew: false,
+      previewUrl: '',
+      showCloseBtn: true,
+      fontSize: 18 // 默认18
     });
-    const audioRef = ref();
 
-    const time = computed(() => {
-      return `${getSecondRPM(audioData.currentTime)} / ${getSecondRPM(
-        audioData.duration
-      )}`;
+    /** 选中的item */
+    const activeItem = computed(() => {
+      return data.list[data.listActive] || {};
     });
 
-    /** 改变时间 */
-    const handleChangeTime = (val: number) => {
-      audioRef.value.pause();
-      audioData.currentTime = val;
-      clearTimeout(timer);
-      timer = setTimeout(() => {
-        audioRef.value.currentTime = val;
-        if (state.playState === 'play') {
-          audioRef.value.play();
-        }
-        timer = null;
-      }, 300);
-    };
-
-    /** 加载成功 */
-    const onLoadedmetadata = () => {
-      audioData.duration = audioRef.value.duration;
-      if (audioData.isFirst) {
-        audioData.isFirst = false;
-        return;
-      }
-      if (state.playState === 'play') {
-        audioRef.value.play();
-      }
-    };
-
-    watch(
-      () => state.playState,
-      val => {
-        console.log(val, 'val');
-        if (val === 'play') {
-          audioRef.value.play();
-        } else {
-          audioRef.value.pause();
-        }
-      }
-    );
     /** 播放曲目 */
     const handlePlay = (item: any) => {
-      const index = state.list.findIndex((_item: any) => _item.id === item.id);
+      const index = data.list.findIndex((_item: any) => _item.id === item.id);
       if (index > -1) {
-        state.playState = state.playState === 'play' ? 'pause' : 'play';
+        if (data.listActive === index) {
+          data.playState = data.playState === 'play' ? 'pause' : 'play';
+        } else {
+          data.playState = 'play';
+        }
+        data.showPlayer = true;
+        data.listActive = index;
       }
     };
 
@@ -106,27 +79,36 @@ export default defineComponent({
       type: 'play' | 'pause' | 'pre' | 'next' | 'favitor'
     ) => {
       if (type === 'play') {
-        state.playState = 'play';
+        data.playState = 'play';
       } else if (type === 'pause') {
-        state.playState = 'pause';
+        data.playState = 'pause';
+      } else if (type === 'pre') {
+        if (data.list[data.listActive - 1]) {
+          handlePlay(data.list[data.listActive - 1]);
+        }
+      } else if (type === 'next') {
+        if (data.list[data.listActive + 1]) {
+          handlePlay(data.list[data.listActive + 1]);
+        }
       }
     };
+
     const getDetail = async () => {
-      state.loading = true;
+      data.loading = true;
       let res = {} as any;
       try {
         res = await api_knowledgeWiki_detail({ id: route.query.id });
       } catch (error) {
         console.log(error);
       }
-      if (state.reshing) {
-        state.list = [];
-        state.reshing = false;
+      if (data.reshing) {
+        data.list = [];
+        data.reshing = false;
       }
 
-      state.finshed = true;
-      state.list = res.data.knowledgeWikiResources || [];
-      state.list.forEach((item: any) => {
+      data.finshed = true;
+      data.list = res.data.knowledgeWikiResources || [];
+      data.list.forEach((item: any) => {
         item.audioFileUrl = item.url;
       });
       const knowledgeWikiCategories = res.data.knowledgeWikiCategories || [];
@@ -134,12 +116,12 @@ export default defineComponent({
         knowledgeWikiCategories.length > 0
           ? knowledgeWikiCategories[0].name
           : '';
-      const knowledgeWikiResources = res.data.knowledgeWikiResources || [];
-      res.data.audioFileUrl =
-        knowledgeWikiResources.length > 0 ? knowledgeWikiResources[0].url : '';
-      state.details = res.data;
-
-      state.loading = false;
+      res.data.intros = res.data.intros.replace(
+        /<video/gi,
+        '<video style="width: 100% !important;" controlslist="nodownload"'
+      );
+      data.details = res.data;
+      data.loading = false;
     };
 
     onMounted(() => {
@@ -152,102 +134,139 @@ export default defineComponent({
             style={{ cursor: 'pointer' }}
             src={icon_back}
             class={styles.iconBack}
-            onClick={() => router.push({ path: '/content-music' })}
+            onClick={() => {
+              router.push('/content-music');
+            }}
           />
           <NBreadcrumb separator="">
             <NBreadcrumbItem
-              onClick={() => router.push({ path: '/content-music' })}>
-              曲目鉴赏
+              onClick={() => {
+                router.push('/content-music');
+              }}>
+              名曲鉴赏
             </NBreadcrumbItem>
             <img class={styles.separator} src={icon_separator} />
             <NBreadcrumbItem>{route.query.name}</NBreadcrumbItem>
           </NBreadcrumb>
         </NSpace>
 
-        <div class={[styles.wrap]}>
+        <div class={[styles.wrap, data.showPlayer ? styles.wrapBottom : '']}>
           <div class={styles.content}>
             <div class={styles.contentWrap}>
-              <div class={styles.contentMusic}>
-                <div class={styles.musicTop}>
+              <div class={[styles.musicList, 'musicList-container']}>
+                <div class={styles.wrapList}>
                   <div class={styles.musicInfo}>
                     <div class={styles.musicImg}>
                       <img
-                        src={state.details.avatar || musicBg}
+                        src={data.details?.avatar || musicBg}
                         class={styles.img}
                       />
-                      <img src={iconPan} class={styles.iconPan} />
+                      <div class={styles.panSection}>
+                        <img src={iconPan} class={styles.iconPan} />
+                        <img
+                          src={data.details?.avatar || musicBg}
+                          class={styles.img2}
+                        />
+                      </div>
                     </div>
 
                     <div class={styles.info}>
-                      <div class={styles.name}>{state.details.name}</div>
+                      <div class={styles.name}>{data.details.name}</div>
                       <div class={styles.c}>
-                        <span>作曲：{state.details.composers}</span>
-                        <span>作词：{state.details.lyricists}</span>
+                        <span>作曲：{data.details.composers}</span>
+                        <span>作词：{data.details.lyricists}</span>
                       </div>
                     </div>
                   </div>
 
-                  {state.details.audioFileUrl ? (
-                    <div class={styles.audio}>
-                      <div class={styles.playBtns}>
-                        <NButton
-                          color="rgba(57,130,246,1)"
-                          class={styles.playBtn}
-                          circle
-                          bordered={false}
-                          onClick={() => {
-                            //
-                            handleChangeAudio(
-                              state.playState === 'pause' ? 'play' : 'pause'
-                            );
+                  <div class={styles.titlec}>
+                    <i class={styles.icon2}></i>名曲鉴赏
+                  </div>
+
+                  {data.list.map((item: any, index: any) => {
+                    return (
+                      <div class={styles.itemContainer}>
+                        <div
+                          class={[
+                            styles.item
+                            // data.listActive === index && styles.active
+                          ]}
+                          onClick={(e: Event) => {
+                            e.stopPropagation();
+                            handlePlay(item);
                           }}>
-                          <img
-                            style={{
-                              display: state.playState === 'pause' ? '' : 'none'
-                            }}
-                            src={icon_play}
-                          />
-                          <img
-                            style={{
-                              display: state.playState === 'play' ? '' : 'none'
-                            }}
-                            src={icon_pause}
-                          />
-                        </NButton>
-                      </div>
-                      <div class={styles.timeWrap}>
-                        <NSlider
-                          tooltip={false}
-                          step={0.01}
-                          class={styles.timeProgress}
-                          value={audioData.currentTime}
-                          max={audioData.duration}
-                          onUpdate:value={val => handleChangeTime(val)}
-                        />
-                        <div class={styles.time}>{time.value}</div>
-                        <audio
-                          ref={audioRef}
-                          src={state.details.audioFileUrl}
-                          onLoadedmetadata={onLoadedmetadata}
-                          onEnded={() => {
-                            // emit('change', 'pause');
-                          }}
-                          onTimeupdate={() => {
-                            if (timer) return;
-                            audioData.currentTime = audioRef.value?.currentTime;
-                          }}></audio>
+                          <div class={styles.img}>
+                            <NImage
+                              lazy
+                              objectFit="cover"
+                              previewDisabled={true}
+                              src={item.titleImg || icon_default}
+                              onLoad={e => {
+                                (e.target as any).dataset.loaded = 'true';
+                              }}
+                            />
+                            <PlayLoading
+                              class={[
+                                data.listActive === index &&
+                                data.playState === 'play'
+                                  ? ''
+                                  : styles.showPlayLoading
+                              ]}
+                            />
+                          </div>
+                          <div class={styles.title}>
+                            <div class={styles.titleName}>
+                              <TheNoticeBar text={item.name} />
+                            </div>
+                          </div>
+
+                          <NButton
+                            color="#259CFE"
+                            textColor="#fff"
+                            round
+                            class={styles.btn}
+                            type="primary"
+                            onClick={(e: Event) => {
+                              e.stopPropagation();
+                              handlePlay(item);
+                            }}>
+                            播放
+                            <img
+                              src={
+                                data.listActive === index &&
+                                data.playState === 'play'
+                                  ? icon_pause
+                                  : icon_play
+                              }
+                            />
+                          </NButton>
+
+                          <img class={styles.arrow} src={icon_arrow} />
+                        </div>
                       </div>
+                    );
+                  })}
+                  {!data.finshed && (
+                    <div class={styles.loadingWrap}>
+                      <NSpin show={true}></NSpin>
+                    </div>
+                  )}
+                  {!data.loading && data.list.length === 0 && (
+                    <div class={styles.empty}>
+                      <TheEmpty description="暂无名曲鉴赏"></TheEmpty>
                     </div>
-                  ) : (
-                    ''
                   )}
                 </div>
+              </div>
 
+              <div class={styles.musicStaff}>
+                <div class={styles.musicTitle}>
+                  <i class={styles.icon1}></i>名曲故事
+                </div>
                 <div
                   class={styles.musicContent}
-                  v-html={state.details.intros}
-                  style={{ fontSize: state.fontSize + 'px' }}></div>
-                {!state.loading && !state.details.intros && <TheEmpty />}
+                  v-html={data.details?.intros}
+                  style={{ fontSize: data.fontSize + 'px' }}></div>
               </div>
 
               <div class={styles.changeSizeSection}>
@@ -256,12 +275,12 @@ export default defineComponent({
                   src={iconAddT}
                   class={styles.iconAddT}
                   onClick={() => {
-                    if (state.fontSize >= 32) return;
-                    state.fontSize += 1;
+                    if (data.fontSize >= 32) return;
+                    data.fontSize += 1;
                   }}
                 />
                 <NSlider
-                  v-model:value={state.fontSize}
+                  v-model:value={data.fontSize}
                   vertical
                   min={12}
                   max={32}
@@ -270,14 +289,23 @@ export default defineComponent({
                   src={iconPlusT}
                   class={styles.iconPlusT}
                   onClick={() => {
-                    if (state.fontSize <= 12) return;
-                    state.fontSize -= 1;
+                    if (data.fontSize <= 12) return;
+                    data.fontSize -= 1;
                   }}
                 />
               </div>
             </div>
           </div>
         </div>
+
+        {data.list.length !== 0 && (
+          <PlayItem
+            show={data.showPlayer}
+            playState={data.playState}
+            item={activeItem.value}
+            onChange={value => handleChangeAudio(value)}
+          />
+        )}
       </div>
     );
   }

src/views/content-information/content-musician/components/list/index.tsx

@@ -69,6 +69,7 @@ export default defineComponent({
       <div class={styles.instrumentList}>
         <SearchGroupResources
           categoryChildList={props.categoryChildList}
+          wikiCategoryId={props.categoryId}
           onSearch={(item: any) => onSearch(item)}
         />
 

src/views/content-information/content-musician/components/list/search-group-resources.tsx

@@ -8,6 +8,10 @@ export default defineComponent({
     categoryChildList: {
       type: Array as PropType<any>,
       default: () => []
+    },
+    wikiCategoryId: {
+      type: String,
+      default: ''
     }
   },
   emits: ['search', 'add'],
@@ -37,7 +41,7 @@ export default defineComponent({
               size="small"
               focusable={false}
               onClick={() => {
-                forms.wikiCategoryId = '';
+                forms.wikiCategoryId = props.wikiCategoryId;
                 onSearch();
               }}>
               全部

src/views/home/index.module.less

@@ -177,7 +177,7 @@
     }
 
     .tFun {
-      margin-top: 17px;
+      margin-top: 27px;
       width: 258px;
       height: 224px;
     }
@@ -189,7 +189,7 @@
     }
 
     .tTitle {
-      margin-top: 27px;
+      margin-top: 47px;
       margin-bottom: 34px;
       width: 336px;
       height: 23px;
@@ -241,6 +241,7 @@
     cursor: pointer;
     margin-left: 23px;
     padding-bottom: 38px;
+    padding-top: 28px;
     flex: 1;
     background: linear-gradient(135deg, #F4FDFF 0%, #E5E2FF 100%);
     border-radius: 17px;

src/views/home/modals/class-modal/index.module.less

@@ -0,0 +1,202 @@
+.rightTeachingWrap {
+  overflow: hidden;
+  flex: 1;
+  background-color: #fff;
+  padding: 10px 0 30px;
+  border-radius: 20px;
+
+  .rightTeachingWrapTitle {
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+
+    .lookMore {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      min-width: 114px;
+      border-radius: 8px;
+      border: 1px solid #DEDEDE;
+      font-size: 15px;
+      color: #131415;
+      padding: 7px 12px;
+
+      svg {
+        margin-left: 8px;
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    .classSearchList {
+      display: flex;
+      gap: 12px;
+
+      :global {
+        .n-base-selection {
+          --n-height: 35px !important;
+          --n-font-size: 15px !important;
+          --n-border: 1px solid #DEDEDE !important;
+          --n-border-radius: 8px !important;
+          max-width: 150px;
+        }
+      }
+    }
+  }
+}
+
+:global {
+  .n-base-select-menu .n-base-select-option.n-base-select-option--show-checkmark {
+    padding-right: var(--n-option-padding);
+  }
+
+  .n-empty {
+    --n-font-size: 14px !important;
+  }
+}
+
+.teachListWrap {
+  position: relative;
+
+
+}
+
+.teachListWrapWall {
+  position: absolute;
+  bottom: 0;
+  height: 159px;
+  width: 100%;
+  background: linear-gradient(180deg,
+      rgba(255, 255, 255, 0) 0%,
+      #ffffff 100%);
+  border-radius: 0px 0px 20px 20px;
+
+  span {
+    position: absolute;
+    bottom: 17px;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: #1677FF;
+    font-size: 16px;
+
+    &::after {
+      content: ' ';
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: url('./images/blueArrow.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+}
+
+.teachGroup {
+  margin-top: 12px;
+
+  .teachGroupTitle {
+    position: relative;
+    left: -10px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #aaaaaa;
+    width: 60px;
+    text-align: center;
+    margin-bottom: 12px;
+  }
+
+  .teachGroupList {
+    padding-bottom: 12px;
+    margin-left: 20px;
+    border-left: 1px solid #d1e8ff;
+    min-height: 92px;
+    position: relative;
+
+    .teachGroupListDot {
+      width: 15px;
+      height: 15px;
+      background: #198cfe;
+      border: 4px solid #d1e8ff;
+      border-radius: 50%;
+      top: 28px;
+      left: -8px;
+      position: absolute;
+    }
+  }
+
+  .teachGroupItemWrap {
+    margin-left: 28px;
+    background: #f7f9ff;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: top;
+
+    &:nth-last-of-type(1) {
+      margin-bottom: 0;
+    }
+
+    margin-bottom: 12px;
+    padding: 10px;
+
+    .teachGroupItemLeft {
+      margin-right: 12px;
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      overflow: hidden;
+      border: 2px solid #198cfe;
+
+      .teachGroupItemHeader {
+        border: 2px solid #fff;
+        border-radius: 50%;
+        overflow: hidden;
+
+        img {
+          width: 44px;
+          height: 44px;
+        }
+      }
+    }
+
+    .teachGroupItemRight {
+      flex: 1;
+
+      .teachGroupItemName {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 16px;
+        margin-top: 2px;
+        font-weight: 600;
+        color: #131415;
+
+        span {
+          font-size: 13px;
+          font-weight: 400;
+          color: #1677ff;
+          line-height: 18px;
+        }
+      }
+
+      .teachGroupItemInfo {
+        font-size: 13px;
+        line-height: 26px;
+        color: rgba(0, 0, 0, 0.5);
+      }
+
+      .subjectName {
+        font-size: 14px;
+        font-weight: 400;
+        color: #FFFFFF;
+        background: #198CFE;
+        border-radius: 5px;
+        padding: 1px 8px;
+        margin-right: 4px;
+      }
+    }
+  }
+}

src/views/home/modals/class-modal/index.tsx

@@ -0,0 +1,337 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import { useUserStore } from '/src/store/modules/users';
+import { useRouter } from 'vue-router';
+import { NSelect, NSpin } from 'naive-ui';
+import {
+  classGroupList,
+  courseSchedulePage,
+  getGradeLevelList,
+  getGradeYearList
+} from '../../api';
+import dayjs from 'dayjs';
+import TeachGroup from '../teachGroup';
+import TheEmpty from '/src/components/TheEmpty';
+import { gradeToCN } from '/src/utils/contants';
+
+export default defineComponent({
+  name: 'class-modal',
+  setup() {
+    const router = useRouter();
+    const userStore = useUserStore();
+    const forms = reactive({
+      showAttendClass: false,
+      // useStatus: false,
+      studentList: [] as any,
+      bookVersionId: null,
+      classGroupId: null,
+      category: null,
+      subjectId: null,
+      musicTagList: [] as any,
+      loading: false,
+      list: [] as any,
+      unit: null,
+      unitList: [],
+      subjectList: [] as any,
+      gradeList: [] as any,
+      classLoading: false,
+      total: 0, // 上课数量
+      // 上次上课的数据
+      lastClassSelect: {
+        currentClass: null,
+        name: '',
+        upgradeFlag: false, // 是否为历史班
+        gradeYear: null as any,
+        gradeLevel: null as any
+      },
+      classSelect: {
+        currentGradeNum: null,
+        currentClass: null,
+        name: '',
+        upgradeFlag: false, // 是否为历史班
+        gradeLevel: null as any,
+        gradeYear: null
+      } as any,
+      popSelectOptions: [] as any,
+      popSelectYearList: [] as any,
+      popSelectLevelList: [] as any,
+      showGuide: false,
+      showPreview: false,
+      itemPreview: {} as any,
+      homeLeftHeight: 'auto'
+    });
+    const teachList = ref({} as any);
+
+    // 获取年级班级
+    const getClassList = async () => {
+      try {
+        const { data } = await classGroupList({
+          gradeLevel: forms.classSelect.gradeLevel,
+          gradeYear: forms.classSelect.gradeYear
+        });
+        const cList = data || [];
+        const gradeList: any = [];
+        const popSelectOptions: any = [];
+        // getLastClassRecode()
+        cList.forEach((item: any, index: number) => {
+          // 判断是否已经有班级了
+          if (index === 0) {
+            if (forms.lastClassSelect.currentClass) {
+              forms.classSelect.currentClass =
+                forms.lastClassSelect.currentClass;
+              forms.classSelect.name = forms.lastClassSelect.name;
+              forms.classSelect.upgradeFlag = forms.lastClassSelect.upgradeFlag;
+            } else {
+              const temp = item.classGroupList[0];
+              forms.classSelect.currentGradeNum = item.currentGradeNum;
+              forms.classSelect.currentClass = temp.id;
+              forms.classSelect.name = temp.name;
+            }
+          }
+
+          const classList: any = [];
+          item.classGroupList.forEach((i: any) => {
+            classList.push({
+              label: i.currentClass + '班',
+              value: i.id,
+              lastStudy: i.lastStudy
+            });
+
+            popSelectOptions.push({
+              label: i.name,
+              value: i.id,
+              currentGradeNum: item.currentGradeNum,
+              lastStudy: i.lastStudy
+            });
+          });
+
+          gradeList.push({
+            label: gradeToCN[item.currentGradeNum],
+            value: item.currentGradeNum,
+            childrens: classList
+          });
+        });
+        forms.popSelectOptions = popSelectOptions;
+        forms.gradeList = gradeList;
+      } catch {
+        //
+      }
+    };
+    const getLastClassRecode = async () => {
+      const { data } = await courseSchedulePage({
+        page: 1,
+        rows: 1,
+        teacherId: userStore.getUserInfo.id
+      });
+      if (data.rows.length > 0 && data.rows[0]) {
+        const tempRow = data.rows[0];
+        // forms.lastClassSelect.currentClass = tempRow.classGroupId;
+        // forms.lastClassSelect.name = tempRow.classGroupName;
+        forms.lastClassSelect = {
+          currentClass: tempRow.classGroupId,
+          name: tempRow.classGroupName,
+          upgradeFlag: tempRow.upgradeFlag,
+          gradeYear: tempRow.gradeYear + '',
+          gradeLevel: tempRow.gradeLevel + ''
+        };
+      }
+    };
+
+    // 获取学年
+    const getYearList = async () => {
+      try {
+        const { data } = await getGradeYearList();
+        const temp = data || [];
+        temp.forEach((i: any) => {
+          i.name = i.name + '学年';
+        });
+        forms.popSelectYearList = temp || [];
+        if (temp.length > 0) {
+          if (forms.lastClassSelect.gradeYear) {
+            forms.classSelect.gradeYear = forms.lastClassSelect.gradeYear;
+          } else {
+            forms.classSelect.gradeYear = temp[0].id;
+          }
+        }
+      } catch (e: any) {
+        //
+      }
+    };
+    // 获取学级
+    const getLevelList = async () => {
+      try {
+        const { data } = await getGradeLevelList();
+        const temp = data || [];
+        temp.forEach((i: any) => {
+          i.name = i.name + '级';
+        });
+        temp.unshift({
+          id: '',
+          name: '全部学级'
+        });
+        forms.popSelectLevelList = temp || [];
+        if (temp.length > 0) {
+          if (forms.lastClassSelect.gradeLevel) {
+            forms.classSelect.gradeLevel =
+              forms.lastClassSelect.gradeLevel + '';
+          } else {
+            forms.classSelect.gradeLevel = temp[0].id;
+          }
+        }
+      } catch {
+        //
+      }
+    };
+
+    const getCourseSchedulePage = async () => {
+      forms.classLoading = true;
+      try {
+        const { data } = await courseSchedulePage({
+          classGroupId: forms.classSelect.currentClass,
+          gradeLevel: forms.classSelect.gradeLevel,
+          gradeYear: forms.classSelect.gradeYear,
+          page: 1,
+          rows: 4,
+          teacherId: userStore.getUserInfo.id
+        });
+
+        const result = data.rows || [];
+        forms.total = data.total || 0;
+        const dateTime: any = {};
+        result.forEach((item: any) => {
+          const tempTime = dayjs(item.classDate).format('MM-DD');
+          if (!dateTime[tempTime]) {
+            dateTime[tempTime] = [];
+          }
+
+          const lessonCourseware = item.lessonCoursewareJson
+            ? JSON.parse(item.lessonCoursewareJson)
+            : {};
+          dateTime[tempTime].push({
+            classGroup: forms.classSelect.name,
+            teacherName: item.teacherName,
+            conent:
+              lessonCourseware.lessonCoursewareName +
+              ' | ' +
+              lessonCourseware.lessonCoursewareDetailName +
+              ' | ' +
+              lessonCourseware.lessonCoursewareKnowledgeDetailName,
+            image: item.teacherAvatar,
+            subjectName: item.subjectName
+          });
+        });
+
+        teachList.value = dateTime;
+      } catch (e: any) {
+        //
+        console.log(e);
+      }
+
+      forms.classLoading = false;
+    };
+
+    onMounted(async () => {
+      forms.classLoading = true;
+      await getLastClassRecode();
+
+      await getYearList();
+      await getLevelList();
+      await getClassList();
+      // await catchStore.getSubjects();
+
+      await getCourseSchedulePage();
+      forms.classLoading = false;
+    });
+    return () => (
+      <div>
+        <div class={styles.rightTeachingWrap}>
+          <div class={styles.rightTeachingWrapTitle}>
+            <div class={styles.classSearchList}>
+              <NSelect
+                v-model:value={forms.classSelect.gradeYear}
+                class={styles.lookMoreSearch}
+                placeholder="全部学年"
+                options={forms.popSelectYearList}
+                labelField="name"
+                valueField="id"
+                onUpdate:value={async (val: any) => {
+                  forms.classSelect.gradeYear = val;
+                  forms.lastClassSelect.currentClass = null;
+                  forms.classSelect.currentClass = null;
+                  await getClassList();
+                  await getCourseSchedulePage();
+                }}></NSelect>
+              <NSelect
+                v-model:value={forms.classSelect.gradeLevel}
+                class={styles.lookMoreSearch}
+                placeholder="全部学级"
+                options={forms.popSelectLevelList}
+                labelField="name"
+                valueField="id"
+                onUpdate:value={async (val: any) => {
+                  forms.classSelect.gradeLevel = val;
+                  forms.lastClassSelect.currentClass = null;
+                  forms.classSelect.currentClass = null;
+                  await getClassList();
+                  await getCourseSchedulePage();
+                }}></NSelect>
+              <NSelect
+                v-model:value={forms.classSelect.currentClass}
+                class={styles.lookMoreSearch}
+                placeholder="选择班级"
+                options={forms.popSelectOptions}
+                onUpdate:value={(val: any) => {
+                  forms.popSelectOptions.forEach((item: any) => {
+                    if (item.value === val) {
+                      forms.classSelect.currentGradeNum = item.currentGradeNum;
+                      forms.classSelect.currentClass = item.value;
+                      forms.classSelect.name = item.label;
+                      forms.classSelect.upgradeFlag = item.upgradeFlag;
+                      getCourseSchedulePage();
+                    }
+                  });
+                }}></NSelect>
+            </div>
+          </div>
+          <NSpin show={forms.classLoading} style={{ minHeight: '40vh' }}>
+            {Object.keys(teachList.value).length > 0 && (
+              <div class={styles.teachListWrap}>
+                {Object.keys(teachList.value).map(key => (
+                  <TeachGroup
+                    list={teachList.value[key]}
+                    keys={key}></TeachGroup>
+                ))}
+              </div>
+            )}
+
+            {Object.keys(teachList.value).length <= 0 &&
+              !forms.classLoading && <TheEmpty />}
+          </NSpin>
+
+          {forms.total > 4 && (
+            <div class={styles.teachListWrapWall}>
+              <span
+                onClick={() => {
+                  // setTabsCaches('attendclass', 'tabName', {
+                  //   path: '/classDetail'
+                  // });
+                  sessionStorage.setItem('classDetailTabs', 'attendclass');
+                  router.push({
+                    path: '/classDetail',
+                    query: {
+                      name: forms.classSelect.name,
+                      id: forms.classSelect.currentClass,
+                      gradeYear: forms.classSelect.gradeYear,
+                      upgradeFlag: forms.classSelect.upgradeFlag ? 1 : 0 // 是否为历史班
+                    }
+                  });
+                }}>
+                查看全部
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+});

src/views/home/modals/teachGroup.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import styles from '../index.module.less';
+import styles from '../index2.module.less';
 import TeachItem from './teachItem';
 export default defineComponent({
   props: ['list', 'keys'],

src/views/home/modals/teachItem.tsx

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import styles from '../index.module.less';
+import styles from '../index2.module.less';
 import { NImage } from 'naive-ui';
 import teacherHeader from '@/components/layout/images/teacherIcon.png';
 export default defineComponent({