完善其他页面

build/utils.js

@@ -47,7 +47,8 @@ exports.cssLoaders = function (options) {
     if (options.extract) {
       return ExtractTextPlugin.extract({
         use: loaders,
-        fallback: 'vue-style-loader'
+        fallback: 'vue-style-loader',
+        publicPath: '../../'
       })
     } else {
       return ['vue-style-loader'].concat(loaders)

config/index.js

@@ -50,7 +50,7 @@ module.exports = {
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',
 
     /**
      * Source Maps

src/components/cir-slide/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <div :style="{height: height + 'px'}" ref="layout">
+    <div class="pers" :style="{height: height + 'px', perspective: height * 2 + 'px'}">
+      <div
+        :style="{
+          transform: 'translateZ('+(-3.3*height)+'px)  rotateX(-5deg) rotateY(' + initY + 'deg)',
+          transformOrigin: height / 2 + 'px ' + height / 2 + 'px'
+        }"
+        :class="{animation: !pauseAnimation}"
+        class="cir-layout">
+        <div
+          v-for="(item, i) in items" :key="i"
+          class="cir-item"
+          :style="{transform: 'translate3d('+(points[i].x -93.75)+'px,50%, '+(points[i].y-93.75)+'px) rotateY(' + -initY + 'deg)'}"
+          :class="{animation: !pauseAnimation}"
+          @click="gotoIndex(i)">
+          <slot name="item" :data="item" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+let cxs = [0, 21, 41.5, 63.5, 85, 108, 131.5, 155.5, 180, 204.5, 229, 252, 274.5, 297.5, 318, 339]
+
+function getPoint (center, r, ao) {
+  let x = center.x + r * Math.cos((90 + ao) * Math.PI / 180)
+  let y = center.y + r * Math.sin((90 + ao) * Math.PI / 180)
+
+  return {x, y}
+}
+
+export default {
+  props: {
+    items: {
+      default: () => [],
+      type: Array
+    }
+  },
+  data () {
+    let index = 0
+
+    return {
+      height: 0,
+      index,
+      pauseAnimation: true,
+      initY: cxs[index]
+    }
+  },
+  computed: {
+    average () {
+      return (1 / this.items.length) * 360
+    },
+    center () {
+      return { x: this.height / 2, y: this.height / 2 }
+    },
+    r () {
+      return this.height * 3
+    },
+    points () {
+      let points = []
+      for (let i = 0; i <= this.items.length; i++) {
+        let result = getPoint(this.center, this.r, this.average * i)
+        points.push(result)
+      }
+      return points
+    }
+  },
+  watch: {
+    index (newVal) {
+      console.log('-0-')
+      this.$emit('focuschange', this.items[newVal])
+    }
+  },
+  methods: {
+    next () {
+      this.index += 1
+      if (this.index >= this.items.length) {
+        this.index = 0
+        cxs.forEach((item, i) => {
+          cxs[i] += 360
+        })
+      }
+      this.initY = cxs[this.index]
+    },
+    prev () {
+      this.index -= 1
+      if (this.index < 0) {
+        this.index = this.items.length - 1
+        cxs.forEach((item, i) => {
+          cxs[i] -= 360
+        })
+      }
+      this.initY = cxs[this.index]
+    },
+    gotoIndex (index) {
+      this.index = index
+      this.initY = cxs[this.index]
+    },
+    getIndex (i) {
+      let index = i - this.index
+      if (index < 0) {
+        return this.items.length + index
+      } else {
+        return index
+      }
+    },
+    startHandle (ev) {
+      this.pauseAnimation = true
+      this.startX = ev.touches[0].clientX
+      this.startDeg = this.initY
+    },
+    moveHandle (ev) {
+      ev.stopPropagation()
+      ev.preventDefault()
+      this.activeDeg = (ev.touches[0].clientX - this.startX) / this.r * 180 / Math.PI
+      this.initY = this.startDeg + this.activeDeg
+    },
+    endHandle (ev) {
+      let dire = this.activeDeg / this.average
+      if (dire > 0.1) {
+        this.next()
+      } else if (dire < -0.1) {
+        this.prev()
+      } else {
+        this.gotoIndex(this.index)
+      }
+      this.pauseAnimation = false
+      this.activeDeg = 0
+    }
+  },
+  mounted () {
+    this.height = this.$refs.layout.offsetWidth
+    this.startHandle = this.startHandle.bind(this)
+    this.moveHandle = this.moveHandle.bind(this)
+    this.endHandle = this.endHandle.bind(this)
+    this.$refs.layout.addEventListener('touchstart', this.startHandle, false)
+    this.$refs.layout.addEventListener('touchmove', this.moveHandle, {passive: false})
+    this.$refs.layout.addEventListener('touchend', this.endHandle, false)
+  },
+  beforeDestroy () {
+    this.$refs.layout.removeEventListener('touchstart', this.startHandle, false)
+    this.$refs.layout.removeEventListener('touchmove', this.moveHandle, {passive: false})
+    this.$refs.layout.removeEventListener('touchend', this.endHandle, false)
+  }
+}
+</script>
+
+<style scoped>
+.pers {
+  perspective-origin: center center;
+  transform-style: preserve-3d;
+}
+
+.cir-layout {
+  transform-style: preserve-3d;
+  height: 100%;
+  position: relative;
+}
+
+.animation {
+  transition: all .3s linear;
+}
+
+.cir-item {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 50%;
+  height: 50%;
+  color: #fff;
+  font-size: 20px;
+}
+</style>

src/components/slide/index.vue

@@ -95,29 +95,27 @@ export default {
     focus: {
       immediate: true,
       handler (newVal) {
-        this.active = newVal
+        this.setActive(newVal)
       }
     },
-    active (newVal) {
+    async active (newVal, oldVal) {
       let newActive = null
       if (newVal === -1) {
         newActive = this.items.length - 1
       } else if (newVal >= this.items.length) {
         newActive = 0
       }
+
       if (newActive !== null) {
+        this.runAnimation = true
         this.mapActive = newActive
-
-        clearTimeout(this.timeout1)
-        this.timeout1 = setTimeout(() => {
-          this.pauseAnimation = true
-          setTimeout(() => {
-            this.active = newActive
-            setTimeout(() => {
-              this.pauseAnimation = false
-            }, 16)
-          })
-        }, 300)
+        await new Promise(resolve => setTimeout(resolve, 300))
+        this.pauseAnimation = true
+        await new Promise(resolve => setTimeout(resolve))
+        this.active = newActive
+        await new Promise(resolve => setTimeout(resolve, 16))
+        this.pauseAnimation = false
+        this.runAnimation = false
       } else {
         this.mapActive = this.active
       }
@@ -131,26 +129,36 @@ export default {
   },
   methods: {
     next () {
-      this.active++
+      this.setActive(this.active + 1)
     },
     prev () {
-      this.active--
+      this.setActive(this.active - 1)
     },
     startHandle (ev) {
+      if (this.runAnimation) return
       this.pauseAnimation = true
       this.startX = ev.touches[0].clientX
     },
     moveHandle (ev) {
+      ev.stopPropagation()
+      ev.preventDefault()
+      if (this.runAnimation) return
       this.activeLeft = ev.touches[0].clientX - this.startX
     },
     endHandle (ev) {
-      if (this.activeLeft > 100) {
+      if (this.runAnimation) return
+      if (this.activeLeft > 50) {
         this.prev()
-      } else if (this.activeLeft < -100) {
+      } else if (this.activeLeft < -50) {
         this.next()
       }
       this.pauseAnimation = false
       this.activeLeft = 0
+    },
+    setActive (newActive) {
+      if (!this.runAnimation) {
+        this.active = newActive
+      }
     }
   },
   mounted () {
@@ -162,12 +170,12 @@ export default {
     this.moveHandle = this.moveHandle.bind(this)
     this.endHandle = this.endHandle.bind(this)
     this.$refs.layout.addEventListener('touchstart', this.startHandle, false)
-    this.$refs.layout.addEventListener('touchmove', this.moveHandle, false)
+    this.$refs.layout.addEventListener('touchmove', this.moveHandle, {passive: false})
     this.$refs.layout.addEventListener('touchend', this.endHandle, false)
   },
   beforeDestroy () {
     this.$refs.layout.removeEventListener('touchstart', this.startHandle, false)
-    this.$refs.layout.removeEventListener('touchmove', this.moveHandle, false)
+    this.$refs.layout.removeEventListener('touchmove', this.moveHandle, {passive: false})
     this.$refs.layout.removeEventListener('touchend', this.endHandle, false)
   }
 }

src/pages/collection/index.vue

@@ -1,174 +1,99 @@
 <template>
   <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>
-    </div>
-
-    <img class="definition">
-    <img class="definition">
-
+    <cir-slide :items="items"  @focuschange="change" class="cir-slide">
+      <img slot="item" slot-scope="{data}" class="img-item" :src="data.abbr" :class="{active: active === data}">
+    </cir-slide>
     <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 }
-}
-
+import CirSlide from '@/components/cir-slide'
 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: '埃米尔·加莱的盘子',
+        abbr: require('@/assets/images/coll_abbr_1.png')
+      },
+      {
+        title: '吃古柯叶的祭司',
+        abbr: require('@/assets/images/coll_abbr_2.png')
+      },
+      {
+        title: '好时光”龙像',
+        abbr: require('@/assets/images/coll_abbr_3.png')
+      },
+      {
+        title: '花瓶',
+        abbr: require('@/assets/images/coll_abbr_4.png')
       },
       {
-        title: '牧童归家2',
-        abbr: require('@/assets/images/coll_abbr_2.png'),
-        image: require('@/assets/images/coll_relic_2.png')
+        title: '皇家花瓶',
+        abbr: require('@/assets/images/coll_abbr_5.png')
       },
       {
-        title: '牧童归家3',
-        abbr: require('@/assets/images/coll_abbr_3.png'),
-        image: require('@/assets/images/coll_relic_3.png')
+        title: '黄金盘',
+        abbr: require('@/assets/images/coll_abbr_6.png')
       },
       {
-        title: '牧童归家4',
-        abbr: require('@/assets/images/coll_abbr_4.png'),
-        image: require('@/assets/images/coll_relic_4.png')
+        title: '绝代艳后玛丽·安托瓦内特花瓶',
+        abbr: require('@/assets/images/coll_abbr_7.png')
+      },
+      {
+        title: '莫切人物陶罐像',
+        abbr: require('@/assets/images/coll_abbr_8.png')
+      },
+      {
+        title: '牧童归家',
+        abbr: require('@/assets/images/coll_abbr_9.png')
+      },
+      {
+        title: '琴图里佩瓷钵',
+        abbr: require('@/assets/images/coll_abbr_10.png')
+      },
+      {
+        title: '青瓷盘',
+        abbr: require('@/assets/images/coll_abbr_11.png')
+      },
+      {
+        title: '双耳细颈瓶颈瓶',
+        abbr: require('@/assets/images/coll_abbr_12.png')
+      },
+      {
+        title: '陶瓷壶',
+        abbr: require('@/assets/images/coll_abbr_13.png')
+      },
+      {
+        title: '陶制火鸡造型盖碗',
+        abbr: require('@/assets/images/coll_abbr_14.png')
+      },
+      {
+        title: '锡釉陶器',
+        abbr: require('@/assets/images/coll_abbr_15.png')
+      },
+      {
+        title: '伊兹尼克瓶克瓶',
+        abbr: require('@/assets/images/coll_abbr_16.png')
       }
     ]
 
     return {
-      screenW: window.outerWidth,
-      contentLeft: 0,
-      items,
-      active: items[0],
-      pauseAnimation: false
+      items: items,
+      active: items[0]
     }
   },
   methods: {
-    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)
+    change (item) {
+      console.log(item)
+      if (this.active === item) {
+      } else {
+        this.active = item
       }
-
-      $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}
+  components: {cirSlide: CirSlide}
 }
 </script>
 

src/pages/collection/style.css

@@ -5,59 +5,31 @@
   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 {
+.img-item {
   width: 100%;
+  height: 100%;
+  width: 190px;
+  height: 190px;
+  display: block;
+  filter: blur(4px);
 }
 
+
 .title {
   position: absolute;
   bottom: 7.2%;
-  left: 50%;
-  transform: translateX(-50%);
+  left: 0;
+  width: 100%;
+  text-align: center;
   font-size: 21px;
   color: #B48A4E;
-  font-weight: 300px;
+  font-weight: 300;
 }
 
-.definition {
-  position: absolute;
-  filter: blur(4px);
-  transform: translateX(0);
-  opacity: 0;
-}
-
-.definition.animation {
-  transition: all .3s linear
+.cir-slide {
+  margin-top: 10%;
 }
 
 .active {
   filter: blur(0);
-  opacity: 1;
-  position: absolute;
-  left: 50% !important;
-  transform: translateX(-50%);
-  width: 70% !important;
-  top: 41.7% !important;
 }

src/pages/country_addr/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="ca-layout">
+    <a @click="$router.replace({name: 'country_time'})" class="cut">
+      <img src="@/assets/images/time.png" srcset="@/assets/images/addr.png x, @/assets/images/time@2x.png 2x">
+    </a>
+    <slide :items="items" class="slide-layer">
+      <div slot="item" slot-scope="{data}" class="ca-slide-item" @click="clickHandle(data)">
+        <h2>{{data.title}}</h2>
+        <p>点击文物查看详细介绍</p>
+        <div class="img-layout">
+          <div v-for="img in data.images" :key="img"><img :src="img"></div>
+        </div>
+      </div>
+    </slide>
+
+    <iframe frameborder="0">
+    </iframe>
+    <img src="@/assets/images/addr_bg.png" alt="" class="iframe">
+  </div>
+</template>
+
+<script>
+import slide from '@/components/slide'
+export default {
+  data () {
+    return {
+      items: [
+        {
+          title: '德国',
+          images: [
+            require('@/assets/images/ca_1.png'),
+            require('@/assets/images/ca_2.png'),
+            require('@/assets/images/ca_3.png')
+          ]
+        },
+        {
+          title: '中国',
+          images: [
+            require('@/assets/images/ca_4.png'),
+            require('@/assets/images/ca_5.png')
+          ]
+        },
+        {
+          title: '意大利',
+          images: [
+            require('@/assets/images/ca_6.png'),
+            require('@/assets/images/ca_7.png'),
+            require('@/assets/images/ca_8.png')
+          ]
+        },
+        {
+          title: '法国',
+          images: [
+            require('@/assets/images/ca_11.png')
+          ]
+        },
+        {
+          title: '比利时',
+          images: [
+            require('@/assets/images/ca_9.png')
+          ]
+        },
+        {
+          title: '西班牙',
+          images: [
+            require('@/assets/images/ca_15.png')
+          ]
+        },
+        {
+          title: '希腊',
+          images: [
+            require('@/assets/images/ca_16.png')
+          ]
+        },
+        {
+          title: '土耳其',
+          images: [
+            require('@/assets/images/ca_14.png')
+          ]
+        },
+        {
+          title: '厄瓜多尔',
+          images: [
+            require('@/assets/images/ca_10.png')
+          ]
+        },
+        {
+          title: '秘鲁',
+          images: [
+            require('@/assets/images/ca_12.png')
+          ]
+        },
+        {
+          title: '日本',
+          images: [
+            require('@/assets/images/ca_13.png')
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    clickHandle () {
+
+    }
+  },
+  components: {slide}
+}
+</script>
+
+<style scoped>
+.cut {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  z-index: 99;
+}
+
+.cut > img {
+  width: 26px;
+}
+
+.ca-layout {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.slide-layer {
+  flex: 0 0 auto;
+  height: 40% !important;
+  margin-top: 10%;
+}
+
+.ca-slide-item {
+  width: 100%;
+  text-align: center;
+}
+
+.ca-slide-item h2 {
+  font-size: 21px;
+  color: #B48A4E;
+  margin-bottom: 10px;
+  font-weight: 300;
+}
+
+.ca-slide-item p {
+  font-size: 16px;
+  color: #B48A4E;
+  font-weight: 300;
+  margin-bottom: 10%;
+}
+
+.img-layout {
+  display: flex;
+  justify-content: center;
+}
+
+.img-layout > div {
+  flex: 1;
+  padding-bottom: 10%;
+  background: url('~@/assets/images/light.png') no-repeat center 90% / 90% auto;
+  max-width: 150px;
+}
+
+.img-layout img {
+  width: 100%;
+  max-width: 150px;
+}
+
+.iframe {
+  flex: 1;
+  width: 100%;
+}
+</style>
+
+<style>
+
+.ca-layout .slide-layout,
+.ca-layout .slide-item {
+  overflow: initial !important;
+}
+</style>

src/pages/country_time/index.vue

@@ -1,13 +1,19 @@
 <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>
+    <a @click="$router.replace({name: 'country_addr'})" class="cut">
+      <img src="@/assets/images/addr.png" srcset="@/assets/images/addr.png x, @/assets/images/addr@2x.png 2x">
+    </a>
+    <div class="ct-layer">
+      <div class="content">
+        <div v-for="(item, i) in items" :key="'country' + i" class="ct-item">
+          <div class="country">
+            <img :src="item.country">
+          </div>
+          <div class="relic">
+            <img :src="item.relic">
+            <h3>{{item.title}}</h3>
+            <p>{{item.time}}</p>
+          </div>
         </div>
       </div>
     </div>
@@ -21,37 +27,101 @@ export default {
     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: '锡釉陶器',
+          time: '约公元前530年',
+          country: require('@/assets/images/country_1.png'),
+          relic: require('@/assets/images/coll_abbr_15.png')
+        },
+        {
+          title: '琴图里佩瓷钵',
+          time: '公元前250至150年',
+          country: require('@/assets/images/country_2.png'),
+          relic: require('@/assets/images/coll_abbr_10.png')
+        },
+        {
+          title: '吃古柯叶的祭司',
+          time: '公元100年',
+          country: require('@/assets/images/country_3.png'),
+          relic: require('@/assets/images/coll_abbr_2.png')
+        },
+        {
+          title: '莫切人物陶罐像',
+          time: '4~6世纪',
+          country: require('@/assets/images/country_4.png'),
+          relic: require('@/assets/images/coll_abbr_8.png')
+        },
+        {
+          title: '青釉鱼盘',
+          time: '13/14世纪（元朝）',
+          country: require('@/assets/images/country_5.png'),
+          relic: require('@/assets/images/coll_abbr_11.png')
+        },
+        {
+          title: '黄金盘',
+          time: '1450至1500年',
+          country: require('@/assets/images/country_6.png'),
+          relic: require('@/assets/images/coll_abbr_6.png')
+        },
+        {
+          title: '双耳细颈瓶',
+          time: '1550至1600年',
+          country: require('@/assets/images/country_7.png'),
+          relic: require('@/assets/images/coll_abbr_12.png')
+        },
+        {
+          title: '陶瓷壶',
+          time: '1576年',
+          country: require('@/assets/images/country_8.png'),
+          relic: require('@/assets/images/coll_abbr_13.png')
+        },
+        {
+          title: '伊兹尼克瓶克瓶',
+          time: '1550至1600年',
+          country: require('@/assets/images/country_9.png'),
+          relic: require('@/assets/images/coll_abbr_16.png')
+        },
+        {
+          title: '牧童归家',
+          time: '约1700年（清朝）',
+          country: require('@/assets/images/country_10.png'),
+          relic: require('@/assets/images/coll_abbr_9.png')
+        },
+        {
+          title: '陶制火鸡造型盖碗',
+          time: '约1750年',
+          country: require('@/assets/images/country_11.png'),
+          relic: require('@/assets/images/coll_abbr_14.png')
+        },
+
+        {
+          title: '绝代艳后玛丽安托瓦内特花瓶',
+          time: '1774年',
+          country: require('@/assets/images/country_12.png'),
+          relic: require('@/assets/images/coll_abbr_7.png')
+        },
+        {
+          title: '皇家花瓶',
+          time: '1799年',
+          country: require('@/assets/images/country_13.png'),
+          relic: require('@/assets/images/coll_abbr_5.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: '日式花瓶',
+          time: '19世纪',
+          country: require('@/assets/images/country_14.png'),
+          relic: require('@/assets/images/coll_abbr_4.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')
-          }
+          title: '埃米尔加莱的盘子',
+          time: '1878/1880年',
+          country: require('@/assets/images/country_15.png'),
+          relic: require('@/assets/images/coll_abbr_1.png')
+        },
+        {
+          title: '“好时光”龙像',
+          time: '19世纪',
+          country: require('@/assets/images/country_11.png'),
+          relic: require('@/assets/images/coll_abbr_3.png')
         }
       ]
     }
@@ -60,7 +130,24 @@ export default {
 </script>
 
 <style scoped>
+.cut {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  z-index: 99;
+}
+
+.cut > img {
+  width: 30px;
+  height: 30px;
+}
+
 .ct-layout {
+  height: 100%;
+}
+
+.ct-layer {
+  position: relative;
   display: grid;
   overflow-y: scroll;
   height: 100%;
@@ -82,9 +169,12 @@ export default {
 
 .ct-item > div{
   flex: 1;
+  margin-bottom: 12%;
+}
+
+.ct-item > .relic {
   display: flex;
   flex-direction: column;
-  margin-bottom: 12%;
 }
 
 .ct-item:nth-child(2n - 1) {
@@ -104,22 +194,39 @@ export default {
   width: 76%;
 }
 
+.relic p,
 .relic h3 {
   font-size: 14px;
   color: #B48A4E;
   font-weight: 300;
   text-align: center;
-  line-height: 1.4
+  line-height: 1.4;
+  word-wrap: none;
+  white-space: nowrap;
 }
 
 .country {
   padding-left: 10px;
-  justify-content: center;
+  position: relative;
 }
 
 .country img {
   max-width: 70%;
-  max-height: 80%;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.ct-item:nth-child(4n) .country img {
+  right: 0;
+}
+
+.ct-item:nth-child(2n) .relic h3::after {
+  content: '·'
+}
+
+.ct-item:nth-child(2n - 1) .relic h3::before {
+  content: '·'
 }
 
 </style>

src/pages/exhibition/index.vue

@@ -4,13 +4,13 @@
       <div slot="item"
         slot-scope="{data, index}"
         class="item"
-        @click="clickHandle(index)">
-        {{data}}
+        @click="clickHandle(index)"
+        :style="{backgroundImage: 'url('+data.image+')'}">
       </div>
     </slide>
 
     <div class="ext-name">
-      <h3>{{title}}</h3>
+      <h3>{{active.title}}</h3>
     </div>
   </div>
 </template>
@@ -21,10 +21,24 @@ import slide from '@/components/slide'
 export default {
   name: 'collection',
   data () {
+    let items = [{
+      image: require('@/assets/images/exh_1.jpg'),
+      title: 'Hetjens Hall'
+    }, {
+      image: require('@/assets/images/exh_2.jpg'),
+      title: 'Schneider Collection'
+    }, {
+      image: require('@/assets/images/exh_3.jpg'),
+      title: 'Blue Onion Exhibition'
+    }, {
+      image: require('@/assets/images/exh_4.jpg'),
+      title: 'Alle Farben Chinas'
+    }]
+
     return {
-      items: ['展馆名称1', '展馆名称2', '展馆名称3'],
+      items,
       focus: 0,
-      title: ''
+      active: items[0]
     }
   },
   methods: {
@@ -36,7 +50,7 @@ export default {
       }
     },
     changeHandle (item) {
-      this.title = item
+      this.active = item
     }
   },
   components: {slide}
@@ -70,10 +84,15 @@ export default {
 }
 
 .item {
-  background-color: #fff;
   height: 100%;
   width: 100%;
   border-radius: 8px;
+  overflow: hidden;
+  background: #fff no-repeat center center / cover;
+}
+
+.item img {
+  max-width: 100%;
 }
 
 </style>
@@ -81,7 +100,7 @@ export default {
 <style>
 .exh-layout .slide-layout {
   width: 72% !important;
-  height: 68.4% !important;
+  height: 60% !important;
   overflow: initial !important;
   margin-left:auto;
   margin-right: auto;

src/pages/home/index.vue

@@ -37,7 +37,7 @@ export default {
           }
         },
         {
-          view: 'country_time',
+          view: 'country_addr',
           title: '国度',
           'x': {
             background: require('@/assets/images/item_top2.png'),
@@ -91,11 +91,25 @@ export default {
   text-align: center;
   position: absolute;
   top: 0;
+  left: 0;
+  /* margin-top: -35%; */
+  transform: translateY(-50%);
+  width: 100%;
 }
 
 .top img {
   width: 72%;
-  transform: translateY(-50%);
+  animation: mymove 18s linear infinite;
+  transform: rotateZ(0);
+}
+
+@keyframes mymove {
+  0% {
+    transform: rotateZ(0);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
 }
 
 .title {

src/router/index.js

@@ -4,6 +4,7 @@ import Home from '@/pages/home/'
 import Collection from '@/pages/collection/'
 import Exhibition from '@/pages/exhibition/'
 import CountryTime from '@/pages/country_time/'
+import CountryAddr from '@/pages/country_addr/'
 
 Vue.use(Router)
 
@@ -28,6 +29,11 @@ export default new Router({
       path: '/country_time',
       name: 'country_time',
       component: CountryTime
+    },
+    {
+      path: '/country_addr',
+      name: 'country_addr',
+      component: CountryAddr
     }
   ]
 })