Home Explore Help
Register Sign In
zhangyupeng
/
fullpage-show
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: 保存

gemercheung 1 year ago
commit
b3f966a3e8
25 changed files with 8426 additions and 0 deletions
Unified View Show Diff Stats
  1. 24 0
      .gitignore
  2. 3 0
      .vscode/extensions.json
  3. 7 0
      README.md
  4. 14 0
      index.html
  5. 21 0
      package.json
  6. 2002 0
      pnpm-lock.yaml
  7. BIN
      public/img/section1/bg.webp
  8. BIN
      public/img/section1/logo.webp
  9. BIN
      public/img/section1/section1-title.webp
  10. BIN
      public/img/section1/section1-ww.webp
  11. BIN
      public/img/section2/bg.webp
  12. 1 0
      public/vite.svg
  13. 38 0
      src/App.vue
  14. 1 0
      src/assets/vue.svg
  15. 31 0
      src/components/fullpage/constants.js
  16. 5992 0
      src/components/fullpage/extensions.js
  17. 105 0
      src/components/fullpage/fullpage.vue
  18. 7 0
      src/components/fullpage/index.js
  19. 10 0
      src/components/fullpage/style.css
  20. 0 0
      src/components/tips.vue
  21. 7 0
      src/main.js
  22. 93 0
      src/pages/section1.vue
  23. 38 0
      src/style.scss
  24. 25 0
      src/view/index.vue
  25. 7 0
      vite.config.js

+ 24 - 0
.gitignore
View File 

@@ -0,0 +1,24 @@
 
+# Logs
 
+logs
 
+*.log
 
+npm-debug.log*
 
+yarn-debug.log*
 
+yarn-error.log*
 
+pnpm-debug.log*
 
+lerna-debug.log*
 
+
 
+node_modules
 
+dist
 
+dist-ssr
 
+*.local
 
+
 
+# Editor directories and files
 
