<template>
  <div class="zz" @touchmove.prevent></div>
  <div class="rulesCon">
    <div class="rules_container">
      <div class="rule_t">
        <div class="rule_text">
            <img src="../assets/img/rule_text.png" alt="" srcset="">
        </div>
      </div>
      <div class="rule_cls_btn" @click="hidePop"></div>
    </div>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  defineEmits,
  defineProps,
  reactive,
  ref,
  toRefs,
} from "vue";
import gsap from "gsap";
import axios from "axios";
import { Toast } from "vant";
import { useStore } from "vuex";

// 初始化
const emit = defineEmits(["RulesPop"]); // 声明触发事件，对应父组件上面的方法
const props = defineProps({ sendMessage: Object }); // 获取props
const store = useStore();

// 页面挂载前
onBeforeMount(() => {});

// 页面挂载后
onMounted(() => {
  gsap.from(".rulesCon", { duration: 0.3, autoAlpha: 0 });
  gsap.from(".rule_t", { duration: 0.3, scale: 0.2, autoAlpha: 0, delay: 0.1 });
  gsap.from(".rule_cls_btn", {
    duration: 0.3,
    y: 20,
    autoAlpha: 0,
    delay: 0.5,
  });
});

const hidePop = () => {
  emit("RulesPop");
};
</script>

<style lang="scss" scoped>
.zz {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rulesCon {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);

  .rules_container {
    width: 750px;
    height: 1180px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .rule_t {
      @include box(629px, 762px);
      @include bg_pos("../assets/img/pop/rule_pop.png");
      //   pointer-events: none;
      
      position: relative;

      .rule_text{
        @include pos(563px, 630px, 30px, 95px);
        overflow: hidden;
        overflow-y: scroll;

        // @include bg_pos("../assets/img/rule_text.png");
        img{
            width: 100%;
            height: 2874px;
        }
      }

    }

    .rule_cls_btn {
      @include box(72px, 72px);
      @include bg_pos("../assets/img/pop/cls_btn.png");
      margin-top: 50px;
    }
  }
}
</style>