更新羽声语音h5

component/MiddlePopup.vue

@@ -0,0 +1,50 @@
+<template>
+  <div v-if="isVisible" class="popup-container">
+    <div class="popup-content">
+      <slot></slot>
+      <!-- <button @click="closePopup">关闭</button> -->
+    </div>
+  </div>
+</template>
+ 
+<script>
+export default {
+  name: 'MiddlePopup',
+  data() {
+    return {
+      isVisible: false,
+    };
+  },
+  methods: {
+    openPopup() {
+      this.isVisible = true;
+      document.body.style.overflow = 'hidden'; // 防止页面滚动
+    },
+    closePopup() {
+      this.isVisible = false;
+      document.body.style.overflow = 'auto'; // 恢复页面滚动
+    }
+  }
+}
+</script>
+ 
+<style scoped>
+.popup-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 6;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.popup-content {
+  /* background-color: white; */
+  /* padding: 20px; */
+  /* border-radius: 8px; */
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+}
+</style>