提交

1

src/views/muiscDetial/index.module.less

@@ -11,6 +11,7 @@
   .left {
     width: 692px;
     background-color: #fff;
+    margin-right: 14px;
     .title {
       padding: 28px 28px 0;
       background-color: #fff;
@@ -48,12 +49,106 @@
       margin: 0 auto;
       border: 1px dotted #ccc;
     }
+    .showCode {
+      position: relative;
+      .showCodeWrap {
+        position: absolute;
+        z-index: 10;
+        bottom: 0;
+        .close {
+          width: 19px;
+          height: 19px;
+          position: absolute;
+          z-index: 10;
+          top: 5px;
+          right: 5px;
+          cursor: pointer;
+        }
+        .code {
+          width: 74px;
+          height: 74px;
+          position: absolute;
+          z-index: 10;
+          top: 10px;
+          left: 10px;
+        }
+        .title {
+          padding: 0;
+          height: 22px;
+          font-size: 16px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+          color: #000000;
+          line-height: 22px;
+          position: absolute;
+          z-index: 10;
+          top: 14px;
+          left: 101px;
+          background-color: transparent;
+        }
+        .conent {
+          position: absolute;
+          z-index: 10;
+          top: 38px;
+          left: 101px;
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #333333;
+          line-height: 20px;
+        }
+        .subConent {
+          position: absolute;
+          z-index: 10;
+          top: 58px;
+          left: 101px;
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #333333;
+          line-height: 20px;
+        }
+      }
+    }
     .audios {
       width: 100%;
       border-radius: 0;
       background-color: #333;
     }
   }
+  .right {
+    .musicInfo {
+      background-color: #fff;
+      padding: 24px;
+      width: 494px;
+      h2 {
+        font-size: 20px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #000000;
+        line-height: 28px;
+        margin-bottom: 12px;
+      }
+      .collect {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        .start {
+          width: 23px;
+          height: 23px;
+          margin-right: 6px;
+        }
+        p {
+          font-size: 18px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #000000;
+          line-height: 25px;
+        }
+
+      }
+    }
+  }
 }
 :global {
   .subjectChiose {
@@ -63,10 +158,8 @@
       background-color: #f1f1f1;
       border: none;
       box-shadow: none !important;
-
     }
     .el-input__wrapper.is-focus {
-
       border: none !important;
       box-shadow: none !important;
     }

src/views/muiscDetial/index.tsx

@@ -4,6 +4,9 @@ import { ElButton, ElOption, ElSelect } from 'element-plus'
 import printIcon from './images/printIcon.png'
 import banner from './images/banner.png'
 import colVideo from '@/components/col-video/index'
+import iconClose from '@/views/login/images/icon_close.png'
+import start from '@/components/albumItem/images/start.png'
+import code from './images/code.png'
 export default defineComponent({
   name: 'muiscDetial',
   props: {
@@ -46,14 +49,31 @@ export default defineComponent({
             </div>
             <div class={classes.musicContent}></div>
             <div class={classes.showCode}>
+              <div class={classes.showCodeWrap}>
+                <img class={classes.close} src={iconClose} alt="" />
+                <img class={classes.code} src={code} alt="" />
+                <h2 class={classes.title}>酷乐秀</h2>
+                <p  class={classes.conent}>扫码下载酷乐秀APP</p>
+                <p  class={classes.subConent}>使用小酷Ai即可智能练习本首曲目哦！</p>
               <img src={banner} alt="" />
+              </div>
+
             </div>
             <colVideo src="" styleValue={{
               height:'68px',
               bacground:'#333'
             }} type={'audto'} settings={['captions', 'quality', 'speed', 'loop']} class={classes.audios}></colVideo>
           </div>
-          <div class={classes.right}></div>
+          <div class={classes.right}>
+          <div class={classes.musicInfo}>
+            <h2>曲目：红莲华</h2>
+            <div class={classes.collect}>
+              <img src={start} class={classes.start} alt="" />
+              <p>321人收藏</p>
+            </div>
+            <div class={classes.tagList}></div>
+          </div>
+          </div>
         </div>
       </>
     )