首页样式更新

src/components/card-preview/index.module.less

@@ -4,6 +4,8 @@
   :global {
     .n-card__content {
       height: 517px;
+      border-radius: 16px;
+      overflow: hidden;
     }
 
     .n-card-header__main {
@@ -14,4 +16,4 @@
       text-overflow: ellipsis;
     }
   }
-}
+}

src/components/card-preview/music-modal/index.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
     const origin = /(localhost|192)/.test(location.host)
       ? 'https://dev.kt.colexiu.com'
       : location.origin;
-    const src = `${origin}/instrument?platform=pc&modelType=practise&id=${props.item.content}&Authorization=${userStore.getToken}`;
+    const src = `${origin}/instrument?modelType=practise&id=${props.item.content}&Authorization=${userStore.getToken}`;
     return () => (
       <div class={styles.musicScore}>
         <iframe

src/views/home/images/icon-from.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="38px" height="18px" viewBox="0 0 38 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状</title>
+    <defs>
+        <linearGradient x1="3.82187655%" y1="48.6777144%" x2="100%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#198CFE" offset="0%"></stop>
+            <stop stop-color="#007AFE" stop-opacity="0.125464379" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="老师端首页改版+数据页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.400000006">
+        <g id="1、主页-女老师" transform="translate(-599.000000, -983.000000)" fill="url(#linearGradient-1)" fill-rule="nonzero">
+            <g id="位图" transform="translate(132.000000, 828.000000)">
+                <path d="M487.117135,164 L480.070594,170.709091 L482.476729,173 L491.929406,164 L482.476729,155 L480.070594,157.290909 L487.117135,164 Z M474.046541,164 L467,170.709091 L469.406136,173 L478.858813,164 L469.578003,155 L467,157.290909 L474.046541,164 Z M500.187728,164 L493.141187,170.709091 L495.547323,173 L505,164 L495.71919,155 L493.141187,157.290909 L500.187728,164 Z" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/home/images/icon-white-arrow.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 37</title>
+    <g id="老师端首页改版+数据页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="1、主页-女老师" transform="translate(-660.000000, -192.000000)" fill="#FFFFFF">
+            <g id="编组-38" transform="translate(560.000000, 177.000000)">
+                <g id="编组-37" transform="translate(100.000000, 15.000000)">
+                    <g id="编组-36" transform="translate(5.656854, 5.656854) rotate(-45.000000) translate(-5.656854, -5.656854) translate(1.656854, 1.656854)">
+                        <rect id="矩形" x="3.01442635e-13" y="6" width="8" height="2"></rect>
+                        <polygon id="矩形" transform="translate(7.000000, 4.000000) rotate(-270.000000) translate(-7.000000, -4.000000) " points="3 3 11 3 11 5 3 5"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/home/index.module.less

@@ -4,125 +4,342 @@
   // align-items: center;
   // justify-content: space-between;
   align-content: stretch;
+}
+
+.homeInfoLeft {
+  display: flex;
+  flex-direction: column;
+  width: 1286px;
+}
+
+.homeBanner {
+  border-radius: 20px;
+  background-color: #fff;
+  position: relative;
+  margin-bottom: 20px;
+  padding: 32px;
+}
 