+.vscode/*
 
+!.vscode/extensions.json
 
+.idea
 
+.DS_Store
 
+*.suo
 
+*.ntvs*
 
+*.njsproj
 
+*.sln
 
+*.sw?

+ 3 - 0
.vscode/extensions.json
View File 

@@ -0,0 +1,3 @@
 
+{
 
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
 
+}

+ 7 - 0
README.md
View File 

@@ -0,0 +1,7 @@
 
+# Vue 3 + Vite
 
+
 
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
+
 
+## Recommended IDE Setup
 
+
 
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

+ 14 - 0
index.html
View File 

@@ -0,0 +1,14 @@
 
+<!doctype html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Vite + Vue</title>
 
+
 
+  </head>
 
+  <body>
 
+    <div id="app"></div>
 
+    <script type="module" src="/src/main.js"></script>
 
+  </body>
 
+</html>

+ 21 - 0
package.json
View File 

@@ -0,0 +1,21 @@
 
+{
 
+  "name": "fullpage-show",
 
+  "private": true,
 
+  "version": "0.0.0",
 
+  "type": "module",
 
+  "scripts": {
 
+    "dev": "vite",
 
+    "build": "vite build",
 
+    "preview": "vite preview"
 
+  },
 
+  "dependencies": {
 
+    "@vueuse/motion": "^2.0.0",
 
+    "sass": "^1.70.0",
 
+    "vue": "^3.4.14",
 
+    "vue-fullpage.js": "^0.2.15"
 
+  },
 
+  "devDependencies": {
 
+    "@vitejs/plugin-vue": "^4.6.2",
 
+    "vite": "^5.0.11"
 
+  }
 
+}

File diff suppressed because it is too large
+ 2002 - 0
pnpm-lock.yaml


BIN
public/img/section1/bg.webp
View File


BIN
public/img/section1/logo.webp
View File


BIN
public/img/section1/section1-title.webp
View File


BIN
public/img/section1/section1-ww.webp
View File


BIN
public/img/section2/bg.webp
View File


File diff suppressed because it is too large
+ 1 - 0
public/vite.svg


+ 38 - 0
src/App.vue
View File 

@@ -0,0 +1,38 @@
 
+<template>
 
+  <full-page ref="fullpage" :options="options" @after-load="afterLoad">
 
+    <View />
 
+  </full-page>
 
+</template>
 
+
 
+<script setup>
 
+import FullPage from "./components/fullpage/fullpage.vue";
 
+import View from "./view/index.vue";
 
+import { ref } from "vue";
 
+const options = ref({
 
+  licenseKey: "",
 
+  menu: "#menu",
 
+  // anchors: ["page1", "page2", "page3"],
 
+  controlArrows: true,
 
+  scrollOverflow: false,
 
+  // scrollBar: true,
 
+  // sectionsColor: ["#41b883", "#ff5f45", "#0798ec"],
 
+});
 
+const afterLoad = () => {
 
+  console.log("afterLoad");
 
+};
 
+</script>
 
+
 
+<style scoped>
 
+.logo {
 
+  height: 6em;
 
+  padding: 1.5em;
 
+  will-change: filter;
 
+  transition: filter 300ms;
 
+}
 
+.logo:hover {
 
+  filter: drop-shadow(0 0 2em #646cffaa);
 
+}
 
+.logo.vue:hover {
 
+  filter: drop-shadow(0 0 2em #42b883aa);
 
+}
 
+</style>

+ 1 - 0
src/assets/vue.svg
View File 

@@ -0,0 +1 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

+ 31 - 0
src/components/fullpage/constants.js
View File 

@@ -0,0 +1,31 @@
 
+export const EVENTS = [

+    'afterLoad',

+    'onLeave',

+    'afterRender',

+    'afterResize',

+    'afterResponsive',

+    'afterSlideLoad',

+    'onSlideLeave',

+  ]

+  

+  export const METHODS = [

+    'moveSectionUp',

+    'moveSectionDown',

+    'moveTo',

+    'silentMoveTo',

+    'moveSlideRight',

+    'moveSlideLeft',

+    'setAutoScrolling',

+    'setFitToSection',

+    'fitToSection',

+    'setLockAnchors',

+    'setAllowScrolling',

+    'setKeyboardScrolling',

+    'setRecordHistory',

+    'setScrollingSpeed',

+    'destroy',

+    'reBuild',

+    'setResponsive',

+    'responsiveSlidesToSections',

+    'responsiveSlidesToSlides',

+  ]

File diff suppressed because it is too large
+ 5992 - 0
src/components/fullpage/extensions.js


+ 105 - 0
src/components/fullpage/fullpage.vue
View File 

@@ -0,0 +1,105 @@
 
+<template>

+  <div ref="fullpage">

+    <slot></slot>

+  </div>

+</template>

+

+<script>

+import "./style.css";

+import "./extensions.js";

+import * as constants from "./constants.js";

+

+export default {

+  name: "FullPage",

+  props: {

+    options: {

+      type: Object,

+      default() {},

+    },

+    skipInit: {

+      type: Boolean,

+      default: false,

+    },

+  },

+  data() {

+    return {

+      events: constants.EVENTS.reduce((eventsHandlers, event) => {

+        return {

+          ...eventsHandlers,

+          [event]: (...args) => {

+            this.emitEvent(event, args);

+          },

+        };

+      }, {}),

+      api: undefined,

+    };

+  },

+  watch: {

+    options: {

+      deep: true,

+      handler() {

+        this.build();

+      },

+    },

+  },

+  mounted() {

+    !this.skipInit && this.init();

+  },

+  beforeUnmount() {

+    if (typeof this.api !== "undefined") {

+      this.destroy();

+    }

+  },

+  methods: {

+    build() {

+      let slideSelector = this.options.slideSelector || ".slide";

+      let sectionSelector = this.options.sectionSelector || ".section";

+      const activeSectionIndex = window.fp_utils.index(

+        document.querySelector(sectionSelector + ".active")

+      );

+      const activeSlide = document.querySelector(

+        sectionSelector + ".active " + slideSelector + ".active"

+      );

+      const activeSlideIndex = activeSlide

+        ? window.fp_utils.index(activeSlide)

+        : -1;

+

+      this.destroy();

+

+      if (activeSectionIndex > -1) {

+        window.fp_utils.addClass(

+          document.querySelectorAll(sectionSelector)[activeSectionIndex],

+          "active"

+        );

+      }

+

+      if (activeSlideIndex > -1) {

+        window.fp_utils.addClass(activeSlide, "active");

+      }

+

+      this.init();

+    },

+    destroy() {

+      if (

+        typeof window.fullpage_api !== "undefined" &&

+        typeof window.fullpage_api.destroy !== "undefined"

+      ) {

+        window.fullpage_api.destroy("all");

+      }

+    },

+    emitEvent(name, args) {

+      this.$emit(

+        name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(),

+        ...args

+      );

+

+      if (Object.prototype.hasOwnProperty.call(this.options, name)) {

+        this.options[name].apply(this, args);

+      }

+    },

+    init() {

+      this.api = new fullpage(this.$refs.fullpage, this.options);

+    },

+  },

+};

+</script>

+ 7 - 0
src/components/fullpage/index.js
View File 

@@ -0,0 +1,7 @@
 
+import FullPage from'./fullPage.vue'

+

+export default {

+  install (Vue) {

+    Vue.component('FullPage', FullPage)

+  }

+}

File diff suppressed because it is too large
+ 10 - 0
src/components/fullpage/style.css


+ 0 - 0
src/components/tips.vue
View File


+ 7 - 0
src/main.js
View File 

@@ -0,0 +1,7 @@
 
+import { createApp } from "vue";
 
+import "./style.scss";
 
+import App from "./App.vue";
 
+import { MotionPlugin } from "@vueuse/motion";
 
+const app = createApp(App);
 
+app.use(MotionPlugin);
 
+app.mount("#app");

+ 93 - 0
src/pages/section1.vue
View File 

@@ -0,0 +1,93 @@
 
+<template>

+  <div class="section section1">

+    <div class="logo" />

+    <div class="title1">

+      <span>南京博物院90周年院庆系列特展</span>

+    </div>

+    <div class="section1-box">

+      <img src="/img/section1/section1-ww.webp" />

+      <div class="section1-title"></div>

+    </div>

+    <div class="txt">

+      <p class="txt1">中国玉器的万年史诗图卷</p>

+      <p class="entxt txt2">An Epic of Chinese Jade for 10,000 Years</p>

+      <p class="entxt txt3">

+        Diversity and Unity,Inheritance and Innovation,Inclusiveness and

+        Gentleness

+      </p>

+    </div>

+  </div>

+</template>

+

+<script setup></script>

+

+<style lang="scss">

+.section {

+  position: relative;

+}

+.section1 {

+  display: flex;

+  flex-flow: column;

+  align-items: center;

+  justify-content: center;

+  background: url(/img/section1/bg.webp) no-repeat center/cover;

+  position: relative;

+}

+.section1 {

+  .logo {

+    z-index: 1;

+    width: 6rem;

+    height: 6.375rem;

+    margin-bottom: 1.5rem;

+    display: block;

+    background: url(/img/section1/logo.webp) no-repeat center/cover;

+  }

+  .title1 {

+    z-index: 1;

+    font-size: 0.8rem;

+    color: #997946;

+    letter-spacing: 0.5rem;

+    transform: translate3d(0, -3%, 0);

+  }

+  .section1-box {

+    position: relative;

+    height: min(44rem, 70vh);

+    margin: -4rem 0 -6rem;

+    text-align: center;

+    transform: translate3d(0, -3%, 0);

+    img {

+      z-index: 1;

+      position: relative;

+      max-width: 100%;

+      max-height: 100%;

+    }

+  }

+  .section1-title {

+    z-index: 2;

+    position: absolute;

+    top: 0;

+    left: 0;

+    width: 100%;

+    height: 100%;

+    background: url(/img/section1/section1-title.webp) no-repeat center/contain;

+  }

+  .txt {

+    text-align: center;

+    .txt1 {

+      font-size: 2rem;

+      color: #ebeae3;

+      margin-bottom: 1rem;

+      letter-spacing: 0.2rem;

+    }

+    .txt2 {

+      font-size: 1.5rem;

+      color: #d09d68;

+    }

+    .txt3 {

+      font-size: 0.75rem;

+      color: #d09d68;

+      letter-spacing: 0.015rem;

+    }

+  }

+}

+</style>

+ 38 - 0
src/style.scss
View File 

@@ -0,0 +1,38 @@
 
+:root {
 
+  font-synthesis: none;
 
+  text-rendering: optimizeLegibility;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+html {
 
+  font-size: 16px;
 
+}
 
+
 
+#app {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+body {
 
+  font-family: "syst-regular";
 
+  background-color: #000000;
 
+  text-align: justify;
 
+  color: #cfc4ab;
 
+}
 
+
 
+@media (max-width: 1750px) {
 
+  html {
 
+    font-size: 14px;
 
+  }
 
+}
 
+
 
+@media (max-width: 1450px) {
 
+  html {
 
+    font-size: 12px;
 
+  }
 
+}
 
+
 
+@media (max-width: 1200px) {
 
+  html {
 
+    font-size: 10px;
 
+  }
 
+}

+ 25 - 0
src/view/index.vue
View File 

@@ -0,0 +1,25 @@
 
+<template>

+  <section1></section1>

+  <div class="section fp-noscroll">

+    <button class="prev">Prev</button>

+    Section 2

+  </div>

+  <div class="section">

+    <button class="prev">Prev</button>

+    Section 3

+  </div>

+  <div class="section">

+    <button class="prev">Prev</button>

+    Section 4

+  </div>

+  <div class="section">

+    <button class="prev">Prev</button>

+    Section 5

+  </div>

+</template>

+<script setup>

+import Section1 from "../pages/section1.vue";

+defineOptions({

+  name: "View",

+});

+</script>

+ 7 - 0
vite.config.js
View File 

@@ -0,0 +1,7 @@
 
+import { defineConfig } from 'vite'
 
+import vue from '@vitejs/plugin-vue'
 
+
 
+// https://vitejs.dev/config/
 
+export default defineConfig({
 
+  plugins: [vue()],
 
+})