init

src/components/Agreement.vue

@@ -0,0 +1,67 @@
+<template>
+  <ModalTransition :show="show">
+    <div class="agreement">
+      <div class="agreement-wrapper">
+        <div class="agreement-content" v-html="agreeHtml"></div>
+      </div>
+      <div class="agreement-close" @click="$emit('close')"></div>
+    </div>
+  </ModalTransition>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import ModalTransition from "./ModalTransition.vue";
+
+const show = ref(false)
+const agreeHtml = ref("")
+const loading = weui.loading("加载中……")
+
+fetch(`./agreement.html`, {
+  method: "GET",
+  headers: new Headers({
+    "Content-Type": "text/html"
+  })
+}).then(res => res.text())
+  .catch(error => {
+    loading.hide()
+    console.log(error)
+  })
+  .then(res => {
+    loading.hide()
+    agreeHtml.value = res
+    show.value = true
+  })
+</script>
+
+<style scoped>
+.agreement {
+  background-color: #fff;
+  border-radius: 2vw 2vw 0 0;
+}
+
+.agreement-wrapper {
+  width: 100%;
+  height: 90vh;
+  overflow: auto;
+}
+
+.agreement-content {
+  padding: 6vw;
+}
+
+.agreement-close {
+  z-index: 1;
+  position: absolute;
+  top: 25vw;
+  right: 3vw;
+  border-radius: 50%;
+  width: 8.425926vw;
+  height: 8.703704vw;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-color: rgba(255,255,255,.5);
+  background-size: 80% auto;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MiA3MiIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4Ij48cGF0aCBkPSJNIDE5IDE1IEMgMTcuOTc3IDE1IDE2Ljk1MTg3NSAxNS4zOTA4NzUgMTYuMTcxODc1IDE2LjE3MTg3NSBDIDE0LjYwOTg3NSAxNy43MzM4NzUgMTQuNjA5ODc1IDIwLjI2NjEyNSAxNi4xNzE4NzUgMjEuODI4MTI1IEwgMzAuMzQzNzUgMzYgTCAxNi4xNzE4NzUgNTAuMTcxODc1IEMgMTQuNjA5ODc1IDUxLjczMzg3NSAxNC42MDk4NzUgNTQuMjY2MTI1IDE2LjE3MTg3NSA1NS44MjgxMjUgQyAxNi45NTE4NzUgNTYuNjA4MTI1IDE3Ljk3NyA1NyAxOSA1NyBDIDIwLjAyMyA1NyAyMS4wNDgxMjUgNTYuNjA5MTI1IDIxLjgyODEyNSA1NS44MjgxMjUgTCAzNiA0MS42NTYyNSBMIDUwLjE3MTg3NSA1NS44MjgxMjUgQyA1MS43MzE4NzUgNTcuMzkwMTI1IDU0LjI2NzEyNSA1Ny4zOTAxMjUgNTUuODI4MTI1IDU1LjgyODEyNSBDIDU3LjM5MTEyNSA1NC4yNjUxMjUgNTcuMzkxMTI1IDUxLjczNDg3NSA1NS44MjgxMjUgNTAuMTcxODc1IEwgNDEuNjU2MjUgMzYgTCA1NS44MjgxMjUgMjEuODI4MTI1IEMgNTcuMzkwMTI1IDIwLjI2NjEyNSA1Ny4zOTAxMjUgMTcuNzMzODc1IDU1LjgyODEyNSAxNi4xNzE4NzUgQyA1NC4yNjgxMjUgMTQuNjEwODc1IDUxLjczMTg3NSAxNC42MDk4NzUgNTAuMTcxODc1IDE2LjE3MTg3NSBMIDM2IDMwLjM0Mzc1IEwgMjEuODI4MTI1IDE2LjE3MTg3NSBDIDIxLjA0ODEyNSAxNS4zOTE4NzUgMjAuMDIzIDE1IDE5IDE1IHoiLz48L3N2Zz4=);
+}
+</style>