118 lines
2.3 KiB
Vue
118 lines
2.3 KiB
Vue
<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> |