<template>
  <div class="mobile-container">
    <iframe class="mobile-iframe" :src="h5PageUrl"></iframe>
    <button class="close-button" @click="handleClose">关闭</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MobileH5Viewer',
  props: {
    h5PageUrl: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClose() {
      // 这里可以添加关闭逻辑，例如隐藏容器或触发某个事件
      this.$emit('close');
    }
  }
});
</script>

<style scoped lang="scss">
.mobile-container {
  position: fixed; /* 使用绝对定位 */
  top: 50%; /* 将顶部与父元素的中间对齐 */
  left: 50%; /* 将左侧与父元素的中间对齐 */
  transform: translate(-50%, -50%); /* 负的 50% 位移，使得元素真正的居中 */
  width: 375px; /* 常用手机宽度 */
  height: 812px; /* 常用手机高度 */
  margin: 20px auto;
  border: 16px black solid;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.mobile-container::before {
  content: "";
  display: block;
  width: 60px;
  height: 5px;
  background: black;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
}

.mobile-iframe {
  position: absolute; /* 使用绝对定位 */
  top: 50%; /* 将顶部与父元素的中间对齐 */
  left: 50%; /* 将左侧与父元素的中间对齐 */
  transform: translate(-50%, -50%); /* 负的 50% 位移，使得元素真正的居中 */
  width: 100%; /* 确保宽度占满父元素 */
  height: 100%; /* 确保高度占满父元素 */
  border: none;
}

.close-button {
  position: absolute; /* 使用绝对定位 */
  top: 10px; /* 距离顶部 10px */
  right: 10px; /* 距离右侧 10px */
  padding: 8px 16px; /* 按钮内边距 */
  border: none; /* 去掉边框 */
  border-radius: 4px; /* 圆角 */
  background-color: red; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  font-size: 14px; /* 按钮字体大小 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
  z-index: 2; /* 确保关闭按钮在 iframe 之上 */
}

.close-button:hover {
  background-color: darkred; /* 按钮悬停时的背景颜色 */
}
</style>
