3 gadi atpakaļ · ceb110b5ba
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,3 @@
 
				+*/libs

			
 
				+/node_modules

			
 
				+/.vscode
			
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,17 +1,49 @@
 
				-module.exports = {
			
 
				-  root: true,
			
 
				-  env: {
			
 
				-    node: true
			
 
				-  },
			
 
				-  extends: [
			
 
				-    'plugin:vue/essential',
			
 
				-    '@vue/standard'
			
 
				-  ],
			
 
				-  parserOptions: {
			
 
				-    parser: 'babel-eslint'
			
 
				-  },
			
 
				-  rules: {
			
 
				-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
			
 
				-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
			
 
				-  }
			
 
				-}
			
 
				+module.exports = {

			
 
				+  root: true,

			
 
				+  env: {

			
 
				+    browser: true,

			
 
				+    commonjs: true,

			
 
				+    es6: true,

			
 
				+    jest: true,

			
 
				+    jquery: true,

			
 
				+    node: true,

			
 
				+  },

			
 
				+  'extends': [

			
 
				+    'eslint:recommended',

			
 
				+    'plugin:vue/recommended',

			
 
				+  ],

			
 
				+  parserOptions: {

			
 
				+    parser: 'babel-eslint'

			
 
				+  },

			
 
				+  rules: {

			
 
				+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

			
 
				+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

			
 
				+    'semi': ['error', 'never'],

			
 
				+    "no-unused-vars": ["warn", {

			
 
				+      "vars": "all",

			
 
				+      "args": "after-used",

			
 
				+      "ignoreRestSiblings": false

			
 
				+    }],

			
 
				+    "keyword-spacing": ["error", { "before": true, "after": true }],

			
 
				+    "object-curly-spacing": ["error", "always"],

			
 
				+    "space-infix-ops": ["error"],

			
 
				+    'key-spacing': ["error", {

			
 
				+      "mode": "strict"

			
 
				+    }],

			
 
				+    "indent": ["error", 2],

			
 
				+    'no-trailing-spaces': 'error',

			
 
				+    'no-empty': 'off',

			
 
				+    // 默认不启用：为了避免细微的 bug，最好直接从 Object.prototype 调用挂载于prototype上的方法方法。例如，foo.hasOwnProperty("bar") 应该替换为 Object.prototype.hasOwnProperty.call(foo, "bar")。

			
 
				+    'no-prototype-builtins': "off",

			
 
				+  },

			
 
				+  globals: {

			
 
				+    // api: true,

			
 
				+    // config: true,

			
 
				+    // mapGetters: true,

			
 
				+    // store: true,

			
 
				+    // utils: true,

			
 
				+    Hammer: true,

			
 
				+  }

			
 
				+}

			
 
				+

			
 
				+

			
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 
				 node_modules
			
 
				 /dist
			
 
				 
			
 
				+*.zip
			
 
				 
			
 
				 # local env files
			
 
				 .env.local
			
