1 year ago · b3f966a3e8
--- a/.gitignore
+++ b/.gitignore
@@ -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?
			
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
 
				+{
			
 
				+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
			
 
				+}
			
--- a/README.md
+++ b/README.md
@@ -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).
			
--- a/index.html
+++ b/index.html
@@ -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>
			
--- a/package.json
+++ b/package.json
@@ -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"
			
 
				+  }
			
 
				+}
			
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/img/section1/bg.webp
+++ b/public/img/section1/bg.webp
--- a/public/img/section1/logo.webp
+++ b/public/img/section1/logo.webp
--- a/public/img/section1/section1-title.webp
+++ b/public/img/section1/section1-title.webp
--- a/public/img/section1/section1-ww.webp
+++ b/public/img/section1/section1-ww.webp
--- a/public/img/section2/bg.webp
+++ b/public/img/section2/bg.webp
--- a/public/vite.svg
+++ b/public/vite.svg
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
			
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@@ -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>
			
--- a/src/components/fullpage/constants.js
+++ b/src/components/fullpage/constants.js
@@ -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',

			
 
				+  ]
			
--- a/src/components/fullpage/extensions.js
+++ b/src/components/fullpage/extensions.js
--- a/src/components/fullpage/fullpage.vue
+++ b/src/components/fullpage/fullpage.vue
@@ -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>

			
--- a/src/components/fullpage/index.js
+++ b/src/components/fullpage/index.js
@@ -0,0 +1,7 @@
 
				+import FullPage from'./fullPage.vue'

			
 
				+

			
 
				+export default {

			
 
				+  install (Vue) {

			
 
				+    Vue.component('FullPage', FullPage)

			
 
				+  }

			
 
				+}
			
--- a/src/components/fullpage/style.css
+++ b/src/components/fullpage/style.css
--- a/src/components/tips.vue
+++ b/src/components/tips.vue
--- a/src/main.js
+++ b/src/main.js
@@ -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");
			
--- a/src/pages/section1.vue
+++ b/src/pages/section1.vue
@@ -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>

			
--- a/src/style.scss
+++ b/src/style.scss
@@ -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;
			
 
				+  }
			
 
				+}
			
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -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>

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