Merge branch 'feature-tianyong' into dev

src/views/creation/index-share.tsx

@@ -32,6 +32,7 @@ import iconUpward from './images/upward.png';
 import vipIcon from './images/vip_icon.png';
 import svipIcon from './images/svip_icon.png';
 import wxBg from './images/wx_bg.png';
+import tyBg from './images/ty.png';
 import {
   browser,
   getAuth,
@@ -307,7 +308,7 @@ export default defineComponent({
         shareCall(str)
         setTimeout(() => {
           if(Date.now() - t < 3500){
-            window.location.href = location.origin + '/classroom-app/#/transfer'
+            window.location.href = location.origin + '/#/transfer'
           }
         }, 3000)
       }
@@ -322,9 +323,9 @@ export default defineComponent({
       const userAgent = navigator.userAgent || navigator.vendor;
       const platform = navigator.platform || 'unknown';
       if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) || (platform === 'MacIntel')) {
-        window.location.href = `BandInstrumentTeam://linkUrl=${iosStr}`
+        window.location.href = `ColexiuStudent://linkUrl=${iosStr}`
       } else if (/(Android)/i.test(userAgent)) {
-        window.location.href = `colexiukt://html:8888/SplashActivity?url=${iosStr}`
+        window.location.href = `colexiustudent://html:8888/SplashActivity?url=${iosStr}`
       } else {
         Toast('请用手机或移动设备打开')
       }
@@ -647,8 +648,8 @@ export default defineComponent({
                           playsinline
                           webkit-playsinline
                         />
-                        <img src="./img/ty.png" class={styles.tyBg} />
-                        <div class="audioBoxBg">
+                        <img src={tyBg} class={styles.tyBg} />
+                        <div class={styles.audioBoxBg}>
                             <div class={[styles.audioPan,  plyrState.playIngShow && styles.imgRotate]}>
                               <img class={styles.audioImg} src={state.musicDetail.img || musicBg} />
                             </div>

src/views/creation/index.module.less

@@ -139,6 +139,82 @@
           width: 280px;
           height: 55px;
       }
+      .tyBg {
+        width: 139px;
+        height: 74px;
+        position: absolute;
+        z-index: 1;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, calc(-50% + 28px));
+     }
+     .audioBoxBg {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 2;
+        width: 74px;
+        height: 75px;
+        background: url("./images/audio-bg.png") no-repeat center;
+        background-size: 100% 100%;
+
+        .audioPan {
+           position: absolute;
+           left: 50%;
+           top: 50%;
+           transform: translate(-50%, -50%);
+           z-index: 8;
+           width: 59px;
+           height: 60px;
+           background: url("./images/audio-pan.png") no-repeat center;
+           background-size: 100% 100%;
+           display: flex;
+           align-items: center;
+           justify-content: center;
+
+           animation: rotateImg 6s linear infinite;
+
+           &.imgRotate {
+              animation-play-state: paused;
+           }
+        }
+
+        .audioImg {
+           width: 32px;
+           height: 32px;
+           border-radius: 50%;
+        }
+
+        .audioPoint {
+           position: absolute;
+           z-index: 9;
+           left: 50%;
+           top: 50%;
+           transform: translate(-50%, -50%);
+           width: 8px;
+           height: 8px;
+           background: url("./images/audio-point.png") no-repeat center;
+           background-size: contain;
+        }
+
+        .audioZhen {
+           position: absolute;
+           z-index: 9;
+           right: -4px;
+           top: -33px;
+           width: 26px;
+           height: 87px;
+           background: url("./images/audio-zhen.png") no-repeat center;
+           background-size: contain;
+           transition: transform 0.5s ease-in-out;
+
+           &.active {
+              transform: rotate(92deg) translate3d(0, 0, 3px);
+              transition: transform 0.5s ease-in-out;
+           }
+        }
+     }      
   }
   .playLarge{
     position: absolute;
@@ -595,7 +671,7 @@
   min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20vh - 210px - 55px);
 }
 .likeShareItem{
-  background-color: initial;
+  background-color: initial !important;
   padding: 0;
   margin-top: 25px;
   &:first-child{

src/views/creation/index.tsx

@@ -35,6 +35,7 @@ import iconEdit from './images/edit.png';
 import iconMember from './images/icon-member.png';
 import vipIcon from './images/vip_icon.png';
 import svipIcon from './images/svip_icon.png';
+import tyBg from './images/ty.png';
 import TextEllipsis from './text-ellipsis/index';
 import Loading from './loading';
 
@@ -608,8 +609,8 @@ export default defineComponent({
                   playsinline
                   webkit-playsinline
                 />
-                <img src="./img/ty.png" class={styles.tyBg} />
-                <div class="audioBoxBg">
+                <img src={tyBg} class={styles.tyBg} />
+                <div class={styles.audioBoxBg}>
                     <div class={[styles.audioPan,  plyrState.playIngShow && styles.imgRotate]}>
                       <img class={styles.audioImg} src={state.musicDetail.img || musicBg} />
                     </div>