@@ -20,4 +21,4 @@ pnpm-debug.log*
 
				 *.ntvs*
			
 
				 *.njsproj
			
 
				 *.sln
			
 
				-*.sw?
			
 
				+*.sw?
			
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,12 @@
 
				+// 这里可以加注释？

			
 
				+{

			
 
				+  "compilerOptions": {

			
 
				+    // 在webpack中配置了路径片段别名alias，因此需要让vscode也知道webpack里的别名设置，以便继续提供路径自动补全和快速跳转到文件的功能。

			
 
				+    "baseUrl": ".",

			
 
				+    "paths": {

			
 
				+      "@/*": ["./src/*"],

			
 
				+      // "~/*": ["./assets/*"],

			
 
				+    },

			
 
				+  },

			
 
				+  "exclude": ["libs", "node_modules"]

			
 
				+}

			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,11 +9,16 @@
 
				   },
			
 
				   "dependencies": {
			
 
				     "core-js": "^3.6.5",
			
 
				-    "vue": "^2.6.11"
			
 
				+    "less": "3.0.4",
			
 
				+    "less-loader": "^5.0.0",
			
 
				+    "vant": "^2.12.47",
			
 
				+    "vue": "^2.6.11",
			
 
				+    "vue-router": "^3.2.0"
			
 
				   },
			
 
				   "devDependencies": {
			
 
				     "@vue/cli-plugin-babel": "~4.5.15",
			
 
				     "@vue/cli-plugin-eslint": "~4.5.15",
			
 
				+    "@vue/cli-plugin-router": "~4.5.15",
			
 
				     "@vue/cli-service": "~4.5.15",
			
 
				     "@vue/eslint-config-standard": "^5.1.2",
			
 
				     "babel-eslint": "^10.1.0",
			
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,7 @@
 
				     <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				     <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+    <script src="<%= BASE_URL %>libs/hammer.js"></script>
			
 
				   </head>
			
 
				   <body>
			
 
				     <noscript>
			
--- a/public/libs/hammer.js
+++ b/public/libs/hammer.js
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,54 @@
 
				 <template>
			
 
				   <div id="app">
			
 
				-    <img alt="Vue logo" src="./assets/logo.png">
			
 
				-    <HelloWorld msg="Welcome to Your Vue.js App"/>
			
 
				+    <div id="nav">
			
 
				+      <router-link to="/">
			
 
				+        CoverPage
			
 
				+      </router-link> |
			
 
				+      <router-link to="/home">
			
 
				+        Home
			
 
				+      </router-link>
			
 
				+      <router-link to="/TreeAnimation">
			
 
				+        TreeAnimation
			
 
				+      </router-link>
			
 
				+      <router-link to="/Chart">
			
 
				+        Chart
			
 
				+      </router-link>
			
 
				+      <router-link to="/TreeSelection">
			
 
				+        TreeSelection
			
 
				+      </router-link>
			
 
				+      <router-link to="/ExhibitionList">
			
 
				+        ExhibitionList
			
 
				+      </router-link>
			
 
				+      <router-link to="/ExhibitionDetailImage">
			
 
				+        ExhitionDetailImage
			
 
				+      </router-link>
			
 
				+      <router-link to="/ExhibitionDetailVideo">
			
 
				+        ExhitionDetailVideo
			
 
				+      </router-link>
			
 
				+    </div>
			
 
				+    <transition :name="transitionName">
			
 
				+      <router-view />
			
 
				+    </transition>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				-import HelloWorld from './components/HelloWorld.vue'
			
 
				-
			
 
				 export default {
			
 
				-  name: 'App',
			
 
				-  components: {
			
 
				-    HelloWorld
			
 
				+  data() {
			
 
				+    return {
			
 
				+      transitionName: '',
			
 
				+    }
			
 
				+  },
			
 
				+  watch: {
			
 
				+    '$route' (to, from) {
			
 
				+      if (from.name === 'Home' && to.name === 'TreeAnimation') {
			
 
				+        this.transitionName = 'slide-to-next-page'
			
 
				+      } else {
			
 
				+        this.transitionName = ''
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				+  mounted() {
			
 
				   }
			
 
				 }
			
 
				 </script>
			
@@ -21,8 +58,45 @@ export default {
 
				   font-family: Avenir, Helvetica, Arial, sans-serif;
			
 
				   -webkit-font-smoothing: antialiased;
			
 
				   -moz-osx-font-smoothing: grayscale;
			
 
				-  text-align: center;
			
 
				-  color: #2c3e50;
			
 
				-  margin-top: 60px;
			
 
				+}
			
 
				+
			
 
				+.slide-to-next-page-enter {
			
 
				+  position: fixed;
			
 
				+  top: 100vh;
			
 
				+  left: 0;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+}
			
 
				+
			
 
				+.slide-to-next-page-enter-to {
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+}
			
 
				+
			
 
				+.slide-to-next-page-enter-active {
			
 
				+  transition: top 1s;
			
 
				+}
			
 
				+
			
 
				+.slide-to-next-page-leave {
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+}
			
 
				+
			
 
				+.slide-to-next-page-leave-to {
			
 
				+  position: fixed;
			
 
				+  top: -100vh;
			
 
				+  left: 0;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+}
			
 
				+
			
 
				+.slide-to-next-page-leave-active {
			
 
				+  transition: top 1s;
			
 
				 }
			
 
				 </style>
			
--- a/src/assets/image/cover.png
+++ b/src/assets/image/cover.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/style/reset.css
+++ b/src/assets/style/reset.css
@@ -0,0 +1,56 @@
 
				+/* http://meyerweb.com/eric/tools/css/reset/ 

			
 
				+   v2.0 | 20110126

			
 
				+   License: none (public domain)

			
 
				+*/

			
 
				+

			
 
				+html, body, div, span, applet, object, iframe,

			
 
				+h1, h2, h3, h4, h5, h6, p, blockquote, pre,

			
 
				+a, abbr, acronym, address, big, cite, code,

			
 
				+del, dfn, em, img, ins, kbd, q, s, samp,

			
 
				+small, strike, strong, sub, sup, tt, var,

			
 
				+b, u, i, center,

			
 
				+dl, dt, dd, ol, ul, li,

			
 
				+fieldset, form, label, legend,

			
 
				+table, caption, tbody, tfoot, thead, tr, th, td,

			
 
				+article, aside, canvas, details, embed, 

			
 
				+figure, figcaption, footer, header, hgroup, 

			
 
				+menu, nav, output, ruby, section, summary,

			
 
				+time, mark, audio, video {

			
 
				+	margin: 0;

			
 
				+	padding: 0;

			
 
				+	border: 0;

			
 
				+	font-size: 100%;

			
 
				+	font: inherit;

			
 
				+	vertical-align: baseline;

			
 
				+}

			
 
				+/* HTML5 display-role reset for older browsers */

			
 
				+article, aside, details, figcaption, figure, 

			
 
				+footer, header, hgroup, menu, nav, section {

			
 
				+	display: block;

			
 
				+}

			
 
				+body {

			
 
				+	line-height: 1;

			
 
				+}

			
 
				+ol, ul {

			
 
				+	list-style: none;

			
 
				+}

			
 
				+blockquote, q {

			
 
				+	quotes: none;

			
 
				+}

			
 
				+blockquote:before, blockquote:after,

			
 
				+q:before, q:after {

			
 
				+	content: '';

			
 
				+	content: none;

			
 
				+}

			
 
				+table {

			
 
				+	border-collapse: collapse;

			
 
				+	border-spacing: 0;

			
 
				+}

			
 
				+

			
 
				+/*

			
 
				+  针对本项目

			
 
				+*/

			
 
				+button {

			
 
				+  padding: 0;

			
 
				+  cursor: pointer;

			
 
				+}
			
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,16 @@
 
				-import Vue from 'vue'
			
 
				-import App from './App.vue'
			
 
				-
			
 
				-Vue.config.productionTip = false
			
 
				-
			
 
				-new Vue({
			
 
				-  render: h => h(App)
			
 
				-}).$mount('#app')
			
 
				+import Vue from 'vue'

			
 
				+import App from './App.vue'

			
 
				+import router from './router'

			
 
				+import "@/assets/style/reset.css"

			
 
				+

			
 
				+import { Picker } from 'vant'

			
 
				+import 'vant/lib/picker/style'

			
 
				+

			
 
				+Vue.use(Picker)

			
 
				+

			
 
				+Vue.config.productionTip = false

			
 
				+

			
 
				+new Vue({

			
 
				+  router,

			
 
				+  render: h => h(App)

			
 
				+}).$mount('#app')

			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,65 @@
 
				+import Vue from 'vue'
			
 
				+import VueRouter from 'vue-router'
			
 
				+import AppCover from '../views/AppCover.vue'
			
 
				+import Home from "../views/Home.vue"
			
 
				+import TreeAnimation from "../views/TreeAnimation.vue"
			
 
				+import Chart from "../views/Chart.vue"
			
 
				+import TreeSelection from "../views/TreeSelection.vue"
			
 
				+import ExhibitionList from "../views/ExhibitionList.vue"
			
 
				+import ExhibitionDetailImage from "../views/ExhibitionDetailImage.vue"
			
 
				+import ExhibitionDetailVideo from "../views/ExhibitionDetailVideo.vue"
			
 
				+
			
 
				+Vue.use(VueRouter)
			
 
				+
			
 
				+const routes = [
			
 
				+  {
			
 
				+    path: '/',
			
 
				+    name: 'AppCover',
			
 
				+    component: AppCover
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/Home',
			
 
				+    name: 'Home',
			
 
				+    // route level code-splitting
			
 
				+    // this generates a separate chunk (about.[hash].js) for this route
			
 
				+    // which is lazy-loaded when the route is visited.
			
 
				+    // component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
			
 
				+    component: Home
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/TreeAnimation',
			
 
				+    name: 'TreeAnimation',
			
 
				+    component: TreeAnimation
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/Chart',
			
 
				+    name: 'Chart',
			
 
				+    component: Chart
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/TreeSelection',
			
 
				+    name: 'TreeSelection',
			
 
				+    component: TreeSelection
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/ExhibitionList',
			
 
				+    name: 'ExhibitionList',
			
 
				+    component: ExhibitionList
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/ExhibitionDetailImage',
			
 
				+    name: 'ExhibitionDetailImage',
			
 
				+    component: ExhibitionDetailImage
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/ExhibitionDetailVideo',
			
 
				+    name: 'ExhibitionDetailVideo',
			
 
				+    component: ExhibitionDetailVideo
			
 
				+  },
			
 
				+]
			
 
				+
			
 
				+const router = new VueRouter({
			
 
				+  routes
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/src/utils.js
+++ b/src/utils.js
@@ -0,0 +1,40 @@
 
				+function GetSlideDirection(startX, startY, endX, endY) {

			
 
				+  var dy = startY - endY

			
 
				+  //var dx = endX - startX;

			
 
				+  var result = 0

			
 
				+  if (dy > 0) {//向上滑动

			
 
				+    result = 1

			
 
				+  } else {//向下滑动

			
 
				+    result = 2

			
 
				+  }

			
 
				+

			
 
				+  return result

			
 
				+}

			
 
				+

			
 
				+//滑动处理

			
 
				+var startX, startY

			
 
				+document.addEventListener('touchstart',function (ev) {

			
 
				+  startX = ev.touches[0].pageX

			
 
				+  startY = ev.touches[0].pageY

			
 
				+}, false)

			
 
				+

			
 
				+document.addEventListener('touchend',function (ev) {

			
 
				+  var endX, endY

			
 
				+  endX = ev.changedTouches[0].pageX

			
 
				+  endY = ev.changedTouches[0].pageY

			
 
				+  var direction = GetSlideDirection(startX, startY, endX, endY)

			
 
				+  switch (direction) {

			
 
				+  case 0:

			
 
				+    break

			
 
				+  case 1:

			
 
				+    // 向上

			
 
				+    alert("up")

			
 
				+    break

			
 
				+  case 2:

			
 
				+    // 向下

			
 
				+    alert("down")

			
 
				+    break

			
 
				+

			
 
				+  default:

			
 
				+  }

			
 
				+}, false)

			
--- a/src/views/AppCover.vue
+++ b/src/views/AppCover.vue
@@ -0,0 +1,41 @@
 
				+<template>
			
 
				+  <div class="app-cover">
			
 
				+    <img
			
 
				+      class="app-cover-image"
			
 
				+      src="@/assets/image/cover.png"
			
 
				+      alt="app cover"
			
 
				+    >
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+
			
 
				+export default {
			
 
				+  name: 'Home',
			
 
				+  components: {
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    setTimeout(() => {
			
 
				+      this.$router.replace({
			
 
				+        name: 'Home'
			
 
				+      })
			
 
				+    }, 2000)
			
 
				+  },
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.app-cover {
			
 
				+  .app-cover-image {
			
 
				+    position: fixed;
			
 
				+    left: 0;
			
 
				+    right: 0;
			
 
				+    top: 0;
			
 
				+    bottom: 0;
			
 
				+    width: 100vw;
			
 
				+    height: 100vh;
			
 
				+    object-fit: cover;
			
 
				+    object-position: center bottom;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/Chart.vue
+++ b/src/views/Chart.vue
@@ -0,0 +1,35 @@
 
				+<template>

			
 
				+  <div class="chart">

			
 
				+    <h1>This is the Chart page</h1>

			
 
				+    <van-picker

			
 
				+      :columns="columns"

			
 
				+      @confirm="onConfirm"

			
 
				+      @cancel="onCancel"

			
 
				+      @change="onChange"

			
 
				+    />

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+export default {

			
 
				+  name: 'Chart',

			
 
				+  props: {

			
 
				+  },

			
 
				+  data() {

			
 
				+    return {

			
 
				+      columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],

			
 
				+    }

			
 
				+  },

			
 
				+  methods: {

			
 
				+    onConfirm(value, index) {

			
 
				+      console.log(`Value: ${value}, Index: ${index}`)

			
 
				+    },

			
 
				+    onChange(picker, value, index) {

			
 
				+      console.log(`Value: ${value}, Index: ${index}`)

			
 
				+    },

			
 
				+    onCancel() {

			
 
				+      console.log('Cancel')

			
 
				+    },

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
--- a/src/views/ExhibitionDetailImage.vue
+++ b/src/views/ExhibitionDetailImage.vue
@@ -0,0 +1,5 @@
 
				+<template>

			
 
				+  <div class="Exhibition-detail-image">

			
 
				+    <h1>This is the Exhibition detail image page</h1>

			
 
				+  </div>

			
 
				+</template>

			
--- a/src/views/ExhibitionDetailVideo.vue
+++ b/src/views/ExhibitionDetailVideo.vue
@@ -0,0 +1,5 @@
 
				+<template>

			
 
				+  <div class="exhibition-detail-video">

			
 
				+    <h1>This is the Exhibition detail video page</h1>

			
 
				+  </div>

			
 
				+</template>

			
--- a/src/views/ExhibitionList.vue
+++ b/src/views/ExhibitionList.vue
@@ -0,0 +1,5 @@
 
				+<template>

			
 
				+  <div class="exhibition list">

			
 
				+    <h1>This is the Exhibition list page</h1>

			
 
				+  </div>

			
 
				+</template>

			
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -0,0 +1,39 @@
 
				+<template>
			
 
				+  <div
			
 
				+    ref="hammer-target"
			
 
				+    class="home"
			
 
				+  >
			
 
				+    <h1>
			
 
				+      This is the Home page
			
 
				+    </h1>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  data() {
			
 
				+    return {
			
 
				+    }
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    let mc = new Hammer(this.$refs['hammer-target'])
			
 
				+    mc.get('pan').set({ direction: Hammer.DIRECTION_ALL })
			
 
				+    const that = this
			
 
				+    mc.on("panup", function me(ev) {
			
 
				+      mc.off('panup', me)
			
 
				+      console.log(ev)
			
 
				+      that.$router.push({ name: 'TreeAnimation' })
			
 
				+    })
			
 
				+  },
			
 
				+  methods: {
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+h1 {
			
 
				+  display: block;
			
 
				+  height: 100px;
			
 
				+  background: red;
			
 
				+}
			
 
				+</style>
			
--- a/src/views/TreeAnimation.vue
+++ b/src/views/TreeAnimation.vue
@@ -0,0 +1,15 @@
 
				+<template>

			
 
				+  <div class="tree-animation">

			
 
				+    <h1>This is the tree animation page</h1>

			
 
				+  </div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+export default {

			
 
				+  mounted() {

			
 
				+    setTimeout(() => {

			
 
				+      this.$router.push({ name: 'Chart' })

			
 
				+    }, 3000)

			
 
				+  }

			
 
				+}

			
 
				+</script>

			
--- a/src/views/TreeSelection.vue
+++ b/src/views/TreeSelection.vue
@@ -0,0 +1,5 @@
 
				+<template>

			
 
				+  <div class="tree-selection">

			
 
				+    <h1>This is the tree selection page</h1>

			
 
				+  </div>

			
 
				+</template>

			
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,37 @@
 
				+const webpack = require('webpack')

			
 
				+

			
 
				+let publicPath = '/'

			
 
				+switch (process.env.NODE_ENV) {

			
 
				+case 'development':

			
 
				+  break

			
 
				+case 'production':

			
 
				+  break

			
 
				+default:

			
 
				+  break

			
 
				+}

			
 
				+

			
 
				+module.exports = {

			
 
				+  // pages: {

			
 
				+  //   main: 'src/main.js',

			
 
				+  //   help: 'src/help.js',

			
 
				+  // },

			
 
				+  publicPath,

			
 
				+  configureWebpack: {

			
 
				+    module: {

			
 
				+      rules: [

			
 
				+        {

			
 
				+          // test: /\.cur$/,

			
 
				+          // use: {

			
 
				+          //   loader: 'file-loader'

			
 
				+          // }

			
 
				+        }

			
 
				+      ]

			
 
				+    },

			
 
				+    plugins: [

			
 
				+      new webpack.ProvidePlugin({

			
 
				+        // utils: ['/src/utils.js', 'default']

			
 
				+        // mapGetters: ['vuex', 'mapGetters']

			
 
				+      }),

			
 
				+    ],

			
 
				+  },

			
 
				+}

			
--- a/yarn.lock
+++ b/yarn.lock