Merge branch 'startLogin' into dev

dev-dist/sw.js

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

src/components/TheQrCode/index.tsx

@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue';
 import { AwesomeQR } from 'vue-qr/src/lib/awesome-qr';
+import { px2vw } from '@/utils/index'
 function toBoolean(val: any): boolean {
   if (val === '') return val;
   return val === 'true' || val == '1';
@@ -205,9 +206,9 @@ export default defineComponent({
   },
   render() {
     return (
-      <>
+      < >
         {this.bindElement && this.imgUrl && (
-          <img style="display: inline-block" src={this.imgUrl} />
+          <img style={{ width: px2vw(this.size), height: px2vw(this.size), display: 'inline-block', zIndex: 1000 }} src={this.imgUrl} />
         )}
       </>
     );

src/utils/index.ts

@@ -320,3 +320,5 @@ export const getTimes = (
   }
   return {};
 };
+
+export const px2vw = (px: number): string => `${(px / 1920) * 100}vw`;

src/views/setting/components/schoolInfo/index.module.less

@@ -1,221 +1,444 @@
 .logo {
-    position: relative;
-    width: 100Px;
-    height: 100Px;
+  position: relative;
+  width: 100Px;
+  height: 100Px;
+  border-radius: 50%;
+  overflow: hidden;
+
+  .changeHead {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    color: #fff;
+    font-weight: 600;
+    transition: opacity .3s;
     border-radius: 50%;
-    overflow: hidden;
+    cursor: pointer;
+    opacity: 0;
 
-    .changeHead {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        background-color: rgba(0, 0, 0, .7);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 16px;
-        color: #fff;
-        font-weight: 600;
-        transition: opacity .3s;
-        border-radius: 50%;
-        cursor: pointer;
-        opacity: 0;
-
-        &:hover {
-            opacity: 1;
-        }
-    }
-
-    .uploadFile {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        opacity: 0;
+    &:hover {
+      opacity: 1;
     }
+  }
+
+  .uploadFile {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    opacity: 0;
+  }
 }
 
 .formWrap {
-    :global {
-        .n-input {
-            width: 284Px;
-            border-radius: 8Px;
-
-            .n-input__input-el {
-                height: 50Px;
-                font-size: 16Px;
-            }
-
-            &.n-input--disabled {
-                background-color: #F5F6FA;
-                color: rgba(149, 149, 152, 1);
-            }
-        }
+  :global {
+    .n-input {
+      width: 284Px;
+      border-radius: 8Px;
+
+      .n-input__input-el {
+        height: 50Px;
+        font-size: 16Px;
+      }
+
+      &.n-input--disabled {
+        background-color: #F5F6FA;
+        color: rgba(149, 149, 152, 1);
+      }
+    }
 
-        .n-base-selection {
-            height: 50Px;
-            width: 284Px;
-            border-radius: 8Px;
+    .n-base-selection {
+      height: 50Px;
+      width: 284Px;
+      border-radius: 8Px;
 
-            .n-base-selection-label {
-                height: 50Px;
-                font-size: 16Px;
-            }
-        }
+      .n-base-selection-label {
+        height: 50Px;
+        font-size: 16Px;
+      }
+    }
 
-        .n-base-selection.n-base-selection--disabled .n-base-selection-label {
-            background-color: #F5F6FA;
-            color: rgba(149, 149, 152, 1);
-        }
+    .n-base-selection.n-base-selection--disabled .n-base-selection-label {
+      background-color: #F5F6FA;
+      color: rgba(149, 149, 152, 1);
     }
+  }
 }
 
 .schoolInfo {
-    :global {
-        .n-form-item .n-form-item-label {
-            color: #777;
-        }
+  :global {
+    .n-form-item .n-form-item-label {
+      color: #777;
+    }
 
-        .n-button {
-            border-radius: 8px;
-        }
+    .n-button {
+      border-radius: 8px;
+    }
 
-        .n-data-table .n-data-table-th {
+    .n-data-table .n-data-table-th {
 
-            background: #F7F7F8;
-            color: rgba(113, 113, 114, 1) !important;
-            border: none;
-            min-height: 54Px;
-            font-size: 15Px;
-        }
+      background: #F7F7F8;
+      color: rgba(113, 113, 114, 1) !important;
+      border: none;
+      min-height: 54Px;
+      font-size: 15Px;
+    }
 
-        .n-data-table.n-data-table--bordered .n-data-table-wrapper {
-            border: none;
-        }
+    .n-data-table.n-data-table--bordered .n-data-table-wrapper {
+      border: none;
+    }
 
-        .n-data-table-tr .n-data-table-td .n-button__content,
-        .n-data-table .n-data-table-td {
-            font-weight: bold;
-            font-size: 15Px;
-        }
+    .n-data-table-tr .n-data-table-td .n-button__content,
+    .n-data-table .n-data-table-td {
+      font-weight: bold;
+      font-size: 15Px;
     }
+  }
 
-    .errorBtn {
-        :global {
-            .n-button__content {
-                color: #FF4D4F;
-            }
-        }
+  .errorBtn {
+    :global {
+      .n-button__content {
+        color: #FF4D4F;
+      }
     }
+  }
 }
 
 .addTeacher {
-    padding: 0;
-    border-radius: 16Px;
-    overflow: hidden;
-    min-width: 456Px;
+  padding: 0;
+  border-radius: 16Px;
+  overflow: hidden;
+  min-width: 456Px;
+
+  :global {
+    .n-dialog__close {
+      transform: translate(0, 3Px);
+    }
 
-    :global {
-        .n-dialog__close {
-            transform: translate(0, 3Px);
-        }
+    .n-dialog__title {
+      min-height: 70Px;
+      justify-content: center;
+      background: #F5F6FA;
+    }
 
-        .n-dialog__title {
-            min-height: 70Px;
-            justify-content: center;
-            background: #F5F6FA;
-        }
+    .n-form {
+      padding: 20Px 0;
+    }
 
-        .n-form {
-            padding: 20Px 0;
-        }
+    .n-input {
+      border-radius: 8Px;
 
-        .n-input {
-            border-radius: 8Px;
+      .n-input__input-el {
+        height: 50Px;
+        font-size: 16Px;
+      }
 
-            .n-input__input-el {
-                height: 50Px;
-                font-size: 16Px;
-            }
+      &.n-input--disabled {
+        background-color: #F5F6FA;
+        color: rgba(149, 149, 152, 1);
+      }
+    }
 
-            &.n-input--disabled {
-                background-color: #F5F6FA;
-                color: rgba(149, 149, 152, 1);
-            }
-        }
+    .n-base-selection {
+      border-radius: 8Px;
 
-        .n-base-selection {
-            border-radius: 8Px;
+      .n-base-selection-label {
+        height: 50Px;
+        font-size: 16Px;
+      }
+    }
 
-            .n-base-selection-label {
-                height: 50Px;
-                font-size: 16Px;
-            }
-        }
+    .n-base-selection.n-base-selection--disabled .n-base-selection-label {
+      background-color: #F5F6FA;
+      color: rgba(149, 149, 152, 1);
+    }
 
-        .n-base-selection.n-base-selection--disabled .n-base-selection-label {
-            background-color: #F5F6FA;
-            color: rgba(149, 149, 152, 1);
-        }
+    .n-form-item-blank {
+      padding-right: 30Px;
+    }
 
-        .n-form-item-blank {
-            padding-right: 30Px;
-        }
+    .genderBtn {
+      min-width: 84Px;
+      min-height: 37Px;
+      border-radius: 8Px;
+    }
 
-        .genderBtn {
-            min-width: 84Px;
-            min-height: 37Px;
-            border-radius: 8Px;
-        }
+    .n-form-item-label {
+      color: #777;
+      padding: 0;
+      font-size: 18Px;
+    }
 
-        .n-form-item-label {
-            color: #777;
-            padding: 0;
-            font-size: 18Px;
+    .n-form-item-label__text {
+      height: 50Px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .nalert {
+      padding: 0 30Px;
+
+      .n-alert {
+        background: #FFE8E8;
+        text-align: center;
+      }
+
+      .n-alert-body .n-alert-body__content {
+        color: #EA4132;
+        font-size: 14Px;
+      }
+
+    }
+
+    .actionBtn {
+      width: 156Px;
+      height: 47Px;
+      font-size: 18Px;
+    }
+  }
+}
+
+.btnList {
+  width: 100%;
+
+  .btn {
+    width: 144Px;
+    height: 45Px;
+    border-radius: 8Px;
+    font-size: 18Px;
+    font-weight: 600 !important;
+    margin-right: 24Px;
+  }
+}
+
+
+
+
+
+.addStudentWrap {
+  position: relative;
+  width: 378px;
+  height: 631px;
+  margin: 120px auto 0;
+
+  .studentCLose {
+    cursor: pointer;
+    position: absolute;
+    right: -67px;
+    top: -54px;
+    width: 42px;
+    height: 42px;
+    z-index: 100;
+  }
+
+  .stunentStart {
+    position: absolute;
+    width: 556px;
+    height: 246px;
+    left: -70px;
+    top: -98px;
+
+    img {
+      width: 556px;
+      height: 246px;
+    }
+  }
+
+  .addTitle {
+    width: 230px;
+    height: 48px;
+    top: -9px;
+    position: absolute;
+    margin: 0 auto;
+    left: 50%;
+    margin-left: -115px;
+    z-index: 100;
+
+    img {
+      width: 230px;
+      height: 48px;
+    }
+  }
+
+  .addStudentInfo {
+    width: 378px;
+    height: 631px;
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .studentInfoBg {
+      position: absolute;
+      width: 378px;
+      height: 631px;
+
+      img {
+        left: 0;
+        top: 0;
+        width: 378px;
+        height: 631px;
+      }
+    }
+
+
+
+    .studentCore {
+      position: absolute;
+      bottom: 27px;
+      left: 24px;
+      width: 330px;
+      height: 339px;
+      background: rgba(255, 255, 255, 0.33);
+      border-radius: 17px;
+      border: 2px solid #ffffff;
+      backdrop-filter: blur(17px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .schoolLogo {
+        width: 67px;
+        height: 67px;
+        margin-top: -34px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        z-index: 100;
+        overflow: hidden;
+        background-color: #fff;
+        position: absolute;
+      }
+
+      .studentCoreInfo {
+        margin-top: 6px;
+        width: 314px;
+        height: 323px;
+        background: #ffffff;
+        border-radius: 17px;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        h2 {
+          margin-top: 37px;
+          height: 22px;
+          font-size: 16px;
+          font-weight: 600;
+          color: #000000;
+          line-height: 22px;
+          margin-bottom: 6px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
-        .n-form-item-label__text {
-            height: 50Px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
+        .studentCoreInfoSubtitle {
+          font-size: 14px;
+          font-weight: 400;
+          color: #000000;
+
+          span {
+            color: #198cfe;
+            font-weight: 600;
+          }
         }
 
-        .nalert {
-            padding: 0 30Px;
+        .codewrap {
+          width: 147px;
+          height: 145px;
+          // background: url(./images/cordWrap.png) no-repeat;
+          position: relative;
+          // background-size: 147px 145px;
+          margin: 16px 0 18px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          .codewrapBg {
+            width: 147px !important;
+            height: 145px !important;
+            top: 0;
+            left: 0;
+            position: absolute;
+          }
+
+          // img {
+
+          // }
 
-            .n-alert {
-                background: #FFE8E8;
-                text-align: center;
-            }
 
-            .n-alert-body .n-alert-body__content {
-                color: #EA4132;
-                font-size: 14Px;
-            }
-            
         }
 
-        .actionBtn {
-            width: 156Px;
-            height: 47Px;
-            font-size: 18Px;
+
+        .codewrapSubmit {
+          width: 213px;
+          height: 35px;
+          // background: linear-gradient(135deg, #d1fdf9 0%, #d6eeff 100%);
+          // box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.62);
+          border-radius: 18px;
+          text-align: center;
+          line-height: 35px;
+          font-size: 14px;
+          color: #117de9;
+          position: relative;
+
+          img {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 213px;
+            height: 35px;
+          }
+
+          span {
+            font-weight: 600;
+          }
         }
+      }
+    }
+  }
+
+  .studentBottom {
+    width: 420px;
+
+    position: absolute;
+    left: -21px;
+    bottom: -120px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    p {
+      text-align: center;
+      font-size: 16px;
+      color: #ffffff;
+      margin-bottom: 30px;
     }
-}
-
-.btnList {
-    width: 100%;
 
-    .btn {
-        width: 144Px;
-        height: 45Px;
-        border-radius: 8Px;
-        font-size: 18Px;
-        font-weight: 600 !important;
-        margin-right: 24Px;
+    .downBtn {
+      width: 256px;
+      height: 54px;
+      background: linear-gradient(291deg, #02BAFF 0%, #007AFE 100%);
+      border-radius: 30px;
+      line-height: 54px;
+      font-size: 22px;
+      font-weight: 600;
+      text-align: center;
+      color: #fff;
+
+      cursor: pointer;
     }
+  }
 }

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

@@ -29,6 +29,7 @@ import AddTeacher from '../../modal/add-teacher';
 import TheQrCode from '/src/components/TheQrCode';
 import logo from '@/common/images/logo.png';
 import { stringifyQuery } from '/src/router';
+import AddteacherModel from '../../modal/addteacherModel'
 
 export default defineComponent({
   name: 'school-info',
@@ -364,15 +365,14 @@ export default defineComponent({
           />
         </NModal>
 
-        <NModal
-          v-model:show={data.qrModal}
-          title="二维码"
-          preset="dialog"
-          showIcon={false}>
-          <div style={{ textAlign: 'center' }}>
-            <TheQrCode logoSrc={logo}  text={registerUrl()} size={300} />
+   {data.qrModal ? (
+          <div v-model:show={data.qrModal} class="n-modal-mask">
+            <AddteacherModel
+              onClose={() => {
+                data.qrModal = false;
+              }}></AddteacherModel>
           </div>
-        </NModal>
+        ) : null}
       </div>
     );
   }

src/views/setting/modal/addteacherModel.tsx

@@ -0,0 +1,173 @@
+import {
+  NButton,
+  NSpace,
+  useMessage,
+  NForm,
+  NFormItem,
+  NSelect,
+  NImage
+} from 'naive-ui';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from '../components/schoolInfo/index.module.less';
+import CSelect from '/src/components/CSelect';
+import stunentStart from '@/views/studentList/images/studentStart.png';
+import studentCLose from '@/views/studentList/images/studentClose.png';
+import { useUserStore } from '@/store/modules/users';
+import TheQrCode from '/src/components/TheQrCode';
+import { vaildUrl } from '@/utils/urlUtils';
+import logo from '@/common/images/logo.png';
+import studentTitle from '../images/studentTitle.png';
+import studentInfo from '@/views/studentList/images/teacherCore.png';
+import codewrap from '@/views/studentList/images/cordWrap.png'
+import btnBg from '@/views/studentList/images/btnBg.png';
+import html2canvas from 'html2canvas';
+
+export default defineComponent({
+  props: {
+    activeRow: {
+      type: Object,
+      default: () => ({ id: '' })
+    },
+    gradeNumList: {
+      type: Array,
+      default: () => []
+    },
+    classArray: {
+      type: Array,
+      default: () => []
+    }
+  },
+  name: 'resetStudent',
+  emits: ['close', 'getList'],
+  setup(props, { emit }) {
+    const data = reactive({
+      uploading: false
+    });
+    const message = useMessage();
+    const userStore = useUserStore();
+    const foemsRef = ref();
+    const registerUrl = () => {
+      const queryStr = `tenantId=${userStore.info.schoolInfos?.[0]?.tenantId}&schoolId=${userStore.info.schoolInfos?.[0]?.id}&schoolName=${userStore.info.schoolInfos?.[0]?.name}`;
+      const url =
+        `${location.origin}/classroom-app/#/teaher-register?` + queryStr;
+      console.log(url);
+      return url;
+    };
+    const imgs = reactive({
+      saveLoading: false,
+      image: null as any,
+      shareLoading: false
+    });
+    const downImg = () => {
+      if (imgs.saveLoading) {
+        return;
+      }
+      imgs.saveLoading = true;
+      // 判断是否已经生成图片
+      if (imgs.image) {
+        saveImg();
+      } else {
+        const container: any = document.getElementById(`preview-container`);
+        html2canvas(container, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: null
+        })
+          .then(async canvas => {
+            const url = canvas.toDataURL('image/png');
+            imgs.image = url;
+            saveImg();
+          })
+          .catch(() => {
+            imgs.saveLoading = false;
+          });
+      }
+    };
+
+    const saveImg = async () => {
+      // showLoadingToast({ message: '图片生成中...', forbidClick: true });
+      setTimeout(() => {
+        imgs.saveLoading = false;
+      }, 100);
+      const link = document.createElement('a');
+      link.setAttribute('download', '报名图片' + '.png');
+      // 添加时间戳，防止浏览器缓存图片
+      // console.log(imgUrl,'imgUrl')
+
+      link.href = imgs.image;
+      link.click();
+      // const res = await promisefiyPostMessage({
+      //   api: 'savePicture',
+      //   content: {
+      //     base64: imgs.image
+      //   }
+      // });
+      // if (res?.content?.status === 'success') {
+      //   showSuccessToast('保存成功');
+      // } else {
+      //   showFailToast('保存失败');
+      // }
+    };
+    return () => (
+      <div class={[styles.addStudentWrap]}>
+        <div
+          onClick={() => {
+            console.log('点击');
+            emit('close');
+          }}>
+          <NImage
+            src={studentCLose}
+            previewDisabled
+            class={styles.studentCLose}></NImage>
+        </div>
+        <NImage
+          previewDisabled
+          class={styles.stunentStart}
+          src={stunentStart}></NImage>
+        <NImage
+          class={styles.addTitle}
+          previewDisabled
+          src={studentTitle}></NImage>
+        <div class={styles.addStudentInfo} id="preview-container">
+
+          <NImage
+            class={styles.studentInfoBg}
+            previewDisabled
+            src={studentInfo}></NImage>
+
+          <div class={styles.studentCore}>
+            <img
+              alt="img"
+              crossorigin="anonymous"
+              class={styles.schoolLogo}
+              src={
+                userStore.getUserInfo.schoolInfos[0].logo +
+                `?some=${new Date().getTime()}`
+              }></img>
+            <div class={styles.studentCoreInfo}>
+              <h2>{userStore.getUserInfo.schoolInfos[0].name}</h2>
+              <p class={styles.studentCoreInfoSubtitle}>
+                邀请您的成为
+                <span>数字化乐器课堂音乐老师</span>
+              </p>
+              <div class={styles.codewrap}>
+                <img src={codewrap} class={styles.codewrapBg} alt="" />
+                <TheQrCode margin={0} logoSrc={logo} text={registerUrl()} size={119} />
+              </div>
+              <div class={styles.codewrapSubmit}>
+                <NImage previewDisabled src={btnBg}></NImage>
+                请扫描上方二维码 <span>完成注册</span>{' '}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class={styles.studentBottom}>
+          <p>请将二维码图片发送给老师，扫码完成注册</p>
+          <div class={styles.downBtn} onClick={downImg}>
+            下载图片
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

src/views/studentList/index.module.less

@@ -4,10 +4,12 @@
   border-radius: 20px;
   min-height: 100%;
 }
+
 .addBtnIcon {
   width: 16px;
   height: 17px;
 }
+
 .addBtn {
   margin-bottom: 30px;
   height: 43px;
@@ -186,9 +188,11 @@
           border-radius: 4px;
           margin-right: 6px;
         }
+
         .DataTopRightDot.DataTopRightDotBlue {
           background: #d5e9ff;
         }
+
         .DataTopRightDot.red {
           background: #ff7aa7;
         }
@@ -248,69 +252,85 @@
     }
   }
 }
+
 .reportModel {
   width: 830px;
   overflow: hidden;
 }
+
 .addStudentWrap {
   position: relative;
-  width: 467px;
-  height: 688px;
-  margin: 80px auto 0;
-  background: url(./images/studentBg.png) no-repeat;
-  background-size: 467px 688px;
-  padding: 18px 21px 15px 27px;
+  width: 378px;
+  height: 631px;
+  margin: 120px auto 0;
+
   .studentCLose {
     cursor: pointer;
     position: absolute;
-    right: -38px;
-    top: -37px;
-    width: 51px;
-    height: 51px;
+    right: -67px;
+    top: -54px;
+    width: 42px;
+    height: 42px;
     z-index: 100;
   }
+
   .stunentStart {
     position: absolute;
-    width: 601px;
-    height: 275px;
-    left: -38px;
-    top: -68px;
+    width: 556px;
+    height: 246px;
+    left: -70px;
+    top: -98px;
+
+    img {
+      width: 556px;
+      height: 246px;
+    }
+  }
+
+  .addTitle {
+    width: 230px;
+    height: 48px;
+    top: -9px;
+    position: absolute;
+    margin: 0 auto;
+    left: 50%;
+    margin-left: -115px;
+    z-index: 100;
+
+    img {
+      width: 230px;
+      height: 48px;
+    }
   }
+
   .addStudentInfo {
-    width: 419px;
-    height: 655px;
+    width: 378px;
+    height: 631px;
     position: relative;
 
     display: flex;
     flex-direction: column;
     align-items: center;
+
     .studentInfoBg {
       position: absolute;
-      width: 419px;
-      height: 655px;
+      width: 378px;
+      height: 631px;
+
       img {
         left: 0;
         top: 0;
-        width: 419px;
-        height: 655px;
-      }
-    }
-    .addTitle {
-      width: 230px;
-      height: 48px;
-      top: -9px;
-      position: relative;
-      margin: 0 auto;
-      z-index: 100;
-      img {
-        width: 230px;
-        height: 48px;
+        width: 378px;
+        height: 631px;
       }
     }
+
+
+
     .studentCore {
       position: absolute;
       bottom: 27px;
-      left: 48px;
+      left: 24px;
       width: 330px;
       height: 339px;
       background: rgba(255, 255, 255, 0.33);
@@ -320,6 +340,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+
       .schoolLogo {
         width: 67px;
         height: 67px;
@@ -331,6 +352,7 @@
         background-color: #fff;
         position: absolute;
       }
+
       .studentCoreInfo {
         margin-top: 6px;
         width: 314px;
@@ -341,6 +363,7 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+
         h2 {
           margin-top: 37px;
           height: 22px;
@@ -353,37 +376,65 @@
           text-overflow: ellipsis;
           white-space: nowrap;
         }
+
         .studentCoreInfoSubtitle {
           font-size: 14px;
           font-weight: 400;
           color: #000000;
+
           span {
             color: #198cfe;
             font-weight: 600;
           }
         }
+
         .codewrap {
           width: 147px;
           height: 145px;
-          background: url(./images/cordWrap.png) no-repeat;
+          // background: url(./images/cordWrap.png) no-repeat;
           position: relative;
-          background-size: 147px 145px;
+          // background-size: 147px 145px;
           margin: 16px 0 18px;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
+
+          .codewrapBg {
+            width: 147px !important;
+            height: 145px !important;
+            top: 0;
+            left: 0;
+            position: absolute;
+          }
+
+          // img {
+
+          // }
+
+
         }
+
         .codewrapSubmit {
           width: 213px;
           height: 35px;
-          background: linear-gradient(135deg, #d1fdf9 0%, #d6eeff 100%);
-          box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.62);
+          // background: linear-gradient(135deg, #d1fdf9 0%, #d6eeff 100%);
+          // box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.62);
           border-radius: 18px;
           text-align: center;
           line-height: 35px;
           font-size: 14px;
           color: #117de9;
+          position: relative;
+
+          img {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 213px;
+            height: 35px;
+          }
+
           span {
             font-weight: 600;
           }
@@ -391,27 +442,31 @@
       }
     }
   }
+
   .studentBottom {
-    width: 419px;
+    width: 420px;
 
     position: absolute;
+    left: -21px;
     bottom: -120px;
     display: flex;
     flex-direction: column;
     align-items: center;
+
     p {
       text-align: center;
       font-size: 16px;
       color: #ffffff;
       margin-bottom: 30px;
     }
+
     .downBtn {
-      width: 295px;
-      height: 60px;
+      width: 256px;
+      height: 54px;
       background: linear-gradient(90deg, #ff7b57 0%, #ff3460 100%);
       border-radius: 30px;
-      line-height: 60px;
-      font-size: 24px;
+      line-height: 54px;
+      font-size: 22px;
       font-weight: 600;
       text-align: center;
       color: #fff;
@@ -467,4 +522,4 @@
 
 .wordDetailModel {
   width: 1012px;
-}
+}

src/views/studentList/index.tsx

@@ -113,6 +113,9 @@ export default defineComponent({
               </>
             );
           }
+        },     {
+          title: '年级班级',
+          key: 'classGroupName'
         },
 
         {

src/views/studentList/modals/addStudentModel.tsx

@@ -18,8 +18,9 @@ import { vaildUrl } from '@/utils/urlUtils';
 import logo from '@/common/images/logo.png';
 import studentTitle from '../images/studentTitle.png';
 import studentInfo from '../images/strudentCore.png';
-import codewrapBg from '../images/cordWrap.png';
+import btnBg from '../images/btnBg.png';
 import html2canvas from 'html2canvas';
+import codewrap from '../images/cordWrap.png'
 export default defineComponent({
   props: {
     activeRow: {
@@ -46,7 +47,7 @@ export default defineComponent({
     const foemsRef = ref();
     const url = ref(
       vaildUrl() +
-        `/classroom-app/#/student-register?sId=${userStore.getUserInfo.schoolInfos[0].id}`
+      `/classroom-app/#/student-register?sId=${userStore.getUserInfo.schoolInfos[0].id}`
     );
     const imgs = reactive({
       saveLoading: false,
@@ -119,24 +120,26 @@ export default defineComponent({
           previewDisabled
           class={styles.stunentStart}
           src={stunentStart}></NImage>
+        <NImage
+          class={styles.addTitle}
+          previewDisabled
+          src={studentTitle}></NImage>
         <div class={styles.addStudentInfo} id="preview-container">
-          <NImage
-            class={styles.addTitle}
-            previewDisabled
-            src={studentTitle}></NImage>
+
           <NImage
             class={styles.studentInfoBg}
             previewDisabled
             src={studentInfo}></NImage>
 
           <div class={styles.studentCore}>
-            <NImage
-              previewDisabled
+            <img
+              alt="img"
+              crossorigin="anonymous"
               class={styles.schoolLogo}
               src={
                 userStore.getUserInfo.schoolInfos[0].logo +
                 `?some=${new Date().getTime()}`
-              }></NImage>
+              }></img>
             <div class={styles.studentCoreInfo}>
               <h2>{userStore.getUserInfo.schoolInfos[0].name}</h2>
               <p class={styles.studentCoreInfoSubtitle}>
@@ -144,9 +147,11 @@ export default defineComponent({
                 <span>数字化乐器课堂</span>
               </p>
               <div class={styles.codewrap}>
-                <TheQrCode logoSrc={logo} text={url.value} size={119} />
+                <img src={codewrap} class={styles.codewrapBg} alt="" />
+                <TheQrCode margin={0} logoSrc={logo} class={styles.codewrapImg} text={url.value} size={119} />
               </div>
               <div class={styles.codewrapSubmit}>
+                <NImage previewDisabled src={btnBg}></NImage>
                 请扫描上方二维码 <span>完成报名</span>{' '}
               </div>
             </div>