制作国度跟藏品页面

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
-    <router-view/>
+    <keep-alive>
+      <router-view/>
+    </keep-alive>
   </div>
 </template>
 

src/pages/collection/index.vue

@@ -1,33 +1,177 @@
 <template>
-  <div class="layout" style="width: 80%; height: 80%">
-    <slide :items="items">
-      <div slot="item" slot-scope="{data}" class="item" @click="clickHandle(data)">
-        {{1}}
+  <div class="coll-layout" ref="layout">
+    <div class="coll-content" ref="content"
+      :style="{transform: 'translateX(' + contentLeft + 'px)', width: maxWidth + 'px'}"
+      :class="{animation: !pauseAnimation}"
+    >
+      <div
+        v-for="(item, i) in items"
+        :key="i"
+        @click="clickHandle($event, item)"
+        :style="{width: itemWidth + 'px', marginRight: itemRight + 'px'}">
+        <img :src="item.abbr">
       </div>
-    </slide>
+    </div>
+
+    <img class="definition">
+    <img class="definition">
+
+    <h3 class="title">{{active.title}}</h3>
   </div>
 </template>
 
 <script>
 import slide from '@/components/slide'
 
+function loadTouch (start, move, end) {
+  let startHandle = (ev) => {
+    start()
+    let startX = ev.touches[0].pageX
+    let moveHandle = (ev) => {
+      ev.stopPropagation()
+      ev.preventDefault()
+
+      move(ev.touches[0].pageX - startX)
+    }
+
+    let endHandle = () => {
+      ev.stopPropagation()
+      ev.preventDefault()
+
+      end()
+      document.documentElement.removeEventListener('touchmove', moveHandle, {passive: false})
+      document.documentElement.removeEventListener('touchend', endHandle, {passive: false})
+    }
+
+    document.documentElement.addEventListener('touchmove', moveHandle, {passive: false})
+    document.documentElement.addEventListener('touchend', endHandle, {passive: false})
+  }
+
+  return startHandle
+}
+
+function getPoint (dom, targetDom) {
+  let x = 0
+  let y = 0
+
+  while (dom !== targetDom && dom !== document.documentElement) {
+    x += dom.offsetLeft
+    y += dom.offsetTop
+    dom = dom.offsetParent
+  }
+  return { x, y }
+}
+
 export default {
   name: 'collection',
   data () {
+    let items = [
+      {
+        title: '牧童归家1',
+        abbr: require('@/assets/images/coll_abbr_1.png'),
+        image: require('@/assets/images/coll_relic_1.png')
+      },
+      {
+        title: '牧童归家2',
+        abbr: require('@/assets/images/coll_abbr_2.png'),
+        image: require('@/assets/images/coll_relic_2.png')
+      },
+      {
+        title: '牧童归家3',
+        abbr: require('@/assets/images/coll_abbr_3.png'),
+        image: require('@/assets/images/coll_relic_3.png')
+      },
+      {
+        title: '牧童归家4',
+        abbr: require('@/assets/images/coll_abbr_4.png'),
+        image: require('@/assets/images/coll_relic_4.png')
+      }
+    ]
+
     return {
-      items: [1, 2, 3]
+      screenW: window.outerWidth,
+      contentLeft: 0,
+      items,
+      active: items[0],
+      pauseAnimation: false
     }
   },
   methods: {
-    clickHandle () {
+    async clickHandle (ev, item) {
+      this.active = item
+
+      let result = getPoint(ev.target, this.$refs.layout)
+      let $old = document.querySelector('.definition:not(.active)')
+      let $active = document.querySelector('.definition.active')
+
+      if ($active) {
+        $active.classList.remove('active')
+        setTimeout(() => {
+          $active.classList.remove('animation')
+        }, 300)
+      }
+
+      $old.style.left = result.x + this.contentLeft + 'px'
+      $old.style.top = result.y + 'px'
+      $old.style.width = this.itemWidth + 'px'
+
+      setTimeout(() => {
+        $old.classList.add('animation')
+        $old.classList.add('active')
+        $old.setAttribute('src', this.active.image)
+      }, 10)
     }
   },
+  computed: {
+    itemWidth () {
+      return this.screenW * 0.266
+    },
+    itemRight () {
+      return this.screenW * 0.058
+    },
+    maxWidth () {
+      return (this.itemWidth + this.itemRight) * this.items.length
+    }
+  },
+  mounted () {
+    let $content = this.$refs.content
+    let screenW = window.outerWidth
+
+    this.startHandle = loadTouch(
+      () => {
+        this.pauseAnimation = true
+        this.startX = this.contentLeft
+      },
+      (x) => {
+        this.contentLeft = this.startX + x
+      },
+      () => {
+        this.pauseAnimation = false
+
+        let mxWidth = $content.offsetWidth
+        let left = -this.contentLeft
+
+        let syncLeft = left > mxWidth - screenW
+          ? mxWidth - screenW : left < 0
+            ? 0 : null
+
+        if (syncLeft !== null) {
+          setTimeout(() => {
+            this.contentLeft = -syncLeft
+          })
+        }
+      }
+    )
+
+    $content.addEventListener('touchstart', this.startHandle, false)
+  },
+  beforeDestroy () {
+    this.$refs.content.removeEventListener('touchstart', this.startHandle, false)
+  },
   components: {slide}
 }
 </script>
 
 <style scoped>
-.item {
-  background-color: #fff;
-}
+@import url('./style.css');
 </style>

src/pages/collection/style.css

@@ -0,0 +1,63 @@
+.coll-layout {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.item {
+  background-color: #fff;
+}
+
+.coll-content {
+  display: flex;
+  position: absolute;
+  top: 14.5%;
+  z-index: 2;
+}
+
+.coll-content.animation {
+  transition: all .3s linear;
+}
+
+.coll-content>div {
+  flex: 0 0 auto;
+  width: 26.6%;
+  margin-right: 5.8%;
+  transition: all .3s linear;
+}
+
+.coll-content>div>img {
+  width: 100%;
+}
+
+.title {
+  position: absolute;
+  bottom: 7.2%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 21px;
+  color: #B48A4E;
+  font-weight: 300px;
+}
+
+.definition {
+  position: absolute;
+  filter: blur(4px);
+  transform: translateX(0);
+  opacity: 0;
+}
+
+.definition.animation {
+  transition: all .3s linear
+}
+
+.active {
+  filter: blur(0);
+  opacity: 1;
+  position: absolute;
+  left: 50% !important;
+  transform: translateX(-50%);
+  width: 70% !important;
+  top: 41.7% !important;
+}

src/pages/country_time/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="ct-layout">
+    <div class="content">
+      <div v-for="(item, i) in items" :key="'country' + i" class="ct-item">
+        <div class="country">
+          <img :src="item.x.country" alt="" :srcset="item.x.country + ' 1x,' + item.tx.country + ' 2x'">
+        </div>
+        <div class="relic">
+          <img :src="item.x.relic" alt="" :srcset="item.x.relic + ' 1x,' + item.tx.relic + ' 2x'">
+          <h3 v-html="item.title"></h3>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'country_time',
+  data () {
+    return {
+      items: [
+        {
+          title: '·伊兹尼克瓶<br>十四世纪',
+          x: {
+            country: require('@/assets/images/country_1.png'),
+            relic: require('@/assets/images/relic_1.png')
+          },
+          tx: {
+            country: require('@/assets/images/country_1@2x.png'),
+            relic: require('@/assets/images/relic_1@2x.png')
+          }
+        },
+        {
+          title: '牧童归家·<br>中国晚清时期',
+          x: {
+            country: require('@/assets/images/country_2.png'),
+            relic: require('@/assets/images/relic_2.png')
+          },
+          tx: {
+            country: require('@/assets/images/country_2@2x.png'),
+            relic: require('@/assets/images/relic_2@2x.png')
+          }
+        },
+        {
+          title: '·陶制火鸡造型盖碗<br>十四世纪',
+          x: {
+            country: require('@/assets/images/country_3.png'),
+            relic: require('@/assets/images/relic_3.png')
+          },
+          tx: {
+            country: require('@/assets/images/country_3@2x.png'),
+            relic: require('@/assets/images/relic_3@2x.png')
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.ct-layout {
+  display: grid;
+  overflow-y: scroll;
+  height: 100%;
+}
+
+.content {
+  background: url('~@/assets/images/ct_linear.png') repeat-y top center / 44% auto;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
+  .content {
+    background-image: url('~@/assets/images/ct_linear@2x.png');
+  }
+}
+
+.ct-item {
+  display: flex;
+}
+
+.ct-item > div{
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12%;
+}
+
+.ct-item:nth-child(2n - 1) {
+  flex-direction: row
+}
+
+.ct-item:nth-child(2n) {
+  flex-direction: row-reverse
+}
+
+.relic {
+  align-items: center;
+  justify-content: center;
+}
+
+.relic img {
+  width: 76%;
+}
+
+.relic h3 {
+  font-size: 14px;
+  color: #B48A4E;
+  font-weight: 300;
+  text-align: center;
+  line-height: 1.4
+}
+
+.country {
+  padding-left: 10px;
+  justify-content: center;
+}
+
+.country img {
+  max-width: 70%;
+  max-height: 80%;
+}
+
+</style>

src/pages/home/index.vue

@@ -37,6 +37,7 @@ export default {
           }
         },
         {
+          view: 'country_time',
           title: '国度',
           'x': {
             background: require('@/assets/images/item_top2.png'),

src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import Home from '@/pages/home/'
 import Collection from '@/pages/collection/'
 import Exhibition from '@/pages/exhibition/'
+import CountryTime from '@/pages/country_time/'
 
 Vue.use(Router)
 
@@ -22,6 +23,11 @@ export default new Router({
       path: '/exhibition',
       name: 'exhibition',
       component: Exhibition
+    },
+    {
+      path: '/country_time',
+      name: 'country_time',
+      component: CountryTime
     }
   ]
 })