-  .homeInfoLeft {
+.welcomeInfo {
+  margin-bottom: 30px;
+  padding-bottom: 30px;
+  border-bottom: 1px solid #F2F2F2;
+
+  .userInfo {
     display: flex;
-    flex-direction: column;
-    width: 1286px;
-
-    .homeBanner {
-      height: 246px;
-      border-radius: 20px;
-      background-color: #d5e9ff;
-      position: relative;
-      margin-bottom: 20px;
-
-      .bannerPerson {
-        width: 327px;
-        height: 278px;
-        position: absolute;
-        left: 138px;
-        bottom: 0;
-        z-index: 100;
+    align-items: center;
+    justify-content: space-between;
+    color: #131415;
+    padding-bottom: 14px;
+
+    .userName {
+      font-size: 26px;
+      font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
+      font-weight: bold;
+      line-height: 35px;
+    }
+
+    .userTime {
+      display: flex;
+      align-items: center;
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 28px;
+
+      &::before {
+        content: ' ';
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+        background: url('./images/icon-date.png') no-repeat center;
+        background-size: contain;
+        margin-right: 10px;
       }
+    }
+  }
 
-      .bannerInfo {
-        width: 520px;
-        height: 156px;
-        position: absolute;
-        bottom: 45px;
-        right: 195px;
-        font-size: 18px;
+  .userTips {
+    font-size: 18px;
+    color: #787D7F;
+    line-height: 25px;
+  }
 
-        color: rgba(0, 0, 0, 0.65);
-        line-height: 25px;
-        letter-spacing: 1px;
+  .guide_btn {
+    margin-left: 16px;
+    --n-height: 40px !important;
+
+    i {
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: url('./images/icon-white-arrow.svg') no-repeat center;
+      background-size: contain;
+      margin-left: 4px;
+    }
+  }
+}
 
-        h3 {
-          margin-bottom: 23px;
-          height: 35px;
-          font-size: 30px;
-          font-weight: 600;
-          color: #131415;
-        }
+.applyInfo {
+  background: #E6F2FF;
+  border-radius: 20px;
+  position: relative;
+  display: flex;
+  align-items: center;
 
-        .bannerRrey {
-          color: rgba(0, 0, 0, 0.5);
-        }
+  .teacherWoman {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 9;
+    width: 238px;
+    height: 518px;
 
-        .bannerRed {
-          color: #f24a6c;
-        }
+    img {
+      width: inherit;
+      height: inherit;
+    }
+  }
 
-        .bannerBtn {
-          width: 154px;
-          height: 43px;
-          background: #3583fa;
-          border-radius: 22px;
-          font-size: 18px;
-          line-height: 43px;
-          font-weight: 600;
-          color: #ffffff;
-          letter-spacing: 1px;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: center;
-          margin-top: 25px;
-          cursor: pointer;
-
-          &:hover {
-            opacity: 0.8;
-          }
+  .teacherMan {
+    position: absolute;
+    left: -45px;
+    bottom: -26px;
+    z-index: 9;
+    width: 376px;
+    height: 538px;
+
+    img {
+      width: inherit;
+      height: inherit;
+    }
+  }
 
-          .rotueRight {
-            font-size: 14px;
-            margin-left: 4px;
-          }
-        }
+  .blackborad {
+    padding-left: 182px;
+    padding-right: 85px;
+
+    .blackBoardBg {
+      width: 466px;
+      height: 298px;
+    }
+  }
+}
+
+.applyContainer {
+  width: 390px;
+  padding: 24px 0;
+
+  .applyTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .className {
+      font-size: 26px;
+      font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
+      font-weight: bold;
+      color: #323DC5;
+      line-height: 35px;
+
+
+      &::after {
+        content: ' ';
+        margin-left: 8px;
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        background: url('./images/icon-right-arrow.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+
+  .informations {
+    line-height: 40px;
+    height: 40px;
+    font-size: 14px;
+    color: #6AA1E0;
+  }
+
+  .selectContainer {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background-color: #fff;
+    border-radius: 10px;
+
+    img {
+      position: absolute;
+      left: 20px;
+      top: 10px;
+      width: 32px;
+      height: 32px;
+      z-index: 9;
+    }
+  }
+
+  .startClass,
+  .beforClass {
+    --n-height: 60px !important;
+    min-width: 182px !important;
+    --n-font-size: 20px !important;
+    font-weight: bold !important;
+  }
+
+  .btnGroup {
+    margin-top: 10px;
+    width: 100%;
+  }
+
+  :global {
+    .n-avatar {
+      --n-merged-size: 42px !important;
+    }
+
+    .n-base-selection {
+      --n-height: 52px !important;
+      --n-border: none !important;
+      --n-border-radius: 10px !important;
+      --n-padding-single: 0 26px 0 0px !important;
+      // --n-placeholder-color: #626264 !important;
+      padding-left: 70px;
+    }
+
+    .n-form-item {
+      --n-feedback-height: 20px !important;
+    }
+  }
+}
+
+.toolContainer {
+  display: flex;
+  align-items: center;
+  background: url('./images/tool_bg.png') no-repeat left bottom #fff;
+  background-size: 108px 84px;
+  border-radius: 16px;
+  padding: 32px 48px 32px 54px;
+
+  .toolTips {
+    width: 370px;
+
+    .toolTitle {
+      display: flex;
+      align-items: center;
+      font-size: 24px;
+      font-weight: 600;
+      color: #131415;
+      padding-bottom: 24px;
+
+      &::before {
+        margin-right: 8px;
+        content: ' ';
+        display: inline-block;
+        width: 5px;
+        height: 16px;
+        background: #198CFE;
       }
+    }
+
+    .toolContent {
+      font-size: 16px;
+      color: #787D7F;
+      line-height: 25px;
+      letter-spacing: 1px;
+      padding-bottom: 18px;
+    }
+  }
+
+  .iconTo {
+    margin: 0 44px;
+    width: 38px;
+    height: 18px
+  }
 
-      .leftDot {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 141px;
-        height: 141px;
+  .toolFunction {
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 174px;
+      height: 146px;
+      margin: 6px 14px 10px;
+    }
+
+    .toolItem {
+      width: 203px;
+      background: #EBF5FF;
+      border-radius: 16px;
+      margin-right: 40px;
+      text-align: center;
+
+      &:last-child {
+        margin-right: 0;
       }
 
-      .rightDot {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        width: 158px;
-        height: 137px;
+      .toolMemo {
+        font-size: 16px;
+        color: #4A8FE0;
+        line-height: 22px;
+        text-align: center;
+      }
+
+      .btn1,
+      .btn2,
+      .btn3 {
+        --n-border-radius: 9px !important;
+        --n-height: 38px !important;
+        --n-padding: 7px 28px !important;
+        --n-border: none !important;
+        --n-border-hover: none !important;
+        --n-border-pressed: none !important;
+        --n-border-focus: none !important;
+        --n-border-disabled: none !important;
+        --n-font-size: 18px !important;
+        font-weight: 600 !important;
+        color: #fff;
+        margin: 16px 0 20px;
+      }
+
+
+      .btn1 {
+        background: linear-gradient(135deg, #51E7FF 0%, #2A7CFF 100%) !important;
+        --n-ripple-color: #51E7FF !important;
       }
 
-      .lineIcon {
-        position: absolute;
-        z-index: 500;
-        width: 48px;
-        height: 48px;
-        left: 96px;
-        top: 89px;
+      .btn2 {
+        background: linear-gradient(135deg, #FFA289 0%, #FF5177 100%);
+        --n-ripple-color: #FFA289 !important;
       }
 
-      .musicIcon {
-        position: absolute;
-        width: 51px;
-        height: 46px;
-        left: 400px;
-        top: 36px;
+      .btn3 {
+        background: linear-gradient(135deg, #FFC37B 0%, #FF6635 100%);
+        --n-ripple-color: #FFC37B !important;
       }
     }
-  }
 
-  .homeInfoRight {
-    margin-left: 20px;
-    width: 450px;
+    .item1 {
+      background: url('./images/t1_bg.png')no-repeat right bottom #EBF5FF;
+      background-size: 28px;
+    }
+
+    .item2 {
+      background: url('./images/t2_bg.png')no-repeat right bottom #FFF1EF;
+      background-size: 28px;
+    }
+
+    .item3 {
+      background: url('./images/t3_bg.png')no-repeat right bottom #FFF7E2;
+      background-size: 28px;
+    }
   }
 }
 
+
+.homeInfoRight {
+  margin-left: 20px;
+  width: 450px;
+}
+
 // 学情
 .homeStudy {
   background-color: #fff;
@@ -280,9 +497,11 @@
           border-radius: 4px;
           margin-right: 6px;
         }
+
         .DataTopRightDot.DataTopRightDotBlue {
           background: #d5e9ff;
         }
+
         .DataTopRightDot.red {
           background: #ff7aa7;
         }
@@ -297,148 +516,11 @@
   }
 }
 
-.leftBottomWrap {
-  padding: 20px 32px;
-  border-radius: 20px;
-  background-color: #fff;
-  flex: 1;
-
-  .tableWrap {
-    margin-top: 40px;
-
-    :global {
-      .n-data-table {
-        border-radius: 10px 10px 0 0;
-        overflow: hidden;
-      }
-
-      .n-data-table-thead {
-        height: 54px;
-        line-height: 54px;
-      }
-
-      .n-data-table-th {
-        padding: 0 20px;
-        background-color: #f7f7f8;
-        color: rgba(0, 0, 0, 0.88);
-      }
-
-      .n-data-table-th__title-wrapper {
-        &::after {
-          content: '';
-          width: 1px;
-          height: 22px;
-          background: #ebebeb;
-
-          &:nth-last-child(1) {
-            display: none;
-          }
-        }
-      }
-
-      .n-data-table-th--last {
-        .n-data-table-th__title-wrapper {
-          &::after {
-            content: '';
-            width: 0px;
-            height: 22px;
-            background: #ebebeb;
-          }
-        }
-      }
-    }
-  }
-}
 
 .homeInfoRight {
   display: flex;
   flex-direction: column;
 
-  .homeInfoRightTop {
-    border-radius: 20px;
-    background-color: #fff;
-    padding: 30px 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .HeaderWrap {
-      position: relative;
-
-      .headerD {
-        width: 237px;
-        height: 142px;
-      }
-
-      .defultHeade {
-        width: 116px;
-        height: 116px;
-        overflow: hidden;
-        border-radius: 50%;
-        position: absolute;
-        top: 13px;
-        left: 61px;
-      }
-    }
-
-    .headerInfo {
-      .headerTitle {
-        font-size: 20px;
-        font-weight: 600;
-        color: #131415;
-        line-height: 28px;
-        letter-spacing: 1px;
-        margin: 18px 0 8px;
-        text-align: center;
-      }
-
-      .headerSubTitle {
-        font-size: 14px;
-        font-weight: 400;
-        color: #707a92;
-        line-height: 20px;
-      }
-    }
-
-    .quickEnter {
-      width: 100%;
-      margin-top: 30px;
-
-      .quickList {
-        margin-top: 20px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-around;
-
-        .quickItem {
-          cursor: pointer;
-
-          &:hover {
-            opacity: 0.8;
-          }
-
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-
-          .quickItemImg {
-            img {
-              width: 48px;
-              height: 48px;
-            }
-          }
-
-          p {
-            font-size: 14px;
-            font-weight: 600;
-            color: #333333;
-          }
-        }
-      }
-    }
-  }
-
   .rightTitle {
     display: flex;
     flex-direction: row;
@@ -455,47 +537,103 @@
     }
   }
 
+  .headerContainer {
+    padding-top: 12px;
+    text-align: center;
+  }
+
+  .HeaderWrap {
+    position: relative;
+    display: inline-block;
+
+    .headerD {
+      width: 237px;
+      height: 138px;
+    }
+
+    .defultHeade {
+      width: 116px;
+      height: 116px;
+      overflow: hidden;
+      border-radius: 50%;
+      position: absolute;
+      top: 11px;
+      left: 61px;
+    }
+  }
+
+  .headerInfo {
+    text-align: center;
+    padding-bottom: 32px;
+    border-bottom: 1px solid #F2F2F2;
+    margin-bottom: 32px;
+
+    .headerTitle {
+      font-size: 20px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 28px;
+      letter-spacing: 1px;
+      padding: 20px 0 8px;
+    }
+
+    .headerSubTitle {
+      font-size: 14px;
+      font-weight: 400;
+      color: #707a92;
+      line-height: 20px;
+    }
+  }
+
   .rightTeachingWrap {
     overflow: hidden;
     flex: 1;
     background-color: #fff;
     padding: 20px;
     border-radius: 20px;
-    margin-top: 20px;
+
     .rightTeachingWrapTitle {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
+
       .lookMore {
         cursor: pointer;
         display: flex;
-        flex-direction: row;
         align-items: center;
-        color: #1677ff;
-        .lookMoreArrow {
-          width: 12px;
-          height: 12px;
+        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;
         }
       }
     }
   }
 }
+
 .teachListWrap {
   position: relative;
+
   .teachListWrapWall {
     position: absolute;
     bottom: 0;
     height: 159px;
     width: 100%;
-    background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0) 0%,
-      #ffffff 100%
-    );
+    background: linear-gradient(180deg,
+        rgba(255, 255, 255, 0) 0%,
+        #ffffff 100%);
     border-radius: 0px 0px 20px 20px;
   }
 }
+
 .teachGroup {
   margin-top: 12px;
 
@@ -624,50 +762,13 @@
   }
 }
 
-.chioseModel {
-  width: 413px;
-
-  :global {
-    .n-select {
-      width: 100%;
-      min-width: 180px;
-
-      .n-base-selection-label {
-        height: 43px;
-        line-height: 43px;
-      }
-
-      .n-base-selection__border {
-        border-radius: 8px;
-        overflow: hidden;
-      }
-
-      .n-base-selection__state-border {
-        border-radius: 8px;
-        overflow: hidden;
-      }
-    }
-
-    .n-card-header {
-      position: relative;
-      padding: 20px 18px;
-      text-align: center;
-      // background: #F5F6FA;
-      font-size: 22px;
-      font-weight: 600;
-      color: #131415;
-      line-height: 30px;
-    }
+.assignHomework {
+  width: 520px;
+}
 
-    .n-card-header__close {
-      position: absolute;
-      right: 18px;
-    }
+.assignHomeworkContainer {
+  padding: 24px 30px;
 
-    .n-card__content {
-      padding-bottom: 30px;
-    }
-  }
 
   .updateBtnGroup {
     padding: 0;
@@ -680,4 +781,4 @@
       }
     }
   }
-}
+}

src/views/home/index.tsx

@@ -1,273 +1,236 @@
 import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
-import bannerPerson from './images/bannerPerson.png';
-import { NIcon, NImage, NDataTable, NButton, NModal } from 'naive-ui';
-import leftDot from './images/leftDot.png';
-import rightDot from './images/rightDot.png';
-import lineIcon from './images/lineIcon.png';
-import musicIcon from './images/musicIcon.png';
-import Study from './components/study';
-import Pagination from '@/components/pagination';
+import {
+  NImage,
+  NButton,
+  NAvatarGroup,
+  NForm,
+  NFormItem,
+  NSelect,
+  NSpace,
+  NModal
+} from 'naive-ui';
 import headerD from './images/headerD.png';
 import defultHeade from '@/components/layout/images/teacherIcon.png';
-import cloundIcon from './images/cloundIcon.png';
-import goClass from './images/goClass.png';
-import boxIcon from './images/boxIcon.png';
 import TeachList from './components/teachList';
-import ChioseModal from './modals/chioseModal';
-import blueArrow from './images/blueArrow.png';
-import soureIcon from './images/soureIcon.png';
+import blackBoardBg from './images/blackboard_bg.png';
+import teacherMan from './images/teacher_man.png';
+import teacherWoman from './images/teacher_woman.png';
+import iconLession from './images/icon-lession.png';
+import iconBook from './images/icon-book.png';
+import iconDetail from './images/icon-detail.png';
+import iconSubject from './images/icon-subject.png';
+import iconTo from './images/icon-to.png';
+import t1 from './images/t1.png';
+import t2 from './images/t2.png';
+import t3 from './images/t3.png';
 import { useRouter } from 'vue-router';
+import { useUserStore } from '/src/store/modules/users';
+import SelectClass from './modals/selectClass';
+
 export default defineComponent({
   name: 'home-page',
   setup() {
     const router = useRouter();
-    const state = reactive({
-      loading: false,
-      pagination: {
-        page: 1,
-        rows: 10,
-        pageTotal: 4
-      },
-      tableList: [
-        {
-          teacherName: '孙忆枫',
-          createTime: '2023-06-27',
-          endTime: '2023-06-30',
-          status: 'ing',
-          studentNum: 100,
-          submitNum: 100,
-          quantityNum: 60,
-          submitRate: 100,
-          quantityRate: 60
-        },
-        {
-          teacherName: '孙忆枫',
-          createTime: '2023-06-27',
-          endTime: '2023-06-30',
-          status: 'ing',
-          studentNum: 100,
-          submitNum: 100,
-          quantityNum: 60,
-          submitRate: 100,
-          quantityRate: 60
-        },
-        {
-          teacherName: '孙忆枫',
-          createTime: '2023-06-27',
-          endTime: '2023-06-30',
-          status: 'ing',
-          studentNum: 100,
-          submitNum: 100,
-          quantityNum: 60,
-          submitRate: 100,
-          quantityRate: 60
-        },
-        {
-          teacherName: '孙忆枫',
-          createTime: '2023-06-25',
-          endTime: '2023-06-26',
-          status: 'end',
-          studentNum: 100,
-          submitNum: 100,
-          quantityNum: 60,
-          submitRate: 100,
-          quantityRate: 60
-        }
-      ] as any,
-      goCourseVisiable: false
+    const userStore = useUserStore();
+    const forms = reactive({
+      applyClass: null as any,
+      applyStatus: false
     });
-    const columns = () => {
-      return [
-        {
-          title: '布置老师',
-          key: 'teacherName'
-        },
-        {
-          title: '布置时间',
-          key: 'createTime'
-        },
-        {
-          title: '截止时间',
-          key: 'endTime'
-        },
-        {
-          title: '训练状态',
-          key: 'status',
-          render(row: any) {
-            return row.status == 'ing' ? (
-              <div class={styles.indDot}>
-                {' '}
-                <span></span> 进行中
-              </div>
-            ) : (
-              <div class={styles.endDot}>
-                <span></span>已结束
-              </div>
-            );
-          }
-        },
-        {
-          title: '布置人数',
-          key: 'studentNum'
-        },
-        {
-          title: '提交人数',
-          key: 'submitNum'
-        },
-        {
-          title: '合格人数',
-          key: 'quantityNum'
-        },
-        {
-          title: '提交率',
-          key: 'submitRate',
-          render(row: any) {
-            return <span>{row.submitRate}%</span>;
-          }
-        },
-        {
-          title: '合格率',
-          key: 'quantityRate',
-          render(row: any) {
-            return <span>{row.quantityRate}%</span>;
-          }
-        },
-        {
-          title: '操作',
-          key: 'id',
-          render(row: any) {
-            return (
-              <NButton text type="primary">
-                详情
-              </NButton>
-            );
-          }
-        }
-      ];
-    };
-    const getList = () => {
-      console.log('1');
-    };
+
     return () => (
       <div class={styles.homeWrap}>
         <div class={styles.homeInfoLeft}>
           <div class={styles.homeBanner}>
-            <img class={styles.bannerPerson} src={bannerPerson}></img>
-            <div class={styles.bannerInfo}>
-              <h3>Hi，张老师 下午好！</h3>
-              <p class={styles.bannerMsg}>
-                您有 <span class={styles.bannerRed}> 4 </span>
-                <span class={styles.bannerRrey}> 条消息未读，</span>
-                <span class={styles.bannerRed}> 3 </span>
-                门课程未布置作业，请及时处理哦！
-              </p>
-              <div class={styles.bannerBtn}>
-                立即处理{' '}
-                <NIcon class={styles.rotueRight}>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <path
-                      d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31a.996.996 0 0 0 0-1.41L9.15 2.98c-.49-.49-1.28-.49-1.77 0s-.49 1.28 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76z"
-                      fill="currentColor"></path>
-                  </svg>
-                </NIcon>
+            <div class={styles.welcomeInfo}>
+              <div class={styles.userInfo}>
+                <div class={styles.userName}>Hi，张老师 下午好～</div>
+                <div class={styles.userTime}>7月4日，星期三</div>
+              </div>
+              <div class={styles.userTips}>
+                <span>欢迎您使用酷乐秀课堂乐器数字化教学平台！</span>
+                <NButton color="#40A1FF" round class={styles.guide_btn}>
+                  功能引导
+                  <i></i>
+                </NButton>
+              </div>
+            </div>
+
+            <div class={styles.applyInfo}>
+              {userStore.getUserInfo.gender === 1 ? (
+                <img src={teacherMan} class={styles.teacherMan} />
+              ) : (
+                <img src={teacherWoman} class={styles.teacherWoman} />
+              )}
+
+              <div class={styles.blackborad}>
+                <img src={blackBoardBg} class={styles.blackBoardBg} />
+              </div>
+              <div class={styles.applyContainer}>
+                <div class={styles.applyTitle}>
+                  <span
+                    class={styles.className}
+                    onClick={() => (forms.applyStatus = true)}>
+                    三年级2班
+                  </span>
+                  <NAvatarGroup
+                    options={
+                      [
+                        {
+                          name: '张三',
+                          src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
+                        },
+                        {
+                          name: '李四',
+                          src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
+                        },
+                        {
+                          name: '王五',
+                          src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
+                        },
+                        {
+                          name: '赵六',
+                          src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
+                        },
+                        {
+                          name: '七仔',
+                          src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
+                        },
+                        {
+                          name: '七仔',
+                          src: 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
+                        }
+                      ] as any
+                    }
+                    max={5}
+                  />
+                </div>
+                <div class={styles.informations}>
+                  人教版二年级上册 | 第1课 好朋友 |
+                </div>
+
+                <NForm showLabel={false}>
+                  <NFormItem>
+                    <div class={styles.selectContainer}>
+                      <img src={iconLession} />
+                      <NSelect placeholder="请选择教材版本" />
+                    </div>
+                  </NFormItem>
+                  <NFormItem>
+                    <div class={styles.selectContainer}>
+                      <img src={iconBook} />
+                      <NSelect placeholder="请选择册别" />
+                    </div>
+                  </NFormItem>
+                  <NFormItem>
+                    <div class={styles.selectContainer}>
+                      <img src={iconDetail} />
+                      <NSelect placeholder="请选择章节" />
+                    </div>
+                  </NFormItem>
+                  <NFormItem>
+                    <div class={styles.selectContainer}>
+                      <img src={iconSubject} />
+                      <NSelect placeholder="请选择声部" />
+                    </div>
+                  </NFormItem>
+                  <NSpace class={styles.btnGroup} justify="center">
+                    <NButton
+                      round
+                      block
+                      class={styles.startClass}
+                      color="#FF6E4C">
+                      开始上课
+                    </NButton>
+                    <NButton
+                      round
+                      block
+                      class={styles.beforClass}
+                      color="#5B64D1"
+                      onClick={() => router.push('/prepare-lessons')}>
+                      去备课
+                    </NButton>
+                  </NSpace>
+                </NForm>
               </div>
             </div>
-            <NImage
-              class={styles.leftDot}
-              src={leftDot}
-              previewDisabled></NImage>
-            <NImage
-              class={styles.rightDot}
-              src={rightDot}
-              previewDisabled></NImage>
-            <NImage
-              class={styles.lineIcon}
-              src={lineIcon}
-              previewDisabled></NImage>
-            <NImage
-              class={styles.musicIcon}
-              src={musicIcon}
-              previewDisabled></NImage>
           </div>
-          <div class={styles.leftBottomWrap}>
-            <Study></Study>
+
+          <div class={styles.toolContainer}>
+            <div class={styles.toolTips}>
+              <div class={styles.toolTitle}>工具箱</div>
+              <div class={styles.toolContent}>
+                这里是常用的教学辅助工具，可帮助学生集中注意力、提高演奏效率，使演奏更完整平稳。让您在课堂上完成更好的教学。
+              </div>
+            </div>
+            <img src={iconTo} class={styles.iconTo} />
+            <div class={styles.toolFunction}>
+              <div class={[styles.toolItem, styles.item1]}>
+                <img src={t1} />
+                <p class={styles.toolMemo}>提升效率，练习好节奏</p>
+                <NButton class={styles.btn1}>节拍器</NButton>
+              </div>
+              <div class={[styles.toolItem, styles.item2]}>
+                <img src={t2} />
+                <p class={styles.toolMemo}>精准调音，一劳永逸</p>
+                <NButton class={styles.btn2}>调音器</NButton>
+              </div>
+              <div class={[styles.toolItem, styles.item3]}>
+                <img src={t3} />
+                <p class={styles.toolMemo}>创造时间，集中注意力</p>
+                <NButton class={styles.btn3}>计时器</NButton>
+              </div>
+            </div>
           </div>
         </div>
         <div class={styles.homeInfoRight}>
-          <div class={styles.homeInfoRightTop}>
-            <div class={styles.HeaderWrap}>
-              <NImage
-                previewDisabled
-                class={styles.headerD}
-                src={headerD}></NImage>
-              <NImage
-                previewDisabled
-                class={styles.defultHeade}
-                src={defultHeade}></NImage>
+          <div class={styles.rightTeachingWrap}>
+            <div class={styles.headerContainer}>
+              <div class={styles.HeaderWrap}>
+                <NImage
+                  previewDisabled
+                  class={styles.headerD}
+                  src={headerD}></NImage>
+                <NImage
+                  previewDisabled
+                  class={styles.defultHeade}
+                  src={defultHeade}></NImage>
+              </div>
             </div>
             <div class={styles.headerInfo}>
               <p class={styles.headerTitle}>张晚意</p>
               <p class={styles.headerSubTitle}>武汉小学 | 音乐老师</p>
             </div>
-            <div class={styles.quickEnter}>
-              <h3 class={styles.rightTitle}>
-                <div class={styles.titleDot}></div>快捷入口
-              </h3>
-              <div class={styles.quickList}>
-                <div
-                  class={styles.quickItem}
-                  onClick={() => (state.goCourseVisiable = true)}>
-                  <NImage
-                    previewDisabled
-                    class={styles.quickItemImg}
-                    src={goClass}></NImage>
-                  <p>开始上课</p>
-                </div>
-
-                <div class={styles.quickItem}>
-                  <NImage
-                    previewDisabled
-                    class={styles.quickItemImg}
-                    src={soureIcon}></NImage>
-                  <p>布置作业</p>
-                </div>
-                <div
-                  class={styles.quickItem}
-                  onClick={() => router.push('/natural-resources')}>
-                  <NImage
-                    previewDisabled
-                    class={styles.quickItemImg}
-                    src={cloundIcon}></NImage>
-                  <p>我的资源</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class={styles.rightTeachingWrap}>
             <div class={styles.rightTeachingWrapTitle}>
               <h3 class={styles.rightTitle}>
-                <div class={styles.titleDot}></div>教学进度
+                <div class={styles.titleDot}></div>使用记录
               </h3>
               <div class={styles.lookMore}>
-                查看全部{' '}
-                <NImage
-                  src={blueArrow}
-                  class={styles.lookMoreArrow}
-                  previewDisabled></NImage>
+                三年级2班
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <path
+                    d="M6 9l6 6l6-6"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"></path>
+                </svg>
               </div>
             </div>
             <TeachList></TeachList>
           </div>
         </div>
 
+        {/* 添加自定义教材 */}
         <NModal
-          v-model:show={state.goCourseVisiable}
+          v-model:show={forms.applyStatus}
           preset="card"
-          class={styles.chioseModel}
-          title={'选择课件'}>
-          <ChioseModal
-            onClose={() => (state.goCourseVisiable = false)}></ChioseModal>
+          showIcon={false}
+          class={['modalTitle background', styles.assignHomework]}
+          title={'选择年级'}
+          blockScroll={false}>
+          <SelectClass onClose={() => (forms.applyStatus = false)} />
         </NModal>
       </div>
     );

src/views/home/modals/selectClass.tsx

@@ -0,0 +1,131 @@
+import { defineComponent, reactive, ref } from 'vue';
+import styles from '../index.module.less';
+import {
+  NButton,
+  NForm,
+  NFormItem,
+  NSelect,
+  NSpace,
+  useMessage
+} from 'naive-ui';
+import { BOOK_DATA } from '/src/views/natural-resources/model/add-teaching';
+import dayjs from 'dayjs';
+import { classGroupPage } from '../../prepare-lessons/api';
+
+export default defineComponent({
+  name: 'select-class',
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const message = useMessage();
+
+    const forms = reactive({
+      currentTime: dayjs(dayjs().format('YYYY-MM-DD')).valueOf(),
+      id: null as any,
+      uploading: false,
+      classList: [] as any,
+      currentGradeNum: null,
+      expireDate: dayjs().add(7, 'day').format('YYYY-MM-DD') as any, // 默认7天
+      classGroupId: null as any
+    });
+    const formsRef = ref();
+
+    const getClassList = async () => {
+      try {
+        const { data } = await classGroupPage({
+          currentGradeNum: forms.currentGradeNum,
+          page: 1,
+          rows: 99
+        });
+        const temp = data.rows || [];
+        const classList = [] as any;
+        temp.forEach((row: any) => {
+          classList.push({
+            label: row.currentClass + '班',
+            value: row.id
+          });
+        });
+
+        forms.classList = classList;
+      } catch {
+        //
+      }
+    };
+    const onSubmit = async () => {
+      formsRef.value?.validate(async (err: any) => {
+        if (err) {
+          return;
+        }
+        forms.uploading = true;
+        try {
+          emit('close');
+        } catch {
+          //
+        }
+        forms.uploading = false;
+      });
+    };
+
+    return () => (
+      <div class={styles.assignHomeworkContainer}>
+        <NForm
+          ref={formsRef}
+          model={forms}
+          labelAlign="right"
+          labelWidth={'auto'}
+          labelPlacement="left">
+          <NFormItem
+            label="年级"
+            path="currentGradeNum"
+            rule={[
+              {
+                required: true,
+                message: '请选择年级',
+                trigger: 'change',
+                type: 'number'
+              }
+            ]}>
+            <NSelect
+              v-model:value={forms.currentGradeNum}
+              placeholder="请选择年级"
+              options={BOOK_DATA.grades}
+              clearable
+              onUpdate:value={() => {
+                forms.classGroupId = null;
+                getClassList();
+              }}
+            />
+          </NFormItem>
+          <NFormItem
+            label="班级"
+            path="classGroupId"
+            rule={[
+              { required: true, message: '请选择班级', trigger: 'change' }
+            ]}>
+            <NSelect
+              v-model:value={forms.classGroupId}
+              placeholder="请选择班级"
+              clearable
+              options={forms.classList}
+              disabled={!forms.currentGradeNum}
+            />
+          </NFormItem>
+
+          <NSpace class={styles.updateBtnGroup}>
+            <NButton strong type="default" round onClick={() => emit('close')}>
+              取消
+            </NButton>
+            <NButton
+              strong
+              type="primary"
+              round
+              disabled={forms.uploading}
+              loading={forms.uploading}
+              onClick={onSubmit}>
+              确认
+            </NButton>
+          </NSpace>
+        </NForm>
+      </div>
+    );
+  }
+});