Merge branch 'newVersion' into dev

src/components/musicLIstItem/index.module.less

@@ -75,6 +75,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+
     .imgWrap {
       width: 88px;
       height: 88px;
@@ -117,10 +118,12 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin-top: 35px;
+    margin-top: 26px;
+    height: 30px;
     .icon {
       width: 28px;
       height: 28px;
+
       border-radius: 50px;
       margin-right: 12px;
       border: 2px solid #2dc7aa;

src/views/login/components/login/index.tsx

@@ -29,6 +29,7 @@ export default defineComponent({
     tabType(val: string) {
       // 切换登录类型时需要清除定时器
       if (val != 'qrLogin') {
+        sessionStorage.removeItem('scanCode')
         clearInterval(state.loginPopupTimer)
       }
     }

src/views/muiscDetial/index.module.less

@@ -1,15 +1,21 @@
 .wall {
   height: 60px;
 }
+.wallWrap {
+  background-color: #f8f8f8;
+}
 .musicWraps {
-  min-height: 100vh;
+  // min-height: 100vh;
   background-color: #f8f8f8;
+
 }
 .width1200 {
   width: 1002px;
   margin: 20px auto 0;
 }
 .musicWrap {
+  border-radius: 10px;
+  overflow: hidden;
   display: flex;
   flex-direction: row;
   background-color: #fff;
@@ -196,7 +202,7 @@
 .right {
   .musicInfo {
     background-color: #fff;
-    padding: 18px 18px 22px;
+    padding: 18px 24px 22px;
     width: 360px;
     margin-bottom: 36px;
     h2 {
@@ -245,6 +251,7 @@
         }
       }
       .masker {
+        cursor: pointer;
         visibility: hidden;
         width: 110px;
         height: 110px;
@@ -274,7 +281,7 @@
       .tagList {
         display: flex;
         flex-direction: row;
-        margin-bottom: 10px;
+        margin-bottom: 5px;
         flex-wrap: wrap;
         .tag {
           // width: 66px;
@@ -286,7 +293,7 @@
           color: #00886d;
           padding: 0 16px;
           margin-right: 6px;
-          margin-bottom: 10px;
+          margin-bottom: 6px;
         }
       }
       .collect {
@@ -325,7 +332,7 @@
     // padding-top: 25px;
     width: 360px;
     .teacherInfo {
-      padding: 18px 14px;
+      padding: 18px 24px 50px;
       background-color: #fff;
       h2 {
         font-size: 18px;
@@ -379,6 +386,7 @@
           font-weight: 600;
           color: #ff8b00;
           line-height: 33px;
+          text-align: center;
         }
         .fens {
           font-size: 14px;
@@ -478,7 +486,7 @@
       }
     }
     .otherMusic {
-      padding: 0 20px;
+      padding: 0 24px;
       .videoNav {
         display: flex;
         flex-direction: row;
@@ -486,9 +494,9 @@
         justify-content: space-between;
         margin-bottom: 14px;
         h5 {
-          font-size: 16px;
+          font-size: 18px;
           font-weight: 600;
-          color: #333;
+          color: #000;
           line-height: 30px;
         }
         .wrapRight {

src/views/muiscDetial/index.tsx

@@ -42,8 +42,13 @@ import {
   getAuth,
   setAuth
 } from '@/helpers/utils'
-
-import { imgToCanvas, addWatermark, convasToImg,addMusicTitle } from '@/helpers/imageFunction'
+import { state as states } from '@/state'
+import {
+  imgToCanvas,
+  addWatermark,
+  convasToImg,
+  addMusicTitle
+} from '@/helpers/imageFunction'
 import arrow from '@/views/home/images/moreArrow.png'
 import { Vue3Lottie } from 'vue3-lottie'
 import 'vue3-lottie/dist/style.css'
@@ -210,7 +215,10 @@ export default defineComponent({
       const tempCanvas = await imgToCanvas(state.imgData)
       const showImg = convasToImg(tempCanvas)
       state.showImg = showImg
-      const titleCanvas = addMusicTitle(tempCanvas,{title:state.musicDetail.musicSheetName,size:18})
+      const titleCanvas = addMusicTitle(tempCanvas, {
+        title: state.musicDetail.musicSheetName,
+        size: 18
+      })
       const canvas = addWatermark(titleCanvas, '酷乐秀')
       const imgUrl = convasToImg(canvas)
       const link = document.createElement('a')
@@ -233,6 +241,7 @@ export default defineComponent({
     const favoriteMusic = async () => {
       const tockn = getAuth()
       if (!tockn) {
+        states.loginPopupStatus = true
         return
       }
       ElMessageBox.confirm(
@@ -255,6 +264,7 @@ export default defineComponent({
     }
     return () => (
       <>
+      <div class={classes.wallWrap}>
         <div class={classes.wall}></div>
         <div class={classes.musicWraps}>
           <div class={[classes.width1200]}>
@@ -289,7 +299,11 @@ export default defineComponent({
                 <div class={classes.musicContent}>
                   {/*        id="iframe"       ref="iframe"*/}
 
-                  <img class={classes.musicStag} src={chargeImg[ state.musicDetail.chargeType]} alt="" />
+                  <img
+                    class={classes.musicStag}
+                    src={chargeImg[state.musicDetail.chargeType]}
+                    alt=""
+                  />
                   <iframe
                     id="containerPrint"
                     ref="print"
@@ -297,7 +311,9 @@ export default defineComponent({
                     src={state.accompanyUrl}
                     class={classes.iframe}
                   />
-                       <p class={classes.musicTitle}>{state.musicDetail.musicSheetName}</p>
+                  <p class={classes.musicTitle}>
+                    {state.musicDetail.musicSheetName}
+                  </p>
                   {state.showImg ? (
                     <img src={state.showImg} alt="" />
                   ) : (
@@ -357,11 +373,18 @@ export default defineComponent({
               <div class={classes.right}>
                 <div class={classes.musicInfo}>
                   <h2>
-                    <span class={[classes.musicTag,classes[chargeClass[state.musicDetail.chargeType]]]}>{chargeTypes[state.musicDetail.chargeType]}</span>
+                    <span
+                      class={[
+                        classes.musicTag,
+                        classes[chargeClass[state.musicDetail.chargeType]]
+                      ]}
+                    >
+                      {chargeTypes[state.musicDetail.chargeType]}
+                    </span>
                     {state.musicDetail.musicSheetName}
                   </h2>
                   <div class={classes.collectWrap}>
-                    <div class={classes.masker}>
+                    <div class={classes.masker} onClick={favoriteMusic}>
                       <img
                         src={state.musicDetail.favorite ? lineStart : start}
                         alt=""
@@ -458,7 +481,7 @@ export default defineComponent({
 
                   <div class={classes.otherMusic}>
                     <div class={classes.videoNav}>
-                      <h5>Ta的曲谱</h5>
+                      <h5>TA的曲谱</h5>
                       <div
                         class={classes.wrapRight}
                         onClick={() => gotoMusic()}
@@ -485,6 +508,7 @@ export default defineComponent({
             </div>
           </div>
         </div>
+        </div>
       </>
     )
   }

src/views/user-info/live-operation/course-content/index.tsx

@@ -288,9 +288,9 @@ export default defineComponent({
               createState.active = 1
               // 重置选择的课次
               createState.selectCourseList = []
-              const currentY =
-                document.documentElement.scrollTop || document.body.scrollTop
-              scrollAnimation(currentY, 0)
+              // const currentY =
+              //   document.documentElement.scrollTop || document.body.scrollTop
+              // scrollAnimation(currentY, 0)
             }}
           >
             上一步
@@ -308,6 +308,11 @@ export default defineComponent({
         <ElDialog
           modelValue={this.selectStatus}
           onUpdate:modelValue={e => (this.selectStatus = e)}
+          closeOnClickModal={false}
+          closeOnPressEscape={false}
+          onClose={() => {
+            this.onReset()
+          }}
           width={'488px'}
           // title="提示"
           custom-class={!createState.coursePlanStatus && styles.dialog}

src/views/user-info/live-operation/course-info/index.tsx

@@ -293,10 +293,10 @@ export default defineComponent({
               ;(this as any).$refs.form.validate(async (valid: boolean) => {
                 if (valid) {
                   createState.active = 1
-                  const currentY =
-                    document.documentElement.scrollTop ||
-                    document.body.scrollTop
-                  scrollAnimation(currentY, 0)
+                  // const currentY =
+                  //   document.documentElement.scrollTop ||
+                  //   document.body.scrollTop
+                  // scrollAnimation(currentY, 0)
                 } else {
                   this.$nextTick(() => {
                     let isError = document.getElementsByClassName('is-error')

src/views/user-info/live-operation/course-plan/index.tsx

@@ -40,9 +40,9 @@ export default defineComponent({
         if (valid) {
           createState.active = 2
 
-          const currentY =
-            document.documentElement.scrollTop || document.body.scrollTop
-          scrollAnimation(currentY, 0)
+          // const currentY =
+          //   document.documentElement.scrollTop || document.body.scrollTop
+          // scrollAnimation(currentY, 0)
         } else {
           this.$nextTick(() => {
             let isError = document.getElementsByClassName('is-error')

src/views/user-info/practice-setting/index.module.less

@@ -39,6 +39,7 @@
     .el-select .el-select__tags .el-tag {
       background-color: #dffff8;
       border: 1px solid #4bb39e;
+      color: #4bb39e !important;
       border-radius: 10px;
       margin: 0 6px 0 0;
       height: 30px;

src/views/videoDetailList/index.module.less

@@ -29,6 +29,7 @@
       width: 628px;
       // height: 463px;
       margin-bottom: 24px;
+      border-radius: 10px;
     }
   }
 }
@@ -42,7 +43,7 @@
     word-break: break-all;
     width: 580px;
     span {
-      font-size: 28px;
+      font-size: 26px;
       font-weight: 600;
       color: #000000;
       line-height: 40px;
@@ -51,6 +52,7 @@
     .courseTitleR {
       display: flex;
       flex-direction: row;
+      justify-content: flex-end;
       align-items: bottom;
       position: relative;
       top: 10px;

src/views/videoDetailList/modals/videoCourseItem.module.less

@@ -35,6 +35,10 @@
       color: #333;
       line-height: 25px;
       margin-bottom: 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 352px;
     }
     .courseDetial {
       font-size: 14px;
@@ -68,6 +72,28 @@
       //   margin-right: px;
       // }
     }
+    .gotoSaduntWrap {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+    .gotoSadunt {
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #ffffff;
+      line-height: 36px;
+      padding: 0 25px;
+      background: #00BF9B;
+      border-radius: 19px;
+      width: 98px;
+      display: flex;
+      margin-top: 10px;
+      cursor: pointer;
+      &:active {
+        opacity: .9;
+      }
+    }
   }
 }
 .scanTxt {
@@ -76,6 +102,7 @@
   }
 }
 .videoWrap {
+  width: 100%;
   :global {
     .el-dialog {
       --el-dialog-width: 440px !important;

src/views/videoDetailList/modals/videoCourseItem.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
     const state = reactive({
       title: props.item,
       item: props.item,
-      showDown: true
+      showDown: false
     })
     watch(
       () => props.item,
@@ -49,10 +49,13 @@ export default defineComponent({
           <div class={classes.courseInfo}>
             <h4>{state.item.videoTitle}</h4>
             <p class={classes.courseDetial}>{state.item.videoContent}</p>
-            <p class={classes.courseDetialTime}>
+            {/* <p class={classes.courseDetialTime}>
               <img src={clock} alt="" /> <span>课时：</span>
               <span>120分钟</span>
-            </p>
+            </p> */}
+            <div class={classes.gotoSaduntWrap}>
+              <div class={classes.gotoSadunt}>去学习</div>
+            </div>
           </div>
           <ElDialog
             modelValue={state.showDown}