From 8ffc42419cf82d921514bcd3fbd67d9c26d41f30 Mon Sep 17 00:00:00 2001
From: yzw <2431960323@qq.com>
Date: Fri, 9 Dec 2022 16:32:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B5=8B=E8=AF=95Vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore               |   4 +-
 src/views/Test/test1.vue | 181 +++++++++++++++++++++++++++++++++++++++
 src/views/Test/test2.vue |  18 ++++
 3 files changed, 200 insertions(+), 3 deletions(-)
 create mode 100644 src/views/Test/test1.vue
 create mode 100644 src/views/Test/test2.vue

diff --git a/.gitignore b/.gitignore
index 7c9b023..b488630 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,4 @@ tests/**/coverage/
 *.suo
 *.ntvs*
 *.njsproj
-*.sln
-src/views/Test/test1.vue
-src/views/Test/test2.vue
+*.sln
\ No newline at end of file
diff --git a/src/views/Test/test1.vue b/src/views/Test/test1.vue
new file mode 100644
index 0000000..7bc9190
--- /dev/null
+++ b/src/views/Test/test1.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="my-body">
+    <transition>
+      <ul id="menu" v-if="navVisable" :key="curSection">
+        <li :class="{ active: curSection == 1 }">
+          <a @click="handleNavClick(1)">第一屏</a>
+        </li>
+        <li :class="{ active: curSection == 2 }">
+          <a @click="handleNavClick(2)">第二屏</a>
+        </li>
+        <li :class="{ active: curSection == 3 }">
+          <a @click="handleNavClick(3)">第三屏</a>
+        </li>
+        <li :class="{ active: curSection == 4 }">
+          <a @click="handleNavClick(4)">第四屏</a>
+        </li>
+        <li>
+          <el-button
+            type="drawer"
+            icon="el-icon-arrow-left"
+            @click="hideNav()"
+          ></el-button>
+        </li>
+      </ul>
+      <ul id="menu" v-else>
+        <li>
+          <el-button
+            type="drawer"
+            icon="el-icon-arrow-right"
+            @click="showNav()"
+          ></el-button>
+        </li>
+      </ul>
+    </transition>
+
+    <div id="dowebok">
+      <div class="section">
+        <h3>第一屏</h3>
+        <p>fullPage.js — 绑定菜单演示</p>
+        <div id="test">yzw</div>
+      </div>
+      <div class="section">
+        <div class="slide">
+          <h3>第2屏</h3>
+          <p>第0页</p>
+        </div>
+        <div class="slide">
+          <h3>第2屏</h3>
+          <p>第1页</p>
+        </div>
+        <div class="slide">
+          <h3>第2屏</h3>
+          <p>第2页</p>
+        </div>
+        <div class="slide">
+          <h3>第2屏</h3>
+          <p>第3页</p>
+        </div>
+      </div>
+      <div class="section">
+        <h3>第三屏</h3>
+        <p>绑定的菜单没有默认的样式，你需要自行编写</p>
+      </div>
+      <div class="section">
+        <h3>第四屏</h3>
+        <p>这是最后一屏</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import "@/assets/css/jquery.fullPage.css";
+import "@/assets/js/jquery.fullPage.min.js";
+
+export default {
+  name: "Test1",
+  data() {
+    return {
+      navVisable: false,
+      curSection: 1,
+    };
+  },
+  mounted() {
+    $(() => {
+      $("#dowebok").fullpage({
+        sectionsColor: ["#1bbc9b", "#4BBFC3", "#7BAABE", "#f90"],
+        menu: "#menu",
+        // navigation: true,
+        // navigationTooltips: ["人口", "二", "三", "四"],
+        // slidesNavigation: true,
+        // slidesNavPosition: null,
+        // loopHorizontal: false,
+        afterLoad: (origin, destination, direction, trigger) => {
+          //   console.log('origin', origin)
+          //   console.log('destination', destination)
+          this.curSection = destination;
+        },
+        afterSlideLoad: (
+          section,
+          origin,
+          destination,
+          direction,
+          trigger
+        ) => {},
+      });
+    });
+  },
+  methods: {
+    handleNavClick(val) {
+      $.fn.fullpage.moveTo(val);
+    },
+    hideNav() {
+      this.navVisable = false;
+    },
+    showNav() {
+      this.navVisable = true;
+      //   console.log($.fn);
+    },
+  },
+};
+</script>
+
+<style>
+/* .my-body {
+  overflow: hidden;
+  height: 100%;
+} */
+
+#menu {
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  left: 300px;
+  top: 100px;
+  list-style-type: none;
+  z-index: 70;
+}
+#menu li {
+  float: left;
+  margin: 0 10px 0 0;
+  height: 40px;
+  /* font-size: 14px; */
+}
+#menu a {
+  float: left;
+  padding: 10px 20px;
+  background-color: #fff;
+  color: #333;
+  text-decoration: none;
+}
+#menu .active a {
+  color: #fff;
+  background-color: #333;
+}
+
+.section {
+  text-align: center;
+  font: 50px "Microsoft Yahei";
+  color: #fff;
+}
+
+/* 查询按钮 */
+.el-button--drawer {
+  color: rgb(148, 197, 238);
+  background-color: rgb(240, 248, 255);
+  border-color: rgb(148, 197, 238);
+}
+
+.el-button--drawer:hover {
+  color: rgb(240, 248, 255);
+  background-color: rgb(148, 197, 238);
+  border-color: rgb(148, 197, 238);
+}
+
+.v-enter,
+.v-leave-to {
+  transform: translateX(100%);
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Test/test2.vue b/src/views/Test/test2.vue
new file mode 100644
index 0000000..1b80e5f
--- /dev/null
+++ b/src/views/Test/test2.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
+    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
+    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
+    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
+    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
+    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
+    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
+    菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br />
+    菜鸟教程 -- 学的不仅是技术，更是梦想！！！
+  </div>
+</template>
+
+<script>
+
+</script>
+