<template>
  <ModalTransition class="rule" :show="show">
    <div class="rule-wrapper">
      <div class="rule-content">
        <!-- <img src="../assets/images/rule-1.webp" alt="">
        <img src="../assets/images/rule-2.webp" alt="">
        <img src="../assets/images/rule-3.webp" alt="">
        <img src="../assets/images/rule-4.webp" alt="">
        <img src="../assets/images/rule-5.webp" alt=""> -->
      </div>
      <div class="close" @click="emit('close')"></div>
    </div>
  </ModalTransition>
</template>

<script setup>
import ModalTransition from "./ModalTransition.vue"
const props = defineProps({
  show: false,
})
const emit = defineEmits(['close'])
//TODO 上线更换rule的图片
</script>

<style scoped>
.rule-wrapper {
  position: relative;
  width: 100%;
  height: 175.740741vw;
  background-image: url("../assets/images/rule-bg.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}
.rule-content{
  position: absolute;
  top: 50vw;
  left: 10vw;
  width: 83.981481vw;
  height: 150vw;
  overflow: auto;
  padding-right: 4vw;
  padding-bottom: 10vw;
}
.rule-content img {
  width: 100%;
  height: auto;
  display: block;
}
.close {
  position: absolute;
  width: 8.148148vw;
  height: 8.148148vw;
  right: 5vw;
  top: 15vw;
  background-image: url("../assets/images/close-btn.webp");
  background-repeat: no-repeat;
  background-size: 100%;
}
</style>