新增首页页面

src/components/Index.vue

@@ -4,8 +4,8 @@ import { debounceTap } from "@/plugins";
 
 const emit = defineEmits(["IndexPage"]);
 
-const count = ref(0);
-const show = (event) => {
+
+const start = (event) => {
   debounceTap(event.target, () => {
     Toast.success("开发中！");
   });
@@ -16,7 +16,11 @@ const show = (event) => {
   <div class="IndexPage">
     <div class="index-bg"></div>
     <div class="index-container">
-      <Button @click="show">首页</Button>
+      <div class="index-title"></div>
+      <div class="index-rule-btn"></div>
+      <div class="index-prize-btn"></div>
+      <div class="index-start-btn" @click="start"></div>
+      <div class="index-agreement"></div>
     </div>
   </div>
 </template>
@@ -24,14 +28,43 @@ const show = (event) => {
 <style lang="scss" scoped>
 .IndexPage {
   @include pos(100%, 100vh, 0px, 0px);
-  background-color: rgb(0, 7, 198);
+  overflow: hidden;
+
   .index-bg {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
+    @include bg_pos("index/bg.jpg");
   }
+
   .index-container {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
+
+    .index-title {
+      @include pos(552px, 131px, 101px, 331px);
+      @include bg_pos("index/title.png");
+
+    }
+
+    .index-rule-btn {
+      @include pos(101px, 51px, 0px, 474px);
+      @include bg_pos("index/rule-btn.png");
+    }
+
+    .index-prize-btn {
+      @include pos(101px, 51px, 0px, 536px);
+      @include bg_pos("index/prize-btn.png");
+    }
+
+    .index-start-btn {
+      @include pos(278px, 79px, 226px, 1117px);
+      @include bg_pos("index/start-btn.png");
+    }
+
+    .index-agreement {
+      @include pos(736px, 172px, 7px, 1219px);
+      @include bg_pos("index/agreement.png");
+    }
   }
 }
 </style>