更新脚手架

src/components/HelloWorld.vue

@@ -1,46 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import { Button, Toast } from 'vant';
-defineProps({
-  msg: String
-})
-
-const count = ref(0)
-const show = () => {
-  Toast.success('成功文案');
-}
-</script>
-
-<template>
-  <h1 class="msg">{{ msg }}</h1>
-  <Button @click="show" type="primary">警告按钮</Button>
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
-    starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-
-.msg {
-  font-size: 20px;
-}
-</style>

src/components/Index.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { Button, Toast } from "vant";
+import { debounceTap } from "@/plugins";
+
+const emit = defineEmits(["IndexPage"]);
+
+const count = ref(0);
+const show = (event) => {
+  debounceTap(event.target, () => {
+    Toast.success("开发中！");
+  });
+};
+</script>
+
+<template>
+  <div class="IndexPage">
+    <div class="index-bg"></div>
+    <div class="index-container">
+      <Button @click="show">首页</Button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.IndexPage {
+  @include pos(100%, 100vh, 0px, 0px);
+  background-color: rgb(0, 7, 198);
+  .index-bg {
+    @include pos(750px, 1624px, 0px, 50%);
+    transform: translateY(-50%);
+  }
+  .index-container {
+    @include pos(750px, 1624px, 0px, 50%);
+    transform: translateY(-50%);
+  }
+}
+</style>

src/components/Loading.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { ref } from "vue";
+import { Button, Toast } from "vant";
+import gsap from "gsap";
+import { debounceTap } from "@/plugins";
+
+// 页面配置初始化
+const emit = defineEmits(["LoadPage"]);
+
+const show = (event) => {
+  const e = event.target;
+  debounceTap(e, () => {
+    console.log(1);
+    emit("LoadPage", { action: "hide" });
+  });
+};
+</script>
+
+<template>
+  <div class="LoadPage">
+    <div class="load-bg"></div>
+    <div class="load-container">
+      <div class="box">
+        <Button @click="show">to index</Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.LoadPage {
+  @include pos(100%, 100%, 0px, 0px);
+  background-color: rgb(223, 15, 60);
+  overflow: hidden;
+
+  .load-bg {
+    @include pos(750px, 100%, 0px, 50%);
+    transform: translateY(-50%);
+  }
+  .load-container {
+    @include pos(750px, 100%, 0px, 50%);
+    transform: translateY(-50%);
+    @include flexCen();
+
+    .box {
+      @include box(300px, 300px);
+      @include flexCen();
+    }
+    .btn {
+      @include box(200px, 40px);
+      line-height: 40px;
+      text-align: center;
+      background-color: aliceblue;
+    }
+  }
+}
+</style>