Merge branch 'iteration-login'

src/components/CDatePicker/index.tsx

@@ -26,7 +26,6 @@ export default defineComponent({
       console.log('更新日期', timer.value);
       emit('update:value', timer.value);
     };
-    console.log(props.timerValue, 'timerValue');
     timer.value =
       props.timerValue && props.timerValue.length > 0 ? props.timerValue : null;
     watch(

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/components/layout/index.module.less

@@ -127,8 +127,10 @@
       display: flex;
       flex-direction: row;
       align-items: center;
+
       .messageBadge {
         margin-right: 24px;
+
         :global {
           .n-badge-sup {
             left: 20px;
@@ -138,6 +140,7 @@
             animation: TadaNum 1s 2s both infinite !important;
           }
         }
+
         .messageIcon {
           -webkit-animation: Tada 1s 2s both infinite;
           -moz-animation: Tada 1s 2s both infinite;
@@ -147,16 +150,19 @@
           height: 32px;
         }
       }
+
       @keyframes Tada {
         0% {
           transform: scale(1);
           transform: scale(1);
         }
+
         10%,
         20% {
           transform: scale(0.9) rotate(-3deg);
           transform: scale(0.9) rotate(-3deg);
         }
+
         30%,
         50%,
         70%,
@@ -164,12 +170,14 @@
           transform: scale(1.1) rotate(3deg);
           transform: scale(1.1) rotate(3deg);
         }
+
         40%,
         60%,
         80% {
           transform: scale(1.1) rotate(-3deg);
           transform: scale(1.1) rotate(-3deg);
         }
+
         100% {
           transform: scale(1) rotate(0);
           transform: scale(1) rotate(0);
@@ -289,6 +297,7 @@
 }
 
 :global {
+
   .fade-slide-leave-active,
   .fade-slide-enter-active {
     transition: all 0.3s;
@@ -314,6 +323,7 @@
   cursor: pointer;
   z-index: 1000;
 }
+
 .isDragIng {
   width: 138px;
   height: 138px;
@@ -323,10 +333,12 @@
   .moveable-control-box {
     --moveable-color: transparent !important;
   }
+
   .n-popover {
     background-color: transparent !important;
   }
 }
+
 .booxToolWrap {
   width: 286px;
   height: 95px;
@@ -338,15 +350,18 @@
   align-items: center;
   padding: 8px 23px 10px;
   justify-content: space-between;
+
   .booxToolItem {
     display: flex;
     flex-direction: column;
     align-items: center;
     font-size: 12px;
     cursor: pointer;
+
     &:hover {
       opacity: 0.8;
     }
+
     img {
       width: 56px;
       height: 56px;
@@ -354,18 +369,23 @@
     }
   }
 }
+
 .setTimeImage {
   cursor: pointer;
+
   img {
     width: 792px;
   }
 }
+
 .beatImage {
   cursor: pointer;
+
   img {
     width: 698px;
   }
 }
+
 .changePwdModal {
   border-radius: 16px;
-}
+}

src/components/layout/layoutSilder.tsx

@@ -16,6 +16,8 @@ import setIcon from './images/setIcon.png';
 import setNormal from './images/setNormal.png';
 import studentIcon from './images/studentIcon.png';
 import studentNormal from './images/studentNormal.png';
+import dataIcon from './images/dataIcon.png'
+import dataNormal from './images/dataNormal.png'
 import SilderItem from './modals/silderItem';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 export default defineComponent({
@@ -81,11 +83,19 @@ export default defineComponent({
         path: '/natural-resources'
       },
       {
+        activeIcon: dataIcon,
+        name: '数据',
+        normalIcon: dataNormal,
+        isActive: false,
+        id: 7,
+        path: '/data-module'
+      },
+      {
         activeIcon: setIcon,
         name: '设置',
         normalIcon: setNormal,
         isActive: false,
-        id: 7,
+        id: 8,
         path: '/setting'
       }
     ]);

src/router/routes/index.ts

@@ -125,6 +125,14 @@ export const constantRoutes: RouteRecordRaw[] = [
         }
       },
       {
+        path: '/data-module',
+        name: 'data-module',
+        component: () => import('@/views/data-module/index'),
+        meta: {
+          title: '数据'
+        }
+      },
+      {
         path: '/natural-resources',
         name: 'natural-resources',
         component: () => import('@/views/natural-resources/index'),

src/utils/contants.ts

@@ -47,3 +47,14 @@ export const trainingStatus = {
   SUBMITTED: '不合格',
   TARGET: '合格'
 } as any;
+
+/** 周 */
+export const weekToCN = {
+  0: '星期天',
+  1: '星期一',
+  2: '星期二',
+  3: '星期三',
+  4: '星期四',
+  5: '星期五',
+  6: '星期六'
+} as any;

src/views/classList/classDetail.tsx

@@ -11,7 +11,7 @@ import { getTabsCache, setTabsCaches } from '@/hooks/use-async';
 export default defineComponent({
   name: 'base-setting',
   setup() {
-    const activeTab = ref('attendclass');
+    const activeTab = ref('student');
     const route = useRoute();
     const routerList = ref([
       { name: '班级管理', path: '/classList' },

src/views/data-module/api.tsx

@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+
+
+export const getTrainingStat = (params: any) => {
+  return request.post('/edu-app/lessonTraining/trainingStat', {
+    data: params
+    // requestType: 'form'
+  });
+};

src/views/data-module/index.module.less

@@ -0,0 +1,58 @@
+@img: '../setting/images';
+
+.listWrap {
+  min-height: 805px;
+  padding: 32px;
+  background-color: #fff;
+  border-radius: 20px;
+
+  .customTabs {
+    :global {
+      .n-tabs-tab--active {
+        font-size: 18px !important;
+
+        font-weight: 600 !important;
+        color: #131415 !important;
+      }
+
+      .n-tabs-tab {
+        font-size: 18px;
+        padding: 8px 0 !important;
+        font-weight: 400;
+        min-width: 50px;
+        color: #8b8d98;
+
+        &:hover {
+          color: #198cfe !important;
+        }
+      }
+
+      .n-tabs-bar {
+        // background-color: red !important;
+        width: 50px !important;
+        height: 5px !important;
+        background: url('@{img}/barIcon.png') no-repeat;
+        background-size: 50px 5px;
+      }
+    }
+  }
+}
+
+.searchBtn {
+  width: 90px;
+  height: 43px;
+  background: #198cfe;
+  border-radius: 8px;
+  line-height: 41px;
+  font-weight: 600 !important;
+  font-size: 18px;
+}
+
+.resetBtn {
+  width: 90px;
+  height: 43px;
+  border-radius: 8px;
+  line-height: 41px;
+  font-weight: 600 !important;
+  font-size: 18px;
+}

src/views/data-module/index.tsx

@@ -0,0 +1,78 @@
+import { defineComponent, ref,watch } from 'vue';
+import styles from './index.module.less';
+import { NTabs, NTabPane, NSpace, NButton } from 'naive-ui';
+import { useRoute } from 'vue-router';
+import { getTabsCache, setTabsCaches } from '@/hooks/use-async';
+import CDatePicker from '/src/components/CDatePicker';
+import TrainData from '@/views/home/components/trainData';
+import PracticeData from '@/views/home/components/practiceData';
+import PracticeRanking from '@/views/home/components/practiceRanking';
+import { getNowDateAndMonday, getNowDateAndSunday } from '/src/utils/dateFormat';
+export default defineComponent({
+  name: 'data-module',
+  setup() {
+    const activeTab = ref('attendclass');
+    const route = useRoute();
+    getTabsCache((val: any) => {
+      if (val.form.tabName) {
+        activeTab.value = val.form.tabName;
+      }
+    });
+    const setTabs = (val: any) => {
+      setTabsCaches(val, 'tabName', route);
+    };
+    const timer = ref<[number, number]>([
+      getNowDateAndMonday(new Date().getTime()),
+      getNowDateAndSunday(new Date().getTime())
+    ]);
+
+    const updaeTimer = (value:any)=>{
+      console.log('监听改变',value)
+    }
+
+    return () => (
+      <div>
+        <div class={styles.listWrap}>
+          <NTabs
+            onUpdate:value={(val: any) => setTabs(val)}
+            class={styles.customTabs}
+            v-model:value={activeTab.value}
+            size="large"
+            animated
+            pane-wrapper-style="margin: 0 -4px"
+            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+            v-Slots={{
+              suffix:()=><>
+                        <div class={styles.homeStudyInfoDate}>
+              <NSpace>
+                      <CDatePicker
+                        separator={'-'}
+                        type="daterange"
+                        onUpdateValue={updaeTimer}
+                         timerValue={timer.value} ></CDatePicker>
+                <NButton type="primary" class={styles.searchBtn}>
+                  搜索
+                </NButton>
+                <NButton type="primary" ghost class={styles.resetBtn}>
+                  重置
+                </NButton>
+              </NSpace>
+            </div>
+              </>
+            }}>
+            <NTabPane name="training " tab="训练统计">
+             <TrainData timer={timer.value}></TrainData>
+            </NTabPane>
+            <NTabPane name="practice" tab="练习数据">
+              <PracticeData  timer={timer.value}></PracticeData>
+            </NTabPane>
+            <NTabPane name="ranking" tab="练习排行">
+              <PracticeRanking  timer={timer.value}></PracticeRanking>
+            </NTabPane>
+          </NTabs>
+
+        </div>
+      </div>
+    );
+  }
+});

src/views/home/components/practiceData.tsx

@@ -1,12 +1,20 @@
-import { Ref, defineComponent, reactive, ref } from 'vue';
+import { Ref, defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from '../index.module.less';
 import { NButton, NDataTable, NNumberAnimation } from 'naive-ui';
 import numeral from 'numeral';
 import { useECharts } from '@/hooks/web/useECharts';
 import Pagination from '/src/components/pagination';
+import { getTrainingStat } from '@/views/data-module/api'
+import { getTimes } from '/src/utils/dateFormat';
 export default defineComponent({
   name: 'home-practiceData',
-  setup() {
+  props:{
+    timer:{
+      type:Array,
+      defaut:()=>[]
+    }
+  },
+  setup(props,{expose}) {
     const chartRef = ref<HTMLDivElement | null>(null);
     const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
     const practiceFlag = ref(true);
@@ -105,9 +113,15 @@ export default defineComponent({
         }
       ];
     };
-    const getList = () => {
-      console.log('1');
+    const getList = async () => {
+      try{
+        const res = await getTrainingStat({  ...getTimes(props.timer, ['startTime', 'endTime'], 'YYYY-MM-DD')})
+
+      }catch(e){
+        console.log(e)
+      }
     };
+    expose({getList})
     const setChart = () => {
       setOptions({
         tooltip: {
@@ -215,7 +229,11 @@ export default defineComponent({
         // ]
       });
     };
-    setChart();
+    onMounted(()=>{
+      getList()
+      setChart();
+    })
+
     return () => (
       <>
         <div class={styles.homeTrainData}>

src/views/home/components/practiceRanking.tsx

@@ -15,7 +15,13 @@ import Pagination from '@/components/pagination';
 import add from './images/add.png';
 export default defineComponent({
   name: 'student-studentList',
-  setup(props, { emit }) {
+  props:{
+    timer:{
+      type:Array,
+      defaut:()=>[]
+    }
+  },
+  setup(props, { emit,expose }) {
     const state = reactive({
       searchWord: '',
       orchestraType: null,
@@ -70,7 +76,7 @@ export default defineComponent({
     const getList = () => {
       console.log('getList');
     };
-
+    expose({getList})
     const columns = () => {
       return [
         {

src/views/home/components/study.tsx

@@ -10,6 +10,7 @@ export default defineComponent({
   name: 'home-study',
   setup() {
     const chioseTab = ref('trainData');
+    const timer = ref([])
     return () => (
       <>
         <div class={styles.homeStudy}>
@@ -52,7 +53,10 @@ export default defineComponent({
             </div>
             <div class={styles.homeStudyInfoDate}>
               <NSpace>
-                <CDatePicker separator={'-'} type="daterange"></CDatePicker>
+                <CDatePicker
+                  separator={'-'}
+                  type="daterange"
+                  timerValue={timer.value}></CDatePicker>
                 <NButton type="primary" class={styles.searchBtn}>
                   搜索
                 </NButton>

src/views/home/components/trainData.tsx

@@ -1,12 +1,20 @@
-import { Ref, defineComponent, reactive, ref } from 'vue';
+import { Ref, defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from '../index.module.less';
 import { NButton, NDataTable, NNumberAnimation } from 'naive-ui';
 import numeral from 'numeral';
 import { useECharts } from '@/hooks/web/useECharts';
 import Pagination from '/src/components/pagination';
+import { getTimes } from '/src/utils/dateFormat';
+import { getTrainingStat } from '../../data-module/api';
 export default defineComponent({
   name: 'home-trainData',
-  setup() {
+  props: {
+    timer: {
+      type: Array,
+      defaut: () => []
+    }
+  },
+  setup(props, { expose }) {
     const chartRef = ref<HTMLDivElement | null>(null);
     const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
     const qualifiedFlag = ref(true);
@@ -28,6 +36,14 @@ export default defineComponent({
       studentList: [50, 100, 80, 180, 70, 99, 300],
       payInfoList: [100, 200, 300, 450, 330, 200, 10]
     });
+    const totalDateRef = ref({
+      qualifiedRate: 9,
+      qualifiedStudentCount: 1,
+      submitStudentCount: 3,
+      totalStudentCount: 11,
+      trainingCount: 4,
+      trainingRate: 27, //
+    } as any);
     const state = reactive({
       loading: false,
       pagination: {
@@ -152,9 +168,16 @@ export default defineComponent({
         }
       ];
     };
-    const getList = () => {
-      console.log('1');
+    const getList = async () => {
+      try {
+        const res = await getTrainingStat({
+          ...getTimes(props.timer, ['startTime', 'endTime'], 'YYYY-MM-DD')
+        });
+      } catch (e) {
+        console.log(e);
+      }
     };
+    expose({ getList });
     const setChart = () => {
       setOptions({
         tooltip: {
@@ -330,7 +353,11 @@ export default defineComponent({
         // ]
       });
     };
-    setChart();
+    onMounted(() => {
+      getList();
+      setChart();
+    });
+
     return () => (
       <>
         <div class={styles.homeTrainData}>
@@ -339,7 +366,7 @@ export default defineComponent({
               <div class={styles.TrainDataItem}>
                 <p class={styles.TrainDataItemTitle}>
                   <span>
-                    <NNumberAnimation from={0} to={6}></NNumberAnimation>
+                    <NNumberAnimation from={0} to={totalDateRef.value.trainingCount}></NNumberAnimation>
                   </span>
                   次
                 </p>
@@ -348,7 +375,7 @@ export default defineComponent({
               <div class={styles.TrainDataItem}>
                 <p class={styles.TrainDataItemTitle}>
                   <span>
-                    <NNumberAnimation from={0} to={100}></NNumberAnimation>
+                    <NNumberAnimation from={0} to={totalDateRef.value.totalStudentCount}></NNumberAnimation>
                   </span>
                   人次
                 </p>
@@ -357,7 +384,7 @@ export default defineComponent({
               <div class={styles.TrainDataItem}>
                 <p class={styles.TrainDataItemTitle}>
                   <span>
-                    <NNumberAnimation from={0} to={40}></NNumberAnimation>
+                    <NNumberAnimation from={0} to={totalDateRef.value.submitStudentCount}></NNumberAnimation>
                   </span>
                   人次
                 </p>
@@ -367,7 +394,7 @@ export default defineComponent({
                 <p class={styles.TrainDataItemTitle}>
                   <span>
                     {' '}
-                    <NNumberAnimation from={0} to={30}></NNumberAnimation>
+                    <NNumberAnimation from={0} to={totalDateRef.value.qualifiedStudentCount}></NNumberAnimation>
                   </span>
                   人次
                 </p>
@@ -376,7 +403,7 @@ export default defineComponent({
               <div class={styles.TrainDataItem}>
                 <p class={styles.TrainDataItemTitle}>
                   <span>
-                    <NNumberAnimation from={0} to={40}></NNumberAnimation>%
+                    <NNumberAnimation from={0} to={totalDateRef.value.trainingRate}></NNumberAnimation>%
                   </span>
                 </p>
                 <p class={styles.TrainDataItemsubTitle}>训练提交率</p>
@@ -384,7 +411,7 @@ export default defineComponent({
               <div class={styles.TrainDataItem}>
                 <p class={styles.TrainDataItemTitle}>
                   <span>
-                    <NNumberAnimation from={0} to={30}></NNumberAnimation>%
+                    <NNumberAnimation from={0} to={totalDateRef.value.qualifiedRate}></NNumberAnimation>%
                   </span>
                 </p>
                 <p class={styles.TrainDataItemsubTitle}>训练合格率</p>

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,348 @@
   // 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;
+    height: 42px;
+
+    .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;
+    }
+
+    .n-base-selection.n-base-selection--disabled {
+      background-color: var(--n-color-disabled);
+      cursor: not-allowed;
+    }
+  }
+}
+
+.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
+  }
+
+  .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;
 
-      .leftDot {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 141px;
-        height: 141px;
+      &: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;
       }
 
-      .lineIcon {
-        position: absolute;
-        z-index: 500;
-        width: 48px;
-        height: 48px;
-        left: 96px;
-        top: 89px;
+
+      .btn1 {
+        background: linear-gradient(135deg, #51E7FF 0%, #2A7CFF 100%) !important;
+        --n-ripple-color: #51E7FF !important;
+      }
+
+      .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 +503,11 @@
           border-radius: 4px;
           margin-right: 6px;
         }
+
         .DataTopRightDot.DataTopRightDotBlue {
           background: #d5e9ff;
         }
+
         .DataTopRightDot.red {
           background: #ff7aa7;
         }
@@ -297,148 +522,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 +543,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 +768,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 +787,4 @@
       }
     }
   }
-}
+}

src/views/home/index.tsx

@@ -1,273 +1,248 @@
-import { defineComponent, reactive } from 'vue';
+import { computed, 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';
+import dayjs from 'dayjs';
+import { weekToCN } from '/src/utils/contants';
+import { getCLassStudent } from '../classList/api';
+
 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,
+      applyClassItem: {} as any, // 选择的内容
+      applyStatus: false,
+      studentList: [] as any
     });
-    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');
+
+    // 显示选择的内容
+    const bookInfo = computed(() => {
+      return '';
+    });
+
+    // 学生列表
+    // getStdentList
+    // 应用选择年级班级
+    const onApplyConfirm = async (item: any) => {
+      try {
+        //
+        const { data } = await getCLassStudent({
+          page: 1,
+          rows: 999,
+          classGroupId: item.classGroupId
+        });
+
+        const temps = data.rows || [];
+        temps.forEach((row: any) => {
+          forms.studentList.push({
+            name: row.nickname,
+            src: row.avatar
+          });
+        });
+
+        console.log(item, data);
+        forms.applyClass = item.currentGradeLabel + item.className;
+        forms.applyClassItem = item;
+      } catch {
+        //
+      }
     };
     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，{userStore.getUserInfo?.nickname} 下午好～
+                </div>
+                <div class={styles.userTime}>
+                  {dayjs().format('MM月DD日')}，{weekToCN[dayjs().day()]}
+                </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)}>
+                    {forms.applyClass || '请选择班级'}
+                  </span>
+                  <NAvatarGroup options={forms.studentList} max={5} />
+                </div>
+                <div class={styles.informations}>{bookInfo.value}</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
+            onConfirm={(item: any) => onApplyConfirm(item)}
+            onClose={() => (forms.applyStatus = false)}
+          />
         </NModal>
       </div>
     );

src/views/home/modals/selectClass.tsx

@@ -0,0 +1,138 @@
+import { defineComponent, reactive, ref } from 'vue';
+import styles from '../index.module.less';
+import { NButton, NForm, NFormItem, NSelect, NSpace } from 'naive-ui';
+import { BOOK_DATA } from '/src/views/natural-resources/model/add-teaching';
+import { classGroupPage } from '../../prepare-lessons/api';
+
+export default defineComponent({
+  name: 'select-class',
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const forms = reactive({
+      id: null as any,
+      uploading: false,
+      classList: [] as any,
+      currentGradeNum: null,
+      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 {
+          let gradeName = '';
+          BOOK_DATA.grades.forEach((item: any) => {
+            if (forms.currentGradeNum === item.value) {
+              gradeName = item.label;
+            }
+          });
+
+          let className = '';
+          forms.classList.forEach((item: any) => {
+            if (item.value === forms.classGroupId) {
+              className = item.label;
+            }
+          });
+          emit('confirm', {
+            currentGradeNum: forms.currentGradeNum, // 年级
+            currentGradeLabel: gradeName,
+            classGroupId: forms.classGroupId, // 班级
+            className
+          });
+          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>
+    );
+  }
+});

src/views/setting/components/personInfo.tsx

@@ -116,10 +116,12 @@ export default defineComponent({
           <div class={styles.headerInfo}>
             <p class={styles.headerTitle}>
               {userStore.info.nickname}
-              <NImage
-                previewDisabled
-                class={styles.sexIcon}
-                src={userStore.info.gender ? maleIcon : femaleIcon}></NImage>
+              {userStore.info.gender !== null && (
+                <NImage
+                  previewDisabled
+                  class={styles.sexIcon}
+                  src={userStore.info.gender ? maleIcon : femaleIcon}></NImage>
+              )}
             </p>
             <p class={styles.headerSubTitle}>
               {userStore.info.schoolInfos?.[0]?.name} | 音乐老师
@@ -175,7 +177,17 @@ export default defineComponent({
                 </NFormItem>
               </NGi>
               <NGi>
-                <NFormItem label="性别" path="sex">
+                <NFormItem
+                  label="性别"
+                  path="gender"
+                  rule={[
+                    {
+                      required: true,
+                      type: 'number',
+                      message: '请选择性别',
+                      trigger: 'blur'
+                    }
+                  ]}>
                   <NSelect
                     bordered={!data.disabled}
                     class={styles.select}
@@ -186,30 +198,42 @@ export default defineComponent({
                   />
                 </NFormItem>
               </NGi>
+              <NGi>
+                <NFormItem
+                  label="城区"
+                  path="provinceCode"
+                  rule={{
+                    required: true,
+                    type: 'number',
+                    message: '请选择城区',
+                    trigger: 'change'
+                  }}>
+                  <NCascader
+                    bordered={!data.disabled}
+                    options={formOptions.areaList}
+                    labelField="name"
+                    valueField="code"
+                    childrenField="areas"
+                    checkStrategy="child"
+                    expandTrigger="hover"
+                    defaultValue={
+                      userStore.info.regionCode ||
+                      userStore.info.cityCode ||
+                      userStore.info.provinceCode
+                    }
+                    onUpdate:value={(
+                      val: any,
+                      option: any,
+                      pathValues: any
+                    ) => {
+                      teacherForm.provinceCode = pathValues[0]?.code;
+                      teacherForm.cityCode = pathValues[1]?.code;
+                      teacherForm.regionCode = pathValues[2]?.code;
+                    }}
+                  />
+                </NFormItem>
+              </NGi>
             </NGrid>
-            <NFormItem
-              label="城区"
-              style={{ maxWidth: '30%' }}>
-              <NCascader
-                bordered={!data.disabled}
-                options={formOptions.areaList}
-                labelField="name"
-                valueField="code"
-                childrenField="areas"
-                checkStrategy="child"
-                expandTrigger="hover"
-                defaultValue={
-                  userStore.info.regionCode ||
-                  userStore.info.cityCode ||
-                  userStore.info.provinceCode
-                }
-                onUpdate:value={(val: any, option: any, pathValues: any) => {
-                  teacherForm.provinceCode = pathValues[0]?.code;
-                  teacherForm.cityCode = pathValues[1]?.code;
-                  teacherForm.regionCode = pathValues[2]?.code;
-                }}
-              />
-            </NFormItem>
           </NForm>
         </div>
         {data.disabled ? (

src/views/setting/components/schoolInfo/index.tsx

@@ -120,6 +120,7 @@ export default defineComponent({
 
               {row.status === 'ACTIVATION' ? (
                 <NButton
+                  disabled={row.jobType === 'ADMIN'}
                   type="primary"
                   quaternary
                   size="small"

src/views/setting/index.module.less

@@ -118,6 +118,7 @@
         font-weight: 400;
         color: #707a92;
         line-height: 20px;
+        text-align: center;
       }
     }
   }
@@ -127,9 +128,10 @@
     width: 1172px;
 
     :global {
-      .n-form-item{
+      .n-form-item {
         min-width: 200Px;
       }
+
       .n-form-item-label {
         font-size: 15px;
         color: rgba(0, 0, 0, 0.8);
@@ -137,7 +139,7 @@
 
       .n-input {
         border-radius: 8Px;
-        
+
         .n-input__input-el {
           height: 50Px;
           font-size: 16Px;
@@ -150,18 +152,19 @@
       }
 
       .n-base-selection {
-        border-radius: 8px;
+        height: 50Px;
+        border-radius: 8Px;
 
         .n-base-selection-label {
-          height: 50Px;
-          font-size: 16Px;
+            height: 50Px;
+            font-size: 16Px;
         }
-      }
+    }
 
-      .n-base-selection.n-base-selection--disabled .n-base-selection-label {
-        background-color: #f5f6fa;
+    .n-base-selection.n-base-selection--disabled .n-base-selection-label {
+        background-color: #F5F6FA;
         color: rgba(149, 149, 152, 1);
-      }
+    }
     }
   }
 }
@@ -190,13 +193,23 @@
     background-color: #198cfe !important;
   }
 
-  .option.n-base-select-option.n-base-select-option--pending
-    .n-base-select-option__content {
+  .option.n-base-select-option.n-base-select-option--pending .n-base-select-option__content {
     color: #fff !important;
     text-align: center;
   }
 }
 
+<<<<<<< HEAD
+=======
+.select {
+  :globla {
+    .n-base-selection {
+      height: 53px;
+    }
+  }
+}
+
+>>>>>>> iteration-login
 .changePwdModal {
   border-radius: 16px;
 
@@ -205,10 +218,18 @@
 
     :global {
       .n-input {
+<<<<<<< HEAD
         border-radius: 5Px;
       }
       .n-input .n-input__input-el{
         height: 50Px;
+=======
+        border-radius: 8px;
+      }
+
+      .n-input .n-input__input-el {
+        height: 53px;
+>>>>>>> iteration-login
       }
 
       .n-button.n-button--disabled {
@@ -216,9 +237,16 @@
       }
     }
   }
+<<<<<<< HEAD
   .sendMsg {
     min-width: 108Px;
     height: 50Px;
+=======
+
+  .sendMsg {
+    height: 53px;
+    min-width: 108px;
+>>>>>>> iteration-login
   }
 
   .pwdIcon {
@@ -226,6 +254,10 @@
     height: 24Px;
     cursor: pointer;
   }
+<<<<<<< HEAD
+=======
+
+>>>>>>> iteration-login
   .submitBtm {
     width: 45%;
     height: 46Px;
@@ -234,28 +266,34 @@
 
 .wrap {
   padding: 12px 0;
+
   :global {
     .n-input {
       border-radius: 8px;
     }
+
     .n-input .n-input__input-el {
       height: 53px;
     }
+
     .n-button.n-button--disabled {
       background: #aaa;
     }
   }
 }
+
 .sendMsg {
   height: 53px;
   min-width: 108px;
 }
+
 .pwdIcon {
   width: 24px;
   height: 24px;
   cursor: pointer;
 }
+
 .submitBtm {
   width: 45%;
   height: 47px;
-}
+}