谱面超出样式兼容

src/views/creation/index-share.tsx

@@ -568,21 +568,23 @@ export default defineComponent({
                     {/* 谱面 */}
                     {
                       staffState.staffSrc &&
-                      <div
-                        class={[styles.staffBox, staffState.isShow && styles.staffBoxShow]}
-                        style={
-                          {
-                            '--staffBoxHeight':staffState.height
+                      <div class={[styles.staffBoxCon, staffState.isShow && styles.staffBoxShow]}>
+                        <div
+                          class={styles.staffBox}
+                          style={
+                            {
+                              '--staffBoxHeight':staffState.height
+                            }
                           }
-                        }
-                      >
-                        <div class={styles.mask}></div>
-                        <iframe
-                          ref={staffDom}
-                          class={styles.staff}
-                          frameborder="0"
-                          src={staffState.staffSrc}>
-                        </iframe>
+                        >
+                          <div class={styles.mask}></div>
+                          <iframe
+                            ref={staffDom}
+                            class={styles.staff}
+                            frameborder="0"
+                            src={staffState.staffSrc}>
+                          </iframe>
+                        </div>
                       </div>
                     }
                   </>

src/views/creation/index.module.less

@@ -35,7 +35,6 @@
 .playSection{
   height: 210px;
   position: relative;
-  overflow: hidden;
   &::after{
     position: absolute;
     content: "";
@@ -192,18 +191,26 @@
     top: 10px;
     z-index: 15;
   }
+  .staffBoxCon{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    overflow: hidden;
+    visibility: hidden;
+    &.staffBoxShow{
+      visibility: initial;
+    }
+  }
   .staffBox{
     width: 100%;
     height: calc(var(--staffBoxHeight) + 12px);
     position: absolute;
     bottom: 0;
     padding-bottom: 12px;
-    visibility: hidden;
     background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
-    z-index: 1;
-    &.staffBoxShow{
-      visibility: initial;
-    }
     .staff{
       width: 100%;
       height: 100%;

src/views/creation/index.tsx

@@ -599,21 +599,23 @@ export default defineComponent({
             {/* 谱面 */}
             {
               staffState.staffSrc &&
-              <div
-                class={[styles.staffBox, staffState.isShow && styles.staffBoxShow]}
-                style={
-                  {
-                    '--staffBoxHeight':staffState.height
+              <div class={[styles.staffBoxCon, staffState.isShow && styles.staffBoxShow]}>
+                <div
+                  class={styles.staffBox}
+                  style={
+                    {
+                      '--staffBoxHeight':staffState.height
+                    }
                   }
-                }
-              >
-                <div class={styles.mask}></div>
-                <iframe
-                  ref={staffDom}
-                  class={styles.staff}
-                  frameborder="0"
-                  src={staffState.staffSrc}>
-                </iframe>
+                >
+                  <div class={styles.mask}></div>
+                  <iframe
+                    ref={staffDom}
+                    class={styles.staff}
+                    frameborder="0"
+                    src={staffState.staffSrc}>
+                  </iframe>
+                </div>
               </div>
             }
           </div>