更新

src/tenant/exercise-record/exercis-detail.module.less

@@ -124,6 +124,7 @@
     align-items: center;
     .name{
       line-height: 1;
+      margin-top: 1px;
     }
     .iconSubject {
       width: 13px;

src/tenant/music/component/song/index.module.less

@@ -32,8 +32,12 @@
       height: 50px;
       border-radius: 8px;
       margin-right: 10px;
+      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmCAMAAAAOARRQAAAASFBMVEXq6ur29vbIyMjFxcW2tra9vb3Pz8/Dw8PKysrR0dG/v7+4uLi6urrMzMzT09PY2Njb29vn5+fe3t7k5OTh4eHV1dXz8/Pw8PBVXjwWAAACtUlEQVRo3u3WS7LjIAxAUSIFJD7mY+Nk/zttESduu3uW4Bln8OpldEuCoqyGYRiGYRiGYbhcKUudc65FXeZVSAbI6aAhVnWFpeY6G9IvIcgfmLtHypznHNE5985477Xn0nmUXFMyzu0Z6Yjg+m6u1pyStbx1QnNvvO69uJqEbRVISxswsW6d3jchp3VdUU/l9vHM7u5d3/OZ1xgjuHw7eiTvTddLEKON7OrtH4ruHddWpGKNS7f/PBE7HsxqjEF47NtSj73T71YXI/jvwTwp4PPzYzHdhrGTMUDq9pa89vnVW7JlUt87PcLRTNN02Fn2wdeW03fhy/c3i6d1XvadTcxM/PciG2elae+b75+CmSdjjZS2pgDix23X/lXtYWvTpO9PY+IWiq1UCoNAeN5O8t379rqF9etMahk5d2PXuCZokMo5s9594GS1Tj9koGWEtTEBIkpmPWeS19BWSj+cjWT4nZHV4UadMrPf5ijl+/v8yuwdJCJE4tPplKDzr08lAxwyhhrpHOd5OpnmR5YR/mZWpm2e6XaAOv6ayQYJ9ky05JwjJHPMGG1+zRQGItgybRxwAimebrSe1K/yJAPgvrVJt3HOmay5w+MP5LTj9zRGCyLbO6MqoNPBazByNqvVwuHpbJIs7XczkGTaVxIh4paBx+lsrOrRQdKS2QRB54fA6qR6qOz0J+MFAeVDhrt9dCYKwe8ZhOPWHtTvW7Bkdp/FaQA8jFMcq56WeU4t5SSDWPYb4LLqLErGwysD6vMhSKVzZWk3geDVIayvTHRJdQZBVsZbBomsLG4h7l2xXs6fGfYO8Yq0XFBxfMqIufO5sFRwOmSkg9j7ls1aDoamY4cAZtXbYkK4a5j2DICp6gLVBB8cbPMwTFldZInkvUNpcJyLutCSVxtTLWoYhmEYhmEYhiv9Aca9JZ3n1bdkAAAAAElFTkSuQmCC')
+        no-repeat;
+      background-size: 100% 100%;
 
       img {
+        opacity: 0;
         width: inherit;
         height: inherit;
         border-radius: inherit;
@@ -87,9 +91,9 @@
 
       .exquisiteTag {
         border-radius: 3px;
-        border: 1px solid #FE2451;
+        border: 1px solid #fe2451;
         font-size: 12px;
-        color: #FE2451;
+        color: #fe2451;
         padding: 2px 6px;
         transform: scale(0.9);
         margin-right: 6px;
@@ -98,11 +102,11 @@
       .tags {
         margin-right: 6px;
 
-        &>span {
+        & > span {
           display: inline-block;
-          background: #FFEAF2;
+          background: #ffeaf2;
           border-radius: 4px;
-          color: #FE2451;
+          color: #fe2451;
           padding: 4px 8px;
           margin-left: 4px;
           font-size: 12px;
@@ -182,7 +186,7 @@
     margin-right: 14px;
     word-break: break-all;
 
-    >h4 {
+    > h4 {
       font-size: 16px;
       font-weight: bold;
       color: #1a1a1a;
@@ -190,7 +194,7 @@
       padding-bottom: 3px;
     }
 
-    >p {
+    > p {
       font-size: 12px;
       color: #999;
       line-height: 17px;
@@ -233,14 +237,14 @@
     margin-right: 14px;
     word-break: break-all;
 
-    >h4 {
+    > h4 {
       color: var(--music-list-item-title-color);
       font-size: 14px;
       font-weight: 600;
       width: 200px;
     }
 
-    >p {
+    > p {
       color: var(--music-list-item-mate-color);
       line-height: 17px;
     }

src/tenant/music/component/song/index.tsx

@@ -73,11 +73,21 @@ export default defineComponent({
       return (
         <div class={styles.theSong}>
           {props.list.map((n: any, index: number) => (
-            <div class={[styles.item,'songItem']} onClick={() => emit('detail', n)}>
+            <div
+              class={[styles.item, 'songItem']}
+              onClick={() => emit('detail', n)}
+            >
               {props.showNumber && <div class={styles.num}>{index + 1}</div>}
               {props.showTitleImg && (
                 <div class={styles.cover}>
-                  <img src={n.titleImg} />
+                  <img
+                    onLoad={(e: Event) => {
+                      if (e.target) {
+                        ;(e.target as any).style.opacity = 1
+                      }
+                    }}
+                    src={n.titleImg}
+                  />
                 </div>
               )}
 

src/tenant/music/courseList/index.module.less

@@ -80,6 +80,7 @@
   .pIcon {
     width: 20px;
     height: 20px;
+    margin-top: -2px;
     margin-right: 6px;
   }
 
@@ -341,6 +342,14 @@
       font-weight: 500;
       color: #ffffff;
       line-height: 25px;
+      &.van-button--disabled {
+        opacity: initial;
+        background: linear-gradient(
+          270deg,
+          #ff9daa 0%,
+          #ff7a93 100%
+        ) !important;
+      }
     }
   }
 }

src/tenant/music/courseList/index.tsx

@@ -135,6 +135,9 @@ export default defineComponent({
 
     const handleClick = async (item: any) => {
       if (!data.detail?.play) {
+        if (route.query.buyStatus === '1') {
+          return
+        }
         if (!browser().isApp) {
           onDownloadApp()
           return

src/tenant/music/music-detail/new-index.module.less

@@ -5,10 +5,10 @@
   --van-nav-bar-icon-color: #fff;
   --van-nav-bar-text-color: #fff;
   --van-nav-bar-title-text-color: #fff;
-  --van-overlay-background-color: rgba(0, 0, 0, .6);
+  --van-overlay-background-color: rgba(0, 0, 0, 0.6);
   height: 100vh;
 
-  --plyr-color-main: #FF436A;
+  --plyr-color-main: #ff436a;
   --plyr-control-icon-size: 10px;
   --plyr-range-track-height: 4px;
   // --plyr-range-thumb-height: 4px;
@@ -19,13 +19,13 @@
     }
 
     .plyr__controls .plyr__controls__item:first-child {
-      background: linear-gradient(90deg, #FF6D8B 0%, #FF436A 100%);
+      background: linear-gradient(90deg, #ff6d8b 0%, #ff436a 100%);
       color: #fff;
       border-radius: 50%;
     }
 
     .plyr__controls .plyr__controls__item.plyr__progress__container {
-      padding-left: 8px
+      padding-left: 8px;
     }
 
     .icon--not-pressed {
@@ -46,8 +46,8 @@
   margin-right: 16px !important;
   position: relative;
 
-  >img,
-  >div {
+  > img,
+  > div {
     position: absolute;
     border-radius: 10px;
     overflow: hidden;
@@ -106,7 +106,6 @@
     display: flex;
   }
 
-
   .favorite {
     font-size: 16px;
     margin-right: 5px;
@@ -182,8 +181,8 @@
     color: #000;
     // background-color: rgba(113, 138, 147, 1);
     border-radius: 4px;
-    color: #FFFFFF;
-    border: 1px solid #FFFFFF;
+    color: #ffffff;
+    border: 1px solid #ffffff;
     font-size: 12px;
   }
 }
@@ -235,7 +234,7 @@
   overflow: hidden;
   font-size: 13px;
   font-weight: 500;
-  color: #5E3314;
+  color: #5e3314;
   line-height: 1;
   display: flex;
   justify-content: space-between;
@@ -243,11 +242,10 @@
 
   .albumPrice {
     font-size: 13px;
-    color: #FFE1AE;
+    color: #ffe1ae;
     background: #262626;
     border-radius: 13px;
     padding: 4px 7px 2px;
-
   }
 
   .iconMemberSmall {
@@ -257,7 +255,7 @@
     margin-top: -4px;
   }
 
-  &>span {
+  & > span {
     display: flex;
     align-items: center;
     padding-top: 1px;
@@ -281,7 +279,7 @@
     align-items: center;
     font-size: 16px;
     font-weight: 600;
-    color: #2F384E;
+    color: #2f384e;
     line-height: 22px;
 
     .iconMenu {
@@ -298,7 +296,6 @@
   }
 }
 
-
 .musicContent {
   position: relative;
   width: 100%;
@@ -316,9 +313,11 @@
     bottom: 0;
     left: 0;
     right: 0;
-    background: linear-gradient(180deg,
-        rgba(255, 255, 255, 0) 0%,
-        #ffffff 100%);
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      #ffffff 100%
+    );
     height: 287px;
   }
 
@@ -327,14 +326,14 @@
     right: 0;
     top: 0;
     height: 26px;
-    background: linear-gradient( 270deg, #FF436A 0%, #FF6D8B 100%);
+    background: linear-gradient(270deg, #ff436a 0%, #ff6d8b 100%);
     border-radius: 0px 0px 0px 16px;
     display: flex;
     align-items: center;
     padding: 0 10px;
     font-size: 13px;
     font-weight: 500;
-    color: #FFFFFF;
+    color: #ffffff;
     cursor: pointer;
 
     &::before {
@@ -395,7 +394,6 @@
   }
 }
 
-
 .videoOperation {
   // position: absolute;
   // left: 0;
@@ -431,8 +429,16 @@
     .van-button {
       font-size: 18px;
       font-weight: 500;
-      color: #FFFFFF;
+      color: #ffffff;
       line-height: 25px;
+      &.van-button--disabled {
+        opacity: initial;
+        background: linear-gradient(
+          270deg,
+          #ff9daa 0%,
+          #ff7a93 100%
+        ) !important;
+      }
     }
   }
 }
@@ -442,7 +448,6 @@
   align-items: center;
   justify-content: space-between;
 
-
   .priceSection {
     font-size: 14px;
     font-weight: 400;
@@ -459,7 +464,6 @@
       }
     }
   }
-
 }
 
 .buyBtn {
@@ -476,7 +480,7 @@
       // width: 48%;
       width: 100%;
 
-      &+.van-button {
+      & + .van-button {
         margin-left: 12px;
       }
     }
@@ -509,7 +513,7 @@
 }
 
 .staffContainer {
-  background: linear-gradient(180deg, #FFEAEE 0%, #FFFFFF 100%) no-repeat;
+  background: linear-gradient(180deg, #ffeaee 0%, #ffffff 100%) no-repeat;
   background-size: 100% 59px;
   // text-align: center;
   padding: 15px 15px 24px;
@@ -546,7 +550,6 @@
     border-radius: 8px;
 
     .name {
-
       font-weight: 600;
     }
   }
@@ -621,14 +624,14 @@
     margin-right: 14px;
     word-break: break-all;
 
-    >h4 {
+    > h4 {
       color: var(--music-list-item-title-color);
       font-size: 14px;
       font-weight: 600;
       width: 200px;
     }
 
-    >p {
+    > p {
       color: var(--music-list-item-mate-color);
       line-height: 17px;
       padding-top: 3px;
@@ -651,7 +654,7 @@
 }
 
 .staffChange {
-  --van-popup-close-icon-color: #4C4949;
+  --van-popup-close-icon-color: #4c4949;
   --van-popup-close-icon-size: 18px;
 }